| 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 |