column-rule-width-computed.html (1607B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>CSS Multi-column Layout: getComputedStyle().columnRuleWidth</title> 6 <link rel="help" href="https://drafts.csswg.org/css-multicol/#propdef-column-rule-width"> 7 <link rel=help href="https://github.com/w3c/csswg-drafts/issues/11494#issuecomment-2628447227"> 8 <meta name="assert" content="column-rule-width computed value is absolute length."> 9 <meta name="assert" content="column-rule-width computed value is 0 if the column rule style is none or hidden."> 10 <script src="/resources/testharness.js"></script> 11 <script src="/resources/testharnessreport.js"></script> 12 <script src="/css/support/computed-testcommon.js"></script> 13 </head> 14 <body> 15 <div id="target"></div> 16 <style> 17 #target { 18 font-size: 40px; 19 column-rule-style: dotted; 20 } 21 </style> 22 <script> 23 test_computed_value("column-rule-width", "calc(10px + 0.5em)", "30px"); 24 test_computed_value("column-rule-width", "calc(10px - 0.5em)", "0px"); 25 26 // thin, medium, thick computed values not yet tested 27 28 test(() => { 29 target.style.columnRuleWidth = '10px'; 30 assert_equals(getComputedStyle(target).columnRuleWidth, '10px'); 31 32 target.style.columnRuleStyle = 'none'; 33 assert_equals(getComputedStyle(target).columnRuleWidth, '10px'); 34 35 target.style.columnRuleStyle = 'outset'; 36 assert_equals(getComputedStyle(target).columnRuleWidth, '10px'); 37 38 target.style.columnRuleStyle = 'hidden'; 39 assert_equals(getComputedStyle(target).columnRuleWidth, '10px'); 40 41 target.style.columnRuleStyle = ''; 42 }, 'column-rule-width is as specified when column-rule-style is none or hidden'); 43 </script> 44 </body> 45 </html>