pseudo-elements-006.html (2872B)
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"; font-size: 10cqw; } 12 #target::after { font-size: 10cqw; } 13 #target::marker { font-size: 10cqw; } 14 #target::first-line { font-size: 10cqw; } 15 #target::first-letter { font-size: 10cqw; } 16 } 17 @container ((min-width: 300px) and (max-width: 350px)) { 18 #outer::first-line { font-size: 10cqw; } 19 #outer::first-letter { font-size: 10cqw; } 20 } 21 dialog::backdrop { font-size: 0px; } 22 @container (max-width: 100px) { 23 dialog::backdrop { font-size: 10cqw; } 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 test(() => { 40 assert_equals(getComputedStyle(target, "::before").fontSize, "20px"); 41 }, "Originating element container for ::before"); 42 test(() => { 43 assert_equals(getComputedStyle(target, "::after").fontSize, "20px"); 44 }, "Originating element container for ::after"); 45 test(() => { 46 assert_equals(getComputedStyle(target, "::marker").fontSize, "20px"); 47 }, "Originating element container for ::marker"); 48 test(() => { 49 assert_equals(getComputedStyle(target, "::first-line").fontSize, "20px"); 50 }, "Originating element container for ::first-line"); 51 test(() => { 52 assert_equals(getComputedStyle(target, "::first-letter").fontSize, "20px"); 53 }, "Originating element container for ::first-letter"); 54 test(() => { 55 assert_equals(getComputedStyle(outer, "::first-line").fontSize, "30px"); 56 }, "Originating element container for outer ::first-line"); 57 test(() => { 58 assert_equals(getComputedStyle(outer, "::first-letter").fontSize, "30px"); 59 }, "Originating element container for outer ::first-letter"); 60 test((t) => { 61 t.add_cleanup(() => dialog.close()); 62 assert_equals(getComputedStyle(dialog, "::backdrop").fontSize, "0px", "::backdrop not rendered"); 63 dialog.showModal(); 64 assert_equals(getComputedStyle(dialog, "::backdrop").fontSize, "10px", "::backdrop rendered"); 65 }, "Originating element container for ::backdrop"); 66 </script>