pseudo-elements-005.html (1507B)
1 <!doctype html> 2 <title>CSS Container Queries Test: Style container for pseudo elements</title> 3 <link rel="help" href="https://drafts.csswg.org/css-conditional-5/#query-container"> 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 #c1 { 9 --theme: green; 10 } 11 @container style(--theme: green) { 12 #c1::before { 13 content: ""; 14 color: green; 15 display: block; 16 height: 100px; 17 } 18 } 19 </style> 20 <div id="c1"></div> 21 <script> 22 setup(() => assert_implements_style_container_queries()); 23 24 test(() => { 25 let style = getComputedStyle(c1, "::before"); 26 assert_equals(style.color, "rgb(0, 128, 0)"); 27 assert_equals(style.height, "100px"); 28 }, "::before pseudo element querying style() of originating element"); 29 </script> 30 31 <style> 32 #c2 { 33 --theme: red; 34 } 35 #c2::before { color: red } 36 #c2.green { 37 --theme: green; 38 } 39 @container style(--theme: green) { 40 #c2::before { 41 content: ""; 42 color: green; 43 } 44 } 45 </style> 46 <div id="c2"></div> 47 <script> 48 test(() => { 49 let style = getComputedStyle(c2, "::before"); 50 assert_equals(style.color, "rgb(255, 0, 0)"); 51 }, "::before pseudo element not matching style()"); 52 53 test(() => { 54 c2.className = "green"; 55 let style = getComputedStyle(c2, "::before"); 56 assert_equals(style.color, "rgb(0, 128, 0)"); 57 }, "::before pseudo element matching style() query after class change"); 58 </script>