margin-computed.html (1346B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>CSS basic box model: getComputedStyle().margin</title> 6 <link rel="help" href="https://drafts.csswg.org/css-box-3/#propdef-margin"> 7 <meta name="assert" content="margin computed value has absolute lengths."> 8 <script src="/resources/testharness.js"></script> 9 <script src="/resources/testharnessreport.js"></script> 10 <script src="/css/support/computed-testcommon.js"></script> 11 <style> 12 #parent { 13 width: 200px; 14 } 15 #target { 16 width: 0px; 17 font-size: 40px; 18 } 19 </style> 20 </head> 21 <body> 22 <div id="parent"> 23 <div id="target"></div> 24 </div> 25 <script> 26 const target = document.getElementById("target"); 27 28 test_computed_value("margin", "10px"); 29 test_computed_value("margin", "10px 20px 30px 40px"); 30 test_computed_value("margin", "calc(0.5em + 10px)", "30px"); 31 test_computed_value("margin", "30%", "60px"); 32 33 // Since what should the margin be in presence of other margins is a bit 34 // unclear (https://github.com/w3c/csswg-drafts/issues/2328), reset the margin 35 // before testing. 36 target.style.margin = "0"; 37 test_computed_value("margin-top", "10px"); 38 target.style.margin = "0"; 39 test_computed_value("margin-right", "20px"); 40 target.style.margin = "0"; 41 test_computed_value("margin-bottom", "30px"); 42 target.style.margin = "0"; 43 test_computed_value("margin-left", "40px"); 44 </script> 45 </body> 46 </html>