prefer-focused-nested-containers.html (4226B)
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 .snap { 16 scroll-snap-align: start; 17 } 18 .placeholder { 19 height: 40%; 20 width: 40%; 21 position: absolute; 22 top: 0px; 23 border: solid 1px black; 24 } 25 .right { 26 left: 50%; 27 } 28 .container { 29 position: relative; 30 border: solid 1px blue; 31 overflow: scroll; 32 scroll-snap-type: y mandatory; 33 } 34 .bigcontainer { 35 height: 1000px; 36 width: 1000px; 37 } 38 .smallcontainer { 39 height: 400px; 40 width: 400px; 41 position: absolute; 42 border: solid 1px blue; 43 top: 500px; 44 overflow: scroll; 45 scroll-snap-type: y mandatory; 46 } 47 .large-space { 48 height: 300vh; 49 width: 300vw; 50 position: absolute; 51 } 52 .target { 53 top: 50%; 54 width: 40%; 55 height: 40%; 56 position: absolute; 57 border: solid 1px red; 58 } 59 .target:focus { 60 border:solid 2px green; 61 } 62 </style> 63 <div class="bigcontainer container" id="outercontainer"> 64 <div class="large-space"></div> 65 <div id="leftplaceholder" class="snap placeholder">LPH (outer)</div> 66 <div id="rightplaceholder" class="snap placeholder right">RPH (outer)</div> 67 <div id="leftcontainer" class="snap smallcontainer"> 68 <div class="large-space"></div> 69 <div class="snap placeholder"></div> 70 <div class="snap placeholder right"></div> 71 <div id="lefttarget1" tabindex="1" class="snap target"></div> 72 <div id="lefttarget2" tabindex="1" class="snap target right"></div> 73 </div> 74 <div id="rightcontainer" class="snap smallcontainer right"> 75 <div class="large-space"></div> 76 <div class="snap placeholder"></div> 77 <div class="snap placeholder right"></div> 78 <div id="righttarget1" tabindex="1" class="snap target"></div> 79 <div id="righttarget2" tabindex="1" class="snap target right"></div> 80 </div> 81 </div> 82 <script> 83 // This test verifies that a snap container (outer) which contains another 84 // snap container (inner) snaps with awareness of focus on children of the 85 // inner container, i.e. outer should prefer to select the snap area whose 86 // child has focus even if there is an intermediate snap container between 87 // the child and outer. 88 window.onload = () => { 89 const lefttarget1 = document.getElementById("lefttarget1"); 90 const righttarget1 = document.getElementById("righttarget1"); 91 const leftcontainer = document.getElementById("leftcontainer"); 92 const rightcontainer = document.getElementById("rightcontainer"); 93 const outercontainer = document.getElementById("outercontainer"); 94 95 promise_test(async (t) => { 96 await waitForCompositorCommit(); 97 98 focusAndAssert(lefttarget1, /*preventScroll=*/true); 99 await runScrollSnapSelectionVerificationTest(t, outercontainer, 100 /*aligned_elements_x=*/[], 101 /*aligned_elements_y=*/[leftcontainer, rightcontainer], 102 /*axis=*/"y", 103 /*expected_target_x=*/null, 104 /*expected_target_x=*/leftcontainer); 105 106 focusAndAssert(righttarget1, /*preventScroll=*/true); 107 await runScrollSnapSelectionVerificationTest(t, outercontainer, 108 /*aligned_elements_x=*/[], 109 /*aligned_elements_y=*/[leftcontainer, rightcontainer], 110 /*axis=*/"y", 111 /*expected_target_x=*/null, 112 /*expected_target_x=*/rightcontainer); 113 }, "Snap container prefers focused nested snap target."); 114 } 115 </script> 116 </body> 117 </html>