container-selection-unknown-features.html (1299B)
1 <!DOCTYPE html> 2 <title>@container: selection using name and implicit selection</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 #container { 9 container-type: size; 10 width: 200px; 11 --foo: bar; 12 } 13 @container (width > 0px) { 14 div { color: green } 15 } 16 @container (width > 0px) or (foo: bar) { 17 #t1 { color: red } 18 } 19 @container (width > 0px) or foo(bar) { 20 #t2 { color: red } 21 } 22 @container style(--foo: bar) or (foo: bar) { 23 #t3 { color: red } 24 } 25 </style> 26 <div id="container"> 27 <div id="t1">Green</div> 28 <div id="t2">Green</div> 29 <div id="t3">Green</div> 30 <div id="t4">Green</div> 31 </div> 32 <script> 33 setup(() => { 34 assert_implements_size_container_queries(); 35 assert_implements_style_container_queries(); 36 }); 37 38 const green = "rgb(0, 128, 0)"; 39 test(() => { assert_equals(getComputedStyle(t1).color, green); }, "width query with (foo: bar)"); 40 test(() => { assert_equals(getComputedStyle(t2).color, green); }, "width query with foo(bar)"); 41 test(() => { assert_equals(getComputedStyle(t3).color, green); }, "style query with (foo: bar)"); 42 </script>