Skip to content

Commit 05738cc

Browse files
Javier Contreras Tenoriochromium-wpt-export-bot
Javier Contreras Tenorio
authored and
chromium-wpt-export-bot
committed
[gap-decorations] Rename inset properties according to new resolution
w3c/csswg-drafts#13697 was resolved on renaming the inset properties to [cap|junction] instead of [edge|interior]. Previous CLs deal with the behavior differences, this one deals with the rename, thus there is no behavior change Bug: 357648037 Change-Id: Iba44e26856e904905f34c8a936ff86dd9469329f Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/7785372 Reviewed-by: Alison Maher <almaher@microsoft.com> Commit-Queue: Javier Contreras <javiercon@microsoft.com> Cr-Commit-Position: refs/heads/main@{#1619727}
1 parent fffab38 commit 05738cc

39 files changed

Lines changed: 513 additions & 513 deletions

File tree

‎css/css-gaps/animation/column-rule-inset-interpolation.html‎

Lines changed: 40 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -11,10 +11,10 @@
1111
<style>
1212
.parent {
1313
column-rule-style: solid;
14-
column-rule-edge-inset-start: 20px;
15-
column-rule-edge-inset-end: 20px;
16-
column-rule-interior-inset-start: 20px;
17-
column-rule-interior-inset-end: 20px;
14+
column-rule-inset-cap-start: 20px;
15+
column-rule-inset-cap-end: 20px;
16+
column-rule-inset-junction-start: 20px;
17+
column-rule-inset-junction-end: 20px;
1818
}
1919

2020
.target {
@@ -24,17 +24,17 @@
2424
column-rule: 10px solid black;
2525

2626
column-rule-break: intersection;
27-
column-rule-edge-inset-start: 5px;
28-
column-rule-edge-inset-end: 5px;
29-
column-rule-interior-inset-start: 5px;
30-
column-rule-interior-inset-end: 5px;
27+
column-rule-inset-cap-start: 5px;
28+
column-rule-inset-cap-end: 5px;
29+
column-rule-inset-junction-start: 5px;
30+
column-rule-inset-junction-end: 5px;
3131
}
3232
</style>
3333
</head>
3434
<body>
3535
<script>
3636
test_interpolation({
37-
property: 'column-rule-edge-inset-start',
37+
property: 'column-rule-inset-cap-start',
3838
from: neutralKeyframe,
3939
to: '15px',
4040
}, [
@@ -46,7 +46,7 @@
4646
{ at: 1.5, expect: '20px' },
4747
]);
4848
test_interpolation({
49-
property: 'column-rule-edge-inset-end',
49+
property: 'column-rule-inset-cap-end',
5050
from: neutralKeyframe,
5151
to: '15px',
5252
}, [
@@ -58,7 +58,7 @@
5858
{ at: 1.5, expect: '20px' },
5959
]);
6060
test_interpolation({
61-
property: 'column-rule-interior-inset-start',
61+
property: 'column-rule-inset-junction-start',
6262
from: neutralKeyframe,
6363
to: '15px',
6464
}, [
@@ -70,7 +70,7 @@
7070
{ at: 1.5, expect: '20px' },
7171
]);
7272
test_interpolation({
73-
property: 'column-rule-interior-inset-end',
73+
property: 'column-rule-inset-junction-end',
7474
from: neutralKeyframe,
7575
to: '15px',
7676
}, [
@@ -83,7 +83,7 @@
8383
]);
8484

8585
test_interpolation({
86-
property: 'column-rule-edge-inset-start',
86+
property: 'column-rule-inset-cap-start',
8787
from: 'initial', // initial for `edge` is 0px.
8888
to: '10px',
8989
}, [
@@ -95,7 +95,7 @@
9595
{ at: 1.5, expect: '15px' },
9696
]);
9797
test_interpolation({
98-
property: 'column-rule-edge-inset-end',
98+
property: 'column-rule-inset-cap-end',
9999
from: 'initial', // initial for `edge` is 0px.
100100
to: '10px',
101101
}, [
@@ -107,7 +107,7 @@
107107
{ at: 1.5, expect: '15px' },
108108
]);
109109
test_interpolation({
110-
property: 'column-rule-interior-inset-start',
110+
property: 'column-rule-inset-junction-start',
111111
from: 'initial', // initial is 0.
112112
to: '-40%',
113113
}, [
@@ -119,7 +119,7 @@
119119
{ at: 1.5, expect: '-60%' },
120120
]);
121121
test_interpolation({
122-
property: 'column-rule-interior-inset-end',
122+
property: 'column-rule-inset-junction-end',
123123
from: 'initial', // initial is 0.
124124
to: '-40%',
125125
}, [
@@ -132,7 +132,7 @@
132132
]);
133133

134134
test_interpolation({
135-
property: 'column-rule-edge-inset-start',
135+
property: 'column-rule-inset-cap-start',
136136
from: 'inherit',
137137
to: '10px',
138138
}, [
@@ -144,7 +144,7 @@
144144
{ at: 1.5, expect: '5px' },
145145
]);
146146
test_interpolation({
147-
property: 'column-rule-edge-inset-end',
147+
property: 'column-rule-inset-cap-end',
148148
from: 'inherit',
149149
to: '10px',
150150
}, [
@@ -156,7 +156,7 @@
156156
{ at: 1.5, expect: '5px' },
157157
]);
158158
test_interpolation({
159-
property: 'column-rule-interior-inset-start',
159+
property: 'column-rule-inset-junction-start',
160160
from: 'inherit',
161161
to: '10px',
162162
}, [
@@ -168,7 +168,7 @@
168168
{ at: 1.5, expect: '5px' },
169169
]);
170170
test_interpolation({
171-
property: 'column-rule-interior-inset-end',
171+
property: 'column-rule-inset-junction-end',
172172
from: 'inherit',
173173
to: '10px',
174174
}, [
@@ -181,7 +181,7 @@
181181
]);
182182

183183
test_interpolation({
184-
property: 'column-rule-edge-inset-start',
184+
property: 'column-rule-inset-cap-start',
185185
from: 'unset',
186186
to: '10px',
187187
}, [
@@ -193,7 +193,7 @@
193193
{ at: 1.5, expect: '15px' },
194194
]);
195195
test_interpolation({
196-
property: 'column-rule-edge-inset-end',
196+
property: 'column-rule-inset-cap-end',
197197
from: 'unset',
198198
to: '10px',
199199
}, [
@@ -205,7 +205,7 @@
205205
{ at: 1.5, expect: '15px' },
206206
]);
207207
test_interpolation({
208-
property: 'column-rule-interior-inset-start',
208+
property: 'column-rule-inset-junction-start',
209209
from: 'unset',
210210
to: '-40%',
211211
}, [
@@ -217,7 +217,7 @@
217217
{ at: 1.5, expect: '-60%' },
218218
]);
219219
test_interpolation({
220-
property: 'column-rule-interior-inset-end',
220+
property: 'column-rule-inset-junction-end',
221221
from: 'unset',
222222
to: '-40%',
223223
}, [
@@ -230,47 +230,47 @@
230230
]);
231231

232232
test_interpolation({
233-
property: 'column-rule-edge-inset-start',
233+
property: 'column-rule-inset-cap-start',
234234
from: '-5px',
235235
to: '5px'
236236
}, [
237-
{ at: -0.3, expect: '-8px' }, // column-rule-edge-inset-start can be negative
237+
{ at: -0.3, expect: '-8px' }, // column-rule-inset-cap-start can be negative
238238
{ at: 0, expect: '-5px' },
239239
{ at: 0.3, expect: '-2px' },
240240
{ at: 0.6, expect: '1px' },
241241
{ at: 1, expect: '5px' },
242242
{ at: 1.5, expect: '10px' },
243243
]);
244244
test_interpolation({
245-
property: 'column-rule-edge-inset-end',
245+
property: 'column-rule-inset-cap-end',
246246
from: '-5px',
247247
to: '5px'
248248
}, [
249-
{ at: -0.3, expect: '-8px' }, // column-rule-edge-inset-end can be negative
249+
{ at: -0.3, expect: '-8px' }, // column-rule-inset-cap-end can be negative
250250
{ at: 0, expect: '-5px' },
251251
{ at: 0.3, expect: '-2px' },
252252
{ at: 0.6, expect: '1px' },
253253
{ at: 1, expect: '5px' },
254254
{ at: 1.5, expect: '10px' },
255255
]);
256256
test_interpolation({
257-
property: 'column-rule-interior-inset-start',
257+
property: 'column-rule-inset-junction-start',
258258
from: '-5px',
259259
to: '5px'
260260
}, [
261-
{ at: -0.3, expect: '-8px' }, // column-rule-interior-inset-start can be negative
261+
{ at: -0.3, expect: '-8px' }, // column-rule-inset-junction-start can be negative
262262
{ at: 0, expect: '-5px' },
263263
{ at: 0.3, expect: '-2px' },
264264
{ at: 0.6, expect: '1px' },
265265
{ at: 1, expect: '5px' },
266266
{ at: 1.5, expect: '10px' },
267267
]);
268268
test_interpolation({
269-
property: 'column-rule-interior-inset-end',
269+
property: 'column-rule-inset-junction-end',
270270
from: '-5px',
271271
to: '5px'
272272
}, [
273-
{ at: -0.3, expect: '-8px' }, // column-rule-interior-inset-end can be negative
273+
{ at: -0.3, expect: '-8px' }, // column-rule-inset-junction-end can be negative
274274
{ at: 0, expect: '-5px' },
275275
{ at: 0.3, expect: '-2px' },
276276
{ at: 0.6, expect: '1px' },
@@ -279,7 +279,7 @@
279279
]);
280280

281281
test_interpolation({
282-
property: 'column-rule-edge-inset-start',
282+
property: 'column-rule-inset-cap-start',
283283
from: '-100%',
284284
to: '1px',
285285
}, [
@@ -291,7 +291,7 @@
291291
{ at: 1.5, expect: 'calc(50% + 1.5px)' },
292292
]);
293293
test_interpolation({
294-
property: 'column-rule-edge-inset-end',
294+
property: 'column-rule-inset-cap-end',
295295
from: '-100%',
296296
to: '1px',
297297
}, [
@@ -303,7 +303,7 @@
303303
{ at: 1.5, expect: 'calc(50% + 1.5px)' },
304304
]);
305305
test_interpolation({
306-
property: 'column-rule-interior-inset-start',
306+
property: 'column-rule-inset-junction-start',
307307
from: '-100%',
308308
to: '1px',
309309
}, [
@@ -315,7 +315,7 @@
315315
{ at: 1.5, expect: 'calc(50% + 1.5px)' },
316316
]);
317317
test_interpolation({
318-
property: 'column-rule-interior-inset-end',
318+
property: 'column-rule-inset-junction-end',
319319
from: '-100%',
320320
to: '1px',
321321
}, [
@@ -328,7 +328,7 @@
328328
]);
329329

330330
test_interpolation({
331-
property: 'column-rule-edge-inset-start',
331+
property: 'column-rule-inset-cap-start',
332332
from: '10px',
333333
to: '-10%',
334334
}, [
@@ -340,7 +340,7 @@
340340
{ at: 1.5, expect: 'calc(-15% - 5px)' },
341341
]);
342342
test_interpolation({
343-
property: 'column-rule-edge-inset-end',
343+
property: 'column-rule-inset-cap-end',
344344
from: '10px',
345345
to: '-10%',
346346
}, [
@@ -352,7 +352,7 @@
352352
{ at: 1.5, expect: 'calc(-15% - 5px)' },
353353
]);
354354
test_interpolation({
355-
property: 'column-rule-interior-inset-start',
355+
property: 'column-rule-inset-junction-start',
356356
from: '10px',
357357
to: '-10%',
358358
}, [
@@ -364,7 +364,7 @@
364364
{ at: 1.5, expect: 'calc(-15% - 5px)' },
365365
]);
366366
test_interpolation({
367-
property: 'column-rule-interior-inset-end',
367+
property: 'column-rule-inset-junction-end',
368368
from: '10px',
369369
to: '-10%',
370370
}, [

‎css/css-gaps/animation/gap-decorations-inset-neutral-keyframe-001.html‎

Lines changed: 12 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -14,29 +14,29 @@
1414
<script>
1515
test(() => {
1616
target.style.rowRuleStyle = 'solid';
17-
target.style.rowRuleEdgeInsetStart = '1px';
18-
target.style.rowRuleEdgeInsetEnd = '1px';
19-
target.style.rowRuleInteriorInsetStart = '1px';
20-
target.style.rowRuleInteriorInsetEnd = '1px';
21-
var animation = target.animate([{}, {rowRuleEdgeInsetStart: '11px'}], 1000);
17+
target.style.rowRuleInsetCapStart = '1px';
18+
target.style.rowRuleInsetCapEnd = '1px';
19+
target.style.rowRuleInsetJunctionStart = '1px';
20+
target.style.rowRuleInsetJunctionEnd = '1px';
21+
var animation = target.animate([{}, {rowRuleInsetCapStart: '11px'}], 1000);
2222
animation.pause();
2323
animation.currentTime = 500;
24-
assert_equals(getComputedStyle(target).rowRuleEdgeInsetStart, '6px');
24+
assert_equals(getComputedStyle(target).rowRuleInsetCapStart, '6px');
2525

26-
var animation2 = target.animate([{}, {rowRuleEdgeInsetEnd: '11px'}], 1000);
26+
var animation2 = target.animate([{}, {rowRuleInsetCapEnd: '11px'}], 1000);
2727
animation2.pause();
2828
animation2.currentTime = 500;
29-
assert_equals(getComputedStyle(target).rowRuleEdgeInsetEnd, '6px');
29+
assert_equals(getComputedStyle(target).rowRuleInsetCapEnd, '6px');
3030

31-
var animation3 = target.animate([{}, {rowRuleInteriorInsetStart: '11px'}], 1000);
31+
var animation3 = target.animate([{}, {rowRuleInsetJunctionStart: '11px'}], 1000);
3232
animation3.pause();
3333
animation3.currentTime = 500;
34-
assert_equals(getComputedStyle(target).rowRuleInteriorInsetStart, '6px');
34+
assert_equals(getComputedStyle(target).rowRuleInsetJunctionStart, '6px');
3535

36-
var animation4 = target.animate([{}, {rowRuleInteriorInsetEnd: '11px'}], 1000);
36+
var animation4 = target.animate([{}, {rowRuleInsetJunctionEnd: '11px'}], 1000);
3737
animation4.pause();
3838
animation4.currentTime = 500;
39-
assert_equals(getComputedStyle(target).rowRuleInteriorInsetEnd, '6px');
39+
assert_equals(getComputedStyle(target).rowRuleInsetJunctionEnd, '6px');
4040
}, 'gap decorations row-rule-inset properties support neutral keyframe.');
4141
</script>
4242
</body>

‎css/css-gaps/animation/gap-decorations-inset-neutral-keyframe-002.html‎

Lines changed: 12 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -14,30 +14,30 @@
1414
<script>
1515
test(() => {
1616
target.style.columnRuleStyle = 'solid';
17-
target.style.columnRuleEdgeInsetStart = '1px';
18-
target.style.columnRuleEdgeInsetEnd = '1px';
19-
target.style.columnRuleInteriorInsetStart = '1px';
20-
target.style.columnRuleInteriorInsetEnd = '1px';
17+
target.style.columnRuleInsetCapStart = '1px';
18+
target.style.columnRuleInsetCapEnd = '1px';
19+
target.style.columnRuleInsetJunctionStart = '1px';
20+
target.style.columnRuleInsetJunctionEnd = '1px';
2121

22-
var animation = target.animate([{}, {columnRuleEdgeInsetStart: '11px'}], 1000);
22+
var animation = target.animate([{}, {columnRuleInsetCapStart: '11px'}], 1000);
2323
animation.pause();
2424
animation.currentTime = 500;
25-
assert_equals(getComputedStyle(target).columnRuleEdgeInsetStart, '6px');
25+
assert_equals(getComputedStyle(target).columnRuleInsetCapStart, '6px');
2626

27-
var animation2 = target.animate([{}, {columnRuleEdgeInsetEnd: '11px'}], 1000);
27+
var animation2 = target.animate([{}, {columnRuleInsetCapEnd: '11px'}], 1000);
2828
animation2.pause();
2929
animation2.currentTime = 500;
30-
assert_equals(getComputedStyle(target).columnRuleEdgeInsetEnd, '6px');
30+
assert_equals(getComputedStyle(target).columnRuleInsetCapEnd, '6px');
3131

32-
var animation3 = target.animate([{}, {columnRuleInteriorInsetStart: '11px'}], 1000);
32+
var animation3 = target.animate([{}, {columnRuleInsetJunctionStart: '11px'}], 1000);
3333
animation3.pause();
3434
animation3.currentTime = 500;
35-
assert_equals(getComputedStyle(target).columnRuleInteriorInsetStart, '6px');
35+
assert_equals(getComputedStyle(target).columnRuleInsetJunctionStart, '6px');
3636

37-
var animation4 = target.animate([{}, {columnRuleInteriorInsetEnd: '11px'}], 1000);
37+
var animation4 = target.animate([{}, {columnRuleInsetJunctionEnd: '11px'}], 1000);
3838
animation4.pause();
3939
animation4.currentTime = 500;
40-
assert_equals(getComputedStyle(target).columnRuleInteriorInsetEnd, '6px');
40+
assert_equals(getComputedStyle(target).columnRuleInsetJunctionEnd, '6px');
4141
}, 'gap decorations column-rule-inset properties support neutral keyframe.');
4242
</script>
4343
</body>

0 commit comments

Comments
 (0)