featureless-002.html (1146B)
1 <!doctype html> 2 <meta charset="utf-8"> 3 <title>Compound selectors only match if all simples do</title> 4 <link rel="help" href="https://drafts.csswg.org/selectors-4/#featureless"> 5 <link rel="match" href="/css/reference/ref-filled-green-100px-square-only.html"> 6 <p>Test passes if there is a filled green square.</p> 7 <div class=host> 8 <template shadowrootmode="open"> 9 <style> 10 div { 11 width: 100px; 12 height: 25px; 13 } 14 .red { background-color: red; } 15 .green { background-color: green; } 16 17 /* Make sure a compound selector can match it */ 18 :host:host .t1 { 19 background-color: green; 20 } 21 /* Make sure various compounds *can't* match it */ 22 div:host > .t2 { 23 background-color: red; 24 } 25 :host.host > .t3 { 26 background-color: red; 27 } 28 *:host > .t4 { 29 background-color: red; 30 } 31 </style> 32 <div class="red t1"></div> 33 <div class="green t2"></div> 34 <div class="green t3"></div> 35 <div class="green t4"></div> 36 <slot></slot> 37 </template> 38 <section></section> 39 </div>