prefer-focused-element.html (4898B)
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 position: relative; 18 height: 400px; 19 width: 400px; 20 border:solid 1px black; 21 scroll-snap-type: y mandatory; 22 } 23 .no-snap { scroll-snap-align: none } 24 .scroller div:focus { 25 border: solid 1px red; 26 } 27 .large-space { 28 height: 300vh; 29 width: 300vw; 30 } 31 .target { 32 scroll-snap-align: start; 33 position: absolute; 34 width: 100px; 35 height: 100px; 36 border: solid 1px black; 37 } 38 .top { 39 top: 0px; 40 } 41 .left { 42 left: 0px; 43 } 44 .right { 45 left: 200px; 46 } 47 .bottom { 48 top: 200px; 49 } 50 </style> 51 <div id="scroller" class="scroller"> 52 <div class="large-space no-snap" tabindex="1" id="space"></div> 53 <div id="topleft" tabindex="1" class="top left target">top left</div> 54 <div id="topright" tabindex="1" class="top right target">top right</div> 55 <div id="bottomleft" tabindex="1" class="bottom left target">bottom left</div> 56 <div id="bottomright" tabindex="1" class="bottom right target">bottom right</div> 57 </div> 58 <script> 59 window.onload = () => { 60 const bottomright = document.getElementById("bottomright"); 61 const bottomleft = document.getElementById("bottomleft"); 62 const scroller = document.getElementById("scroller"); 63 64 async function commonInitialization() { 65 await waitForCompositorCommit(); 66 assert_equals(scroller.scrollTop, 0, "snapped to top row"); 67 } 68 69 promise_test(async (t) => { 70 await commonInitialization(); 71 72 focusAndAssert(bottomright); 73 await runScrollSnapSelectionVerificationTest(t, scroller, 74 /*aligned_elements_x=*/[], 75 /*aligned_elements_y=*/[bottomright, bottomleft], 76 /*axis=*/"y", 77 /*expected_target_x=*/null, 78 /*expected_target_y=*/bottomright); 79 80 focusAndAssert(bottomleft); 81 await runScrollSnapSelectionVerificationTest(t, scroller, 82 /*aligned_elements_x=*/[], 83 /*aligned_elements_y=*/[bottomright, bottomleft], 84 /*axis=*/"y", 85 /*expected_target_x=*/null, 86 /*expected_target_y=*/bottomleft); 87 }, "scroller selects focused target from aligned choices on snap"); 88 89 promise_test(async (t) => { 90 t.add_cleanup(() => { 91 bottomright.style.left = "200px"; 92 }) 93 await commonInitialization(); 94 95 // Move bottomright out of the snapport. 96 bottomright.style.left = "500px"; 97 98 // Set focus on bottomright without scrolling to it. 99 focusAndAssert(bottomright, true); 100 await runScrollSnapSelectionVerificationTest(t, scroller, 101 /*aligned_elements_x=*/[], 102 /*aligned_elements_y=*/[bottomright, bottomleft], 103 /*axis=*/"y", 104 /*expected_target_x=*/null, 105 /*expected_target_y=*/bottomleft); 106 }, "out-of-viewport focused element is not the selected snap target."); 107 108 promise_test(async(t) => { 109 t.add_cleanup(() => { 110 bottomleft.style.top = "200px"; 111 }); 112 await commonInitialization(); 113 114 // Set focus on bottomright without scrolling to it. 115 focusAndAssert(bottomright, true); 116 117 // Move bottomleft below bottomright. 118 bottomleft.style.top = "400px"; 119 120 // Snap to bottomleft. 121 scroller.scrollTop = bottomleft.offsetTop; 122 123 // Test that if bottomright is also shifted so that it is aligned with 124 // bottomleft, bottomleft remains the selected snap target, despite 125 // bottomright's having focus. 126 await runLayoutSnapSeletionVerificationTest(t, scroller, [bottomright], 127 bottomleft, "y"); 128 }, "scroller follows selected snap target through layout shift," + 129 "regardless of focus"); 130 131 } 132 </script> 133 </body> 134 </html>