at-supports-font-format-001.html (1662B)
1 <!DOCTYPE html> 2 <title>CSS Conditional Test: @supports font-format()</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-format-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 opentype, truetype, woff */ 14 @supports font-format(opentype) { 15 #test1 { background: green }; 16 } 17 @supports font-format(TrueType) { 18 #test2 { background: green }; 19 } 20 @supports font-format(Woff) { 21 #test3 { background: green }; 22 } 23 /* forms that should NOT be recognized as supported */ 24 @supports not font-format() { 25 #test4 { background: green }; 26 } 27 @supports not font-format(xyzzy) { 28 #test5 { background: green }; 29 } 30 @supports not font-format("opentype") { 31 #test6 { background: green }; 32 } 33 @supports not font-format("truetype") { 34 #test7 { background: green }; 35 } 36 @supports not font-format("woff") { 37 #test8 { background: green }; 38 } 39 @supports not font-format(truetype opentype) { 40 #test9 { background: green }; 41 } 42 @supports not font-format(truetype, opentype) { 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>