prefer-common-to-both-axes.html (7056B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <link rel="help" href="https://drafts.csswg.org/css-scroll-snap"/> 5 <script src="/resources/testharness.js"></script> 6 <script src="/resources/testharnessreport.js"></script> 7 <script src="/dom/events/scrolling/scroll_support.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="resources/common.js" ></script> 12 </head> 13 <body> 14 <style> 15 .scroller { 16 overflow: scroll; 17 width: 350px; 18 height: 350px; 19 border: solid 1px black; 20 scroll-snap-type: both mandatory; 21 position: relative; 22 resize: both; 23 } 24 .large-space { 25 height: 300vh; 26 width: 300vw; 27 position: absolute; 28 } 29 .snap { 30 scroll-snap-align: start; 31 } 32 .box { 33 width: 100px; 34 height: 100px; 35 background-color: green; 36 position: absolute; 37 } 38 .leftcol { 39 left: 110px; 40 } 41 .midcol { 42 left: 220px; 43 } 44 .rightcol { 45 left: 330px; 46 } 47 .toprow { 48 top: 110px; 49 } 50 .midrow { 51 top: 220px; 52 } 53 .bottomrow { 54 top: 330px; 55 } 56 .placeholder { 57 position: absolute; 58 top: 0px; 59 left: 0px; 60 width: 10px; 61 height: 10px; 62 background-color: black; 63 scroll-snap-align: start; 64 } 65 </style> 66 <div class="scroller" id="scroller"> 67 <div class="large-space"><div> 68 <div class="placeholder"></div> 69 <div id="box1" class="leftcol toprow snap box">Box 1</div> 70 <div id="box2" class="midcol toprow snap box">Box 2</div> 71 <div id="box3" class="rightcol toprow snap box">Box 3</div> 72 <div id="box4" class="leftcol midrow snap box">Box 4</div> 73 <div id="box5" class="midcol midrow snap box">Box 5</div> 74 <div id="box6" class="rightcol midrow snap box">Box 6</div> 75 <div id="box7" class="leftcol bottomrow snap box">Box 7</div> 76 <div id="box8" class="midcol bottomrow snap box">Box 8</div> 77 <div id="box9" class="rightcol bottomrow snap box">Box 9</div> 78 </div> 79 <script> 80 window.onload = () => { 81 // This test sets up a 3x3 grid within scroller: 82 // ------------------------- 83 // | Box 1 | Box 2 | Box 3 | 84 // ------------------------ 85 // | Box 4 | Box 5 | Box 6 | 86 // ------------------------- 87 // | Box 7 | Box 8 | Box 9 | 88 // ------------------------- 89 const scroller = document.getElementById("scroller"); 90 const boxes = document.querySelectorAll(".snap.box"); 91 function box(n) { 92 return boxes[n - 1]; 93 } 94 95 promise_test(async (t) => { 96 await waitForCompositorCommit(); 97 98 await runScrollSnapSelectionVerificationTest(t, scroller, 99 /*aligned_elements_x=*/[box(1), box(4), box(7)], 100 /*aligned_elements_y=*/[box(1), box(2), box(3)], 101 /*axis=*/ "both", 102 /*expected_target_x=*/box(1), 103 /*expected_target_y=*/box(1)); 104 105 await runScrollSnapSelectionVerificationTest(t, scroller, 106 /*aligned_elements_x=*/[box(1), box(4), box(7)], 107 /*aligned_elements_y=*/[box(4), box(5), box(6)], 108 /*axis=*/"both", 109 /*expected_target_x=*/box(4), 110 /*expected_target_y=*/box(4)); 111 112 await runScrollSnapSelectionVerificationTest(t, scroller, 113 /*aligned_elements_x=*/[box(1), box(4), box(7)], 114 /*aligned_elements_y=*/[box(7), box(8), box(9)], 115 /*axis=*/"both", 116 /*expected_target_x=*/box(7), 117 /*expected_target_y=*/box(7)); 118 119 await runScrollSnapSelectionVerificationTest(t, scroller, 120 /*aligned_elements_x=*/[box(2), box(5), box(8)], 121 /*aligned_elements_y=*/[box(1), box(2), box(3)], 122 /*axis=*/ "both", 123 /*expected_target_x=*/box(2), 124 /*expected_target_y=*/box(2)); 125 126 await runScrollSnapSelectionVerificationTest(t, scroller, 127 /*aligned_elements_x=*/[box(2), box(5), box(8)], 128 /*aligned_elements_y=*/[box(4), box(5), box(6)], 129 /*axis=*/"both", 130 /*expected_target_x=*/box(5), 131 /*expected_target_y=*/box(5)); 132 133 await runScrollSnapSelectionVerificationTest(t, scroller, 134 /*aligned_elements_x=*/[box(2), box(5), box(8)], 135 /*aligned_elements_y=*/[box(7), box(8), box(9)], 136 /*axis=*/"both", 137 /*expected_target_x=*/box(8), 138 /*expected_target_y=*/box(8)); 139 140 await runScrollSnapSelectionVerificationTest(t, scroller, 141 /*aligned_elements_x=*/[box(3), box(6), box(9)], 142 /*aligned_elements_y=*/[box(1), box(2), box(3)], 143 /*axis=*/ "both", 144 /*expected_target_x=*/box(3), 145 /*expected_target_y=*/box(3)); 146 147 await runScrollSnapSelectionVerificationTest(t, scroller, 148 /*aligned_elements_x=*/[box(3), box(6), box(9)], 149 /*aligned_elements_y=*/[box(4), box(5), box(6)], 150 /*axis=*/"both", 151 /*expected_target_x=*/box(6), 152 /*expected_target_y=*/box(6)); 153 }, "scroller prefers target aligned in both axes."); 154 155 promise_test(async (t) => { 156 const box7 = box(7), box8 = box(8), box9 = box(9); 157 const initial_box8_top = box8.offsetTop; 158 t.add_cleanup(() => { 159 box8.style.top = `${initial_box8_top}px`; 160 }); 161 162 // Snap to box7's row and column. 163 scroller.scrollTo(box7.offsetLeft, box7.offsetTop); 164 165 // Move box 8 below box7 and box9. 166 box8.style.top = `${box8.offsetTop + 50}px`; 167 168 // Snap to box8. 169 scroller.scrollTop = box8.offsetTop; 170 171 // Test that if box7 and box9 are also shifted to align with box8, 172 // box8 is still treated as the selected snap target despite box7 being 173 // aligned on both axes. 174 runLayoutSnapSeletionVerificationTest(t, scroller, [box7, box9], 175 box8, "y"); 176 }, "scroller follows selected snap target after layout shift, " + 177 "regardless of common snap area."); 178 } 179 </script> 180 </body> 181 </html>