| |
| <html> |
| <head> |
| <script> |
| function test() |
| { |
| if (window.testRunner) |
| testRunner.dumpAsText(); |
| var d1 = document.getElementById('d1'); |
| var d2 = document.getElementById('d2'); |
| |
| var style = window.getComputedStyle(d1, null); |
| var computedWidth = style.getPropertyValue("width"); |
| var computedHeight = style.getPropertyValue("height"); |
| |
| var size = "200px"; |
| |
| if (computedWidth == size && computedHeight == size) |
| d1.innerHTML = "Test 1 Passed"; |
| else |
| d1.innerHTML = "Test 1 Failed. Computed width = " + computedWidth + "<br> Computed height = " + computedHeight; |
| |
| style = window.getComputedStyle(d2, null); |
| computedWidth = style.getPropertyValue("width"); |
| computedHeight = style.getPropertyValue("height"); |
| if (computedWidth == size && computedHeight == size) |
| d2.innerHTML = "Test 2 Passed"; |
| else |
| d2.innerHTML = "Test 2 Failed. Computed width = " + computedWidth + "<br> Computed height = " + computedHeight; |
| } |
| </script> |
| <style> |
| div { |
| width: 200px; |
| height: 200px; |
| border: 5px solid black; |
| padding: 10px; |
| } |
| #d1 { |
| -moz-box-sizing: border-box; |
| -webkit-box-sizing: border-box; |
| } |
| </style> |
| </head> |
| <body onload="test()"> |
| This tests that getComputedStyle will take box-sizing into account when computing the width and height of a box. <br> |
| <div id="d1"></div> |
| <div id="d2"></div> |
| </body> |
| </html> |
