<!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">
    <svg id="mySVG"></svg>
  </div>
  <script>
    let svgElem = document.getElementById("mySVG");
    function expect_svg_width_and_height(width, height) {
        let rect = svgElem.getBoundingClientRect();
        assert_equals(rect.width, width, "checking width.");
        assert_equals(rect.height, height, "checking height.");
    }
    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>