multiple-style-containers-comma-separated-queries.html (1536B)
1 <!DOCTYPE html> 2 <title>@container: multiple style containers - comma separated queries</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 #combined { 9 container-type: inline-size; 10 --foo: qux; 11 } 12 #outer { 13 container-name: --container; 14 --foo: bar; 15 } 16 #inner { 17 --foo: baz; 18 } 19 #target { 20 --match: no; 21 --match-combined: no; 22 } 23 24 @container style(--foo: bar), --container style(--foo: bar) { 25 #target { --match: yes; } 26 } 27 @container style(--foo: bar) { 28 #target { --match: no-way; } 29 } 30 31 @container style(--foo: qux), (inline-size) and style(--foo: qux) { 32 #target { --match-combined: yes; } 33 } 34 @container style(--foo: qux) { 35 #target { --match-combined: no-way; } 36 } 37 </style> 38 <div id="combined"> 39 <div id="outer"> 40 <div id="inner"> 41 <div id="target"></div> 42 </div> 43 </div> 44 </div> 45 <script> 46 setup(() => { 47 assert_implements_style_container_queries(); 48 assert_implements_size_container_queries(); 49 }); 50 51 test(() => { 52 assert_equals(getComputedStyle(target).getPropertyValue("--match"), "yes"); 53 }, "Should match the named outer container for --foo:bar"); 54 55 test(() => { 56 assert_equals(getComputedStyle(target).getPropertyValue("--match-combined"), "yes"); 57 }, "Match the #combined container for --foo:qux which is also a size container"); 58 </script>