OLD | NEW |
(Empty) | |
| 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 unsp
ecified"); |
| 40 makeTest("width='500' height='100%'", { width: 500, height: 0 }, "width in pixel
s; 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 unspeci
fied; viewBox"); |
| 43 makeTest("width='400' viewBox='0 0 800 600'", { width: 400, height: 0 }, "width
in pixels; height unspecified; viewBox"); |
| 44 </script> |
OLD | NEW |