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
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
|
<!DOCTYPE html>
<title>@container: scroll-state(scrollable) matching for initial rendering</title>
<link rel="help" href="https://drafts.csswg.org/css-conditional-5/#scrollable">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/css/css-conditional/container-queries/support/cq-testcommon.js"></script>
<script src="/css/css-transitions/support/helper.js"></script>
<style>
.scroller {
width: 200px;
height: 200px;
container-type: scroll-state;
}
.auto {
overflow-y: auto;
}
.scroll {
overflow-y: scroll;
}
.clip {
overflow-y: clip;
}
.scrollable::after {
content: " ";
display: block;
height: 10000px;
}
span {
--top: no;
--bottom: no;
--none: no;
}
@container scroll-state(scrollable: top) {
span { --top: yes; }
}
@container scroll-state(scrollable: bottom) {
span { --bottom: yes; }
}
@container scroll-state(scrollable: none) {
span { --none: yes; }
}
</style>
<div class="scroller">
<span id="t1"></span>
</div>
<div class="scroller auto">
<span id="t2"></span>
</div>
<div class="scroller scroll">
<span id="t3"></span>
</div>
<div class="scroller clip">
<span id="t4"></span>
</div>
<div class="scroller scrollable">
<span id="t5"></span>
</div>
<div class="scroller auto scrollable">
<span id="t6"></span>
</div>
<div class="scroller scroll scrollable">
<span id="t7"></span>
</div>
<div class="scroller clip scrollable">
<span id="t8"></span>
</div>
<script>
setup(() => assert_implements_scroll_state_container_queries());
promise_test(async t => {
await waitForAnimationFrames(2);
assert_equals(getComputedStyle(t1).getPropertyValue("--top"), "no");
assert_equals(getComputedStyle(t1).getPropertyValue("--bottom"), "no");
assert_equals(getComputedStyle(t1).getPropertyValue("--none"), "yes");
}, "overflow:visible, no scrollable content - no matches");
promise_test(async t => {
assert_equals(getComputedStyle(t2).getPropertyValue("--top"), "no");
assert_equals(getComputedStyle(t2).getPropertyValue("--bottom"), "no");
assert_equals(getComputedStyle(t2).getPropertyValue("--none"), "yes");
}, "overflow:auto, no scrollable content - no matches");
promise_test(async t => {
assert_equals(getComputedStyle(t3).getPropertyValue("--top"), "no");
assert_equals(getComputedStyle(t3).getPropertyValue("--bottom"), "no");
assert_equals(getComputedStyle(t3).getPropertyValue("--none"), "yes");
}, "overflow:scroll, no scrollable content - no matches");
promise_test(async t => {
assert_equals(getComputedStyle(t4).getPropertyValue("--top"), "no");
assert_equals(getComputedStyle(t4).getPropertyValue("--bottom"), "no");
assert_equals(getComputedStyle(t4).getPropertyValue("--none"), "yes");
}, "overflow:clip, no scrollable content - no matches");
promise_test(async t => {
assert_equals(getComputedStyle(t5).getPropertyValue("--top"), "no");
assert_equals(getComputedStyle(t5).getPropertyValue("--bottom"), "no");
assert_equals(getComputedStyle(t5).getPropertyValue("--none"), "yes");
}, "overflow:visible, scrollable content - no matches");
promise_test(async t => {
assert_equals(getComputedStyle(t6).getPropertyValue("--top"), "no");
assert_equals(getComputedStyle(t6).getPropertyValue("--bottom"), "yes");
assert_equals(getComputedStyle(t6).getPropertyValue("--none"), "no");
}, "overflow:auto, scrollable content - matches scrollable:bottom");
promise_test(async t => {
assert_equals(getComputedStyle(t7).getPropertyValue("--top"), "no");
assert_equals(getComputedStyle(t7).getPropertyValue("--bottom"), "yes");
assert_equals(getComputedStyle(t7).getPropertyValue("--none"), "no");
}, "overflow:scroll, scrollable content - matches scrollable:bottom");
promise_test(async t => {
assert_equals(getComputedStyle(t8).getPropertyValue("--top"), "no");
assert_equals(getComputedStyle(t8).getPropertyValue("--bottom"), "no");
assert_equals(getComputedStyle(t8).getPropertyValue("--none"), "yes");
}, "overflow:clip, scrollable content - no matches");
</script>
|
