at-supports-font-tech-001.html (1745B)
1 <!DOCTYPE html> 2 <title>CSS Conditional Test: @supports font-tech()</title> 3 <link rel="author" title="Jonathan Kew" href="mailto:jkew@mozilla.com"> 4 <link rel="author" href="https://mozilla.org" title="Mozilla"> 5 <link rel="help" href="https://drafts.csswg.org/css-conditional-5/#typedef-supports-font-tech-fn"> 6 <link rel="match" href="at-supports-001-ref.html"> 7 <style> 8 div { 9 background: red; 10 height: 10px; 11 width: 100px; 12 } 13 /* assume all browsers support at least features-opentype and color-COLRv0 */ 14 @supports font-tech(features-opentype) { 15 #test1 { background: green }; 16 } 17 @supports font-tech(color-COLRv0) { 18 #test2 { background: green }; 19 } 20 /* forms that should NOT be recognized as supported */ 21 @supports not font-tech(features-opentype color-COLRv1) { 22 #test3 { background: green }; 23 } 24 @supports not font-tech(features-opentype, color-COLRv0) { 25 #test4 { background: green }; 26 } 27 @supports not font-tech(features-opentype, features-opentype) { 28 #test5 { background: green }; 29 } 30 @supports not font-tech() { 31 #test6 { background: green }; 32 } 33 @supports not font-tech(xyzzy) { 34 #test7 { background: green }; 35 } 36 @supports not font-tech("features-opentype") { 37 #test8 { background: green }; 38 } 39 @supports not font-tech(feature-opentype) { 40 #test9 { background: green }; 41 } 42 @supports not font-tech(colors-COLRv0) { 43 #test10 { background: green }; 44 } 45 </style> 46 <p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p> 47 <div id=test1></div> 48 <div id=test2></div> 49 <div id=test3></div> 50 <div id=test4></div> 51 <div id=test5></div> 52 <div id=test6></div> 53 <div id=test7></div> 54 <div id=test8></div> 55 <div id=test9></div> 56 <div id=test10></div>