supports-import-parsing.html (4380B)
1 <!doctype html> 2 <meta charset="utf-8"> 3 <title>@import rule with supports parsing / serialization</title> 4 <link rel="author" href="mailto:oj@oojmed.com"> 5 <link rel="help" href="https://drafts.csswg.org/css-cascade-4/#at-import"> 6 <script src="/resources/testharness.js"></script> 7 <script src="/resources/testharnessreport.js"></script> 8 <script> 9 function setupSheet(rule) { 10 const style = document.createElement("style"); 11 document.head.append(style); 12 const {sheet} = style; 13 const {cssRules} = sheet; 14 15 assert_equals(cssRules.length, 0, "Sheet should have no rules"); 16 sheet.insertRule(rule); 17 assert_equals(cssRules.length, 1, "Sheet should have 1 rule"); 18 19 return {sheet, cssRules}; 20 } 21 22 function test_valid_supports_import(rule, serialized) { 23 if (serialized === undefined) 24 serialized = rule; 25 26 test(function() { 27 const {sheet, cssRules} = setupSheet(rule); 28 29 const serialization = cssRules[0].cssText; 30 assert_equals(serialization, serialized, 'serialization should be canonical'); 31 32 sheet.deleteRule(0); 33 assert_equals(cssRules.length, 0, 'Sheet should have no rule'); 34 sheet.insertRule(serialization); 35 assert_equals(cssRules.length, 1, 'Sheet should have 1 rule'); 36 37 assert_equals(cssRules[0].cssText, serialization, 'serialization should round-trip'); 38 }, rule + ' should be a valid supports() import rule'); 39 } 40 41 function test_unsupported_supports_import(rule) { 42 test(function() { 43 const {sheet, cssRules} = setupSheet(rule); 44 45 sheet.deleteRule(0); 46 assert_equals(cssRules.length, 0, 'Sheet should have no rule'); 47 }, rule + ' should still be a valid import rule with an invalid supports() declaration'); 48 } 49 50 function test_invalid_supports_import(rule) { 51 test(function() { 52 const style = document.createElement("style"); 53 document.head.append(style); 54 const {sheet} = style; 55 const {cssRules} = sheet; 56 57 assert_equals(cssRules.length, 0, "Sheet should have no rules"); 58 }, rule + ' should be an invalid import rule due to an invalid supports() declaration'); 59 } 60 61 test_invalid_supports_import('@import url("nonexist.css") supports();'); 62 test_invalid_supports_import('@import url("nonexist.css") supports(foo: bar);'); 63 test_valid_supports_import('@import url("nonexist.css") supports(display:block);'); 64 test_valid_supports_import('@import url("nonexist.css") supports((display:flex));'); 65 test_valid_supports_import('@import url("nonexist.css") supports(not (display: flex));'); 66 test_valid_supports_import('@import url("nonexist.css") supports((display: flex) and (display: block));'); 67 test_valid_supports_import('@import url("nonexist.css") supports((display: flex) or (display: block));'); 68 test_valid_supports_import('@import url("nonexist.css") supports((display: flex) or (foo: bar));'); 69 test_valid_supports_import('@import url("nonexist.css") supports(display: block !important);'); 70 71 test_invalid_supports_import('@import url("nonexist.css") layer supports();'); 72 test_invalid_supports_import('@import url("nonexist.css") layer supports(foo: bar);'); 73 test_valid_supports_import('@import url("nonexist.css") layer(A) supports((display: flex) or (foo: bar));'); 74 test_valid_supports_import('@import url("nonexist.css") layer(A.B) supports((display: flex) and (foo: bar));'); 75 76 test_valid_supports_import('@import url("nonexist.css") supports(selector(a));'); 77 test_valid_supports_import('@import url("nonexist.css") supports(selector(p a));'); 78 test_valid_supports_import('@import url("nonexist.css") supports(selector(p > a));'); 79 test_valid_supports_import('@import url("nonexist.css") supports(selector(p + a));'); 80 81 test_valid_supports_import('@import url("nonexist.css") supports(font-tech(color-colrv1));'); 82 test_valid_supports_import('@import url("nonexist.css") supports(font-format(opentype));'); 83 84 test_valid_supports_import('@import url(nonexist.css) supports(display:block);', 85 '@import url("nonexist.css") supports(display:block);'); 86 87 test_valid_supports_import('@import "nonexist.css" supports(display:block);', 88 '@import url("nonexist.css") supports(display:block);'); 89 90 // “supports” gets parsed as an (unsupported) media query. 91 test_unsupported_supports_import('@import url("nonexist.css") supports;'); 92 </script>