| <!DOCTYPE HTML> |
| <script src="../../resources/js-test-pre.js"></script> |
| <style> |
| div { display: inline-block; } |
| p { width: 200px; height: 120px; margin: 0px; } |
| #simple-all { margin: calc(13px + 12px); } |
| #simple-left { margin-left: calc(13px + 12px); } |
| #simple-right { margin-right: calc(13px + 12px); } |
| #simple-top { margin-top: calc(13px + 12px); } |
| #simple-bottom { margin-bottom: calc(13px + 12px); } |
| #percent-all { margin: calc(10% - 5px); } |
| #percent-left { margin-left: calc(10% - 5px); } |
| #percent-right { margin-right: calc(10% - 5px); } |
| #percent-top { margin-top: calc(10% - 5px); } |
| #percent-bottom { margin-bottom: calc(10% - 5px); } |
| </style> |
| |
| <div id="test-container"> |
| <p id="simple-all">This element should have an overall margin of 25 pixels.</p><br/> |
| <p id="simple-left">This element should have a left margin of 25 pixels.</p><br/> |
| <p id="simple-right">This element should have a right margin of 25 pixels.</p><br/> |
| <p id="simple-top">This element should have a top margin of 25 pixels.</p><br/> |
| <p id="simple-bottom">This element should have a bottom margin of 25 pixels.</p><br/> |
| <div id="wrapper" style="width: 300px; background-color: cornsilk; display: block;"> |
| <p id="percent-all">This element should have an overall margin of 25 pixels (10% of parent width of 300px minus 5px).</p><br/> |
| <p id="percent-left">This element should have a left margin of 25 pixels (10% of parent width of 300px minus 5px).</p><br/> |
| <p id="percent-right">This element should have a right margin of 25 pixels (10% of parent width of 300px minus 5px).</p><br/> |
| <p id="percent-top">This element should have a top margin of 25 pixels (10% of parent width of 300px minus 5px).</p><br/> |
| <p id="percent-bottom">This element should have a bottom margin of 25 pixels (10% of parent width of 300px minus 5px).</p><br/> |
| </div> |
| </div> |
| <script> |
| |
| function computedMarginLeft(id) |
| { |
| return getComputedStyle(document.getElementById(id), null).marginLeft; |
| } |
| function computedMarginRight(id) |
| { |
| return getComputedStyle(document.getElementById(id), null).marginRight; |
| } |
| function computedMarginTop(id) |
| { |
| return getComputedStyle(document.getElementById(id), null).marginTop; |
| } |
| function computedMarginBottom(id) |
| { |
| return getComputedStyle(document.getElementById(id), null).marginBottom; |
| } |
| |
| var innerWidth = 200; |
| var innerHeight = 120; |
| var margin = "25px"; |
| var noMargin = "0px"; |
| |
| var tests = document.getElementsByTagName("p"); |
| for (var i = 0; i < tests.length; ++i) { |
| var innerElement = tests[i] |
| var expectedLeft = noMargin; |
| var expectedTop = noMargin; |
| var expectedRight = noMargin; |
| var expectedBottom = noMargin; |
| switch (innerElement.id.split("-")[1]) { |
| case "all": |
| expectedLeft = margin; |
| expectedTop = margin; |
| expectedRight = margin; |
| expectedBottom = margin; |
| break; |
| case "top": |
| expectedTop = margin; |
| break; |
| case "bottom": |
| expectedBottom = margin; |
| break; |
| case "left": |
| expectedLeft = margin; |
| break; |
| case "right": |
| expectedRight = margin; |
| break; |
| } |
| |
| shouldBeEqualToString('computedMarginLeft("' + innerElement.id + '")', expectedLeft); |
| shouldBeEqualToString('computedMarginTop("' + innerElement.id + '")', expectedTop); |
| shouldBeEqualToString('computedMarginRight("' + innerElement.id + '")', expectedRight); |
| shouldBeEqualToString('computedMarginBottom("' + innerElement.id + '")', expectedBottom); |
| } |
| |
| if (window.testRunner) { |
| var testContainer = document.getElementById("test-container"); |
| if (testContainer) |
| document.body.removeChild(testContainer); |
| } |
| </script> |
| <script src="../../resources/js-test-post.js"></script> |
