| <!DOCTYPE html> |
| <!-- |
| | Test CSSOM View extensions to the HTMLElement Interface. |
| --> |
| <html> |
| <head> |
| <style> |
| body { |
| margin: 0px; |
| font-family: Roboto; |
| } |
| .absolutely-positioned { |
| position: absolute; |
| left: 30px; |
| top: 20px; |
| } |
| .level-1 { |
| background-color: #b3e5fc; |
| padding: 10px 15px; |
| } |
| .level-2 { |
| background-color: #40c4ff; |
| padding: 20px 20px; |
| } |
| .level-3 { |
| background-color: #00b0ff; |
| padding: 40px 40px; |
| } |
| .level-4 { |
| background-color: #0091ea; |
| height: 50px; |
| width: 50px; |
| } |
| .absolutely-positioned.level-4 { |
| background-color: #01579b; |
| } |
| </style> |
| <script> |
| if (window.testRunner) { |
| window.testRunner.waitUntilDone(); |
| } |
| |
| // Compare value with document.getElementById(id)[property], and |
| // change the element's background color to red if they are not equal. |
| function verifyElementPropertyById(id, property, value) { |
| var element = document.getElementById(id); |
| if (!element) { |
| document.body.style.backgroundColor = "#F44336"; |
| } else |
| if (element[property] != value) { |
| console.log("getElementById(\'" + id + "\')." + property + |
| " == " + element[property] + |
| " != \'" + value + "\'"); |
| element.style.backgroundColor = "#F44336"; |
| } |
| } |
| |
| function runTest() { |
| verifyElementPropertyById("level-1", "offsetLeft", 30); |
| verifyElementPropertyById("level-1", "offsetTop", 20); |
| verifyElementPropertyById("level-1", "offsetWidth", 200); |
| verifyElementPropertyById("level-1", "offsetHeight", 190); |
| |
| verifyElementPropertyById("level-2", "offsetLeft", 15); |
| verifyElementPropertyById("level-2", "offsetTop", 10); |
| verifyElementPropertyById("level-2", "offsetWidth", 170); |
| verifyElementPropertyById("level-2", "offsetHeight", 170); |
| |
| verifyElementPropertyById("level-3", "offsetLeft", 35); |
| verifyElementPropertyById("level-3", "offsetTop", 30); |
| verifyElementPropertyById("level-3", "offsetWidth", 130); |
| verifyElementPropertyById("level-3", "offsetHeight", 130); |
| |
| verifyElementPropertyById("level-4", "offsetLeft", 75); |
| verifyElementPropertyById("level-4", "offsetTop", 70); |
| verifyElementPropertyById("level-4", "offsetWidth", 50); |
| verifyElementPropertyById("level-4", "offsetHeight", 50); |
| } |
| |
| window.onload = function() { |
| runTest(); |
| |
| if (window.testRunner) { |
| window.testRunner.notifyDone(); |
| } |
| } |
| </script> |
| </head> |
| <body> |
| <div id="level-1" class="absolutely-positioned level-1"> |
| <div id="level-2" class="level-2"> |
| <div id="level-3" class="level-3"> |
| <div id="level-4" class="level-4"></div> |
| </div> |
| </div> |
| </div> |
| </body> |
| </html> |