OLD | NEW |
1 <!doctype html> | 1 <!doctype html> |
2 <html> | 2 <html> |
3 <title>Test computed style on x and y properties</title> | 3 <title>Test computed style on x and y properties</title> |
4 <script src="../../resources/testharness.js"></script> | 4 <script src="../../resources/testharness.js"></script> |
5 <script src="../../resources/testharnessreport.js"></script> | 5 <script src="../../resources/testharnessreport.js"></script> |
6 <svg xmlns="http://www.w3.org/2000/svg" height="32" width="32"> | 6 <svg xmlns="http://www.w3.org/2000/svg" height="32" width="32"> |
7 <defs> | 7 <defs> |
8 <circle id="circle" cx="50" cy="60" r="32"/> | 8 <circle id="circle" cx="50" cy="60" r="32"/> |
9 </defs> | 9 </defs> |
10 <rect class="test" x="37px" y="50%" width="100" height="100"/> | 10 <rect class="test" x="37px" y="50%" width="100" height="100"/> |
11 <use class="test" x="17" y="51mm" xlink:href="#circle"/> | 11 <use class="test" x="17" y="51mm" xlink:href="#circle"/> |
12 <svg class="test" x="22%" y="4cm" width="100" height="100"/> | 12 <svg class="test" x="22%" y="4cm" width="100" height="100"/> |
13 <pattern class="test" x="27px" y="2in" width="100" height="100"/> | |
14 <mask class="test" x="15pc" y="27pt"/> | 13 <mask class="test" x="15pc" y="27pt"/> |
15 <image class="test" y="57"/> | 14 <image class="test" y="57"/> |
16 <foreignObject class="test" x="32%" y="1"/> | 15 <foreignObject class="test" x="32%" y="1"/> |
17 </svg> | 16 </svg> |
18 <script> | 17 <script> |
19 var elms = document.querySelectorAll(".test"); | 18 var elms = document.querySelectorAll(".test"); |
20 var attrs = [ "x", "y" ]; | 19 var attrs = [ "x", "y" ]; |
21 var expected = [ | 20 var expected = [ |
22 [ "37px", "50%" ], | 21 [ "37px", "50%" ], |
23 [ "17px", "192.755905151367px" ], | 22 [ "17px", "192.755905151367px" ], |
24 [ "22%", "151.181106567383px" ], | 23 [ "22%", "151.181106567383px" ], |
25 [ "27px", "192px" ], | |
26 [ "240px", "36px" ], | 24 [ "240px", "36px" ], |
27 [ "0px", "57px" ], | 25 [ "0px", "57px" ], |
28 [ "32%", "1px" ], | 26 [ "32%", "1px" ], |
29 ]; | 27 ]; |
30 | 28 |
31 function runTestsWithZoom(zoomLevel) { | 29 function runTestsWithZoom(zoomLevel) { |
32 document.querySelector("svg").setAttribute("style", "zoom: " + z
oomLevel); | 30 document.querySelector("svg").setAttribute("style", "zoom: " + z
oomLevel); |
33 for (var i = 0; i < elms.length; i++) { | 31 for (var i = 0; i < elms.length; i++) { |
34 var style = getComputedStyle(elms[i]); | 32 var style = getComputedStyle(elms[i]); |
35 for (var j = 0; j < attrs.length; j++) { | 33 for (var j = 0; j < attrs.length; j++) { |
36 test(function() { | 34 test(function() { |
37 assert_equals(style.getPropertyValue(att
rs[j]), expected[i][j]); | 35 assert_equals(style.getPropertyValue(att
rs[j]), expected[i][j]); |
38 }, "zoom=" + zoomLevel + ": " + elms[i].localNam
e + " getPropertyValue(" + attrs[j] + ")"); | 36 }, "zoom=" + zoomLevel + ": " + elms[i].localNam
e + " getPropertyValue(" + attrs[j] + ")"); |
39 test(function() { | 37 test(function() { |
40 assert_equals(style[attrs[j]], expected[
i][j]); | 38 assert_equals(style[attrs[j]], expected[
i][j]); |
41 }, "zoom=" + zoomLevel + ": " +elms[i].localName
+ " style." + attrs[j]); | 39 }, "zoom=" + zoomLevel + ": " +elms[i].localName
+ " style." + attrs[j]); |
42 } | 40 } |
43 } | 41 } |
44 } | 42 } |
45 | 43 |
46 runTestsWithZoom(1); | 44 runTestsWithZoom(1); |
47 runTestsWithZoom(2); | 45 runTestsWithZoom(2); |
48 </script> | 46 </script> |
49 </html> | 47 </html> |
OLD | NEW |