columns-shorthand-reset-wrap.html (1497B)
1 <!DOCTYPE html> 2 <title>Test that 'column-wrap' is reset by the 'columns' shorthand</title> 3 <link rel="help" href="https://drafts.csswg.org/css-multicol/#propdef-columns"> 4 <link rel="help" href="https://drafts.csswg.org/css-multicol-2/#propdef-columns"> 5 <link rel="help" href="https://drafts.csswg.org/css-multicol-2/#propdef-column-wrap"> 6 <script src="/resources/testharness.js"></script> 7 <script src="/resources/testharnessreport.js"></script> 8 <style id="style"> 9 #multicol1 { 10 columns: 100px / 100px; 11 } 12 #multicol2 { 13 column-wrap: nowrap; 14 columns: 100px / 100px; 15 } 16 #multicol3 { 17 columns: 100px / 100px; 18 column-wrap: nowrap; 19 } 20 </style> 21 <div id="multicol1"></div> 22 <div id="multicol2"></div> 23 <div id="multicol3"></div> 24 <script> 25 let sheet = style.sheet; 26 27 test(()=> { 28 let rule = sheet.rules[0]; 29 assert_equals(rule.selectorText, "#multicol1"); 30 assert_equals(rule.style.columnWrap, "auto"); 31 assert_equals(getComputedStyle(multicol1).columnWrap, "auto"); 32 }, "multicol1"); 33 34 test(()=> { 35 let rule = sheet.rules[1]; 36 assert_equals(rule.selectorText, "#multicol2"); 37 assert_equals(rule.style.columnWrap, "auto"); 38 assert_equals(getComputedStyle(multicol2).columnWrap, "auto"); 39 }, "multicol2"); 40 41 test(()=> { 42 let rule = sheet.rules[2]; 43 assert_equals(rule.selectorText, "#multicol3"); 44 assert_equals(rule.style.columnWrap, "nowrap"); 45 assert_equals(getComputedStyle(multicol3).columnWrap, "nowrap"); 46 }, "multicol3"); 47 </script>