| <!DOCTYPE html> |
| <html> |
| <!-- |
| | Test CSSOM View extensions to the Element Interface, verifying that |
| | getBoundingClientRect() works properly with RTL and scrollLeft and scrollTop. |
| --> |
| <head> |
| <style> |
| body { |
| font-family: Roboto; |
| font-size: 16px; |
| background-color: #FF0000; |
| margin: 0px; |
| position: absolute; |
| left: 0px; |
| width: 200px; |
| height: 200px; |
| } |
| |
| .overflow-scroll { |
| outline: none; |
| width: 150px; |
| height: 100px; |
| overflow: scroll; |
| position: relative; |
| background-color: #000000; |
| } |
| |
| .content { |
| width: 50px; |
| height: 50px; |
| position: absolute; |
| } |
| </style> |
| <script> |
| if (window.testRunner) { |
| window.testRunner.waitUntilDone(); |
| } |
| |
| function verifyGetBoundingClientRectAttributesAreCorrect(id, x, y, w, h) { |
| var error = ""; |
| var element = document.getElementById(id); |
| if (!element) { |
| error += "\nElement " + id + " not found"; |
| return error; |
| } |
| |
| var rect = element.getBoundingClientRect(); |
| if (rect["left"] != x) { |
| error += "\ngetElementById('" + id + "').getBoundingClientRect()" + |
| ".left mismatch"; |
| error += "\n Actual: " + rect["left"]; |
| error += "\nExpected: " + x; |
| } |
| if (rect["top"] != y) { |
| error += "\ngetElementById('" + id + "').getBoundingClientRect()" + |
| ".top mismatch"; |
| error += "\n Actual: " + rect["top"]; |
| error += "\nExpected: " + y; |
| } |
| if (rect["width"] != w) { |
| error += "\ngetElementById('" + id + "').getBoundingClientRect()" + |
| ".width mismatch"; |
| error += "\n Actual: " + rect["width"]; |
| error += "\nExpected: " + w; |
| } |
| if (rect["height"] != h) { |
| error += "\ngetElementById('" + id + "').getBoundingClientRect()" + |
| ".height mismatch"; |
| error += "\n Actual: " + rect["height"]; |
| error += "\nExpected: " + h; |
| } |
| return error; |
| } |
| |
| window.onload = function() { |
| document.getElementById("outer-scroll").scrollTop = 25; |
| document.getElementById("outer-scroll").scrollLeft = -25; |
| document.getElementById("inner-scroll").scrollTop = 10; |
| document.getElementById("inner-scroll").scrollLeft = -50; |
| var error1 = verifyGetBoundingClientRectAttributesAreCorrect( |
| "target1", 150, -25, 50, 50); |
| var error2 = verifyGetBoundingClientRectAttributesAreCorrect( |
| "target2", 50, 75, 50, 50); |
| if (error1 || error2) { |
| console.log("FAIL" + error1 + error2); |
| } else { |
| document.body.style.backgroundColor = "rgba(0,0,0,0)"; |
| } |
| if (window.testRunner) { |
| window.testRunner.notifyDone(); |
| } |
| } |
| </script> |
| </head> |
| <body dir="rtl"> |
| <div id="outer-scroll" class="overflow-scroll"> |
| <div class="overflow-scroll"> |
| <div id="target1" class="content" |
| style="background-color: #FF0000; transform: translateX(0px)"></div> |
| <div class="content" |
| style="background-color: #00FF00; transform: translateX(-75px)"></div> |
| <div class="content" |
| style="background-color: #0000FF; transform: translateX(-150px)"></div> |
| </div> |
| <div id="inner-scroll" class="overflow-scroll"> |
| <div class="content" |
| style="background-color: #FF0000; transform: translateX(0px)"></div> |
| <div class="content" |
| style="background-color: #00FF00; transform: translateX(-75px)"></div> |
| <div id="target2" class="content" |
| style="background-color: #0000FF; transform: translateX(-150px)"></div> |
| </div> |
| </div> |
| </body> |
| </html> |
