| <!DOCTYPE HTML> |
| <script src="../../resources/testharness.js"></script> |
| <script src="../../resources/testharnessreport.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; |
| } |
| |
| test(() => { |
| assert_equals(computedMarginLeft(innerElement.id), expectedLeft, 'margin-left'); |
| assert_equals(computedMarginTop(innerElement.id), expectedTop, 'margin-top'); |
| assert_equals(computedMarginRight(innerElement.id), expectedRight, 'margin-right'); |
| assert_equals(computedMarginBottom(innerElement.id), expectedBottom, 'margin-bottom'); |
| }, innerElement.id); |
| } |
| |
| if (window.testRunner) { |
| var testContainer = document.getElementById("test-container"); |
| if (testContainer) |
| document.body.removeChild(testContainer); |
| } |
| </script> |
