nested-supercedes-common-to-both-axes.html (2949B)
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: 450px; 18 height: 450px; 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: 200px; 34 height: 200px; 35 background-color: green; 36 position: absolute; 37 } 38 .inner { 39 width: 50px; 40 height: 50px; 41 background-color: yellow; 42 } 43 #box2 { 44 top: 0px; 45 left: 100px; 46 } 47 #box3 { 48 top: 100px; 49 left: 0px; 50 } 51 </style> 52 <div class="scroller" id="scroller"> 53 <div class="large-space"><div> 54 <div id="box1" class="snap box">Box 1</div> 55 <div id="box2" class="inner snap box">Box 2</div> 56 <div id="box3" class="inner snap box">Box 3</div> 57 </div> 58 <script> 59 window.onload = () => { 60 const scroller = document.getElementById("scroller"); 61 const boxes = document.querySelectorAll(".snap.box"); 62 function box(n) { 63 return boxes[n - 1]; 64 } 65 66 promise_test(async (t) => { 67 await waitForCompositorCommit(); 68 69 // Box 2 should be selected as the target in the y axis despite Box 1's 70 // being a common target in both axes because Box 2 is nested within 71 // Box 1. 72 await runScrollSnapSelectionVerificationTest(t, scroller, 73 /*aligned_elements_x=*/[], 74 /*aligned_elements_y=*/[box(1), box(2)], 75 /*axis=*/ "y", 76 /*expected_target_x=*/null, 77 /*expected_target_y=*/box(2)); 78 79 // Box 3 should be selected as the target in the x axis despite Box 1's 80 // being a common target in both axes because Box 3 is nested within 81 // Box 1. 82 await runScrollSnapSelectionVerificationTest(t, scroller, 83 /*aligned_elements_x=*/[box(1), box(3)], 84 /*aligned_elements_y=*/[], 85 /*axis=*/"x", 86 /*expected_target_x=*/box(3)); 87 }, "scroller prefers nested area over area aligned in both axes."); 88 } 89 </script> 90 </body> 91 </html>