container-name-tree-scoped.html (2930B)
1 <!doctype html> 2 <meta charset="utf-8"> 3 <title>CSS Container Queries Test: Container names are not tree-scoped</title> 4 <link rel="help" href="https://drafts.csswg.org/css-conditional-5/#query-container"> 5 <link rel="help" href="https://drafts.csswg.org/css-scoping-1/#shadow-names"> 6 <script src="/resources/testharness.js"></script> 7 <script src="/resources/testharnessreport.js"></script> 8 <script src="support/cq-testcommon.js"></script> 9 10 <div id="container-name-host"> 11 <div> 12 <template shadowrootmode="open"> 13 <style> 14 :host { container-name: foo; } 15 </style> 16 <slot></slot> 17 </template> 18 <div id="t1"></div> 19 </div> 20 <style> 21 #container-name-host > div { 22 container-type: inline-size; 23 } 24 #t1 { color: red; } 25 @container foo (width > 0px) { 26 #t1 { color: green; } 27 } 28 </style> 29 </div> 30 31 <div id="container-name-slotted"> 32 <div> 33 <template shadowrootmode="open"> 34 <style> 35 ::slotted(div) { 36 container-name: foo; 37 } 38 </style> 39 <slot></slot> 40 </template> 41 <div> 42 <div id="t2"></div> 43 </div> 44 </div> 45 <style> 46 #container-name-slotted > div > div { 47 container-type: inline-size; 48 } 49 #t2 { color: red; } 50 @container foo (width > 0px) { 51 #t2 { color: green; } 52 } 53 </style> 54 55 <div id="container-name-host-inner-container-rule"> 56 <div id="t3host"> 57 <template shadowrootmode="open"> 58 <style> 59 :host { container-name: foo; } 60 #t3 { color: red; } 61 @container foo (width > 0px) { 62 #t3 { color: green; } 63 } 64 </style> 65 <div id="t3"></div> 66 </template> 67 </div> 68 </div> 69 70 <div id="container-name-host-inner-slotted"> 71 <div> 72 <template shadowrootmode="open"> 73 <style> 74 :host { container-name: foo; } 75 ::slotted(div) { color: red; } 76 @container foo (width > 0px) { 77 ::slotted(div) { 78 color: green; 79 } 80 } 81 </style> 82 <slot></slot> 83 </template> 84 <div id="t4"></div> 85 </div> 86 </div> 87 </div> 88 89 <script> 90 setup(() => { 91 assert_implements_size_container_queries(); 92 }); 93 94 const green = "rgb(0, 128, 0)"; 95 96 test(() => { 97 assert_equals(getComputedStyle(t1).color, green); 98 }, "Outer scope query should match container-name set by :host rule in shadow tree"); 99 100 test(() => { 101 assert_equals(getComputedStyle(t2).color, green); 102 }, "Outer scope query should match container-name set by ::slotted rule in shadow tree"); 103 104 test(() => { 105 assert_equals(getComputedStyle(t3host.shadowRoot.querySelector('#t3')).color, green); 106 }, "Inner scope query should match container-name set by :host rule in shadow tree"); 107 108 test(() => { 109 assert_equals(getComputedStyle(t4).color, green); 110 }, "Inner scope query containing ::slotted should match container-name set by :host rule in shadow tree"); 111 112 </script>