| <!DOCTYPE HTML> |
| <style> |
| p { |
| width:200px; height:120px; |
| } |
| .simple-all { |
| border: calc(13px + 12px) solid; |
| } |
| |
| .simple-left { |
| border-left: calc(13px + 12px) solid; |
| } |
| .simple-right { |
| border-right: calc(13px + 12px) solid; |
| } |
| .simple-top { |
| border-top: calc(13px + 12px) solid; |
| } |
| .simple-bottom { |
| border-bottom: calc(13px + 12px) solid; |
| } |
| </style> |
| |
| <p class="simple-all">This element should have an overall border of 25 pixels.</p> |
| <p class="simple-left">This element should have a left border of 25 pixels.</p> |
| <p class="simple-right">This element should have a right border of 25 pixels.</p> |
| <p class="simple-top">This element should have a top border of 25 pixels.</p> |
| <p class="simple-bottom">This element should have a bottom border of 25 pixels.</p> |
| |
| <script> |
| if (window.testRunner) |
| testRunner.dumpAsText(); |
| |
| var innerWidth = 200; |
| var innerHeight = 120; |
| var border = 25; |
| |
| var tests = document.getElementsByTagName("p"); |
| for (var i = 0; i < tests.length; ++i) { |
| var element = tests[i]; |
| var width = element.offsetWidth; |
| var height = element.offsetHeight; |
| |
| var expectedWidth = innerWidth; |
| var expectedHeight = innerHeight; |
| |
| switch (element.className.split("-")[1]) { |
| case "all": |
| expectedWidth += 2 * border; |
| expectedHeight += 2 * border; |
| break; |
| case "top": |
| case "bottom": |
| expectedHeight += border; |
| break; |
| case "left": |
| case "right": |
| expectedWidth += border; |
| break; |
| } |
| |
| var error = []; |
| if (width != expectedWidth) |
| error.push("wrong width"); |
| if (height != expectedHeight) |
| error.push("wrong height"); |
| |
| results = document.getElementById("results"); |
| if (error == "") { |
| element.style.backgroundColor = "green"; |
| element.innerHTML += " => PASS"; |
| } else { |
| element.style.backgroundColor = "red"; |
| element.innerHTML += " => FAIL: " + error.join(", "); |
| } |
| } |
| </script> |
