Skip to content

Commit 10f671a

Browse files
andruudchromium-wpt-export-bot
andruud
authored and
chromium-wpt-export-bot
committed
[@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}
1 parent 021f7cd commit 10f671a

File tree

4 files changed

+440
-266
lines changed

4 files changed

+440
-266
lines changed

‎css/css-mixins/contents-rule.html‎

Lines changed: 78 additions & 53 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,13 @@
11
<!DOCTYPE html>
22
<html>
33
<head>
4-
<title>CSS Mixins: Mixins depending on other mixins</title>
5-
<link rel="help" href="https://drafts.csswg.org/css-mixins-1/#apply-rule">
4+
<title>CSS Mixins: The @contents rule</title>
5+
<link rel="help" href="https://drafts.csswg.org/css-mixins-1/#contents-rule">
66
<script src="/resources/testharness.js"></script>
77
<script src="/resources/testharnessreport.js"></script>
8+
</head>
9+
<body>
10+
811
<style>
912
@mixin --m1(@contents) {
1013
@contents;
@@ -13,15 +16,35 @@
1316
color: red;
1417
@apply --m1 { color: green; }
1518
}
19+
</style>
20+
<div id="e1">This text should be green.</div>
21+
<script>
22+
test(() => {
23+
let target = document.getElementById('e1');
24+
assert_equals(getComputedStyle(target).color, 'rgb(0, 128, 0)');
25+
}, 'Simple @contents with no fallback');
26+
</script>
27+
1628

29+
<style>
1730
@mixin --m2(@contents) {
1831
@contents
1932
}
2033
#e2 {
2134
color: red;
22-
@apply --m1 { color: green; }
35+
@apply --m2 { color: green; }
2336
}
37+
</style>
38+
<div id="e2">This text should be green.</div>
39+
<script>
40+
test(() => {
41+
let target = document.getElementById('e2');
42+
assert_equals(getComputedStyle(target).color, 'rgb(0, 128, 0)');
43+
}, 'Implicit semicolon after @contents, at end of block');
44+
</script>
45+
2446

47+
<style>
2548
@mixin --m3(@contents) {
2649
&.a {
2750
@contents { color: blue; }
@@ -31,7 +54,17 @@
3154
color: red;
3255
@apply --m3 { color: green; }
3356
}
57+
</style>
58+
<div class="a b" id="e3">This text should be green.</div>
59+
<script>
60+
test(() => {
61+
let target = document.getElementById('e3');
62+
assert_equals(getComputedStyle(target).color, 'rgb(0, 128, 0)');
63+
}, 'Block in @apply overrides fallback');
64+
</script>
65+
3466

67+
<style>
3568
@mixin --m4(@contents) {
3669
&.c {
3770
@contents { color: green; }
@@ -41,75 +74,67 @@
4174
color: red;
4275
@apply --m4;
4376
}
77+
</style>
78+
<div class="c d" id="e4">This text should be green.</div>
79+
<script>
80+
test(() => {
81+
let target = document.getElementById('e4');
82+
assert_equals(getComputedStyle(target).color, 'rgb(0, 128, 0)');
83+
}, 'Fallback is used if @apply has no block');
84+
</script>
4485

86+
87+
<style>
4588
@mixin --m5() {
4689
@contents { color: red !important; }
4790
color: green;
4891
}
4992
#e5 {
5093
@apply --m5 { color: red !important; }
5194
}
95+
</style>
96+
<div id="e5">This text should be green.</div>
97+
<script>
98+
test(() => {
99+
let target = document.getElementById('e5');
100+
assert_equals(getComputedStyle(target).color, 'rgb(0, 128, 0)');
101+
}, '@contents is ignored if there is no @contents parameter');
102+
</script>
103+
52104

105+
<style>
53106
@mixin --m6(@contents) {
54107
@contents { }
55108
color: green;
56109
}
57110
#e6 {
58111
@apply --m6;
59112
}
60-
61-
@mixin --m7(@contents) {
62-
@contents;
63-
color: green;
64-
}
65-
#e7 {
66-
@apply --m7 {};
67-
}
68113
</style>
69-
</head>
70-
<body>
71-
<div id="e1">This text should be green.</div>
72-
<div id="e2">This text should be green.</div>
73-
<div class="a b" id="e3">This text should be green.</div>
74-
<div class="c d" id="e4">This text should be green.</div>
75-
<div id="e5">This text should be green.</div>
76114
<div id="e6">This text should be green.</div>
77-
<div id="e7">This text should be green.</div>
78-
<script>
79-
test(() => {
80-
let target = document.getElementById('e1');
81-
assert_equals(getComputedStyle(target).color, 'rgb(0, 128, 0)');
82-
}, 'Simple @contents with no fallback');
83-
84-
test(() => {
85-
let target = document.getElementById('e2');
86-
assert_equals(getComputedStyle(target).color, 'rgb(0, 128, 0)');
87-
}, 'Implicit semicolon after @contents, at end of block');
88-
89-
test(() => {
90-
let target = document.getElementById('e3');
91-
assert_equals(getComputedStyle(target).color, 'rgb(0, 128, 0)');
92-
}, 'Block in @apply overrides fallback');
93-
94-
test(() => {
95-
let target = document.getElementById('e4');
96-
assert_equals(getComputedStyle(target).color, 'rgb(0, 128, 0)');
97-
}, 'Fallback is used if @apply has no block');
98-
99-
test(() => {
100-
let target = document.getElementById('e5');
101-
assert_equals(getComputedStyle(target).color, 'rgb(0, 128, 0)');
102-
}, '@contents is ignored if there is no @contents parameter');
115+
<script>
116+
test(() => {
117+
let target = document.getElementById('e6');
118+
assert_equals(getComputedStyle(target).color, 'rgb(0, 128, 0)');
119+
}, 'Empty @contents block is allowed, but does nothing');
120+
</script>
103121

104-
test(() => {
105-
let target = document.getElementById('e6');
106-
assert_equals(getComputedStyle(target).color, 'rgb(0, 128, 0)');
107-
}, 'Empty @contents block is allowed, but does nothing');
108122

109-
test(() => {
110-
let target = document.getElementById('e7');
111-
assert_equals(getComputedStyle(target).color, 'rgb(0, 128, 0)');
112-
}, 'Empty @contents parameter does not crash');
113-
</script>
123+
<style>
124+
@mixin --m7(@contents) {
125+
@contents;
126+
color: green;
127+
}
128+
#e7 {
129+
@apply --m7 {};
130+
}
131+
</style>
132+
<div id="e7">This text should be green.</div>
133+
<script>
134+
test(() => {
135+
let target = document.getElementById('e7');
136+
assert_equals(getComputedStyle(target).color, 'rgb(0, 128, 0)');
137+
}, 'Empty @contents parameter does not crash');
138+
</script>
114139
</body>
115140
</html>

‎css/css-mixins/mixin-cssom.tentative.html‎

Lines changed: 64 additions & 43 deletions
Original file line numberDiff line numberDiff line change
@@ -5,67 +5,88 @@
55
<link rel="help" href="https://drafts.csswg.org/css-mixins/#cssom">
66
<script src="/resources/testharness.js"></script>
77
<script src="/resources/testharnessreport.js"></script>
8-
<style>
9-
@mixin --m1() {
10-
color: green;
11-
& {
12-
--foo: bar;
13-
}
14-
}
15-
#foo {
16-
@apply --m1;
17-
}
18-
19-
@mixin --m2(@contents) {
20-
@contents
21-
}
22-
#foo {
23-
color: red;
24-
@apply --m2 { color: green; }
25-
}
26-
</style>
27-
</head>
28-
<body>
29-
<div id="target"></div>
30-
<script>
31-
let ss = document.styleSheets[0];
32-
33-
test(() => {
34-
assert_equals(ss.cssRules.length, 4);
35-
assert_equals(ss.cssRules[0].cssText,
8+
</head>
9+
<body>
10+
<style id=style1>
11+
@mixin --m1() {
12+
color: green;
13+
& {
14+
--foo: bar;
15+
}
16+
}
17+
</style>
18+
<script>
19+
test(() => {
20+
let ss = style1.sheet;
21+
assert_equals(ss.cssRules.length, 1);
22+
assert_equals(ss.cssRules[0].cssText,
3623
`@mixin --m1() {
3724
color: green;
3825
& { --foo: bar; }
3926
}`);
40-
}, 'serialization of @mixin');
27+
}, 'serialization of @mixin');
28+
</script>
29+
4130

42-
test(() => {
43-
assert_equals(ss.cssRules[1].cssText,
31+
<style id=style2>
32+
#foo {
33+
@apply --m1;
34+
}
35+
</style>
36+
<script>
37+
test(() => {
38+
let ss = style2.sheet;
39+
assert_equals(ss.cssRules[0].cssText,
4440
`#foo {
4541
@apply --m1;
4642
}`);
47-
}, 'serialization of rule with @apply');
43+
}, 'serialization of rule with @apply');
44+
</script>
45+
4846

49-
test(() => {
50-
assert_equals(ss.cssRules[2].cssText,
47+
<style id=style3>
48+
@mixin --m2(@contents) {
49+
@contents
50+
}
51+
</style>
52+
<script>
53+
test(() => {
54+
let ss = style3.sheet;
55+
assert_equals(ss.cssRules[0].cssText,
5156
`@mixin --m2(@contents) {
5257
@contents;
5358
}`);
54-
}, 'serialization of @mixin with @contents');
59+
}, 'serialization of @mixin with @contents');
60+
</script>
5561

56-
test(() => {
57-
assert_equals(ss.cssRules[3].cssText,
62+
63+
<style id=style4>
64+
#foo {
65+
color: red;
66+
@apply --m2 { color: green; }
67+
}
68+
</style>
69+
<script>
70+
test(() => {
71+
let ss = style4.sheet;
72+
assert_equals(ss.cssRules[0].cssText,
5873
`#foo {
5974
color: red;
6075
@apply --m2 { color: green; }
6176
}`);
6277
}, 'serialization of rule with @apply and contents argument');
78+
</script>
79+
6380

64-
test(() => {
65-
assert_throws_dom('SyntaxError', () => {
66-
ss.insertRule('@apply --m1();');
67-
});
68-
}, '@apply is not legal at top level');
69-
</script>
81+
<style id=style5>
82+
</style>
83+
<script>
84+
test(() => {
85+
assert_throws_dom('SyntaxError', () => {
86+
let ss = style5.sheet;
87+
ss.insertRule('@apply --m1();');
88+
});
89+
}, '@apply is not legal at top level');
90+
</script>
7091
</body>
7192
</html>

0 commit comments

Comments
 (0)