From f704f8c535b9d928f08ab51f70be5db6e5a89741 Mon Sep 17 00:00:00 2001 From: Marco Castelluccio Date: Fri, 20 Dec 2019 11:14:51 +0000 Subject: [PATCH] Bug 1592868 [wpt PR 20012] - [SyntheticModules] Implements CSS Modules, a=testonly Automatic update from web-platform-tests [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: CSS Modules Explainer: https://github.com/w3c/webcomponents/blob/gh-pages/proposals/css-modules-v1-explainer.md CSS Modules Spec PR: https://github.com/whatwg/html/pull/4898 Bug: 967018 Change-Id: Ifdee5b92259fb7e4e9c8f9aa88e69a98eb55c551 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1799923 Commit-Queue: Sam Sebree Reviewed-by: Hiroshige Hayashizaki Reviewed-by: Kouhei Ueno Reviewed-by: Hiroki Nakagawa Reviewed-by: Yuki Shiino Cr-Commit-Position: refs/heads/master{#724896} -- wpt-commits: 6fbd872e9ac5fe60e32946bc9b318be6eeada123 wpt-pr: 20012 UltraBlame original commit: 8c5b203f0fad559c872cc96687daa54cda3803bb --- .../css-module/css-module-worker-test.html | 287 +++++++++++ .../css-module/import-css-module-basic.html | 391 ++++++++++++++ .../css-module/resources/bad-import.css | 6 + .../css-module/resources/basic.css | 10 + .../css-module-at-import-iframe.html | 96 ++++ .../resources/css-module-basic-iframe.html | 94 ++++ .../resources/malformed-iframe.html | 61 +++ .../css-module/resources/malformed.css | 11 + .../css-module/resources/utf8.css | 9 + .../resources/worker-dynamic-import.js | 39 ++ .../css-module/resources/worker.js | 17 + .../css-module/utf8.tentative.html | 481 ++++++++++++++++++ 12 files changed, 1502 insertions(+) create mode 100644 testing/web-platform/tests/html/semantics/scripting-1/the-script-element/css-module/css-module-worker-test.html create mode 100644 testing/web-platform/tests/html/semantics/scripting-1/the-script-element/css-module/import-css-module-basic.html create mode 100644 testing/web-platform/tests/html/semantics/scripting-1/the-script-element/css-module/resources/bad-import.css create mode 100644 testing/web-platform/tests/html/semantics/scripting-1/the-script-element/css-module/resources/basic.css create mode 100644 testing/web-platform/tests/html/semantics/scripting-1/the-script-element/css-module/resources/css-module-at-import-iframe.html create mode 100644 testing/web-platform/tests/html/semantics/scripting-1/the-script-element/css-module/resources/css-module-basic-iframe.html create mode 100644 testing/web-platform/tests/html/semantics/scripting-1/the-script-element/css-module/resources/malformed-iframe.html create mode 100644 testing/web-platform/tests/html/semantics/scripting-1/the-script-element/css-module/resources/malformed.css create mode 100644 testing/web-platform/tests/html/semantics/scripting-1/the-script-element/css-module/resources/utf8.css create mode 100644 testing/web-platform/tests/html/semantics/scripting-1/the-script-element/css-module/resources/worker-dynamic-import.js create mode 100644 testing/web-platform/tests/html/semantics/scripting-1/the-script-element/css-module/resources/worker.js create mode 100644 testing/web-platform/tests/html/semantics/scripting-1/the-script-element/css-module/utf8.tentative.html diff --git a/testing/web-platform/tests/html/semantics/scripting-1/the-script-element/css-module/css-module-worker-test.html b/testing/web-platform/tests/html/semantics/scripting-1/the-script-element/css-module/css-module-worker-test.html new file mode 100644 index 0000000000000..7064a11106b98 --- /dev/null +++ b/testing/web-platform/tests/html/semantics/scripting-1/the-script-element/css-module/css-module-worker-test.html @@ -0,0 +1,287 @@ +< +! +doctype +html +> +< +head +> +< +script +src += +" +/ +resources +/ +testharness +. +js +" +> +< +/ +script +> +< +script +src += +" +/ +resources +/ +testharnessreport +. +js +" +> +< +/ +script +> +< +/ +head +> +< +body +> +< +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/testing/web-platform/tests/html/semantics/scripting-1/the-script-element/css-module/import-css-module-basic.html b/testing/web-platform/tests/html/semantics/scripting-1/the-script-element/css-module/import-css-module-basic.html new file mode 100644 index 0000000000000..53a315d3cffbc --- /dev/null +++ b/testing/web-platform/tests/html/semantics/scripting-1/the-script-element/css-module/import-css-module-basic.html @@ -0,0 +1,391 @@ +< +! +doctype +html +> +< +head +> +< +script +src += +" +/ +resources +/ +testharness +. +js +" +> +< +/ +script +> +< +script +src += +" +/ +resources +/ +testharnessreport +. +js +" +> +< +/ +script +> +< +/ +head +> +< +body +> +< +script +> +async_test +( +function +( +test +) +{ +const +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 +) +{ +const +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 +) +{ +const +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 +not +load +" +) +; +} +) +; +document +. +body +. +appendChild +( +iframe +) +; +} +" +Malformed +CSS +should +not +load +" +) +; +< +/ +script +> +< +/ +body +> diff --git a/testing/web-platform/tests/html/semantics/scripting-1/the-script-element/css-module/resources/bad-import.css b/testing/web-platform/tests/html/semantics/scripting-1/the-script-element/css-module/resources/bad-import.css new file mode 100644 index 0000000000000..96c79859516c7 --- /dev/null +++ b/testing/web-platform/tests/html/semantics/scripting-1/the-script-element/css-module/resources/bad-import.css @@ -0,0 +1,6 @@ +import +" +basic +. +css +" diff --git a/testing/web-platform/tests/html/semantics/scripting-1/the-script-element/css-module/resources/basic.css b/testing/web-platform/tests/html/semantics/scripting-1/the-script-element/css-module/resources/basic.css new file mode 100644 index 0000000000000..f237436450497 --- /dev/null +++ b/testing/web-platform/tests/html/semantics/scripting-1/the-script-element/css-module/resources/basic.css @@ -0,0 +1,10 @@ +# +test +{ +background +- +color +: +red +; +} diff --git a/testing/web-platform/tests/html/semantics/scripting-1/the-script-element/css-module/resources/css-module-at-import-iframe.html b/testing/web-platform/tests/html/semantics/scripting-1/the-script-element/css-module/resources/css-module-at-import-iframe.html new file mode 100644 index 0000000000000..e837124a25d77 --- /dev/null +++ b/testing/web-platform/tests/html/semantics/scripting-1/the-script-element/css-module/resources/css-module-at-import-iframe.html @@ -0,0 +1,96 @@ +< +! +DOCTYPE +html +> +< +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/testing/web-platform/tests/html/semantics/scripting-1/the-script-element/css-module/resources/css-module-basic-iframe.html b/testing/web-platform/tests/html/semantics/scripting-1/the-script-element/css-module/resources/css-module-basic-iframe.html new file mode 100644 index 0000000000000..2444c0a413c96 --- /dev/null +++ b/testing/web-platform/tests/html/semantics/scripting-1/the-script-element/css-module/resources/css-module-basic-iframe.html @@ -0,0 +1,94 @@ +< +! +DOCTYPE +html +> +< +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/testing/web-platform/tests/html/semantics/scripting-1/the-script-element/css-module/resources/malformed-iframe.html b/testing/web-platform/tests/html/semantics/scripting-1/the-script-element/css-module/resources/malformed-iframe.html new file mode 100644 index 0000000000000..ab2479e3a2216 --- /dev/null +++ b/testing/web-platform/tests/html/semantics/scripting-1/the-script-element/css-module/resources/malformed-iframe.html @@ -0,0 +1,61 @@ +< +! +DOCTYPE +html +> +< +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/testing/web-platform/tests/html/semantics/scripting-1/the-script-element/css-module/resources/malformed.css b/testing/web-platform/tests/html/semantics/scripting-1/the-script-element/css-module/resources/malformed.css new file mode 100644 index 0000000000000..3e7a3967d4a1a --- /dev/null +++ b/testing/web-platform/tests/html/semantics/scripting-1/the-script-element/css-module/resources/malformed.css @@ -0,0 +1,11 @@ +# +test +{ +{ +background +- +color +: +red +; +} diff --git a/testing/web-platform/tests/html/semantics/scripting-1/the-script-element/css-module/resources/utf8.css b/testing/web-platform/tests/html/semantics/scripting-1/the-script-element/css-module/resources/utf8.css new file mode 100644 index 0000000000000..80b0bf1d25aff --- /dev/null +++ b/testing/web-platform/tests/html/semantics/scripting-1/the-script-element/css-module/resources/utf8.css @@ -0,0 +1,9 @@ +# +test +{ +content +: +" +" +; +} diff --git a/testing/web-platform/tests/html/semantics/scripting-1/the-script-element/css-module/resources/worker-dynamic-import.js b/testing/web-platform/tests/html/semantics/scripting-1/the-script-element/css-module/resources/worker-dynamic-import.js new file mode 100644 index 0000000000000..1fe540382d639 --- /dev/null +++ b/testing/web-platform/tests/html/semantics/scripting-1/the-script-element/css-module/resources/worker-dynamic-import.js @@ -0,0 +1,39 @@ +import +( +" +. +/ +basic +. +css +" +) +. +then +( +( +) += +> +postMessage +( +" +LOADED +" +) +) +. +catch +( +e += +> +postMessage +( +" +NOT +LOADED +" +) +) +; diff --git a/testing/web-platform/tests/html/semantics/scripting-1/the-script-element/css-module/resources/worker.js b/testing/web-platform/tests/html/semantics/scripting-1/the-script-element/css-module/resources/worker.js new file mode 100644 index 0000000000000..d217622c2853a --- /dev/null +++ b/testing/web-platform/tests/html/semantics/scripting-1/the-script-element/css-module/resources/worker.js @@ -0,0 +1,17 @@ +import +" +. +/ +basic +. +css +" +; +postMessage +( +" +Unexpectedly +loaded +" +) +; diff --git a/testing/web-platform/tests/html/semantics/scripting-1/the-script-element/css-module/utf8.tentative.html b/testing/web-platform/tests/html/semantics/scripting-1/the-script-element/css-module/utf8.tentative.html new file mode 100644 index 0000000000000..8911654c358f4 --- /dev/null +++ b/testing/web-platform/tests/html/semantics/scripting-1/the-script-element/css-module/utf8.tentative.html @@ -0,0 +1,481 @@ +< +! +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 +>