| <!DOCTYPE html> |
| <html> |
| <head> |
| <link rel="help" href="https://drafts.csswg.org/css-scroll-snap"/> |
| <script src="/resources/testharness.js"></script> |
| <script src="/resources/testharnessreport.js"></script> |
| <script src="/dom/events/scrolling/scroll_support.js"></script> |
| <script src="/resources/testdriver.js"></script> |
| <script src="/resources/testdriver-actions.js"></script> |
| <script src="/resources/testdriver-vendor.js"></script> |
| <script src="resources/common.js" ></script> |
| </head> |
| <body> |
| <style> |
| .scroller { |
| overflow: scroll; |
| width: 350px; |
| height: 350px; |
| border: solid 1px black; |
| scroll-snap-type: both mandatory; |
| position: relative; |
| resize: both; |
| } |
| .large-space { |
| height: 300vh; |
| width: 300vw; |
| position: absolute; |
| } |
| .snap { |
| scroll-snap-align: start; |
| } |
| .box { |
| width: 100px; |
| height: 100px; |
| background-color: green; |
| display: inline-block; |
| position: relative; |
| } |
| .grid { |
| position: absolute; |
| width: 350px; |
| height: 350px; |
| } |
| .snap:focus { |
| background-color: blue; |
| } |
| </style> |
| <div class="scroller" id="scroller"> |
| <div class="large-space"><div> |
| <div class="grid" id="grid"> |
| <div id="box1" tabindex="1" class="snap box">Box 1</div> |
| <div id="box2" tabindex="1" class="snap box">Box 2</div> |
| <div id="box3" tabindex="1" class="snap box">Box 3</div> |
| <div id="box4" tabindex="1" class="snap box">Box 4</div> |
| <div id="box5" tabindex="1" class="snap box">Box 5</div> |
| <div id="box6" tabindex="1" class="snap box">Box 6</div> |
| <div id="box7" tabindex="1" class="snap box">Box 7</div> |
| <div id="box8" tabindex="1" class="snap box">Box 8</div> |
| <div id="box9" tabindex="1" class="snap box">Box 9</div> |
| </div> |
| </div> |
| <script> |
| window.onload = () => { |
| // This test sets up a 3x3 grid within scroller: |
| // ------------------------- |
| // | Box 1 | Box 2 | Box 3 | |
| // ------------------------ |
| // | Box 4 | Box 5 | Box 6 | |
| // ------------------------- |
| // | Box 7 | Box 8 | Box 9 | |
| // ------------------------- |
| const scroller = document.getElementById("scroller"); |
| const boxes = document.querySelectorAll(".snap.box"); |
| function box(n) { |
| return boxes[n - 1]; |
| } |
| |
| promise_test(async (t) => { |
| await waitForCompositorCommit(); |
| |
| await runScrollSnapSelectionVerificationTest(t, scroller, |
| /*aligned_elements_x=*/[], |
| /*aligned_elements_y=*/[box(1), box(2), box(3)], |
| /*axis=*/ "y", |
| /*expected_target_x=*/null, |
| /*expected_target_y=*/box(1)); |
| |
| await runScrollSnapSelectionVerificationTest(t, scroller, |
| /*aligned_elements_x=*/[], |
| /*aligned_elements_y=*/[box(4), box(5), box(6)], |
| /*axis=*/ "y", |
| /*expected_target_x=*/null, |
| /*expected_target_y=*/box(4)); |
| |
| await runScrollSnapSelectionVerificationTest(t, scroller, |
| /*aligned_elements_x=*/[], |
| /*aligned_elements_y=*/[box(7), box(8), box(9)], |
| /*axis=*/"y", |
| /*expected_target_x=*/null, |
| /*expected_target_y=*/box(7)); |
| |
| await runScrollSnapSelectionVerificationTest(t, scroller, |
| /*aligned_elements_x=*/[box(1), box(4), box(7)], |
| /*aligned_elements_y=*/[], |
| /*axis=*/"x", |
| /*expected_target_x=*/box(1)); |
| |
| await runScrollSnapSelectionVerificationTest(t, scroller, |
| /*aligned_elements_x=*/[box(2), box(5), box(8)], |
| /*aligned_elements_y=*/[], |
| /*axis=*/"x", |
| /*expected_target_x=*/box(2)); |
| |
| await runScrollSnapSelectionVerificationTest(t, scroller, |
| /*aligned_elements_x=*/[box(3), box(6), box(9)], |
| /*aligned_elements_y=*/[], |
| /*axis=*/"x", |
| /*expected_target_x=*/box(3)); |
| |
| await runScrollSnapSelectionVerificationTest(t, scroller, |
| /*aligned_elements_x=*/[box(2), box(5), box(8)], |
| /*aligned_elements_y=*/[box(4), box(5), box(6)], |
| /*axis=*/"both", |
| /*expected_target_x=*/box(5), |
| /*expected_target_y=*/box(5)); |
| }, "scroller prefers target aligned in both axes."); |
| |
| promise_test(async (t) => { |
| const box7 = box(7), box8 = box(8), box9 = box(9); |
| const initial_box8_top = box8.offsetTop; |
| t.add_cleanup(() => { |
| box8.style.top = `${initial_box8_top}px`; |
| }); |
| |
| // Move box 8 below box7 and box9. |
| box8.style.top = `${2 * box8.offsetTop}px`; |
| |
| // Snap to box8. |
| scroller.scrollTop = box8.offsetTop; |
| |
| // Test that if box7 and box9 are also shifted to align with box7, |
| // box8 is still treated as the selected snap target despite box7 being |
| // aligned on both axes. |
| runLayoutSnapSeletionVerificationTest(t, scroller, [box7, box9], |
| box8, "y"); |
| }, "scroller follows selected snap target after layout shift, " + |
| "regardless of common snap area."); |
| } |
| </script> |
| </body> |
| </html> |
