| <!DOCTYPE html> |
| <!-- |
| | Test CSSOM View extensions to the Element Interface, verifying that |
| | getBoundingClientRect() works properly with transforms. |
| --> |
| <html> |
| <head> |
| <style> |
| body { |
| background-color: #FFFFFF; |
| margin: 0px; |
| font-family: Roboto; |
| font-size: 20px; |
| } |
| .absolute_container { |
| position: absolute; |
| top: 20px; |
| left: 20px; |
| } |
| .absolutely-positioned-1 { |
| position: absolute; |
| transform: translate(20px, 10px); |
| margin: 3px; |
| border: 5px solid #000000; |
| padding: 7px; |
| top: 120px; |
| left: 120px; |
| width: 200px; |
| height: 200px; |
| } |
| .absolutely-positioned-2 { |
| position: absolute; |
| margin: 3px; |
| border: 5px solid #800000; |
| padding: 7px; |
| width: 160px; |
| height: 160px; |
| } |
| .absolutely-positioned-3 { |
| position: absolute; |
| transform: scale(0.5, 2.0); |
| transform-origin: top left; |
| margin: 3px; |
| border: 5px solid #008000; |
| padding: 7px; |
| width: 250px; |
| height: 50px; |
| } |
| .unpositioned-1 { |
| margin: 4px; |
| border: 6px solid #000080; |
| padding: 10px; |
| width: 200px; |
| height: 20px; |
| } |
| </style> |
| <script> |
| if (window.testRunner) { |
| window.testRunner.waitUntilDone(); |
| } |
| |
| function verifyGetBoundingClientRectAttributesAreCorrect(id, x, y, w, h) { |
| var element = document.getElementById(id); |
| if (!element) { |
| document.body.style.backgroundColor = "#F44336"; |
| } else { |
| bounding_rect = element.getBoundingClientRect(); |
| if (bounding_rect["left"] != x) { |
| console.log("getElementById(\'" + id + |
| "\').getBoundingClientRect()." + "left" + " == " + |
| bounding_rect["left"] + " != " + x); |
| element.style.backgroundColor = "#F44336"; |
| } |
| |
| if (bounding_rect["top"] != y) { |
| console.log("getElementById(\'" + id + |
| "\').getBoundingClientRect()." + "top" + " == " + |
| bounding_rect["top"] + " != " + y); |
| element.style.backgroundColor = "#F44336"; |
| } |
| |
| bounding_rect = element.getBoundingClientRect(); |
| if (bounding_rect["width"] != w) { |
| console.log("getElementById(\'" + id + |
| "\').getBoundingClientRect()." + "width" + " == " + |
| bounding_rect["width"] + " != " + w); |
| element.style.backgroundColor = "#F44336"; |
| } |
| |
| bounding_rect = element.getBoundingClientRect(); |
| if (bounding_rect["height"] != h) { |
| console.log("getElementById(\'" + id + |
| "\').getBoundingClientRect()." + "height" + " == " + |
| bounding_rect["height"] + " != " + h); |
| element.style.backgroundColor = "#F44336"; |
| } |
| } |
| } |
| |
| function runTest() { |
| verifyGetBoundingClientRectAttributesAreCorrect( |
| "div-1", 163, 153, 224, 224); |
| verifyGetBoundingClientRectAttributesAreCorrect( |
| "div-2", 178, 168, 184, 184); |
| verifyGetBoundingClientRectAttributesAreCorrect( |
| "div-3", 193, 183, 137, 148); |
| verifyGetBoundingClientRectAttributesAreCorrect( |
| "div-4", 201, 215, 116, 104); |
| } |
| |
| window.onload = function() { |
| runTest(); |
| |
| if (window.testRunner) { |
| window.testRunner.notifyDone(); |
| } |
| } |
| </script> |
| </head> |
| <body> |
| <div class="absolute_container"> |
| <div id="div-1" class="absolutely-positioned-1"> |
| <div id="div-2" class="absolutely-positioned-2"> |
| <div id="div-3" class="absolutely-positioned-3"> |
| <div id="div-4" class="unpositioned-1"> |
| <span>Yes</span> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </body> |
| </html> |
