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, with attributes wid th='100' height='100'"}, | |
fs
2016/09/14 11:31:52
I think we could drop all the instances of "with"
Shanmuga Pandi
2016/09/14 13:15:36
Done.
| |
48 { dimensions: [100, 100], description: "400x400 png image, with attributes wid th='200' height='100', and with CSS 'width:auto'"}, | |
49 { dimensions: [100, 100], description: "400x400 png image, with attributes wid th='100' height='200', and with CSS 'height:auto'"}, | |
50 { dimensions: [400, 400], description: "400x400 png image, with attributes wid th='100' height='100', and with CSS 'width:auto; height:auto'"}, | |
51 { dimensions: [50, 50], description: "default sized svg image, with attributes width='50' height='50'"}, | |
52 { dimensions: [200, 100], description: "200x100 svg image, with attributes wid th='50' height='50', and with CSS 'width:auto; height:auto'"}, | |
53 { dimensions: [100, 50], description: "200x100 svg image, with attributes widt h='50' height='50', and with CSS 'width:auto'"}, | |
54 { dimensions: [200, 100], description: "200x100 svg image, without attributes width and height, and with CSS 'width:auto'"}, | |
55 { dimensions: [100, 50], description: "200x100 svg image, with attributes heig ht='50', and with 'width:auto'"}, | |
56 { dimensions: [50, 25], description: "200x100 svg image, with attributes width ='50', and with CSS height:auto"}, | |
57 { dimensions: [300, 150], description: "default sized svg image, with attribut es width='200' height='200', and with CSS 'width:auto; height:auto'"}, | |
58 { dimensions: [300, 150], description: "default sized svg image, with attribut es height='200', and with CSS 'width:auto; height:auto'"}, | |
59 { dimensions: [300, 150], description: "default sized svg image, with attribut es width='200', and with 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 with viewBox='0 0 400 100', with attributes width='60' height='60', no css width/height specifie d"}, | |
62 { dimensions: [240, 60], description: "default sized svg image with viewBox='0 0 400 100', with attributes width='60' height='60', and with CSS 'width:auto'"} , | |
63 { dimensions: [60, 15], description: "default sized svg image with viewBox='0 0 400 100', with attributes width='60' height='60', and with CSS 'height:auto'"} , | |
64 { dimensions: [300, 75], description: "default sized svg image with viewBox='0 0 400 100', with attributes width='60' height='60', and with CSS 'width:auto; h eight:auto'"}, | |
65 { dimensions: [60, 60], description: "svg image with width='200' viewBox='0 0 400 100', with attributes width='60' height='60', no css width/height specified" }, | |
66 { dimensions: [240, 60], description: "svg image with width='200' viewBox='0 0 400 100', with attributes width='60' height='60', and with CSS 'width:auto'"}, | |
67 { dimensions: [60, 15], description: "svg image with width='200' viewBox='0 0 400 100', with attributes width='60' height='60', and with CSS 'height:auto'"}, | |
68 { dimensions: [200, 50], description: "svg image with width='200' viewBox='0 0 400 100', with attributes width='60' height='60', and with CSS 'width:auto; hei ght:auto'"}, | |
69 { dimensions: [60, 60], description: "svg image with height='100' viewBox='0 0 400 100', with attributes width='60' height='60', no css width/height specified "}, | |
70 { dimensions: [240, 60], description: "svg image with height='100' viewBox='0 0 400 100', with attributes width='60' height='60', and with CSS 'width:auto'"}, | |
71 { dimensions: [60, 15], description: "svg image with height='100' viewBox='0 0 400 100', with attributes width='60' height='60', and with CSS 'height:auto'"}, | |
72 { dimensions: [400, 100], description: "svg image with height='100' viewBox='0 0 400 100', with attributes width='60' height='60', and with CSS 'width:auto; h eight:auto'"}, | |
73 { dimensions: [60, 60], description: "200x100 svg image with viewBox='0 0 400 100', with attributes width='60' height='60', no css width/height specified"}, | |
74 { dimensions: [120, 60], description: "200x100 svg image with viewBox='0 0 400 100', with attributes width='60' height='60', and with CSS 'width:auto'"}, | |
75 { dimensions: [60, 30], description: "200x100 svg image with viewBox='0 0 400 100', with attributes width='60' height='60', and with CSS 'height:auto'"}, | |
76 { dimensions: [200, 100], description: "200x100 svg image with viewBox='0 0 40 0 100', with attributes width='60' height='60', and with 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 |