padding-computed.html (1569B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>CSS basic box model: getComputedStyle().padding</title> 6 <link rel="help" href="https://drafts.csswg.org/css-box-3/#propdef-padding"> 7 <link rel="help" href="https://drafts.csswg.org/cssom/#resolved-values"> 8 <meta name="assert" content="padding resolved value is an 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", "10px"); 34 test_computed_value("padding", "10px 20px 30px 40px"); 35 36 test_computed_value("padding-top", "10px"); 37 test_computed_value("padding-right", "20px"); 38 test_computed_value("padding-bottom", "30px"); 39 test_computed_value("padding-left", "40px"); 40 41 test_computed_value("padding", "20%", "40px"); 42 test_computed_value("padding", "10px 20% 30% 40px", "10px 40px 60px"); 43 test_computed_value("padding-right", "20%", "40px"); 44 45 test_computed_value('padding-top', 'calc(10% - 40px)', '0px'); 46 test_computed_value('padding-right', 'calc(10% + 40px)', '60px'); 47 test_computed_value('padding-bottom', 'calc(10px - 0.5em)', '0px'); 48 test_computed_value('padding-left', 'calc(10px + 0.5em)', '30px'); 49 </script> 50 </body> 51 </html>