[SyntheticModules] Implements CSS Modules

This is the final change required for CSS Modules to be utilized by developers. Following the acceptance of this change, if you run chromium with the CSSModules runtime flag, the following is now valid syntax: <script type="module"> import sheet from "./example.css"; </script> CSS Modules Explainer: https://github.com/w3c/webcomponents/blob/gh-pages/proposals/css-modules-v1-explainer.md CSS Modules Spec PR: whatwg/html#4898 Bug: 967018 Change-Id: Ifdee5b92259fb7e4e9c8f9aa88e69a98eb55c551
web-platform-tests · Nov 21, 2019 · 2ce9067 · 2ce9067
1 parent f0f2aea
commit 2ce9067
Show file tree

Hide file tree

Showing 6 changed files with 77 additions and 0 deletions.
diff --git a/html/semantics/scripting-1/the-script-element/css-module/css-module-worker-test.html b/html/semantics/scripting-1/the-script-element/css-module/css-module-worker-test.html
@@ -0,0 +1,23 @@
+<!doctype html>
+
+<head>
+ <title>import-css-module-worker</title>
+ <script src="/resources/testharness.js"></script>
+ <script src="/resources/testharnessreport.js"></script>
+</head>
+
+<body>
+ <h1>import-css-module-worker</h1>
+ <script>
+ async_test(function (test) {
+ const worker = new Worker("./modules/worker.js", {
+ type: "module"
+ });
+ worker.onmessage = test.step_func(() => {
+ assert_unreached(
+ "A CSS Module within a web worker should not load.")
+ });
+ worker.onerror = test.step_func_done();
+ }, "A CSS Module within a web worker should not load.");
+ </script>
+</body>
diff --git a/html/semantics/scripting-1/the-script-element/css-module/import-css-module-basic.html b/html/semantics/scripting-1/the-script-element/css-module/import-css-module-basic.html
@@ -0,0 +1,35 @@
+<!doctype html>
+
+<head>
+ <title>import-css-module-basic</title>
+ <script src="/resources/testharness.js"></script>
+ <script src="/resources/testharnessreport.js"></script>
+</head>
+
+<body>
+ <h1>import-css-module-basic</h1>
+ <script type="module">
+ import v from "./modules/basic.css";
+ document.adoptedStyleSheets = [v];
+ test(function () {
+ assert_equals(getComputedStyle(document.querySelector('#test'))
+ .backgroundColor, "rgb(255, 0, 0)",
+ "CSS module should import correctly on top level document");
+ }, "Test basic CSS module import");
+ </script>
+
+ <script type="module">
+ async_test(function (test) {
+ let iframe = document.createElement("iframe");
+ iframe.src = "modules/css_module_at_import.html";
+ iframe.onload = test.step_func_done(function () {
+ assert_equals(iframe.contentDocument.load_error, "TypeError");
+ });
+ document.body.appendChild(iframe);
+ }, "An @import CSS Module should not load");
+ </script>
+
+ <div id="test">
+ I am a test div.
+ </div>
+</body>
diff --git a/html/semantics/scripting-1/the-script-element/css-module/modules/bad_import.css b/html/semantics/scripting-1/the-script-element/css-module/modules/bad_import.css
@@ -0,0 +1 @@
+@import "basic.css"
diff --git a/html/semantics/scripting-1/the-script-element/css-module/modules/basic.css b/html/semantics/scripting-1/the-script-element/css-module/modules/basic.css
@@ -0,0 +1,3 @@
+#test {
+ background-color:red;
+}
diff --git a/html/semantics/scripting-1/the-script-element/css-module/modules/css_module_at_import.html b/html/semantics/scripting-1/the-script-element/css-module/modules/css_module_at_import.html
@@ -0,0 +1,14 @@
+<body>
+ css-module-at-import
+ <script>
+ window.onerror = function (errorMsg, url, lineNumber, column, errorObj)
+ {
+ document.load_error = errorObj.name;
+ return true;
+ };
+ </script>
+ <script type="module">
+ import v from "./bad_import.css";
+ document.adoptedStyleSheets = [v];
+ </script>
+</body>
diff --git a/html/semantics/scripting-1/the-script-element/css-module/modules/worker.js b/html/semantics/scripting-1/the-script-element/css-module/modules/worker.js
@@ -0,0 +1 @@
+import "./basic.css";