OLD | NEW |
(Empty) | |
| 1 <!DOCTYPE html> |
| 2 <title><svg:image> 'auto' sizing </title> |
| 3 <script src="../../resources/testharness.js"></script> |
| 4 <script src="../../resources/testharnessreport.js"></script> |
| 5 <svg height="0"> |
| 6 <image width="100" height="100" xlink:href="resources/square-green-checker.png
" /> |
| 7 <image width="200" height="100" xlink:href="resources/square-green-checker.png
" style="width:auto"/> |
| 8 <image width="100" height="200" xlink:href="resources/square-green-checker.png
" style="height:auto"/> |
| 9 <image width="100" height="100" xlink:href="resources/square-green-checker.png
" style="width:auto; height:auto"/> |
| 10 <image width="50" height="50" |
| 11 xlink:href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg'>
</svg>"/> |
| 12 <image width="50" height="50" |
| 13 xlink:href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg'
width='200' height='100'></svg>" style='width:auto; height:auto'/> |
| 14 <image width="50" height="50" |
| 15 xlink:href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg'
width='200' height='100'></svg>" style='width:auto;'/> |
| 16 <image xlink:href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg'
width='200' height='100'></svg>" style='width:auto;'/> |
| 17 <image height="50" |
| 18 xlink:href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg'
width='200' height='100'></svg>" style='width:auto;'/> |
| 19 <image width="50" |
| 20 xlink:href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg'
width='200' height='100'></svg>" style='height:auto;'/> |
| 21 <image width="200" height="200" |
| 22 xlink:href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg'>
</svg>" style='width:auto; height:auto'/> |
| 23 <image height="200" |
| 24 xlink:href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg'>
</svg>" style='width:auto; height:auto'/> |
| 25 <image width="200" |
| 26 xlink:href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg'>
</svg>" style='width:auto; height:auto'/> |
| 27 <image xlink:href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg'>
</svg>"/> |
| 28 <image width="60" height="60" xlink:href="data:image/svg+xml,<svg xmlns='http:
//www.w3.org/2000/svg' viewBox='0 0 400 100'></svg>"/> |
| 29 <image width="60" height="60" xlink:href="data:image/svg+xml,<svg xmlns='http:
//www.w3.org/2000/svg' viewBox='0 0 400 100'></svg>" style='width:auto'/> |
| 30 <image width="60" height="60" xlink:href="data:image/svg+xml,<svg xmlns='http:
//www.w3.org/2000/svg' viewBox='0 0 400 100'></svg>" style='height:auto'/> |
| 31 <image width="60" height="60" xlink:href="data:image/svg+xml,<svg xmlns='http:
//www.w3.org/2000/svg' viewBox='0 0 400 100'></svg>" style='width:auto; height:a
uto'/> |
| 32 <image width="60" height="60" xlink:href="data:image/svg+xml,<svg xmlns='http:
//www.w3.org/2000/svg' width='200' viewBox='0 0 400 100'></svg>"/> |
| 33 <image width="60" height="60" xlink:href="data:image/svg+xml,<svg xmlns='http:
//www.w3.org/2000/svg' width='200' viewBox='0 0 400 100'></svg>" style='width:au
to'/> |
| 34 <image width="60" height="60" xlink:href="data:image/svg+xml,<svg xmlns='http:
//www.w3.org/2000/svg' width='200' viewBox='0 0 400 100'></svg>" style='height:a
uto'/> |
| 35 <image width="60" height="60" xlink:href="data:image/svg+xml,<svg xmlns='http:
//www.w3.org/2000/svg' width='200' viewBox='0 0 400 100'></svg>" style='width:au
to; height:auto'/> |
| 36 <image width="60" height="60" xlink:href="data:image/svg+xml,<svg xmlns='http:
//www.w3.org/2000/svg' height='100' viewBox='0 0 400 100'></svg>"/> |
| 37 <image width="60" height="60" xlink:href="data:image/svg+xml,<svg xmlns='http:
//www.w3.org/2000/svg' height='100' viewBox='0 0 400 100'></svg>" style='width:a
uto'/> |
| 38 <image width="60" height="60" xlink:href="data:image/svg+xml,<svg xmlns='http:
//www.w3.org/2000/svg' height='100' viewBox='0 0 400 100'></svg>" style='height:
auto'/> |
| 39 <image width="60" height="60" xlink:href="data:image/svg+xml,<svg xmlns='http:
//www.w3.org/2000/svg' height='100' viewBox='0 0 400 100'></svg>" style='width:a
uto; height:auto'/> |
| 40 <image width="60" height="60" xlink:href="data:image/svg+xml,<svg xmlns='http:
//www.w3.org/2000/svg' width='200' height='100' viewBox='0 0 400 100'></svg>"/> |
| 41 <image width="60" height="60" xlink:href="data:image/svg+xml,<svg xmlns='http:
//www.w3.org/2000/svg' width='200' height='100' viewBox='0 0 400 100'></svg>" st
yle='width:auto'/> |
| 42 <image width="60" height="60" xlink:href="data:image/svg+xml,<svg xmlns='http:
//www.w3.org/2000/svg' width='200' height='100' viewBox='0 0 400 100'></svg>" st
yle='height:auto'/> |
| 43 <image width="60" height="60" xlink:href="data:image/svg+xml,<svg xmlns='http:
//www.w3.org/2000/svg' width='200' height='100' viewBox='0 0 400 100'></svg>" st
yle='width:auto; height:auto'/> |
| 44 </svg> |
| 45 <script> |
| 46 var expectedBoxes = [ |
| 47 { dimensions: [100, 100], description: "400x400 png image, attributes width='1
00' height='100'"}, |
| 48 { dimensions: [100, 100], description: "400x400 png image, attributes width='2
00' height='100' and CSS 'width:auto'"}, |
| 49 { dimensions: [100, 100], description: "400x400 png image, attributes width='1
00' height='200' and CSS 'height:auto'"}, |
| 50 { dimensions: [400, 400], description: "400x400 png image, attributes width='1
00' height='100' and CSS 'width:auto; height:auto'"}, |
| 51 { dimensions: [50, 50], description: "default sized svg image, attributes widt
h='50' height='50'"}, |
| 52 { dimensions: [200, 100], description: "200x100 svg image, attributes width='5
0' height='50' and CSS 'width:auto; height:auto'"}, |
| 53 { dimensions: [100, 50], description: "200x100 svg image, attributes width='50
' height='50' and CSS 'width:auto'"}, |
| 54 { dimensions: [200, 100], description: "200x100 svg image, without attributes
width and height and CSS 'width:auto'"}, |
| 55 { dimensions: [100, 50], description: "200x100 svg image, attributes height='5
0' and 'width:auto'"}, |
| 56 { dimensions: [50, 25], description: "200x100 svg image, attributes width='50'
and CSS height:auto"}, |
| 57 { dimensions: [300, 150], description: "default sized svg image, attributes wi
dth='200' height='200' and CSS 'width:auto; height:auto'"}, |
| 58 { dimensions: [300, 150], description: "default sized svg image, attributes he
ight='200' and CSS 'width:auto; height:auto'"}, |
| 59 { dimensions: [300, 150], description: "default sized svg image, attributes wi
dth='200' and CSS 'width:auto; height:auto'"}, |
| 60 { dimensions: [300, 150], description: "default sized svg image, without attri
butes width and height, no css width/height specified"}, |
| 61 { dimensions: [60, 60], description: "default sized svg image viewBox='0 0 400
100', attributes width='60' height='60' and no css width/height specified"}, |
| 62 { dimensions: [240, 60], description: "default sized svg image viewBox='0 0 40
0 100', attributes width='60' height='60' and CSS 'width:auto'"}, |
| 63 { dimensions: [60, 15], description: "default sized svg image viewBox='0 0 400
100', attributes width='60' height='60' and CSS 'height:auto'"}, |
| 64 { dimensions: [300, 75], description: "default sized svg image viewBox='0 0 40
0 100', attributes width='60' height='60' and CSS 'width:auto; height:auto'"}, |
| 65 { dimensions: [60, 60], description: "svg image width='200' viewBox='0 0 400 1
00', attributes width='60' height='60' and no css width/height specified"}, |
| 66 { dimensions: [240, 60], description: "svg image width='200' viewBox='0 0 400
100', attributes width='60' height='60' and CSS 'width:auto'"}, |
| 67 { dimensions: [60, 15], description: "svg image width='200' viewBox='0 0 400 1
00', attributes width='60' height='60' and CSS 'height:auto'"}, |
| 68 { dimensions: [200, 50], description: "svg image width='200' viewBox='0 0 400
100', attributes width='60' height='60' and CSS 'width:auto; height:auto'"}, |
| 69 { dimensions: [60, 60], description: "svg image height='100' viewBox='0 0 400
100', attributes width='60' height='60' and no css width/height specified"}, |
| 70 { dimensions: [240, 60], description: "svg image height='100' viewBox='0 0 400
100', attributes width='60' height='60' and CSS 'width:auto'"}, |
| 71 { dimensions: [60, 15], description: "svg image height='100' viewBox='0 0 400
100', attributes width='60' height='60' and CSS 'height:auto'"}, |
| 72 { dimensions: [400, 100], description: "svg image height='100' viewBox='0 0 40
0 100', attributes width='60' height='60' and CSS 'width:auto; height:auto'"}, |
| 73 { dimensions: [60, 60], description: "200x100 svg image viewBox='0 0 400 100',
attributes width='60' height='60' and no css width/height specified"}, |
| 74 { dimensions: [120, 60], description: "200x100 svg image viewBox='0 0 400 100'
, attributes width='60' height='60' and CSS 'width:auto'"}, |
| 75 { dimensions: [60, 30], description: "200x100 svg image viewBox='0 0 400 100',
attributes width='60' height='60' and CSS 'height:auto'"}, |
| 76 { dimensions: [200, 100], description: "200x100 svg image viewBox='0 0 400 100
', attributes width='60' height='60' and CSS 'width:auto; height:auto'"}, |
| 77 ]; |
| 78 |
| 79 var images = document.getElementsByTagName('image'); |
| 80 for (var i = 0, length = images.length; i < length; ++i) { |
| 81 async_test(function(t) { |
| 82 var image = images[i]; |
| 83 image.expectedBox = expectedBoxes[i]; |
| 84 image.onload = t.step_func_done(function() { |
| 85 var rectBBox = image.getBBox(); |
| 86 assert_equals(rectBBox.width, image.expectedBox.dimensions[0]); |
| 87 assert_equals(rectBBox.height, image.expectedBox.dimensions[1]); |
| 88 }); |
| 89 }, document.title + ' with ' + expectedBoxes[i].description); |
| 90 } |
| 91 </script> |
OLD | NEW |