multicol-002.html (2711B)
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 nested multicol"> 6 <div id="scrollable" style="overflow:hidden; margin:13px; width:300px; height:350px;"> 7 <div style="columns:2; column-gap:10px; column-fill:auto; width:690px; height:300px; margin:100px;"> 8 <div style="height:200px; background:hotpink;"></div> 9 <div style="columns:3; column-gap:20px; column-fill:auto; width:340px; height:200px;"> 10 <div style="height:200px; background:blue;"></div> 11 <div id="target" style="height:120px; background:cyan;"></div> 12 <div style="height:200px; background:gray;"></div> 13 </div> 14 </div> 15 </div> 16 <script src="/resources/testharness.js"></script> 17 <script src="/resources/testharnessreport.js"></script> 18 <script> 19 // #target is fragmented across two columns - the third (and last) column of 20 // the first row of the inner multicol container, and the first column of the 21 // second row. 22 // 23 // The left offset of the first fragment of #target (relatively to the scroll 24 // port) is 340px (2 columns of 100px width and gaps of 20px width, which is 25 // 240px, plus the multicol left margin of 100px). The top offset is 300px 26 // (200px hotpink block, plus the multicol top margin of 100px). The fragment 27 // is 100px wide and tall. 28 // 29 // The left offset of the second fragment of #target is 450px (outer column 30 // width of 340px, plus outer column gap of 10px, plus multicol left margin of 31 // 100px). The top offset is 100px (multicol top margin). It is 100px wide and 32 // 20px tall. 33 // 34 // The bounding box of #target thus becomes left:340px, top:100px, 35 // width:210px, height:300px. 36 test(()=> { 37 target.style.scrollSnapAlign = "start"; 38 scrollable.style.scrollSnapType = "x mandatory"; 39 assert_equals(scrollable.scrollLeft, 340); 40 scrollable.style.scrollSnapType = "y mandatory"; 41 assert_equals(scrollable.scrollTop, 100); 42 }, "start"); 43 44 test(()=> { 45 target.style.scrollSnapAlign = "end"; 46 scrollable.style.scrollSnapType = "x mandatory"; 47 assert_equals(scrollable.scrollLeft, 250); 48 scrollable.style.scrollSnapType = "y mandatory"; 49 assert_equals(scrollable.scrollTop, 50); 50 }, "end"); 51 52 test(()=> { 53 target.style.scrollSnapAlign = "center"; 54 scrollable.style.scrollSnapType = "x mandatory"; 55 assert_equals(scrollable.scrollLeft, 295); 56 scrollable.style.scrollSnapType = "y mandatory"; 57 assert_equals(scrollable.scrollTop, 75); 58 }, "center"); 59 </script>