resnap-to-focused.html (2168B)
1 <!doctype html> 2 <title>Resnap to focused element after relayout</title> 3 <script src="/resources/testharness.js"></script> 4 <script src="/resources/testharnessreport.js"></script> 5 <style> 6 7 #snapper { 8 counter-reset: child 0; 9 width: 200px; 10 scroll-snap-type: block mandatory; 11 overflow:hidden; 12 height: 100px; 13 } 14 .child { 15 width: 100px; 16 height: 100px; 17 background:red; 18 text-align: center; 19 box-sizing: border-box; 20 counter-increment: child; 21 float: left; 22 } 23 .child.f { 24 background: green; 25 scroll-snap-align: center; 26 } 27 .child::before { 28 content: counter(child); 29 } 30 31 </style> 32 33 <link rel=author title="Tab Atkins-Bittner" href="https://www.xanthir.com/contact/"> 34 <link rel="help" href="https://drafts.csswg.org/css-scroll-snap/#re-snap"> 35 <!-- 36 When re-snapping after a layout change, 37 if multiple elements were capable of being the snap target previously, 38 and one of them is focused, 39 you must resnap to the focused one. 40 --> 41 <div id=snapper> 42 <div class="child no-snap" tabindex=-1></div> 43 <div class=child></div> 44 <div class="child f" tabindex=-1></div> 45 <div class="child f" tabindex=-1></div> 46 <div class=child></div> 47 <div class=child></div> 48 </div> 49 50 <script> 51 52 var container = document.querySelector("#snapper"); 53 var [one,two] = document.querySelectorAll(".child.f"); 54 var unsnappable = document.querySelector(".child.no-snap"); 55 56 async_test(t=>{ 57 requestAnimationFrame(()=>{ 58 testSnap(t, one, 3); 59 requestAnimationFrame(()=>{ 60 testSnap(t, two, 4); 61 requestAnimationFrame(()=>{ 62 testSnap(t, one, 3); 63 t.done(); 64 }); 65 }); 66 }); 67 }); 68 69 function testSnap(t, child, expectedRow) { 70 t.step(()=>{ 71 unsnappable.focus(); 72 container.style.width = "200px"; 73 var startingRow = container.scrollTop/100 + 1; 74 assert_equals(startingRow, 2, "Initially snapped to row 2"); 75 child.focus(); 76 container.style.width = "100px"; 77 var endingRow = container.scrollTop/100 + 1; 78 assert_equals(endingRow, expectedRow, `After resize, should snap to row ${expectedRow}.`); 79 }); 80 } 81 82 </script>