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
65 lines
1.9 KiB
HTML
65 lines
1.9 KiB
HTML
<!DOCTYPE html>
|
|
<title>@container: query container name, no query part</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>
|
|
#inner { container-name: --foo }
|
|
#outer { container-name: --bar }
|
|
#target {
|
|
--match-foo: no;
|
|
--match-bar: no;
|
|
--match-baz: no;
|
|
}
|
|
@container --foo { #target { --match-foo: yes; } }
|
|
@container --bar { #target { --match-bar: yes; } }
|
|
@container --baz { #target { --match-baz: yes; } }
|
|
</style>
|
|
<div id="outer">
|
|
<div id="inner">
|
|
<div id="target"></div>
|
|
</div>
|
|
</div>
|
|
<script>
|
|
test(() => {
|
|
assert_equals(getComputedStyle(target).getPropertyValue("--match-foo"), "yes");
|
|
}, "match closest named container");
|
|
|
|
test(() => {
|
|
assert_equals(getComputedStyle(target).getPropertyValue("--match-bar"), "yes");
|
|
}, "match ancestor named container");
|
|
|
|
test(() => {
|
|
assert_equals(getComputedStyle(target).getPropertyValue("--match-baz"), "no");
|
|
}, "no match for unused container name");
|
|
</script>
|
|
|
|
<style>
|
|
@container --in-shadow {
|
|
#slotted { --match-in-shadow: yes; }
|
|
}
|
|
</style>
|
|
<div id="host" style="container-name: --for-host">
|
|
<template shadowrootmode="open">
|
|
<style>
|
|
@container --for-host {
|
|
#in-shadow { --match-for-host: yes; }
|
|
}
|
|
</style>
|
|
<div style="container-name: --in-shadow">
|
|
<div id="in-shadow"></div>
|
|
<slot></slot>
|
|
</div>
|
|
</template>
|
|
<div id="slotted"></div>
|
|
</div>
|
|
<script>
|
|
test(() => {
|
|
assert_equals(getComputedStyle(slotted).getPropertyValue("--match-in-shadow"), "yes");
|
|
}, "match named container in shadow");
|
|
|
|
test(() => {
|
|
assert_equals(getComputedStyle(host.shadowRoot.querySelector("#in-shadow")).getPropertyValue("--match-for-host"), "yes");
|
|
}, "match named container in outer scope");
|
|
</script>
|