Blink WPT Bot
82285166fc
Automatic update from web-platform-tests Add more tests for comma-separated @container queries (#59790) - Test that <general-enclosed> are allowed - Test that invalid syntax between commas does not allow later queries to match - Test that invalidation for container-name and container-type works for comma-separated queries Bug: 41491726 Change-Id: I2b3e3d19227b2d1bd5e63d8dbf746a082d1f7cc2 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/7832187 Commit-Queue: Rune Lillesveen <futhark@chromium.org> Reviewed-by: Anders Hartvoll Ruud <andruud@chromium.org> Cr-Commit-Position: refs/heads/main@{#1628490} Co-authored-by: Rune Lillesveen <futhark@chromium.org> -- wpt-commits: 89261b54fe236c7acff281ce73accb0dbe5ac206 wpt-pr: 59790
42 lines
1.4 KiB
HTML
42 lines
1.4 KiB
HTML
<!DOCTYPE html>
|
|
<link rel="help" href="https://drafts.csswg.org/css-conditional-5/#container-rule">
|
|
<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>
|