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
37 lines
1.1 KiB
HTML
37 lines
1.1 KiB
HTML
<!DOCTYPE html>
|
|
<title>@container: comma-separated with general-enclosed and invalid queries</title>
|
|
<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 {
|
|
container: --container / inline-size;
|
|
width: 500px;
|
|
}
|
|
#container { --match: no; }
|
|
@container foo(bar), not (unknown: feature), --container (width > 400px) {
|
|
#t1 { --match: yes; }
|
|
}
|
|
@container #invalid, --container (width > 400px) {
|
|
#t2 { --match: yes; }
|
|
}
|
|
</style>
|
|
<div id="container">
|
|
<div>
|
|
<div id="t1"></div>
|
|
<div id="t2"></div>
|
|
</div>
|
|
</div>
|
|
<script>
|
|
setup(() => assert_implements_size_container_queries());
|
|
|
|
test(() => {
|
|
assert_equals(getComputedStyle(t1).getPropertyValue("--match"), "yes");
|
|
}, "Should allow <general-enclosed> but match the valid query");
|
|
|
|
test(() => {
|
|
assert_equals(getComputedStyle(t2).getPropertyValue("--match"), "no");
|
|
}, "Invalid queries, not matching <general-enclosed>, makes the whole rule invalid");
|
|
</script>
|