1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
|
<!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>
|
