Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(334)

Side by Side Diff: third_party/WebKit/LayoutTests/svg/custom/svg-image-intrinsic-size-with-cssstyle-auto.html

Issue 2230963002: SVG Image intrinsic size should be used if css style size is 'auto' (Closed) Base URL: https://chromium.googlesource.com/chromium/src.git@master
Patch Set: Align with review comments Created 4 years, 3 months ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View unified diff | Download patch
OLDNEW
(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>
OLDNEW

Powered by Google App Engine
This is Rietveld 408576698