column-wrap-reset-interpolation.html (1447B)
1 <!DOCTYPE html> 2 <title>Test that 'column-wrap' is part of the 'columns' shorthand for animations</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> 9 .multicol { 10 columns: 100px / 100px; 11 column-wrap: nowrap; 12 transition: columns 2s allow-discrete; 13 } 14 #mid { 15 transition-delay: -1s; 16 } 17 #end { 18 transition-delay: -2s; 19 } 20 </style> 21 <div id="start" class="multicol"></div> 22 <div id="mid" class="multicol"></div> 23 <div id="end" class="multicol"></div> 24 <script> 25 test(()=> { 26 assert_equals(getComputedStyle(start).columnWrap, "nowrap"); 27 assert_equals(getComputedStyle(mid).columnWrap, "nowrap"); 28 assert_equals(getComputedStyle(end).columnWrap, "nowrap"); 29 30 document.querySelectorAll(".multicol").forEach(elm => { 31 // Set `columns` to the same as before. 32 // This should reset `column-wrap` to `auto`. 33 elm.style.columns = '100px / 100px'; 34 }); 35 36 assert_equals(getComputedStyle(start).columnWrap, "nowrap"); 37 assert_equals(getComputedStyle(mid).columnWrap, "auto"); 38 assert_equals(getComputedStyle(end).columnWrap, "auto"); 39 }, "Animate and reset column-wrap"); 40 </script>