at-supports-044.html (1532B)
1 <!DOCTYPE html> 2 <html lang="en"> 3 <meta charset="UTF-8"> 4 5 <title>CSS Conditional Test: Custom Properties in @supports</title> 6 <meta name="assert" 7 content="Test passes if custom properties are supported and correctly detected in @supports, 8 or unsupported and correctly detected in @supports."> 9 <link rel="help" href="https://www.w3.org/TR/css3-conditional/#at-supports"> 10 <link rel="help" href="https://www.w3.org/TR/css-variables-1/"> 11 <link rel="author" title="Elika J. Etemad" href="http://fantasai.inkedblade.net/contact"> 12 <link rel="match" href="at-supports-001-ref.html"> 13 14 <style> 15 div { 16 background: green; 17 height: 20px; 18 width: 100px; 19 } 20 21 body { 22 --badcolor: red; 23 --goodcolor: green; 24 } 25 div { 26 background: var(--badcolor); 27 } 28 @supports (--foo: whatever) { 29 .test1 { background: green; } 30 } 31 32 @supports (--foo: whatever !important) { 33 .test2 { background: var(--goodcolor); } 34 } 35 36 .test3 { background: green; } 37 @supports (--foo: whatever !bogus) { 38 .test3 { background: red; } 39 } 40 41 @supports (color: var(--anything) invalid-value) { 42 .test4 { background: green; } 43 } 44 45 .test5 { background: red; } 46 @supports not (--goodcolor: green) { 47 .test5 { background: green; } 48 } 49 .test5 { background: var(--goodcolor) } 50 </style> 51 52 <p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p> 53 54 <div class="test1"></div> 55 <div class="test2"></div> 56 <div class="test3"></div> 57 <div class="test4"></div> 58 <div class="test5"></div>