pseudo-elements-003.html (2911B)
1 <!doctype html> 2 <title>@container: originating element container for pseudo elements</title> 3 <link rel="help" href="https://drafts.csswg.org/css-conditional-5/#container-queries"> 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 .container { container-type: inline-size; } 9 #target { display: list-item; } 10 @container (max-width: 200px) { 11 #target::before { content: "PASS"; color: green; } 12 #target::after { color: green; } 13 #target::marker { color: green; } 14 #target::first-line { color: green; } 15 #target::first-letter { color: green; } 16 } 17 @container ((min-width: 300px) and (max-width: 350px)) { 18 #outer::first-line { color: green; } 19 #outer::first-letter { color: green; } 20 } 21 dialog::backdrop { background-color: lime; } 22 @container (max-width: 100px) { 23 dialog::backdrop { background-color: green; } 24 } 25 </style> 26 <div style="width: 400px" class="container"> 27 <div style="width: 300px" class="container"> 28 <div id="target" class="container" style="width: 200px">First-line</div> 29 <dialog id="dialog" class="container" style="width: 100px"></dialog> 30 </div> 31 <div style="width: 400px" class="container"> 32 <div id="outer" style="width: 300px" class="container"> 33 <div class="container" style="width: 200px">First-line</div> 34 </div> 35 </div> 36 <script> 37 setup(() => assert_implements_size_container_queries()); 38 39 const green = "rgb(0, 128, 0)"; 40 const lime = "rgb(0, 255, 0)"; 41 42 test(() => { 43 assert_equals(getComputedStyle(target, "::before").color, green); 44 }, "Originating element container for ::before"); 45 test(() => { 46 assert_equals(getComputedStyle(target, "::after").color, green); 47 }, "Originating element container for ::after"); 48 test(() => { 49 assert_equals(getComputedStyle(target, "::marker").color, green); 50 }, "Originating element container for ::marker"); 51 test(() => { 52 assert_equals(getComputedStyle(target, "::first-line").color, green); 53 }, "Originating element container for ::first-line"); 54 test(() => { 55 assert_equals(getComputedStyle(target, "::first-letter").color, green); 56 }, "Originating element container for ::first-letter"); 57 test(() => { 58 assert_equals(getComputedStyle(outer, "::first-line").color, green); 59 }, "Originating element container for outer ::first-line"); 60 test(() => { 61 assert_equals(getComputedStyle(outer, "::first-letter").color, green); 62 }, "Originating element container for outer ::first-letter"); 63 test((t) => { 64 t.add_cleanup(() => dialog.close()); 65 assert_equals(getComputedStyle(dialog, "::backdrop").backgroundColor, lime, "::backdrop not rendered"); 66 dialog.showModal(); 67 assert_equals(getComputedStyle(dialog, "::backdrop").backgroundColor, green, "::backdrop rendered"); 68 }, "Originating element container for ::backdrop"); 69 </script>