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/comma-separated-invalidation.html - WPT Dashboard Interop Dashboard
<!DOCTYPE html>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="support/cq-testcommon.js"></script>
<style>
#container {
--match: no;
--container: yes;
}
@container style(--container: no), --container style(--container: yes) {
#t1 { --match: yes }
}
@container (height), (width > 0px) {
#t2 { --match: yes }
}
</style>
<div id="container">
<div id="t1"></div>
<div id="t2"></div>
</div>
<script>
setup(() => assert_implements_size_container_queries());
test(() => {
assert_equals(getComputedStyle(t1).getPropertyValue("--match"), "no");
assert_equals(getComputedStyle(t2).getPropertyValue("--match"), "no");
}, "Initially, no containers match");
test(() => {
container.style.containerName = "--container";
assert_equals(getComputedStyle(t1).getPropertyValue("--match"), "yes");
assert_equals(getComputedStyle(t2).getPropertyValue("--match"), "no");
}, "First @container rule matches after container-name change");
test(() => {
container.style.containerType = "inline-size";
assert_equals(getComputedStyle(t1).getPropertyValue("--match"), "yes");
assert_equals(getComputedStyle(t2).getPropertyValue("--match"), "yes");
}, "Second @container rule matches after container-type change");
</script>