| <!DOCTYPE html> |
| <title>CSS Container Queries Test: Container for pseudo elements</title> |
| <link rel="help" href="https://drafts.csswg.org/css-contain-3/#container-queries"> |
| <link rel="match" href="pseudo-elements-002-ref.html"> |
| <style> |
| .container { container-type: inline-size; } |
| |
| @container (max-width: 100px) { #c1::before { content: "PASS" } } |
| @container (min-width: 150px) { #c1::before { content: "FAIL" } } |
| |
| @container (max-width: 100px) { #c2::before { content: "PASS" } } |
| @container (min-width: 150px) { #c2::before { content: "FAIL" } } |
| |
| @container (max-width: 100px) { #c3::after { content: "PASS" } } |
| @container (min-width: 150px) { #c3::after { content: "FAIL" } } |
| |
| @container (max-width: 100px) { #c4::after { content: "PASS" } } |
| @container (min-width: 150px) { #c4::after { content: "FAIL" } } |
| |
| @container (max-width: 300px) { #c5::first-letter { color: green } } |
| @container (max-width: 300px) { #c6::first-letter { color: green } } |
| |
| @container (min-width: 400px) { #c7::first-letter { color: green } } |
| @container (min-width: 400px) { #c8::first-letter { color: green } } |
| |
| @container (max-width: 300px) { #c9::first-line { color: green } } |
| @container (max-width: 300px) { #c10::first-line { color: green } } |
| |
| @container (min-width: 400px) { #c11::first-line { color: green } } |
| @container (min-width: 400px) { #c12::first-line { color: green } } |
| |
| #c13::first-line { color: red } |
| @container (min-width: 400px) { #c13::first-line { color: green } } |
| @container (min-width: 400px) { #c14::first-line { color: green } } |
| </style> |
| <div id="c1" class="container" style="width:100px"></div> |
| <div id="c2" class="container" style="width:200px"></div> |
| <div id="c3" class="container" style="width:100px"></div> |
| <div id="c4" class="container" style="width:200px"></div> |
| <div class="container" style="width:400px"> |
| <div id="c5" class="container" style="width:300px">PASS if P is green.</div> |
| </div> |
| <div class="container" style="width:400px"> |
| <div id="c6" class="container" style="width:400px">PASS if P is green.</div> |
| </div> |
| <div id="c7" class="container" style="width:400px"> |
| <div class="container" style="width:300px">PASS if P is green.</div> |
| </div> |
| <div id="c8" class="container" style="width:300px"> |
| <div class="container" style="width:300px">PASS if P is green.</div> |
| </div> |
| <div class="container" style="width:400px"> |
| <div id="c9" class="container" style="width:300px">PASS if text is green.</div> |
| </div> |
| <div class="container" style="width:400px"> |
| <div id="c10" class="container" style="width:400px">PASS if text is green.</div> |
| </div> |
| <div id="c11" class="container" style="width:400px"> |
| <div class="container" style="width:300px">PASS if text is green.</div> |
| </div> |
| <div id="c12" class="container" style="width:300px"> |
| <div class="container" style="width:300px">PASS if text is green.</div> |
| </div> |
| <div id="c13" class="container" style="width:300px">PASS if text is green.</div> |
| <div id="c14" class="container" style="width:300px">PASS if text is green.</div> |
| <script> |
| document.body.offsetTop; |
| c2.style.width = "100px"; |
| c4.style.width = "100px"; |
| c6.style.width = "300px"; |
| c8.style.width = "400px"; |
| c10.style.width = "300px"; |
| c12.style.width = "400px"; |
| c13.style.width = "400px"; |
| c14.style.width = "400px"; |
| </script> |
