layer-import-parsing.html (3299B)
1 <!doctype html> 2 <meta charset="utf-8"> 3 <title>@import rule with layer parsing / serialization</title> 4 <link rel="author" href="mailto:xiaochengh@chromium.org"> 5 <link rel="help" href="https://drafts.csswg.org/css-cascade-5/#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_layer_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 const media = cssRules[0].media; 33 assert_equals(media.length, 0, 'layer() should be valid'); 34 35 sheet.deleteRule(0); 36 assert_equals(cssRules.length, 0, 'Sheet should have no rule'); 37 sheet.insertRule(serialization); 38 assert_equals(cssRules.length, 1, 'Sheet should have 1 rule'); 39 40 assert_equals(cssRules[0].cssText, serialization, 'serialization should round-trip'); 41 }, rule + ' should be a valid layered import rule'); 42 } 43 44 function test_invalid_layer_import(rule) { 45 test(function() { 46 const {sheet, cssRules} = setupSheet(rule); 47 48 const media = cssRules[0].media; 49 assert_not_equals(media.length, 0, 50 'invalid layer declaration should be parsed as <general-enclosed> media query'); 51 52 sheet.deleteRule(0); 53 assert_equals(cssRules.length, 0, 'Sheet should have no rule'); 54 }, rule + ' should still be a valid import rule with an invalid layer declaration'); 55 } 56 57 test_valid_layer_import('@import url("nonexist.css") layer;'); 58 test_valid_layer_import('@import url("nonexist.css") layer(A);'); 59 test_valid_layer_import('@import url("nonexist.css") layer(A.B);'); 60 61 test_valid_layer_import('@import url(nonexist.css) layer;', 62 '@import url("nonexist.css") layer;'); 63 test_valid_layer_import('@import url(nonexist.css) layer(A);', 64 '@import url("nonexist.css") layer(A);'); 65 test_valid_layer_import('@import url(nonexist.css) layer(A.B);', 66 '@import url("nonexist.css") layer(A.B);'); 67 68 test_valid_layer_import('@import "nonexist.css" layer;', 69 '@import url("nonexist.css") layer;'); 70 test_valid_layer_import('@import "nonexist.css" layer(A);', 71 '@import url("nonexist.css") layer(A);'); 72 test_valid_layer_import('@import "nonexist.css" layer(A.B);', 73 '@import url("nonexist.css") layer(A.B);'); 74 75 test_invalid_layer_import('@import url("nonexist.css") layer();'); 76 test_invalid_layer_import('@import url("nonexist.css") layer(A B);'); 77 test_invalid_layer_import('@import url("nonexist.css") layer(A . B);'); 78 test_invalid_layer_import('@import url("nonexist.css") layer(A, B, C);'); 79 </script>