| <!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> |
