Skip to content

Commit c193418

Browse files
Sam Sebreechromium-wpt-export-bot
Sam Sebree
authored and
chromium-wpt-export-bot
committed
[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
1 parent 3880d95 commit c193418

File tree

10 files changed

+173
-0
lines changed

10 files changed

+173
-0
lines changed

‎html/semantics/scripting-1/the-script-element/css-module/css-module-worker-test.html‎

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
<!doctype html>
2+
3+
<head>
4+
<title>import-css-module-worker</title>
5+
<script src="/resources/testharness.js"></script>
6+
<script src="/resources/testharnessreport.js"></script>
7+
</head>
8+
9+
<body>
10+
<h1>import-css-module-worker</h1>
11+
<script>
12+
async_test(function (test) {
13+
const worker = new Worker("./resources/worker.js", {
14+
type: "module"
15+
});
16+
worker.onmessage = test.step_func(() => {
17+
assert_unreached(
18+
"A CSS Module within a web worker should not load.")
19+
});
20+
worker.onerror = test.step_func_done();
21+
}, "A CSS Module within a web worker should not load.");
22+
</script>
23+
24+
<script>
25+
async_test(function (test) {
26+
const worker = new Worker("./resources/worker_dynamic_import.js", {
27+
type: "module"
28+
});
29+
worker.onmessage = test.step_func(() => {
30+
assert_unreached(
31+
"A dynamic import CSS Module within a web worker should not load.")
32+
});
33+
worker.onerror = test.step_func_done();
34+
}, "A dynamic import CSS Module within a web worker should not load.");
35+
</script>
36+
37+
</body>

‎html/semantics/scripting-1/the-script-element/css-module/import-css-module-basic.html‎

Lines changed: 52 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
<!doctype html>
2+
3+
<head>
4+
<title>import-css-module-basic</title>
5+
<script src="/resources/testharness.js"></script>
6+
<script src="/resources/testharnessreport.js"></script>
7+
</head>
8+
9+
<body>
10+
<h1>import-css-module-basic</h1>
11+
<script type="module">
12+
import v from "./resources/basic.css";
13+
document.adoptedStyleSheets = [v];
14+
test(function () {
15+
assert_equals(getComputedStyle(document.querySelector('#test'))
16+
.backgroundColor, "rgb(255, 0, 0)",
17+
"CSS module should import correctly on top level document");
18+
}, "Test basic CSS module import");
19+
</script>
20+
21+
<script type="module">
22+
async_test(function (test) {
23+
let iframe = document.createElement("iframe");
24+
iframe.src = "resources/css_module_at_import_iframe.html";
25+
iframe.onload = test.step_func_done(function () {
26+
assert_equals(iframe.contentDocument.load_error, "NotAllowedError");
27+
assert_not_equals(getComputedStyle(iframe.contentDocument.querySelector('#test'))
28+
.backgroundColor, "rgb(255, 0, 0)",
29+
"CSS module @import should not succeed");
30+
});
31+
document.body.appendChild(iframe);
32+
}, "An @import CSS Module should not load");
33+
</script>
34+
35+
<script type="module">
36+
async_test(function (test) {
37+
let iframe = document.createElement("iframe");
38+
iframe.src = "resources/malformed.html";
39+
iframe.onload = test.step_func_done(function () {
40+
assert_equals(iframe.contentDocument.load_error, "ParseError");
41+
assert_not_equals(getComputedStyle(iframe.contentDocument.querySelector('#test'))
42+
.backgroundColor, "rgb(255, 0, 0)",
43+
"Malformed CSS should throw parse error");
44+
});
45+
document.body.appendChild(iframe);
46+
}, "Malformed CSS should throw parse error");
47+
</script>
48+
49+
<div id="test">
50+
I am a test div.
51+
</div>
52+
</body>

‎html/semantics/scripting-1/the-script-element/css-module/resources/bad_import.css‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
@import "basic.css"

‎html/semantics/scripting-1/the-script-element/css-module/resources/basic.css‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
#test {
2+
background-color:red;
3+
}

‎html/semantics/scripting-1/the-script-element/css-module/resources/css_module_at_import_iframe.html‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
<body>
2+
css-module-at-import
3+
<script>
4+
window.onerror = function (errorMsg, url, lineNumber, column, errorObj)
5+
{
6+
document.load_error = errorObj.name;
7+
return true;
8+
};
9+
</script>
10+
<script type="module">
11+
import v from "./bad_import.css";
12+
document.adoptedStyleSheets = [v];
13+
</script>
14+
15+
<div id="test">
16+
I am a test div.
17+
</div>
18+
</body>

‎html/semantics/scripting-1/the-script-element/css-module/resources/malformed.css‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
#test {{
2+
background-color:red;
3+
}

‎html/semantics/scripting-1/the-script-element/css-module/resources/worker.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
import "./basic.css";

‎html/semantics/scripting-1/the-script-element/css-module/resources/worker_dynamic_import.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
@import "basic.css"

‎html/semantics/scripting-1/the-script-element/css-module/utf8.tentative.html‎

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
<!DOCTYPE html>
2+
<meta charset=utf-8>
3+
<title>CSS modules: UTF-8 decoding</title>
4+
<script src="/resources/testharness.js"></script>
5+
<script src="/resources/testharnessreport.js"></script>
6+
<div id=log></div>
7+
<script>
8+
function check(t, v) {
9+
t.step(() => {
10+
assert_equals(typeof v, "object");
11+
assert_array_equals(Object.keys(v), ["test"]);
12+
assert_equals(v.test, "\u2026");
13+
t.done();
14+
});
15+
}
16+
const t1 = async_test("utf-8");
17+
const t2 = async_test("shift-jis");
18+
const t3 = async_test("windows-1252");
19+
const t4 = async_test("utf-7");
20+
</script>
21+
<script type="module" onerror="t1.step(() => assert_unreached(event))">
22+
import v from "../serve-with-content-type.py?fn=css-module/resources/basic.css&ct=text/css%3Bcharset=utf-8";
23+
check(t1, v);
24+
</script>
25+
<script type="module" onerror="t2.step(() => assert_unreached(event))">
26+
import v from "../serve-with-content-type.py?fn=css-module/resources/basic.css&ct=text/css%3Bcharset=shift-jis";
27+
check(t2, v);
28+
</script>
29+
<script type="module" onerror="t3.step(() => assert_unreached(event))">
30+
import v from "../serve-with-content-type.py?fn=css-module/resources/basic.css&ct=text/css%3Bcharset=windows-1252";
31+
check(t3, v);
32+
</script>
33+
<script type="module" onerror="t4.step(() => assert_unreached(event))">
34+
import v from "../serve-with-content-type.py?fn=css-module/resources/basic.css&ct=text/css%3Bcharset=utf-7";
35+
check(t4, v);
36+
</script>

‎html/semantics/scripting-1/the-script-element/css-module/valid-content-type.tentative.html‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
<!DOCTYPE html>
2+
<meta charset=utf-8>
3+
<title>JSON modules: Content-Type</title>
4+
<script src="/resources/testharness.js"></script>
5+
<script src="/resources/testharnessreport.js"></script>
6+
<div id=log></div>
7+
<script>
8+
function check(t, v) {
9+
t.step(() => {
10+
assert_equals(typeof v, "object");
11+
assert_array_equals(Object.keys(v), ["test"]);
12+
assert_equals(v.test, true);
13+
t.done();
14+
});
15+
}
16+
const t1 = async_test("text/css");
17+
</script>
18+
<script type="module" onerror="t1.step(() => assert_unreached(event))">
19+
import v from "../serve-with-content-type.py?fn=css-module/resources/basic.css&ct=text/css";
20+
check(t1, v);
21+
</script>

0 commit comments

Comments
 (0)