margin-block-inline-computed.html (1605B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>CSS Logical Properties and Values: getComputedStyle().marginBlockStart etc.</title> 6 <link rel="help" href="https://drafts.csswg.org/css-logical/#propdef-margin-block"> 7 <link rel="help" href="https://drafts.csswg.org/cssom/#resolved-values"> 8 <meta name="assert" content="margin-block, margin-inline resolved values have absolute length."> 9 <script src="/resources/testharness.js"></script> 10 <script src="/resources/testharnessreport.js"></script> 11 <script src="/css/support/computed-testcommon.js"></script> 12 <style> 13 #container { 14 will-change: transform; /* containing block for #target */ 15 width: 200px; 16 } 17 #parent { 18 width: 0px; 19 } 20 #target { 21 position: absolute; 22 font-size: 40px; 23 } 24 </style> 25 </head> 26 <body> 27 <div id="container"> 28 <div id="parent"> 29 <div id="target"></div> 30 </div> 31 </div> 32 <script> 33 test_computed_value("margin-block-start", "10px"); 34 test_computed_value("margin-block-end", "10%", "20px"); 35 test_computed_value("margin-inline-start", "30px"); 36 test_computed_value("margin-inline-end", "1em", "40px"); 37 38 test_computed_value('margin-block-start', 'calc(10% + 40px)', '60px'); 39 test_computed_value('margin-block-end', 'calc(10px + 0.5em)', '30px'); 40 test_computed_value('margin-inline-start', 'calc(10px + 0.5em)', '30px'); 41 test_computed_value('margin-inline-end', 'calc(10% + 40px)', '60px'); 42 43 test_computed_value("margin-block", "10px"); 44 test_computed_value("margin-block", "10px 20px"); 45 test_computed_value("margin-inline", "30px"); 46 test_computed_value("margin-inline", "30px 40px"); 47 </script> 48 </body> 49 </html>