column-style-change-triggers-relayout.html (792B)
1 <!DOCTYPE html> 2 <title>CSS Overflow Test: ::column style change triggers relayout</title> 3 <link rel="help" href="https://www.w3.org/TR/css-multicol-2/#column-pseudo"> 4 <link rel="match" href="../reference/ref-filled-green-100px-square.xht"> 5 <style> 6 #container { 7 scroll-snap-type: both mandatory; 8 overflow: hidden; 9 columns: 1; 10 gap: 0; 11 column-fill: auto; 12 width: 100px; 13 height: 100px; 14 background: red; 15 } 16 .snapColumns::column { 17 scroll-snap-align: start; 18 } 19 </style> 20 <p>Test passes if there is a filled green square and <strong>no red</strong>.</p> 21 <div id="container"> 22 <div style="height:100px;"></div> 23 <div style="height:100px; background:green;"></div> 24 </div> 25 <script> 26 document.body.offsetTop; 27 container.className = "snapColumns"; 28 container.scrollLeft = 51; 29 </script>