OLD | NEW |
| (Empty) |
1 <html> | |
2 <head> | |
3 <style> | |
4 body { | |
5 zoom: 1.2; | |
6 padding: 0; | |
7 margin: 0; | |
8 } | |
9 | |
10 .box { | |
11 width: 100px; | |
12 height: 100px; | |
13 background-color: blue; | |
14 position: absolute; | |
15 top: 60px; | |
16 left: 40px; | |
17 } | |
18 | |
19 .translate { | |
20 transform: translate(100px, 50px); | |
21 background-color: red; | |
22 } | |
23 | |
24 .matrix { | |
25 transform: matrix(1, 0, 0, 1, 100, 50); | |
26 background-color: green; | |
27 } | |
28 </style> | |
29 <script type="text/javascript"> | |
30 | |
31 function runTest() { | |
32 | |
33 if (!window.testRunner) { | |
34 | |
35 var id1 = "a"; | |
36 var id2 = "b"; | |
37 var element1 = document.getElementById(id1); | |
38 var element2 = document.getElementById(id2); | |
39 var x1 = element1.getBoundingClientRect().left; | |
40 var y1 = element1.getBoundingClientRect().top; | |
41 var x2 = element2.getBoundingClientRect().left; | |
42 var y2 = element2.getBoundingClientRect().top; | |
43 | |
44 var resultString = ''; | |
45 if (x1 == x2 && y1 == y2) { | |
46 resultString += "PASS - Element " + id1 + " and Element " + id2 + "
had identical positions"; | |
47 } else { | |
48 resultString += "FAIL - Element " + id1 + " and Element " + id2 + "
had different positions"; | |
49 } | |
50 | |
51 document.body.appendChild(document.createTextNode(resultString)); | |
52 } | |
53 } | |
54 </script> | |
55 </head> | |
56 <body onload="runTest();"> | |
57 | |
58 <!-- You should see green box only. If you see red, the test has failed --> | |
59 | |
60 <div id='a' class="box translate"></div> | |
61 <div id='b' class="box matrix"></div> | |
62 | |
63 </body> | |
64 </html> | |
OLD | NEW |