Blitz - WPT: outer-svg-intrinsic-size-002.html

wpt / svg / coordinate-systems / outer-svg-intrinsic-size-002.html
Enable JavaScript in test iframe
/svg/coordinate-systems/outer-svg-intrinsic-size-002.html
<!doctype HTML>
<head>
  <link rel="help" href="https://www.w3.org/TR/SVG/coords.html#SizingSVGInCSS">
  <link rel="help" href="https://drafts.csswg.org/css-sizing-3/#intrinsic-sizes">
  <script src="/resources/testharness.js"></script>
  <script src="/resources/testharnessreport.js"></script>
  <style>
    #wrapper {
        width: 500px;
    }
  </style>
</head>
<body>
  <div id="wrapper">
    <object id="myObj" data="support/simple.svg"
            onload="go()"></object>
  </div>
  <script>
    let objElem = document.getElementById("myObj");
    let svgElem; // initialized after obj doc loads

    function expect_svg_width_and_height(width, height) {
        let rect = objElem.getBoundingClientRect();
        assert_equals(rect.width, width, "checking width.");
        assert_equals(rect.height, height, "checking height.");
    }

    function go() {
      svgElem = objElem.contentDocument.documentElement;

      test(function() {
          expect_svg_width_and_height(300, 150);
      }, "no sizing attributes set");

      // Just setting width and/or height:
      test(function() {
          svgElem.setAttribute("width", "100");
          expect_svg_width_and_height(100, 150);
      }, "specified width");
      test(function() {
          svgElem.setAttribute("width", "400");
          expect_svg_width_and_height(400, 150);
      }, "modified specified width");

      test(function() {
          // (set height, leaving width still set)
          svgElem.setAttribute("height", "100");
          expect_svg_width_and_height(400, 100);
      }, "specified width and height");
      test(function() {
          svgElem.setAttribute("height", "200");
          expect_svg_width_and_height(400, 200);
      }, "specified width and modified specified height");
      test(function() {
          svgElem.removeAttribute("width"); // leaving only 'height':
          expect_svg_width_and_height(300, 200);
      }, "specified height");
      test(function() {
          svgElem.setAttribute("height", "250");
          expect_svg_width_and_height(300, 250);
      }, "modified specified height");
      test(function() {
          // clean up (go back to having no sizing attrs set)
          svgElem.removeAttribute("height");
          expect_svg_width_and_height(300, 150);
      }, "no specified sizing attrs (after setting & removing them)");


      // Just setting viewBox:
      test(function() {
          svgElem.setAttribute("viewBox", "0 0 10 8");
          expect_svg_width_and_height(500, 400);
      }, "set a 10x8 viewBox");
      test(function() {
          // Adjusting already-set viewBox:
          svgElem.setAttribute("viewBox", "0 0 50 10");
          expect_svg_width_and_height(500, 100);
      }, "modified viewBox to 50x20");
      test(function() {
          svgElem.setAttribute("width", "100");
          expect_svg_width_and_height(100, 20);
      }, "adding specified width, in presence of specified viewBox");
      test(function() {
          svgElem.setAttribute("viewBox", "0 0 40 30");
          expect_svg_width_and_height(100, 75);
      }, "modifiying specified viewBox, in presence of specified width");

      test(function() {
          svgElem.removeAttribute("width");
          expect_svg_width_and_height(500, 375);
      }, "removing specified width, in presence of specified viewBox");

      test(function() {
          svgElem.setAttribute("height", "60");
          expect_svg_width_and_height(80, 60);
      }, "adding specified height, in presence of specified viewBox");
      test(function() {
          svgElem.setAttribute("viewBox", "0 0 100 120");
          expect_svg_width_and_height(50, 60);
      }, "modifiying specified viewBox, in presence of specified height");
    };
  </script>
</body>