third_party/WebKit/LayoutTests/fast/dom/HTMLImageElement/image-natural-width-height-svg.html

   1 <!DOCTYPE html>
   2 <script src="../../../resources/testharness.js"></script>
   3 <script src="../../../resources/testharnessreport.js"></script>
   4 <style>
   5 img {
   6   width: 200px;
   7 }
   8 </style>
   9 <body></body>
  10 <script>
  11 function makeSvgImageUrl(sizingAttributes) {
  12   var s = "<svg xmlns='http://www.w3.org/2000/svg' ";
  13   s += sizingAttributes;
  14   s += "><circle cx='50%' cy='50%' r='50%' fill='blue'/></svg>";
  15   return "data:image/svg+xml," + encodeURIComponent(s);
  16 }
  17
  18 function assertImageDimensions(img, expected) {
  19   assert_equals(img.naturalWidth + "x" + img.naturalHeight, expected.width + "x" + expected.height);
  20 }
  21
  22 function makeTest(sizingAttributes, expected, description) {
  23   var t = async_test("naturalWidth/Height of SVG in <img>, " + description);
  24   var img = document.body.appendChild(new Image());
  25   img.onload = t.step_func(function() {
  26     assertImageDimensions(img, expected);
  27
  28     requestAnimationFrame(function() {
  29       setTimeout(t.step_func(function() {
  30         assertImageDimensions(img, expected);
  31         t.done();
  32       }), 0);
  33     });
  34   });
  35   img.src = makeSvgImageUrl(sizingAttributes);
  36 }
  37
  38 makeTest("width='500' height='400'", { width: 500, height: 400 }, "width/height in pixels");
  39 makeTest("width='500'", { width: 500, height: 0 }, "width in pixels; height unspecified");
  40 makeTest("width='500' height='100%'", { width: 500, height: 0 }, "width in pixels; percentage height");
  41 makeTest("width='500' height='400' viewBox='0 0 800 600'", { width: 500, height: 400 }, "width/height in pixels; viewBox");
  42 makeTest("viewBox='0 0 800 600'", { width: 0, height: 0 }, "width/height unspecified; viewBox");
  43 makeTest("width='400' viewBox='0 0 800 600'", { width: 400, height: 0 }, "width in pixels; height unspecified; viewBox");
  44 </script>