padding-block-inline-computed.html (1908B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>CSS Logical Properties and Values: getComputedStyle().paddingBlockStart etc.</title> 6 <link rel="help" href="https://drafts.csswg.org/css-logical/#propdef-padding-block"> 7 <link rel="help" href="https://drafts.csswg.org/cssom/#resolved-values"> 8 <meta name="assert" content="padding-block, padding-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("padding-block-start", "10px"); 34 test_computed_value("padding-block-end", "10%", "20px"); 35 test_computed_value("padding-inline-start", "30px"); 36 test_computed_value("padding-inline-end", "1em", "40px"); 37 38 test_computed_value('padding-block-start', 'calc(10% + 40px)', '60px'); 39 test_computed_value('padding-block-end', 'calc(10% - 40px)', '0px'); 40 test_computed_value('padding-inline-start', 'calc(10% - 40px)', '0px'); 41 test_computed_value('padding-inline-end', 'calc(10% + 40px)', '60px'); 42 43 test_computed_value('padding-block-start', 'calc(10px - 0.5em)', '0px'); 44 test_computed_value('padding-block-end', 'calc(10px + 0.5em)', '30px'); 45 test_computed_value('padding-inline-start', 'calc(10px + 0.5em)', '30px'); 46 test_computed_value('padding-inline-end', 'calc(10px - 0.5em)', '0px'); 47 48 test_computed_value("padding-block", "10px"); 49 test_computed_value("padding-block", "10px 20px"); 50 test_computed_value("padding-inline", "30px"); 51 test_computed_value("padding-inline", "30px 40px"); 52 </script> 53 </body> 54 </html>