featureless-001.html (1100B)
1 <!doctype html> 2 <meta charset="utf-8"> 3 <title>Verifying that :host works as a selector at all</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 <!-- All these tests use a shadow host as the featureless element, 7 so we need to make sure that the impl actually supports the 8 necessary functionality. --> 9 10 <p>Test passes if there is a filled green square.</p> 11 <div class=host> 12 <template shadowrootmode="open"> 13 <style> 14 div { 15 width: 100px; 16 height: 50px; 17 } 18 .red { background-color: red; } 19 .green { background-color: green; } 20 :host div.red { 21 /* Make sure :host matches the host element... */ 22 background-color: green; 23 } 24 div > div.green { 25 /* And make sure *other* selectors *don't* match it. */ 26 background-color: red; 27 } 28 </style> 29 <div class=red></div> 30 <div class=green></div> 31 <slot></slot> 32 </template> 33 <section></section> 34 </div>