commit b07ade8b3fc0b137def6ad0285399af66c85dfd8
parent b123712fbb76390e2fb4aa6a40ed41bf85521786
Author: Anders Hartvoll Ruud <andruud@chromium.org>
Date: Tue, 21 Oct 2025 10:31:31 +0000
Bug 1994945 [wpt PR 55494] - [@mixin] Organize independent WPT subtests into sections, a=testonly
Automatic update from web-platform-tests
[@mixin] Organize independent WPT subtests into sections
Some WPT files are "containers" for N number of mostly independent
subtests, e.g.:
<style>
#e1 { /* ... */ }
#e2 { /* ... */ }
/* ... */
#eN { /* ... */ }
</style>
<div id=e1></div>
<div id=e2></div>
<!-- ... -->
<div id=eN></div>
<script>
test(() => { /* ... */ }, 'Test for e1');
test(() => { /* ... */ }, 'Test for e2');
// ...
test(() => { /* ... */ }, 'Test for eN');
</script>
Especially for large N, it can be pretty hard to read a test when
its three constituent parts sit interleaved with lots of other stuff
that's unrelated to the test you're focusing on.
This CL simply groups the three parts that are relevant for
a certain subtest together, such that all the context you need
to understand it is locally available:
<style>
#e1 { /* ... */ }
</style>
<div id=e1></div>
<script>
test(() => { /* ... */ }, 'Test for e1');
</script>
There should be no practical difference in what we actually test;
I'm just moving stuff around so it's easier to read.
Bug: 406935599
Change-Id: I911153a71fa67b2cfb5d6ce5e1f2d29d7f5bd29b
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/7048402
Reviewed-by: Steinar H Gunderson <sesse@chromium.org>
Commit-Queue: Anders Hartvoll Ruud <andruud@chromium.org>
Cr-Commit-Position: refs/heads/main@{#1531002}
--
wpt-commits: 10f671a33a25fd97b6e6fd61ae6e094e57259bbf
wpt-pr: 55494
Diffstat:
4 files changed, 440 insertions(+), 266 deletions(-)
diff --git a/testing/web-platform/tests/css/css-mixins/contents-rule.html b/testing/web-platform/tests/css/css-mixins/contents-rule.html
@@ -1,10 +1,13 @@
<!DOCTYPE html>
<html>
<head>
- <title>CSS Mixins: Mixins depending on other mixins</title>
- <link rel="help" href="https://drafts.csswg.org/css-mixins-1/#apply-rule">
+ <title>CSS Mixins: The @contents rule</title>
+ <link rel="help" href="https://drafts.csswg.org/css-mixins-1/#contents-rule">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
+ </head>
+ <body>
+
<style>
@mixin --m1(@contents) {
@contents;
@@ -13,15 +16,35 @@
color: red;
@apply --m1 { color: green; }
}
+ </style>
+ <div id="e1">This text should be green.</div>
+ <script>
+ test(() => {
+ let target = document.getElementById('e1');
+ assert_equals(getComputedStyle(target).color, 'rgb(0, 128, 0)');
+ }, 'Simple @contents with no fallback');
+ </script>
+
+ <style>
@mixin --m2(@contents) {
@contents
}
#e2 {
color: red;
- @apply --m1 { color: green; }
+ @apply --m2 { color: green; }
}
+ </style>
+ <div id="e2">This text should be green.</div>
+ <script>
+ test(() => {
+ let target = document.getElementById('e2');
+ assert_equals(getComputedStyle(target).color, 'rgb(0, 128, 0)');
+ }, 'Implicit semicolon after @contents, at end of block');
+ </script>
+
+ <style>
@mixin --m3(@contents) {
&.a {
@contents { color: blue; }
@@ -31,7 +54,17 @@
color: red;
@apply --m3 { color: green; }
}
+ </style>
+ <div class="a b" id="e3">This text should be green.</div>
+ <script>
+ test(() => {
+ let target = document.getElementById('e3');
+ assert_equals(getComputedStyle(target).color, 'rgb(0, 128, 0)');
+ }, 'Block in @apply overrides fallback');
+ </script>
+
+ <style>
@mixin --m4(@contents) {
&.c {
@contents { color: green; }
@@ -41,7 +74,17 @@
color: red;
@apply --m4;
}
+ </style>
+ <div class="c d" id="e4">This text should be green.</div>
+ <script>
+ test(() => {
+ let target = document.getElementById('e4');
+ assert_equals(getComputedStyle(target).color, 'rgb(0, 128, 0)');
+ }, 'Fallback is used if @apply has no block');
+ </script>
+
+ <style>
@mixin --m5() {
@contents { color: red !important; }
color: green;
@@ -49,7 +92,17 @@
#e5 {
@apply --m5 { color: red !important; }
}
+ </style>
+ <div id="e5">This text should be green.</div>
+ <script>
+ test(() => {
+ let target = document.getElementById('e5');
+ assert_equals(getComputedStyle(target).color, 'rgb(0, 128, 0)');
+ }, '@contents is ignored if there is no @contents parameter');
+ </script>
+
+ <style>
@mixin --m6(@contents) {
@contents { }
color: green;
@@ -57,59 +110,31 @@
#e6 {
@apply --m6;
}
-
- @mixin --m7(@contents) {
- @contents;
- color: green;
- }
- #e7 {
- @apply --m7 {};
- }
</style>
- </head>
- <body>
- <div id="e1">This text should be green.</div>
- <div id="e2">This text should be green.</div>
- <div class="a b" id="e3">This text should be green.</div>
- <div class="c d" id="e4">This text should be green.</div>
- <div id="e5">This text should be green.</div>
<div id="e6">This text should be green.</div>
- <div id="e7">This text should be green.</div>
- <script>
- test(() => {
- let target = document.getElementById('e1');
- assert_equals(getComputedStyle(target).color, 'rgb(0, 128, 0)');
- }, 'Simple @contents with no fallback');
-
- test(() => {
- let target = document.getElementById('e2');
- assert_equals(getComputedStyle(target).color, 'rgb(0, 128, 0)');
- }, 'Implicit semicolon after @contents, at end of block');
-
- test(() => {
- let target = document.getElementById('e3');
- assert_equals(getComputedStyle(target).color, 'rgb(0, 128, 0)');
- }, 'Block in @apply overrides fallback');
-
- test(() => {
- let target = document.getElementById('e4');
- assert_equals(getComputedStyle(target).color, 'rgb(0, 128, 0)');
- }, 'Fallback is used if @apply has no block');
-
- test(() => {
- let target = document.getElementById('e5');
- assert_equals(getComputedStyle(target).color, 'rgb(0, 128, 0)');
- }, '@contents is ignored if there is no @contents parameter');
+ <script>
+ test(() => {
+ let target = document.getElementById('e6');
+ assert_equals(getComputedStyle(target).color, 'rgb(0, 128, 0)');
+ }, 'Empty @contents block is allowed, but does nothing');
+ </script>
- test(() => {
- let target = document.getElementById('e6');
- assert_equals(getComputedStyle(target).color, 'rgb(0, 128, 0)');
- }, 'Empty @contents block is allowed, but does nothing');
- test(() => {
- let target = document.getElementById('e7');
- assert_equals(getComputedStyle(target).color, 'rgb(0, 128, 0)');
- }, 'Empty @contents parameter does not crash');
- </script>
+ <style>
+ @mixin --m7(@contents) {
+ @contents;
+ color: green;
+ }
+ #e7 {
+ @apply --m7 {};
+ }
+ </style>
+ <div id="e7">This text should be green.</div>
+ <script>
+ test(() => {
+ let target = document.getElementById('e7');
+ assert_equals(getComputedStyle(target).color, 'rgb(0, 128, 0)');
+ }, 'Empty @contents parameter does not crash');
+ </script>
</body>
</html>
diff --git a/testing/web-platform/tests/css/css-mixins/mixin-cssom.tentative.html b/testing/web-platform/tests/css/css-mixins/mixin-cssom.tentative.html
@@ -5,67 +5,88 @@
<link rel="help" href="https://drafts.csswg.org/css-mixins/#cssom">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
- <style>
- @mixin --m1() {
- color: green;
- & {
- --foo: bar;
- }
- }
- #foo {
- @apply --m1;
- }
-
- @mixin --m2(@contents) {
- @contents
- }
- #foo {
- color: red;
- @apply --m2 { color: green; }
- }
- </style>
- </head>
- <body>
- <div id="target"></div>
- <script>
- let ss = document.styleSheets[0];
-
- test(() => {
- assert_equals(ss.cssRules.length, 4);
- assert_equals(ss.cssRules[0].cssText,
+ </head>
+ <body>
+ <style id=style1>
+ @mixin --m1() {
+ color: green;
+ & {
+ --foo: bar;
+ }
+ }
+ </style>
+ <script>
+ test(() => {
+ let ss = style1.sheet;
+ assert_equals(ss.cssRules.length, 1);
+ assert_equals(ss.cssRules[0].cssText,
`@mixin --m1() {
color: green;
& { --foo: bar; }
}`);
- }, 'serialization of @mixin');
+ }, 'serialization of @mixin');
+ </script>
+
- test(() => {
- assert_equals(ss.cssRules[1].cssText,
+ <style id=style2>
+ #foo {
+ @apply --m1;
+ }
+ </style>
+ <script>
+ test(() => {
+ let ss = style2.sheet;
+ assert_equals(ss.cssRules[0].cssText,
`#foo {
@apply --m1;
}`);
- }, 'serialization of rule with @apply');
+ }, 'serialization of rule with @apply');
+ </script>
+
- test(() => {
- assert_equals(ss.cssRules[2].cssText,
+ <style id=style3>
+ @mixin --m2(@contents) {
+ @contents
+ }
+ </style>
+ <script>
+ test(() => {
+ let ss = style3.sheet;
+ assert_equals(ss.cssRules[0].cssText,
`@mixin --m2(@contents) {
@contents;
}`);
- }, 'serialization of @mixin with @contents');
+ }, 'serialization of @mixin with @contents');
+ </script>
- test(() => {
- assert_equals(ss.cssRules[3].cssText,
+
+ <style id=style4>
+ #foo {
+ color: red;
+ @apply --m2 { color: green; }
+ }
+ </style>
+ <script>
+ test(() => {
+ let ss = style4.sheet;
+ assert_equals(ss.cssRules[0].cssText,
`#foo {
color: red;
@apply --m2 { color: green; }
}`);
}, 'serialization of rule with @apply and contents argument');
+ </script>
+
- test(() => {
- assert_throws_dom('SyntaxError', () => {
- ss.insertRule('@apply --m1();');
- });
- }, '@apply is not legal at top level');
- </script>
+ <style id=style5>
+ </style>
+ <script>
+ test(() => {
+ assert_throws_dom('SyntaxError', () => {
+ let ss = style5.sheet;
+ ss.insertRule('@apply --m1();');
+ });
+ }, '@apply is not legal at top level');
+ </script>
</body>
</html>
diff --git a/testing/web-platform/tests/css/css-mixins/mixin-parameters.html b/testing/web-platform/tests/css/css-mixins/mixin-parameters.html
@@ -5,246 +5,340 @@
<link rel="help" href="https://drafts.csswg.org/css-mixins/#mixin-args">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
- <style>
- @mixin --m1() {
- color: green;
- }
- @mixin --m1(junk-in-parameter-list) { /* Will be ignored. */
- color: red;
- }
- #e1 {
- @apply --m1;
- }
-
- @mixin --m2(--my-color) {
- color: env(--my-color);
- }
- #e2 {
- @apply --m2(green);
- }
- #e2b {
- @apply --m2(navy);
- }
- #e2c {
- color: fuchsia;
- @apply --m2();
- }
-
- @mixin --m3(--my-color) {
- color: env(--my-color);
- }
- #e3 {
- @apply --m3({green});
- }
-
- @mixin --m4(--my-color: green) {
- color: env(--my-color);
- }
- #e4 {
- @apply --m4;
- }
-
- @mixin --m5() {
- color: red;
- }
- #e5 {
- color: green;
- @apply --m5(too-many-parameters);
- }
-
- @mixin --m6(--my-color) {
- color: env(--my-color, navy);
- }
- #e6 {
- @apply --m6(green);
- }
- #e6b {
- @apply --m6;
- }
- #e6c {
- @apply --m6(invalid-color);
- }
- #e6d {
- color: env(--not-within-mixin, green);
- }
- #e6e {
- color: env(--not-within-mixin);
- }
-
- @mixin --m7(--my-color) {
- color: attr(color-attr type(<color>));
- }
- #e7 {
- @apply --m7(green);
- }
-
- @mixin --m8(--my-length type(<length>)) {
- font-size: 10px;
- --some-length: env(--my-length);
- }
- #e8 {
- @apply --m8(1.0em);
- }
-
- @mixin --m9(--my-length type(length)) { /* Note the syntax error. */
- font-size: 10px;
- --some-length: env(--my-length);
- }
- #e9 {
- @apply --m9(1.0em);
- }
-
- @mixin --m10inner(--inner-color) {
- color: env(--outer-color);
- }
- @mixin --m10outer(--outer-color) {
- @apply --m10inner(red);
- }
- #e10 {
- @apply --m10outer(green);
- }
-
- @mixin --m11(--val, --true, --false) {
- color: if(style(--x: env(--val)): env(--true); else: env(--false))
- }
- #e11 {
- --x: a;
- @apply --m11(a, green, red);
- }
- #e11b {
- --x: a;
- @apply --m11(b, red, green);
- }
-
- @function --f() {
- color: env(--my-color);
- }
- @mixin --m12(--my-color) {
- color: --f();
- }
- #e12 {
- @apply --m12(red);
- }
- }
- </style>
- </style>
</head>
<body>
- <div><div id="e1">This text should be green.</div></div>
- <div><div id="e2">This text should be green.</div></div>
- <div><div id="e2b">This text should be navy.</div></div>
- <div><div id="e2c">This text should be fuchsia.</div></div>
- <div><div id="e3">This text should be green.</div></div>
- <div><div id="e4">This text should be green.</div></div>
- <div><div id="e5">This text should be green.</div></div>
- <div><div id="e6">This text should be green.</div></div>
- <div><div id="e6b">This text should be navy.</div></div>
- <div><div id="e6c">This text should be black.</div></div>
- <div><div id="e6d">This text should be green.</div></div>
- <div><div id="e6e">This text should be black.</div></div>
- <div><div id="e7" color-attr="env(--my-color)">This text should be green.</div></div>
- <div><div id="e8">This text does not matter.</div></div>
- <div><div id="e9">This text does not matter.</div></div>
- <div><div id="e10">This text should be green.</div></div>
- <div><div id="e11">This text should be green.</div></div>
- <div><div id="e11b">This text should be green.</div></div>
- <div><div id="e12">This text should be black.</div></div>
+
+ <style>
+ @mixin --m1() {
+ color: green;
+ }
+ @mixin --m1(junk-in-parameter-list) { /* Will be ignored. */
+ color: red;
+ }
+ #e1 {
+ @apply --m1;
+ }
+ </style>
+ <div><div id="e1">This text should be green.</div></div>
<script>
test(() => {
let target = document.getElementById('e1');
assert_equals(getComputedStyle(target).color, 'rgb(0, 128, 0)');
}, 'Mixins with invalid parameter lists are ignored');
+ </script>
+
+ <style>
+ @mixin --m2(--my-color) {
+ color: env(--my-color);
+ }
+ #e2 {
+ @apply --m2(green);
+ }
+ </style>
+ <div><div id="e2">This text should be green.</div></div>
+ <script>
test(() => {
let target = document.getElementById('e2');
assert_equals(getComputedStyle(target).color, 'rgb(0, 128, 0)');
}, 'Basic mixin parameter passing');
+ </script>
+
+ <style>
+ @mixin --m2b(--my-color) {
+ color: env(--my-color);
+ }
+ #e2b {
+ @apply --m2b(navy);
+ }
+ </style>
+ <div><div id="e2b">This text should be navy.</div></div>
+ <script>
test(() => {
let target = document.getElementById('e2b');
assert_equals(getComputedStyle(target).color, 'rgb(0, 0, 128)');
}, 'Mixins can be called multiple times with different parameters');
+ </script>
+
+ <style>
+ @mixin --m2c(--my-color) {
+ color: env(--my-color);
+ }
+ #e2c {
+ color: fuchsia;
+ @apply --m2c();
+ }
+ </style>
+ <div><div id="e2c">This text should be fuchsia.</div></div>
+ <script>
test(() => {
let target = document.getElementById('e2c');
assert_equals(getComputedStyle(target).color, 'rgb(0, 0, 0)');
}, 'Too few parameters and no default ignores mixin');
+ </script>
+
+ <style>
+ @mixin --m3(--my-color) {
+ color: env(--my-color);
+ }
+ #e3 {
+ @apply --m3({green});
+ }
+ </style>
+ <div><div id="e3">This text should be green.</div></div>
+ <script>
test(() => {
let target = document.getElementById('e3');
assert_equals(getComputedStyle(target).color, 'rgb(0, 128, 0)');
}, 'Mixin argument parsing with arguments wrapped in {}');
+ </script>
+
+ <style>
+ @mixin --m4(--my-color: green) {
+ color: env(--my-color);
+ }
+ #e4 {
+ @apply --m4;
+ }
+ </style>
+ <div><div id="e4">This text should be green.</div></div>
+ <script>
test(() => {
let target = document.getElementById('e4');
assert_equals(getComputedStyle(target).color, 'rgb(0, 128, 0)');
}, 'Defaults in mixin parameters');
+ </script>
+
+ <style>
+ @mixin --m5() {
+ color: red;
+ }
+ #e5 {
+ color: green;
+ @apply --m5(too-many-parameters);
+ }
+ </style>
+ <div><div id="e5">This text should be green.</div></div>
+ <script>
test(() => {
let target = document.getElementById('e5');
assert_equals(getComputedStyle(target).color, 'rgb(0, 128, 0)');
}, '@apply with too many parameters is ignored');
+ </script>
+
+ <style>
+ @mixin --m6(--my-color) {
+ color: env(--my-color, navy);
+ }
+ #e6 {
+ @apply --m6(green);
+ }
+ </style>
+ <div><div id="e6">This text should be green.</div></div>
+ <script>
test(() => {
let target = document.getElementById('e6');
assert_equals(getComputedStyle(target).color, 'rgb(0, 128, 0)');
}, 'Fallback is ignored if argument is given');
+ </script>
+
+ <style>
+ @mixin --m6b(--my-color) {
+ color: env(--my-color, navy);
+ }
+ #e6b {
+ @apply --m6b;
+ }
+ </style>
+ <div><div id="e6b">This text should be navy.</div></div>
+ <script>
test(() => {
let target = document.getElementById('e6b');
assert_equals(getComputedStyle(target).color, 'rgb(0, 0, 128)');
}, 'Fallback is used with no parameter and no default');
+ </script>
+
+ <style>
+ @mixin --m6c(--my-color) {
+ color: env(--my-color, navy);
+ }
+ #e6c {
+ @apply --m6c(invalid-color);
+ }
+ </style>
+ <div><div id="e6c">This text should be black.</div></div>
+ <script>
test(() => {
let target = document.getElementById('e6c');
assert_equals(getComputedStyle(target).color, 'rgb(0, 0, 0)');
}, 'Fallback is not used on other errors');
+ </script>
+
+ <style>
+ #e6d {
+ color: env(--not-within-mixin, green);
+ }
+ </style>
+ <div><div id="e6d">This text should be green.</div></div>
+ <script>
test(() => {
let target = document.getElementById('e6d');
assert_equals(getComputedStyle(target).color, 'rgb(0, 128, 0)');
}, 'Fallback is not when outside mixin');
+ </script>
+
+ <style>
+ #e6e {
+ color: env(--not-within-mixin);
+ }
+ </style>
+ <div><div id="e6e">This text should be black.</div></div>
+ <script>
test(() => {
let target = document.getElementById('e6e');
assert_equals(getComputedStyle(target).color, 'rgb(0, 0, 0)');
}, 'Invalid when no fallback and outside mixin');
+ </script>
+
+ <style>
+ @mixin --m7(--my-color) {
+ color: attr(color-attr type(<color>));
+ }
+ #e7 {
+ @apply --m7(green);
+ }
+ </style>
+ <div><div id="e7" color-attr="env(--my-color)">This text should be green.</div></div>
+ <script>
test(() => {
let target = document.getElementById('e7');
assert_equals(getComputedStyle(target).color, 'rgb(0, 128, 0)');
}, 'env() can be accessed from attributes');
+ </script>
+
+ <style>
+ @mixin --m8(--my-length type(<length>)) {
+ font-size: 10px;
+ --some-length: env(--my-length);
+ }
+ #e8 {
+ @apply --m8(1.0em);
+ }
+ </style>
+ <div><div id="e8">This text does not matter.</div></div>
+ <script>
test(() => {
let target = document.getElementById('e8');
assert_equals(getComputedStyle(target).getPropertyValue('--some-length'), '10px');
}, 'env() resolves typed parameters');
+ </script>
+
+ <style>
+ @mixin --m9(--my-length type(length)) { /* Note the syntax error. */
+ font-size: 10px;
+ --some-length: env(--my-length);
+ }
+ #e9 {
+ @apply --m9(1.0em);
+ }
+ </style>
+ <div><div id="e9">This text does not matter.</div></div>
+ <script>
test(() => {
let target = document.getElementById('e9');
assert_equals(getComputedStyle(target).getPropertyValue('--some-length'), '');
assert_equals(getComputedStyle(target).fontSize, '10px');
}, 'env() refuses illegal syntax parameters, but does not fail entire mixin');
+ </script>
+
+ <style>
+ @mixin --m10inner(--inner-color) {
+ color: env(--outer-color);
+ }
+ @mixin --m10outer(--outer-color) {
+ @apply --m10inner(red);
+ }
+ #e10 {
+ @apply --m10outer(green);
+ }
+ </style>
+ <div><div id="e10">This text should be green.</div></div>
+ <script>
test(() => {
let target = document.getElementById('e10');
assert_equals(getComputedStyle(target).color, 'rgb(0, 128, 0)');
}, 'env() can access parameters from outer mixins');
+ </script>
+
+ <style>
+ @mixin --m11(--val, --true, --false) {
+ color: if(style(--x: env(--val)): env(--true); else: env(--false))
+ }
+ #e11 {
+ --x: a;
+ @apply --m11(a, green, red);
+ }
+ </style>
+ <div><div id="e11">This text should be green.</div></div>
+ <script>
test(() => {
let target = document.getElementById('e11');
assert_equals(getComputedStyle(target).color, 'rgb(0, 128, 0)');
}, 'env() works inside if, in condition and true branch');
+ </script>
+
+ <style>
+ @mixin --m11b(--val, --true, --false) {
+ color: if(style(--x: env(--val)): env(--true); else: env(--false))
+ }
+ #e11b {
+ --x: a;
+ @apply --m11b(b, red, green);
+ }
+ </style>
+ <div><div id="e11b">This text should be green.</div></div>
+ <script>
test(() => {
let target = document.getElementById('e11b');
assert_equals(getComputedStyle(target).color, 'rgb(0, 128, 0)');
}, 'env() works inside if, in condition and false branch');
+ </script>
+
+ <style>
+ @function --f() {
+ color: env(--my-color);
+ }
+ @mixin --m12(--my-color) {
+ color: --f();
+ }
+ #e12 {
+ @apply --m12(red);
+ }
+ </style>
+ <div><div id="e12">This text should be black.</div></div>
+ <script>
test(() => {
let target = document.getElementById('e12');
assert_equals(getComputedStyle(target).color, 'rgb(0, 0, 0)');
}, 'env() within a function should not see parameters from a calling mixin');
</script>
+
</body>
</html>
diff --git a/testing/web-platform/tests/css/css-mixins/mixin-shadow-dom.html b/testing/web-platform/tests/css/css-mixins/mixin-shadow-dom.html
@@ -3,73 +3,107 @@
<head>
<title>CSS Mixins: Shadow DOM</title>
<link rel="help" href="https://drafts.csswg.org/css-mixins-1/#defining-mixins">
+ <link rel="help" href="https://drafts.csswg.org/css-scoping-1/#css-tree-scoped-name">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
+ </head>
+ <body>
+
<style>
@mixin --exists-only-outside-shadow() {
color: green;
}
- #e4 {
- color: green;
- @apply --in-shadow;
- }
</style>
- </head>
- <body>
- <div id="host">
+ <div id="host1">
<template shadowrootmode="open">
<style>
#e1 {
color: red;
@apply --exists-only-outside-shadow;
}
+ </style>
+ <div id="e1">This text should be green.</div>
+ </template>
+ </div>
+ <script>
+ test(() => {
+ let target = document.getElementById('host1').shadowRoot.getElementById('e1');
+ assert_equals(getComputedStyle(target).color, 'rgb(0, 128, 0)');
+ }, 'Style in shadow DOM should have access to outside non-adopted mixins');
+ </script>
+
+
+ <div id="host2">
+ <template shadowrootmode="open">
+ <style>
#e2 {
color: red;
@apply --m1;
}
- #e3 {
- color: red;
- @apply --exists-only-in-adopted;
- }
</style>
<style>
@mixin --m1() {
color: green;
}
- @mixin --in-shadow() {
- color: red;
- }
</style>
- <div id="e1">This text should be green.</div>
<div id="e2">This text should be green.</div>
- <div id="e3">This text should be green.</div>
</template>
</div>
- <div id="e4">This text should be green.</div>
<script>
- const sheet = new CSSStyleSheet();
- sheet.replaceSync('@mixin --exists-only-in-adopted() { color: green; }');
- document.getElementById('host').shadowRoot.adoptedStyleSheets = [sheet];
-
- test(() => {
- let target = document.getElementById('host').shadowRoot.getElementById('e1');
- assert_equals(getComputedStyle(target).color, 'rgb(0, 128, 0)');
- }, 'Style in shadow DOM should have access to outside non-adopted mixins');
-
test(() => {
- let target = document.getElementById('host').shadowRoot.getElementById('e2');
+ let target = document.getElementById('host2').shadowRoot.getElementById('e2');
assert_equals(getComputedStyle(target).color, 'rgb(0, 128, 0)');
}, 'Style in shadow DOM should have access to inside mixins');
+ </script>
+
+ <style>
+ </style>
+ <div id="host3">
+ <template shadowrootmode="open">
+ <style>
+ #e3 {
+ color: red;
+ @apply --exists-only-in-adopted;
+ }
+ </style>
+ <div id="e3">This text should be green.</div>
+ </template>
+ </div>
+ <script>
test(() => {
- let target = document.getElementById('host').shadowRoot.getElementById('e3');
+ const sheet = new CSSStyleSheet();
+ sheet.replaceSync('@mixin --exists-only-in-adopted() { color: green; }');
+ document.getElementById('host3').shadowRoot.adoptedStyleSheets = [sheet];
+
+ let target = document.getElementById('host3').shadowRoot.getElementById('e3');
assert_equals(getComputedStyle(target).color, 'rgb(0, 128, 0)');
}, 'Style in shadow DOM should have access to mixins from adopted stylesheets');
+ </script>
+
+ <div id="host4">
+ <template shadowrootmode="open">
+ <style>
+ @mixin --in-shadow() {
+ color: red;
+ }
+ </style>
+ </template>
+ </div>
+ <style>
+ #e4 {
+ color: green;
+ @apply --in-shadow;
+ }
+ </style>
+ <div id="e4">This text should be green.</div>
+ <script>
test(() => {
let target = document.getElementById('e4');
assert_equals(getComputedStyle(target).color, 'rgb(0, 128, 0)');
}, 'Style outside shadow DOM should _not_ have access to inside mixins');
</script>
+
</body>
</html>
