pseudo-elements-008.html (2954B)
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 #target::before { content: "PASS"; font-size: 10cqw; } 11 #target::after { font-size: 10cqw; } 12 #target::marker { font-size: 10cqw; } 13 #target::first-line { font-size: 10cqw; } 14 #target::first-letter { font-size: 10cqw; } 15 #target::highlight(foo) { 16 text-decoration-line: underline; 17 text-decoration-thickness: 10cqw; 18 } 19 #outer::first-line { font-size: 10cqw; } 20 #outer::first-letter { font-size: 10cqw; } 21 dialog::backdrop { font-size: 10cqw; } 22 </style> 23 <div style="width: 400px" class="container"> 24 <div style="width: 300px" class="container"> 25 <div id="target" class="container" style="width: 200px">First-line</div> 26 <dialog id="dialog" class="container" style="width: 100px"></dialog> 27 </div> 28 <div style="width: 400px" class="container"> 29 <div id="outer" style="width: 300px" class="container"> 30 <div class="container" style="width: 200px">First-line</div> 31 </div> 32 </div> 33 <script> 34 setup(() => assert_implements_size_container_queries()); 35 36 test(() => { 37 assert_equals(getComputedStyle(target, "::before").fontSize, "20px"); 38 }, "Originating element container for ::before"); 39 test(() => { 40 assert_equals(getComputedStyle(target, "::after").fontSize, "20px"); 41 }, "Originating element container for ::after"); 42 test(() => { 43 assert_equals(getComputedStyle(target, "::marker").fontSize, "20px"); 44 }, "Originating element container for ::marker"); 45 test(() => { 46 assert_equals(getComputedStyle(target, "::first-line").fontSize, "20px"); 47 }, "Originating element container for ::first-line"); 48 test(() => { 49 assert_equals(getComputedStyle(target, "::first-letter").fontSize, "20px"); 50 }, "Originating element container for ::first-letter"); 51 test(() => { 52 assert_equals(getComputedStyle(target, "::highlight(foo)").textDecorationThickness, "20px"); 53 }, `Originating element container for ::highlight`); 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, "30px", "::backdrop not rendered"); 63 dialog.showModal(); 64 assert_equals(getComputedStyle(dialog, "::backdrop").fontSize, "10px", "::backdrop rendered"); 65 }, "Originating element container for ::backdrop"); 66 </script>