blob: c0e0afb23f143e157b163cd28af96db62496b457 (
plain)
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
83
84
85
86
87
88
89
|
<!DOCTYPE html>
<meta charset="utf-8">
<title>Tests anchor positioned scrolling with relatively positioned inline containers</title>
<link rel="help" href="https://drafts4.csswg.org/css-anchor-position-1/#scroll">
<link rel="author" href="mailto:xiaochengh@chromium.org">
<link rel="stylesheet" href="/fonts/ahem.css">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="support/test-common.js"></script>
<style>
body {
margin: 0;
}
.cb {
position: relative;
font: 20px/1 Ahem, monospace;
}
.scroller {
display: inline-block;
overflow-x: scroll;
width: 160px;
white-space: nowrap;
}
.anchor {
anchor-name: --a;
color: orange;
}
.target {
position: absolute;
position-anchor: --a;
top: anchor(--a bottom);
left: anchor(--a left);
color: lime;
}
</style>
<div>
<span class="cb">
<span class="scroller" id="scroller1">
before
<span class="anchor" id="anchor1">anchor</span>
after
</span>
<span class="target" id="target1">target</span>
</span>
<br>
<br>
<span class="cb">
<span class="scroller" id="scroller2">
before
<span class="anchor" id="anchor2">anchor</span>
after
</span>
<span class="target" id="target2">target</span>
</span>
</div>
<script>
promise_test(async () => {
await waitUntilNextAnimationFrame();
await waitUntilNextAnimationFrame();
assert_equals(target1.getBoundingClientRect().left, 140);
assert_equals(target2.getBoundingClientRect().left, 140);
}, 'Initial position of the targets');
promise_test(async () => {
scroller1.scrollLeft = 20;
await waitUntilNextAnimationFrame();
await waitUntilNextAnimationFrame();
assert_equals(target1.getBoundingClientRect().left, 120);
}, '#target1 should scroll with #anchor1');
promise_test(async () => {
scroller2.scrollLeft = 40;
await waitUntilNextAnimationFrame();
await waitUntilNextAnimationFrame();
assert_equals(target2.getBoundingClientRect().left, 100);
}, '#target2 should scroll with #anchor2');
</script>
|
