query-container-name.html (1163B)
1 <!DOCTYPE html> 2 <title>@container: query container name, no query part</title> 3 <link rel="help" href="https://drafts.csswg.org/css-conditional-5/#container-rule"> 4 <script src="/resources/testharness.js"></script> 5 <script src="/resources/testharnessreport.js"></script> 6 <script src="support/cq-testcommon.js"></script> 7 <style> 8 #inner { container-name: --foo } 9 #outer { container-name: --bar } 10 #target { 11 --match-foo: no; 12 --match-bar: no; 13 --match-baz: no; 14 } 15 @container --foo { #target { --match-foo: yes; } } 16 @container --bar { #target { --match-bar: yes; } } 17 @container --baz { #target { --match-baz: yes; } } 18 </style> 19 <div id="outer"> 20 <div id="inner"> 21 <div id="target"></div> 22 </div> 23 </div> 24 <script> 25 test(() => { 26 assert_equals(getComputedStyle(target).getPropertyValue("--match-foo"), "yes"); 27 }, "match closest named container"); 28 29 test(() => { 30 assert_equals(getComputedStyle(target).getPropertyValue("--match-bar"), "yes"); 31 }, "match ancestor named container"); 32 33 test(() => { 34 assert_equals(getComputedStyle(target).getPropertyValue("--match-baz"), "no"); 35 }, "no match for unused container name"); 36 </script>