Rune Lillesveen
f08d8db7e7
Automatic update from web-platform-tests Invalidate style for container-name changes with container-type:none Style queries and name-only container queries match a named container even if its container-type is 'none'. Check container-name changes for invalidation before relying on container-type being set. Add dynamic changes tests for name-only container queries. Bug: 496700746, 40287550 Change-Id: Ic5ed5512f31d0bce4daf9ed5063f0a7b163cf8a5 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/7706063 Commit-Queue: Rune Lillesveen <futhark@chromium.org> Reviewed-by: Morten Stenshorne <mstensho@chromium.org> Cr-Commit-Position: refs/heads/main@{#1607027} -- wpt-commits: f543fd936b45deef5f5ff12d11bb329073de91ee wpt-pr: 58857
38 lines
1.5 KiB
HTML
38 lines
1.5 KiB
HTML
<!DOCTYPE html>
|
|
<title>@container: query container name, dynamic changes</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>
|
|
<style>
|
|
.container { container-name: --foo; }
|
|
#inner { --match-inner: no; }
|
|
#outer { --match-outer: no; }
|
|
@container --foo { #inner { --match-inner: yes; } }
|
|
@container --foo { #outer { --match-outer: yes; } }
|
|
</style>
|
|
<div id="couter" class="container">
|
|
<div id="outer">
|
|
<div id="cinner">
|
|
<div id="inner"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<script>
|
|
test(() => {
|
|
assert_equals(getComputedStyle(inner).getPropertyValue("--match-inner"), "yes", "#inner target");
|
|
assert_equals(getComputedStyle(outer).getPropertyValue("--match-outer"), "yes", "#outer target");
|
|
}, "Initially selects #couter as --foo container, both match");
|
|
|
|
test(() => {
|
|
couter.classList.toggle("container");
|
|
assert_equals(getComputedStyle(inner).getPropertyValue("--match-inner"), "no", "#inner target");
|
|
assert_equals(getComputedStyle(outer).getPropertyValue("--match-outer"), "no", "#outer target");
|
|
}, "Remove #couter --foo container-name, none match");
|
|
|
|
test(() => {
|
|
cinner.classList.toggle("container");
|
|
assert_equals(getComputedStyle(inner).getPropertyValue("--match-inner"), "yes", "#inner target");
|
|
assert_equals(getComputedStyle(outer).getPropertyValue("--match-outer"), "no", "#outer target");
|
|
}, "Make #cinner a --foo container, #inner starts matching");
|
|
</script>
|