| <!DOCTYPE html> |
| <!-- |
| | Test CSSOM View extensions to the Element Interface, verifying that |
| | offsetWidth and offsetHeight are properly calculated with box splitting. |
| --> |
| <html> |
| <head> |
| <style> |
| body { |
| margin: 0px; |
| font-family: Roboto; |
| font-size: 40px; |
| } |
| .absolutely-positioned-1 { |
| position: absolute; |
| left: 30px; |
| top: 20px; |
| } |
| .absolutely-positioned-2 { |
| position: absolute; |
| left: 30px; |
| top: 120px; |
| width: 150px; |
| } |
| </style> |
| <script> |
| if (window.testRunner) { |
| window.testRunner.waitUntilDone(); |
| } |
| |
| // Compare document.getElementById(id1)[property] with |
| // document.getElementById(id2)[property] and change the element's |
| // background color to red if they are not equal. |
| function verifyPropertiesMatchByElementIds(id1, id2, property) { |
| var element1 = document.getElementById(id1); |
| var element2 = document.getElementById(id2); |
| if (!element1 || !element2) { |
| document.body.style.backgroundColor = "#F44336"; |
| } else |
| if (element1[property] != element2[property]) { |
| console.log("getElementById(\'" + id1 + "\')." + property + |
| " == " + element1[property] + |
| " != \'" + |
| "getElementById(\'" + id2 + "\')." + property + |
| " == " + element2[property] + "\'"); |
| element1.style.backgroundColor = "#F44336"; |
| element2.style.backgroundColor = "#F44336"; |
| } |
| } |
| |
| function runTest() { |
| verifyPropertiesMatchByElementIds("div-1", "span-1", "offsetWidth"); |
| verifyPropertiesMatchByElementIds("div-2", "span-2", "offsetHeight"); |
| } |
| |
| window.onload = function() { |
| runTest(); |
| |
| if (window.testRunner) { |
| window.testRunner.notifyDone(); |
| } |
| } |
| </script> |
| </head> |
| <body> |
| <div id="div-1" class="absolutely-positioned-1"> |
| <span id="span-1">Yes, that's written ما اسمك؟ Thanks.</span> |
| </div> |
| <div id="div-2" class="absolutely-positioned-2"> |
| <span id="span-2">Yes, it's written like that.</span> |
| </div> |
| </body> |
| </html> |
