Source code
Revision control
Copy as Markdown
Other Tools
Test Info:
- This WPT test may be referenced by the following Test IDs:
- /css/css-conditional/container-queries/scroll-state/scroll-state-initially-scrollable.html - WPT Dashboard Interop Dashboard
<!DOCTYPE html>
<title>@container: scroll-state(scrollable) matching for initial rendering</title>
<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>