| <!doctype html> |
| <title>Resnap to focused element after relayout</title> |
| <script src="/resources/testharness.js"></script> |
| <script src="/resources/testharnessreport.js"></script> |
| <style> |
| |
| #snapper { |
| counter-reset: child 0; |
| width: 200px; |
| scroll-snap-type: block mandatory; |
| overflow:hidden; |
| height: 100px; |
| } |
| .child { |
| width: 100px; |
| height: 100px; |
| background:red; |
| text-align: center; |
| box-sizing: border-box; |
| counter-increment: child; |
| float: left; |
| } |
| .child.f { |
| background: green; |
| scroll-snap-align: center; |
| } |
| .child::before { |
| content: counter(child); |
| } |
| |
| </style> |
| |
| <link rel=author title="Tab Atkins-Bittner" href="https://www.xanthir.com/contact/"> |
| <link rel="help" href="https://drafts.csswg.org/css-scroll-snap/#re-snap"> |
| <!-- |
| When re-snapping after a layout change, |
| if multiple elements were capable of being the snap target previously, |
| and one of them is focused, |
| you must resnap to the focused one. |
| --> |
| <div id=snapper> |
| <div class="child no-snap" tabindex=-1></div> |
| <div class=child></div> |
| <div class="child f" tabindex=-1></div> |
| <div class="child f" tabindex=-1></div> |
| <div class=child></div> |
| <div class=child></div> |
| </div> |
| |
| <script> |
| |
| var container = document.querySelector("#snapper"); |
| var [one,two] = document.querySelectorAll(".child.f"); |
| var unsnappable = document.querySelector(".child.no-snap"); |
| |
| async_test(t=>{ |
| requestAnimationFrame(()=>{ |
| testSnap(t, one, 3); |
| requestAnimationFrame(()=>{ |
| testSnap(t, two, 4); |
| requestAnimationFrame(()=>{ |
| testSnap(t, one, 3); |
| t.done(); |
| }); |
| }); |
| }); |
| }); |
| |
| function testSnap(t, child, expectedRow) { |
| t.step(()=>{ |
| unsnappable.focus(); |
| container.style.width = "200px"; |
| var startingRow = container.scrollTop/100 + 1; |
| window.requestAnimationFrame(t.step_func_done(() => { |
| assert_equals(startingRow, 2, "Initially snapped to row 2"); |
| })); |
| child.focus(); |
| container.style.width = "100px"; |
| var endingRow = container.scrollTop/100 + 1; |
| window.requestAnimationFrame(t.step_func_done(() => { |
| assert_equals(endingRow, expectedRow, `After resize, should snap to row ${expectedRow}.`); |
| })); |
| }); |
| } |
| |
| </script> |