scroll-snap-nested-snap-area-layout-changed.tentative.html (4198B)
1 <!DOCTYPE html> 2 <html> 3 4 <head> 5 <link rel="help" href="https://drafts.csswg.org/css-scroll-snap-1/#scroll-snap-type" /> 6 <script src="/resources/testharness.js"></script> 7 <script src="/resources/testharnessreport.js"></script> 8 <script src="/resources/testdriver.js"></script> 9 <script src="/resources/testdriver-actions.js"></script> 10 <script src="/resources/testdriver-vendor.js"></script> 11 <script src="/dom/events/scrolling/scroll_support.js"></script> 12 </head> 13 <body> 14 <style> 15 #scroller { 16 overflow: scroll; 17 scroll-snap-type: y mandatory; 18 height: 200px; 19 width: 200px; 20 border: solid 1px; 21 position:absolute; 22 } 23 .snap_area { 24 position: absolute; 25 width: 100px; 26 left: calc(50% - 50px); 27 } 28 #outer_snap_area { 29 scroll-snap-align: start; 30 height: 1000px; 31 background-color: blue; 32 } 33 #inner_snap_area { 34 scroll-snap-align: start; 35 height: 100px; 36 top: 100px; 37 background-color: yellow; 38 } 39 </style> 40 <div id="scroller"> 41 <div id="outer_snap_area" class="snap_area"></div> 42 <div id="inner_snap_area" class="snap_area"></div> 43 </div> 44 <script> 45 async function reset() { 46 inner_snap_area.style.height = "100px"; 47 await waitForCompositorCommit(); 48 } 49 50 let scroller = document.getElementById("scroller"); 51 promise_test(async (t) => { 52 await reset(); 53 await resetTargetScrollState(t, scroller); 54 assert_equals(scroller.scrollTop, 0, "test precondition: scroller is " + 55 "not scrolled"); 56 let scrollend_promise = waitForScrollendEventNoTimeout(scroller); 57 let target_snap_position = inner_snap_area.offsetTop + 58 inner_snap_area.offsetHeight; 59 // Scroll to an offset close to the bottom of the inner snap area and 60 // expect to snap to an offset just below this snap area. 61 scroller.scrollTo(0, target_snap_position - 10); 62 await scrollend_promise; 63 assert_equals(scroller.scrollTop, target_snap_position, 64 "scroller snaps to just below the inner snap area."); 65 // We are just below the inner snap area. Increase its height so that it 66 // is larger than the snapport and straddled by the snapport. Verify 67 // that we snap to its bottom. 68 inner_snap_area.style.height = 69 `${scroller.clientHeight + inner_snap_area.clientHeight - 10}px`; 70 await waitForCompositorCommit(); 71 target_snap_position = inner_snap_area.offsetTop + 72 inner_snap_area.offsetHeight - scroller.clientHeight; 73 assert_equals(scroller.scrollTop, target_snap_position, 74 "scroller snaps to the bottom of the smaller snap area (which is now " + 75 "covering)."); 76 }, "newly larger-than-snapport area is snapped to when straddled close " + 77 "to bottom."); 78 79 promise_test(async (t) => { 80 await reset(); 81 await resetTargetScrollState(t, scroller); 82 assert_equals(scroller.scrollTop, 0, "test precondition: scroller is " + 83 "not scrolled"); 84 let scrollend_promise = waitForScrollendEventNoTimeout(scroller); 85 let target_snap_position = inner_snap_area.offsetTop + 86 inner_snap_area.offsetHeight; 87 // Scroll to an offset close to the bottom of the inner snap area and 88 // expect to snap to an offset just below this snap area. 89 scroller.scrollTo(0, target_snap_position - 10); 90 await scrollend_promise; 91 assert_equals(scroller.scrollTop, target_snap_position, 92 "scroller snaps to just below the inner snap area."); 93 // We are just below the inner snap area. Increase its height so that it 94 // is larger than the snapport and covers the snapport. Verify that we 95 // remain in the covering position. 96 inner_snap_area.style.height = 97 `${scroller.clientHeight + inner_snap_area.clientHeight + 10}px`; 98 await waitForCompositorCommit(); 99 assert_equals(scroller.scrollTop, target_snap_position, 100 "scroller snaps to the bottom of the smaller snap area (which is now " + 101 "covering)."); 102 }, "snapport remains within newly covering snap area when already in " + 103 "covering position."); 104 </script> 105 </body>