import-css-module-basic.html (4410B)
1 <!doctype html> 2 <head> 3 <script src="/resources/testharness.js"></script> 4 <script src="/resources/testharnessreport.js"></script> 5 </head> 6 <body> 7 <div id="test">I am a test div.</div> 8 <div id="test2">I am a test div.</div> 9 <div id="test3">I am a test div.</div> 10 <div id="test3b">I am a test div.</div> 11 <div id="test4">I am a test div.</div> 12 <div id="test4b">I am a test div.</div> 13 <script> 14 window.errorCount = 0; 15 window.onerror = (errorMsg, url, lineNumber, column, errorObj) => { 16 window.errorCount++; 17 }; 18 </script> 19 <script type="module" onerror="unreachable()"> 20 import sheet from "./resources/basic.css" with { type: "css" }; 21 test(() => { 22 document.adoptedStyleSheets = [...document.adoptedStyleSheets, sheet]; 23 assert_equals(getComputedStyle(document.querySelector('#test')) 24 .backgroundColor, "rgb(255, 0, 0)", "CSS module import should succeed"); 25 }, "A CSS Module should load"); 26 </script> 27 <script type="module" onerror="unreachable()"> 28 import sheet from "./resources/basic-large.css" with { type: "css" }; 29 test(() => { 30 // This tests potential streaming compilation of modules in 31 // Chromium that is triggered only for large (32>KiB) files in older 32 // versions. 33 document.adoptedStyleSheets = [...document.adoptedStyleSheets, sheet]; 34 assert_equals(getComputedStyle(document.querySelector('#test2')) 35 .backgroundColor, "rgb(255, 0, 0)", 36 "CSS module import should succeed"); 37 }, "A large CSS Module should load"); 38 </script> 39 <script type="module" onerror="unreachable()"> 40 import sheet from "./resources/bad-import.css" with { type: "css" }; 41 test(() => { 42 document.adoptedStyleSheets = [...document.adoptedStyleSheets, sheet]; 43 assert_equals(window.errorCount, 0); 44 assert_equals(sheet.cssRules.length, 1, "Parser should skip @import rule"); 45 assert_equals(getComputedStyle(document.querySelector('#test3b')) 46 .backgroundColor, "rgba(0, 0, 0, 0)", 47 "CSS module @import should not succeed"); 48 assert_equals(getComputedStyle(document.querySelector('#test3')) 49 .backgroundColor, "rgb(0, 255, 0)", 50 "Rule after @import should still be applied"); 51 }, "An @import CSS Module should not load, but should not throw an exception"); 52 </script> 53 <script type="module" onerror="unreachable()"> 54 import sheet from "./resources/malformed.css" with { type: "css" }; 55 test(() => { 56 document.adoptedStyleSheets = [...document.adoptedStyleSheets, sheet]; 57 assert_equals(window.errorCount, 0); 58 assert_equals(sheet.cssRules.length, 1, "Import of malformed CSS should succeed and rules after the parse error should still be parsed"); 59 assert_equals(getComputedStyle(document.querySelector('#test4')) 60 .backgroundColor, "rgba(0, 0, 0, 0)", 61 "Malformed CSS rule should not be applied"); 62 assert_equals(getComputedStyle(document.querySelector('#test4b')) 63 .backgroundColor, "rgb(0, 255, 0)", 64 "Parsing should recover and rules after malformed rules should be applied"); 65 }, "A parse error should not prevent subsequent rules from being included in a CSS module"); 66 </script> 67 <script type="module"> 68 promise_test(function (test) { 69 const iframe = document.createElement("iframe"); 70 iframe.src = "resources/css-module-without-attribute-iframe.html"; 71 return new Promise(resolve => { 72 iframe.onload = resolve; 73 document.body.appendChild(iframe); 74 }).then(event => { 75 assert_equals(iframe.contentDocument.window_onerror, undefined); 76 assert_equals(iframe.contentDocument.script_onerror.type, "error"); 77 assert_equals(getComputedStyle(iframe.contentDocument.querySelector('#test')) 78 .backgroundColor, "rgba(0, 0, 0, 0)", 79 "CSS module without type attribute should result in a fetch error"); 80 }); 81 }, "CSS module without type attribute should result in a fetch error"); 82 </script> 83 </body>