featureless-004.html (1787B)
1 <!doctype html> 2 <meta charset="utf-8"> 3 <title>Logical combo pseudos can match if their argument is allowed to</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: 10px; 13 } 14 .red { background-color: red; } 15 .green { background-color: green; } 16 17 :is(:host, aside) .t1 { 18 background-color: green; 19 } 20 :not(:not(:host)) .t2 { 21 background-color: green; 22 } 23 24 25 :not(aside) .t3 { 26 background-color: red; 27 } 28 :not(.foo:host) .t4 { 29 background-color: red; 30 } 31 :not(:host > .foo) .t5 { 32 background-color: red; 33 } 34 :is(:not(body) > :host) .t6 { 35 background-color: red; 36 } 37 :is(:host:not(body)) .t7 { 38 background-color: red; 39 } 40 :host:not(body) { 41 .t8 { 42 background-color: red; 43 } 44 } 45 :host:has(#foo) { 46 .t9 { 47 background-color: red; 48 } 49 } 50 :is(:host.host) .t10 { 51 background-color: red; 52 } 53 </style> 54 <div class="red t1"></div> 55 <div class="red t2"></div> 56 <div class="green t3"></div> 57 <div class="green t4"></div> 58 <div class="green t5"></div> 59 <div class="green t6"></div> 60 <div class="green t7"></div> 61 <div class="green t8"></div> 62 <div class="green t9"></div> 63 <div class="green t10"></div> 64 <slot></slot> 65 </template> 66 <section></section> 67 </div>