37 lines
1.2 KiB
HTML
37 lines
1.2 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>
|
|
<script src="support/cq-testcommon.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>
|
|
</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>
|