multicol-001.html (1188B)
1 <!DOCTYPE html> 2 <link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> 3 <link rel="help" href="https://drafts.csswg.org/css-scroll-snap-1/#overview"> 4 <link rel="help" href="https://drafts.csswg.org/css-multicol/"> 5 <meta name="assert" content="Scroll snapping on fragmented block inside multicol"> 6 <div id="scrollable" style="overflow:hidden; margin:100px; scroll-snap-type:x mandatory; columns:3; width:340px; column-gap:20px; column-fill:auto; height:100px;"> 7 <div style="height:200px; background:blue;"></div> 8 <div id="target" style="scroll-snap-align:start; height:120px; background:cyan;"></div> 9 <div style="height:200px; background:gray;"></div> 10 </div> 11 <script src="/resources/testharness.js"></script> 12 <script src="/resources/testharnessreport.js"></script> 13 <script> 14 test(()=> { 15 assert_equals(scrollable.scrollLeft, 240); 16 }, "scroll-snap-align: start"); 17 18 test(()=> { 19 target.style.scrollSnapAlign = "end"; 20 assert_equals(scrollable.scrollLeft, 120); 21 }, "scroll-snap-align: end"); 22 23 test(()=> { 24 target.style.scrollSnapAlign = "center"; 25 assert_equals(scrollable.scrollLeft, 180); 26 }, "scroll-snap-align: center"); 27 </script>