at-supports-selector-detecting-invalid-in-logical-combinations.html (1551B)
1 <!doctype html> 2 <title>CSS Conditional Test: @supports selector() detecting invalid in logical combinations.</title> 3 <link rel="author" title="Byungwoo Lee" href="mailto:blee@igalia.com"> 4 <link rel="help" href="https://drafts.csswg.org/css-conditional/#at-supports"> 5 <link rel="match" href="at-supports-selector-detecting-invalid-in-logical-combinations-ref.html"> 6 <style> 7 div.invalid { 8 background-color: green; 9 height: 100px; 10 width: 100px; 11 } 12 div.valid { 13 background-color: red; 14 height: 100px; 15 width: 100px; 16 } 17 @supports selector(:is(.a)) { 18 div.is.valid { background: green }; 19 } 20 @supports selector(:where(.a)) { 21 div.where.valid { background: green }; 22 } 23 @supports selector(:has(.a)) { 24 div.has.valid { background: green }; 25 } 26 @supports selector(:not(.a)) { 27 div.not.valid { background: green }; 28 } 29 @supports selector(:is(:foo, .a)) { 30 div.is.invalid { background: red }; 31 } 32 @supports selector(:where(:foo, .a)) { 33 div.where.invalid { background: red }; 34 } 35 @supports selector(:has(:foo, .a)) { 36 div.has.invalid { background: red }; 37 } 38 @supports selector(:not(:foo, .a)) { 39 div.not.invalid { background: red }; 40 } 41 </style> 42 <p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p> 43 <div class="is valid"></div> 44 <div class="where valid"></div> 45 <div class="has valid"></div> 46 <div class="not valid"></div> 47 <div class="is invalid"></div> 48 <div class="where invalid"></div> 49 <div class="has invalid"></div> 50 <div class="not invalid"></div>