pseudo-elements-002b.html (2500B)
1 <!DOCTYPE html> 2 <title>CSS Container Queries Test: Container for ::first-letter/::first-line pseudo elements</title> 3 <link rel="help" href="https://drafts.csswg.org/css-conditional-5/#container-queries"> 4 <link rel="match" href="pseudo-elements-002b-ref.html"> 5 <style> 6 .container { container-type: inline-size; } 7 8 @container (max-width: 300px) { #c5::first-letter { color: green } } 9 @container (max-width: 300px) { #c6::first-letter { color: green } } 10 11 @container (min-width: 400px) { #c7::first-letter { color: green } } 12 @container (min-width: 400px) { #c8::first-letter { color: green } } 13 14 @container (max-width: 300px) { #c9::first-line { color: green } } 15 @container (max-width: 300px) { #c10::first-line { color: green } } 16 17 @container (min-width: 400px) { #c11::first-line { color: green } } 18 @container (min-width: 400px) { #c12::first-line { color: green } } 19 20 #c13::first-line { color: red } 21 @container (min-width: 400px) { #c13::first-line { color: green } } 22 @container (min-width: 400px) { #c14::first-line { color: green } } 23 </style> 24 <div class="container" style="width:400px"> 25 <div id="c5" class="container" style="width:300px">PASS if P is green.</div> 26 </div> 27 <div class="container" style="width:400px"> 28 <div id="c6" class="container" style="width:400px">PASS if P is green.</div> 29 </div> 30 <div id="c7" class="container" style="width:400px"> 31 <div class="container" style="width:300px">PASS if P is green.</div> 32 </div> 33 <div id="c8" class="container" style="width:300px"> 34 <div class="container" style="width:300px">PASS if P is green.</div> 35 </div> 36 <div class="container" style="width:400px"> 37 <div id="c9" class="container" style="width:300px">PASS if text is green.</div> 38 </div> 39 <div class="container" style="width:400px"> 40 <div id="c10" class="container" style="width:400px">PASS if text is green.</div> 41 </div> 42 <div id="c11" class="container" style="width:400px"> 43 <div class="container" style="width:300px">PASS if text is green.</div> 44 </div> 45 <div id="c12" class="container" style="width:300px"> 46 <div class="container" style="width:300px">PASS if text is green.</div> 47 </div> 48 <div id="c13" class="container" style="width:300px">PASS if text is green.</div> 49 <div id="c14" class="container" style="width:300px">PASS if text is green.</div> 50 <script> 51 document.body.offsetTop; 52 c6.style.width = "300px"; 53 c8.style.width = "400px"; 54 c10.style.width = "300px"; 55 c12.style.width = "400px"; 56 c13.style.width = "400px"; 57 c14.style.width = "400px"; 58 </script>