pseudo-elements-001.html (1965B)
1 <!DOCTYPE html> 2 <title>CSS Container Queries Test: Container for elements with 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 :root { 9 color: black; 10 } 11 12 .container { 13 container-type: size; 14 width: 200px; 15 height: 40px; 16 } 17 18 @container (min-width: 300px) { 19 #container1 div::before { content: "before"; } 20 #container1 div::after { content: "after"; } 21 #container2 li::marker { color: green; } 22 } 23 </style> 24 <main id=container1 class=container> 25 <div>test</div> 26 </main> 27 <main id=container2 class=container> 28 <ol> 29 <li>One</li> 30 </ol> 31 </main> 32 <script> 33 setup(() => assert_implements_size_container_queries()); 34 35 test(function() { 36 let div = document.querySelector('#container1 > div'); 37 assert_equals(getComputedStyle(div, '::before').content, 'none'); 38 assert_equals(getComputedStyle(div, '::after').content, 'none'); 39 40 container1.style.width = '300px'; 41 assert_equals(getComputedStyle(div, '::before').content, '"before"'); 42 assert_equals(getComputedStyle(div, '::after').content, '"after"'); 43 44 container1.style = ''; 45 assert_equals(getComputedStyle(div, '::before').content, 'none'); 46 assert_equals(getComputedStyle(div, '::after').content, 'none'); 47 }, 'Pseudo-elements ::before and ::after respond to container size changes'); 48 49 test(function() { 50 let li = document.querySelector('#container2 li'); 51 assert_equals(getComputedStyle(li, '::marker').color, 'rgb(0, 0, 0)'); 52 53 container2.style.width = '300px'; 54 assert_equals(getComputedStyle(li, '::marker').color, 'rgb(0, 128, 0)'); 55 56 container2.style = ''; 57 assert_equals(getComputedStyle(li, '::marker').color, 'rgb(0, 0, 0)'); 58 }, 'Pseudo-element ::marker responds to container size changes'); 59 </script>