| OLD | NEW |
|---|
| (Empty) |
| 1 <head> | |
| 2 <script type="text/javascript"> | |
| 3 | |
| 4 function rectsShouldBeEqual(baseline, other, outputElt) | |
| 5 { | |
| 6 if (baseline.left != other.left || | |
| 7 baseline.top != other.top || | |
| 8 baseline.right != other.right || | |
| 9 baseline.bottom != other.bottom) | |
| 10 outputElt.innerHTML = '<span style="color:red;"><b>FAIL<BR></b></span>' + | |
| 11 "left should be " + baseline.left + " but is " + other.left + "<BR>" + | |
| 12 "top should be " + baseline.top + " but is " + other.top + "<BR>" + | |
| 13 "right should be " + baseline.right + " but is " + other.right + "<BR>
" + | |
| 14 "bottom should be " + baseline.bottom + " but is " + other.bottom; | |
| 15 else | |
| 16 outputElt.innerHTML = '<span style="color:green;"><b>PASS</b></span>'; | |
| 17 } | |
| 18 | |
| 19 function testGetClientBoundingRect() | |
| 20 { | |
| 21 var baseline = document.getElementById("baseline1"); | |
| 22 var moveme = document.getElementById("moveme1"); | |
| 23 | |
| 24 var bounds = baseline.getBoundingClientRect(); | |
| 25 moveme.style.left = bounds.left; | |
| 26 moveme.style.top = bounds.top; | |
| 27 moveme.style.width = bounds.right - bounds.left; | |
| 28 moveme.style.height = bounds.bottom - bounds.top; | |
| 29 | |
| 30 var newBounds = moveme.getBoundingClientRect(); | |
| 31 rectsShouldBeEqual(bounds, newBounds, document.getElementById("results1")); | |
| 32 } | |
| 33 | |
| 34 function testGetClientRects() | |
| 35 { | |
| 36 var baseline = document.getElementById("baseline2"); | |
| 37 var moveme = document.getElementById("moveme2"); | |
| 38 | |
| 39 var boundsList = baseline.getClientRects(); | |
| 40 moveme.style.left = boundsList[0].left; | |
| 41 moveme.style.top = boundsList[0].top; | |
| 42 moveme.style.width = boundsList[0].right - boundsList[0].left; | |
| 43 moveme.style.height = boundsList[0].bottom - boundsList[0].top; | |
| 44 | |
| 45 var newBoundList = moveme.getClientRects(); | |
| 46 rectsShouldBeEqual(boundsList[0], newBoundList[0], document.getElementById("
results2")); | |
| 47 } | |
| 48 | |
| 49 function runTest() | |
| 50 { | |
| 51 document.body.style.zoom = "0.9"; | |
| 52 testGetClientBoundingRect(); | |
| 53 testGetClientRects(); | |
| 54 } | |
| 55 </script> | |
| 56 </head> | |
| 57 <body onload="runTest();"> | |
| 58 | |
| 59 <p>Tests that these functions account for full page zoom.<br>There should be no
red visible.</p> | |
| 60 | |
| 61 <table width="100%"><tr><td width="200px">getClientBoundingRect(): | |
| 62 | |
| 63 <div id="baseline1" style="position:absolute; left:100px; top:100px; width:100px
; height:100px; background-color:red;"></div> | |
| 64 <div id="moveme1" style="position:absolute; left:0px; top:0px; width:50px; heigh
t:50px; background-color:green;"></div> | |
| 65 <div id="results1" style="position:absolute; left:10px; top:220px">...</div> | |
| 66 | |
| 67 </td><td>getClientRects(): | |
| 68 | |
| 69 <div id="baseline2" style="position:absolute; left:300px; top:100px; width:100px
; height:100px; background-color:red;"></div> | |
| 70 <div id="moveme2" style="position:absolute; left:0px; top:0px; width:50px; heigh
t:50px; background-color:green;"></div> | |
| 71 <div id="results2" style="position:absolute; left:220px; top:220px">...</div> | |
| 72 | |
| 73 </td> | |
| 74 | |
| 75 </body> | |
| OLD | NEW |
|---|
Chromium Code Reviews
Issue 2547723002:
Merge LayoutTests fast/transforms in transforms (Closed)
