[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 · Dec 12, 2019 · 909ac43 · 909ac43
1 parent 276ecb9
commit 909ac43
Show file tree

Hide file tree

Showing 12 changed files with 178 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,39 @@
+<!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>
+        setup({allow_uncaught_exception: true});
+        async_test(function (test) {
+            const worker = new Worker("./resources/worker.js", {
+                type: "module"
+            });
+            worker.onmessage = test.unreached_func("A CSS Module within a web worker should not load.");
+            worker.onerror = test.step_func_done();
+        }, "A static import CSS Module within a web worker should not load.");
+
+        async_test(function (test) {
+            const worker = new Worker("./resources/worker-dynamic-import.js", {
+                type: "module"
+            });
+            worker.onmessage = test.step_func_done(e => {
+                assert_equals(e.data, "NOT LOADED");
+            });
+        }, "A dynamic import CSS Module within a web worker should not load.");
+
+        async_test(function (test) {
+            const worker = new Worker("./resources/basic.css", {
+                type: "module"
+            });
+            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,46 @@
+<!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">
+        async_test(function (test) {
+            let iframe = document.createElement("iframe");
+            iframe.src = "resources/css-module-basic-iframe.html";
+            iframe.onload = test.step_func_done(function () {
+                assert_equals(getComputedStyle(iframe.contentDocument.querySelector('#test'))
+                    .backgroundColor, "rgb(255, 0, 0)",
+                    "CSS module import should succeed");
+            });
+            document.body.appendChild(iframe);
+        }, "A CSS Module should load");
+
+        async_test(function (test) {
+            let iframe = document.createElement("iframe");
+            iframe.src = "resources/css-module-at-import-iframe.html";
+            iframe.onload = test.step_func_done(function () {
+                assert_equals(iframe.contentDocument.load_error, "NotAllowedError");
+                assert_not_equals(getComputedStyle(iframe.contentDocument.querySelector('#test'))
+                    .backgroundColor, "rgb(255, 0, 0)",
+                    "CSS module @import should not succeed");
+            });
+            document.body.appendChild(iframe);
+        }, "An @import CSS Module should not load");
+
+        async_test(function (test) {
+            let iframe = document.createElement("iframe");
+            iframe.src = "resources/malformed-iframe.html";
+            iframe.onload = test.step_func_done(function () {
+                assert_not_equals(getComputedStyle(iframe.contentDocument.querySelector('#test'))
+                    .backgroundColor, "rgb(255, 0, 0)",
+                    "Malformed CSS should throw parse error");
+            });
+            document.body.appendChild(iframe);
+        }, "Malformed CSS should throw parse error");
+    </script>
+</body>
diff --git a/html/semantics/scripting-1/the-script-element/css-module/resources/bad-import.css b/html/semantics/scripting-1/the-script-element/css-module/resources/bad-import.css
@@ -0,0 +1 @@
+@import "basic.css"
diff --git a/html/semantics/scripting-1/the-script-element/css-module/resources/basic.css b/html/semantics/scripting-1/the-script-element/css-module/resources/basic.css
@@ -0,0 +1,3 @@
+#test {
+    background-color:red;
+}
diff --git a/...tics/scripting-1/the-script-element/css-module/resources/css-module-at-import-iframe.html b/...tics/scripting-1/the-script-element/css-module/resources/css-module-at-import-iframe.html
@@ -0,0 +1,17 @@
+<body>
+    <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>
+
+    <div id="test">
+        I am a test div.
+    </div>
+</body>
diff --git a/...emantics/scripting-1/the-script-element/css-module/resources/css-module-basic-iframe.html b/...emantics/scripting-1/the-script-element/css-module/resources/css-module-basic-iframe.html
@@ -0,0 +1,17 @@
+<body>
+    <script>
+        window.onerror = function (errorMsg, url, lineNumber, column, errorObj)
+        {
+            document.load_error = errorObj.name;
+            return true;
+        };
+    </script>
+    <script type="module">
+        import v from "./basic.css";
+        document.adoptedStyleSheets = [v];
+    </script>
+
+    <div id="test">
+        I am a test div.
+    </div>
+</body>
diff --git a/html/semantics/scripting-1/the-script-element/css-module/resources/malformed-iframe.html b/html/semantics/scripting-1/the-script-element/css-module/resources/malformed-iframe.html
@@ -0,0 +1,10 @@
+<body>
+    <script type="module">
+        import v from "./malformed.css";
+        document.adoptedStyleSheets = [v];
+    </script>
+
+    <div id="test">
+        I am a test div.
+    </div>
+</body>
diff --git a/html/semantics/scripting-1/the-script-element/css-module/resources/malformed.css b/html/semantics/scripting-1/the-script-element/css-module/resources/malformed.css
@@ -0,0 +1,3 @@
+#test {{
+    background-color:red;
+}
diff --git a/html/semantics/scripting-1/the-script-element/css-module/resources/utf8.css b/html/semantics/scripting-1/the-script-element/css-module/resources/utf8.css
@@ -0,0 +1,3 @@
+#test {
+    content: "…";
+}
diff --git a/html/semantics/scripting-1/the-script-element/css-module/resources/worker-dynamic-import.js b/html/semantics/scripting-1/the-script-element/css-module/resources/worker-dynamic-import.js
@@ -0,0 +1,3 @@
+import("./basic.css")
+  .then(() => postMessage("LOADED"))
+  .catch(e => postMessage("NOT LOADED"));
diff --git a/html/semantics/scripting-1/the-script-element/css-module/resources/worker.js b/html/semantics/scripting-1/the-script-element/css-module/resources/worker.js
@@ -0,0 +1,2 @@
+import "./basic.css";
+postMessage("Unexpectedly loaded");
diff --git a/html/semantics/scripting-1/the-script-element/css-module/utf8.tentative.html b/html/semantics/scripting-1/the-script-element/css-module/utf8.tentative.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS modules: UTF-8 decoding</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script>
+function check(t, v) {
+  t.step(() => {
+    assert_equals(typeof v, "object");
+    assert_equals(v.rules[0].style.content, "\"…\"");
+    t.done();
+  });
+}
+const t1 = async_test("utf-8");
+const t2 = async_test("shift-jis");
+const t3 = async_test("windows-1252");
+const t4 = async_test("utf-7");
+</script>
+<script type="module" onerror="t1.step(() => assert_unreached(event))">
+import v from "../serve-with-content-type.py?fn=css-module/resources/utf8.css&ct=text/css%3Bcharset=utf-8";
+check(t1, v);
+</script>
+<script type="module" onerror="t2.step(() => assert_unreached(event))">
+import v from "../serve-with-content-type.py?fn=css-module/resources/utf8.css&ct=text/css%3Bcharset=shift-jis";
+check(t2, v);
+</script>
+<script type="module" onerror="t3.step(() => assert_unreached(event))">
+import v from "../serve-with-content-type.py?fn=css-module/resources/utf8.css&ct=text/css%3Bcharset=windows-1252";
+check(t3, v);
+</script>
+<script type="module" onerror="t4.step(() => assert_unreached(event))">
+import v from "../serve-with-content-type.py?fn=css-module/resources/utf8.css&ct=text/css%3Bcharset=utf-7";
+check(t4, v);
+</script>
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		import "./basic.css";
		postMessage("Unexpectedly loaded");