| <!DOCTYPE html> |
| <html> |
| <head> |
| <style> |
| html, body { |
| margin: 0px; |
| padding: 0px; |
| } |
| |
| .relative { |
| position: relative; |
| } |
| |
| .absolute { |
| position: absolute; |
| } |
| |
| #multicol { |
| position: absolute; |
| left: 0; |
| top: 0px; |
| width: 600px; |
| -webkit-column-count: 3; |
| font-size: 30px; |
| font-family: Ahem; |
| -webkit-column-gap: 50px; |
| } |
| </style> |
| </head> |
| <body> |
| <div id="multicol" dir="rtl"> |
| <span class="overlay-target">first</span> <span class="overlay-target relative">second</span> <span class="overlay-target">third</span><br> |
| <span class="overlay-target">fourth</span> <span class="overlay-target">fifth</span> <span class="overlay-target absolute">sixth</span> |
| </div> |
| <script type="text/javascript"> |
| if (window.testRunner) |
| window.testRunner.dumpAsText(); |
| |
| var boxes = document.getElementsByClassName("overlay-target"); |
| var expectedResults = [{"top":0,"left":450,"width":150,"height":30}, |
| {"top":30,"left":420,"width":180,"height":30}, |
| {"top":0,"left":233.34375,"width":150,"height":30}, |
| {"top":30,"left":203.34375,"width":180,"height":30}, |
| {"top":0,"left":16.6875,"width":150,"height":30}, |
| {"top":150,"left":450,"width":150,"height":30}]; |
| |
| var errorString = null; |
| for (var i = 0; i < boxes.length; i++) { |
| var bbox = boxes[i].getBoundingClientRect(); |
| bboxObject = { |
| top: bbox.top, |
| left: bbox.left, |
| width: bbox.width, |
| height: bbox.height |
| } |
| var expected = expectedResults[i]; |
| if ((bboxObject.left === expected.left) && (bboxObject.top === expected.top) |
| && (bboxObject.width === expected.width) && (bboxObject.height === expected.height)) |
| continue; |
| |
| errorString = (errorString || "") + "Expected: " + JSON.stringify(expected) + " Got: " + JSON.stringify(bboxObject) + "<br>"; |
| } |
| |
| var prefix = "Test for https://bugs.webkit.org/show_bug.cgi?id=135452<br>"; |
| if (errorString) |
| document.body.innerHTML = prefix + "FAIL<br>" + errorString; |
| else |
| document.body.innerHTML = prefix + "PASS"; |
| </script> |
| </body> |
| </html> |
