pseudo-elements-002.html (1189B)
1 <!DOCTYPE html> 2 <title>CSS Container Queries Test: Container for ::before/::after pseudo elements</title> 3 <link rel="help" href="https://drafts.csswg.org/css-conditional-5/#container-queries"> 4 <link rel="match" href="pseudo-elements-002-ref.html"> 5 <style> 6 .container { container-type: inline-size; } 7 8 @container (max-width: 100px) { #c1::before { content: "PASS" } } 9 @container (min-width: 150px) { #c1::before { content: "FAIL" } } 10 11 @container (max-width: 100px) { #c2::before { content: "PASS" } } 12 @container (min-width: 150px) { #c2::before { content: "FAIL" } } 13 14 @container (max-width: 100px) { #c3::after { content: "PASS" } } 15 @container (min-width: 150px) { #c3::after { content: "FAIL" } } 16 17 @container (max-width: 100px) { #c4::after { content: "PASS" } } 18 @container (min-width: 150px) { #c4::after { content: "FAIL" } } 19 </style> 20 <div id="c1" class="container" style="width:100px"></div> 21 <div id="c2" class="container" style="width:200px"></div> 22 <div id="c3" class="container" style="width:100px"></div> 23 <div id="c4" class="container" style="width:200px"></div> 24 <script> 25 document.body.offsetTop; 26 c2.style.width = "100px"; 27 c4.style.width = "100px"; 28 </script>