image-natural-width-height-svg.html

<!DOCTYPE html>
<script src="../../../resources/testharness.js"></script>
<script src="../../../resources/testharnessreport.js"></script>
<style>
img {
  width: 200px;
}
</style>
<body></body>
<script>
function makeSvgImageUrl(sizingAttributes) {
  var s = "<svg xmlns='http://www.w3.org/2000/svg' ";
  s += sizingAttributes;
  s += "><circle cx='50%' cy='50%' r='50%' fill='blue'/></svg>";
  return "data:image/svg+xml," + encodeURIComponent(s);
}

function assertImageDimensions(img, expected) {
  assert_equals(img.naturalWidth + "x" + img.naturalHeight, expected.width + "x" + expected.height);
}

function makeTest(sizingAttributes, expected, description) {
  var t = async_test("naturalWidth/Height of SVG in <img>, " + description);
  var img = document.body.appendChild(new Image());
  img.onload = t.step_func(function() {
    assertImageDimensions(img, expected);

    requestAnimationFrame(function() {
      setTimeout(t.step_func(function() {
        assertImageDimensions(img, expected);
        t.done();
      }), 0);
    });
  });
  img.src = makeSvgImageUrl(sizingAttributes);
}

makeTest("width='500' height='400'", { width: 500, height: 400 }, "width/height in pixels");
makeTest("width='500'", { width: 500, height: 0 }, "width in pixels; height unspecified");
makeTest("width='500' height='100%'", { width: 500, height: 0 }, "width in pixels; percentage height");
makeTest("width='500' height='400' viewBox='0 0 800 600'", { width: 500, height: 400 }, "width/height in pixels; viewBox");
makeTest("viewBox='0 0 800 600'", { width: 0, height: 0 }, "width/height unspecified; viewBox");
makeTest("width='400' viewBox='0 0 800 600'", { width: 400, height: 0 }, "width in pixels; height unspecified; viewBox");
</script>
chromium/third_party/blink/web_tests/fast/dom/HTMLImageElement/image-natural-width-height-svg.html
