<!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;
assert_equals(startingRow, 2, "Initially snapped to row 2");
child.focus();
container.style.width = "100px";
var endingRow = container.scrollTop/100 + 1;
assert_equals(endingRow, expectedRow, `After resize, should snap to row ${expectedRow}.`);
});
}
</script>
Codebase Browser
chromium