| <!DOCTYPE HTML> |
| <style> |
| p { width:200px; height:120px; } |
| .simple-all { padding: calc(13px + 12px); } |
| .simple-left { padding-left: calc(13px + 12px); } |
| .simple-right { padding-right: calc(13px + 12px); } |
| .simple-top { padding-top: calc(13px + 12px); } |
| .simple-bottom { padding-bottom: calc(13px + 12px); } |
| .percent-all { padding: calc(10% - 5px); } |
| .percent-left { padding-left: calc(10% - 5px); } |
| .percent-right { padding-right: calc(10% - 5px); } |
| .percent-top { padding-top: calc(10% - 5px); } |
| .percent-bottom { padding-bottom: calc(10% - 5px); } |
| </style> |
| |
| <p class="simple-all">This element should have an overall padding of 25 pixels.</p> |
| <p class="simple-left">This element should have a left padding of 25 pixels.</p> |
| <p class="simple-right">This element should have a right padding of 25 pixels.</p> |
| <p class="simple-top">This element should have a top padding of 25 pixels.</p> |
| <p class="simple-bottom">This element should have a bottom padding of 25 pixels.</p> |
| |
| <div style="width: 300px; background-color: cornsilk;"> |
| <p class="percent-all">This element should have an overall padding of 25 pixels (10% of parent width of 300px minus 5px).</p> |
| <p class="percent-left">This element should have a left padding of 25 pixels (10% of parent width of 300px minus 5px).</p> |
| <p class="percent-right">This element should have a right padding of 25 pixels (10% of parent width of 300px minus 5px).</p> |
| <p class="percent-top">This element should have a top padding of 25 pixels (10% of parent width of 300px minus 5px).</p> |
| <p class="percent-bottom">This element should have a bottom padding of 25 pixels (10% of parent width of 300px minus 5px).</p> |
| </div> |
| |
| <script> |
| if (window.testRunner) |
| testRunner.dumpAsText(); |
| |
| var innerWidth = 200; |
| var innerHeight = 120; |
| var padding = 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 * padding; |
| expectedHeight += 2 * padding; |
| break; |
| case "top": |
| case "bottom": |
| expectedHeight += padding; |
| break; |
| case "left": |
| case "right": |
| expectedWidth += padding; |
| 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> |
