Skip to content

Commit b309d20

Browse files
Javier Contreras Tenoriochromium-wpt-export-bot
Javier Contreras Tenorio
authored and
chromium-wpt-export-bot
committed
[gap-decorations] Rename outset properties to inset
Per recent resolutions to the spec, rule `outset` properties are going to be named with `inset` instead. Although this requires some changes in behavior, this CL only renames the relevant properties (and their shorthands). A follow up CL will rename any test files referring to "outset" and a follow up CL to that will implement the change in behavior along with the changes in tests. w3c/csswg-drafts#12848 w3c/csswg-drafts#12603 The links in some comments have been modified too to point to their new sections in the spec, although they won't work right now since the PR to change the spec is still under review w3c/csswg-drafts#13024. Bug: 357648037, 440054556 Change-Id: I81414a8dc7ee9974e90dbae38f46ee85d76a6251 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/7127743 Commit-Queue: Javier Contreras <[email protected]> Reviewed-by: Alison Maher <[email protected]> Cr-Commit-Position: refs/heads/main@{#1542664}
1 parent 295c5ce commit b309d20

File tree

50 files changed

+329
-329
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

50 files changed

+329
-329
lines changed

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

Lines changed: 41 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
<html>
33
<head>
44
<meta charset="UTF-8">
5-
<title>column-rule-outset properties interpolation</title>
5+
<title>column-rule-inset properties interpolation</title>
66
<link rel="author" title="Javier Contreras" href="mailto:[email protected]">
77
<link rel="help" href="https://drafts.csswg.org/css-gaps-1/#outset">
88
<script src="/resources/testharness.js"></script>
@@ -11,10 +11,10 @@
1111
<style>
1212
.parent {
1313
column-rule-style: solid;
14-
column-rule-edge-start-outset: 20px;
15-
column-rule-edge-end-outset: 20px;
16-
column-rule-interior-start-outset: 20px;
17-
column-rule-interior-end-outset: 20px;
14+
column-rule-edge-start-inset: 20px;
15+
column-rule-edge-end-inset: 20px;
16+
column-rule-interior-start-inset: 20px;
17+
column-rule-interior-end-inset: 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-start-outset: 5px;
28-
column-rule-edge-end-outset: 5px;
29-
column-rule-interior-start-outset: 5px;
30-
column-rule-interior-end-outset: 5px;
27+
column-rule-edge-start-inset: 5px;
28+
column-rule-edge-end-inset: 5px;
29+
column-rule-interior-start-inset: 5px;
30+
column-rule-interior-end-inset: 5px;
3131
}
3232
</style>
3333
</head>
3434
<body>
3535
<script>
3636
test_interpolation({
37-
property: 'column-rule-edge-start-outset',
37+
property: 'column-rule-edge-start-inset',
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-end-outset',
49+
property: 'column-rule-edge-end-inset',
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-start-outset',
61+
property: 'column-rule-interior-start-inset',
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-end-outset',
73+
property: 'column-rule-interior-end-inset',
7474
from: neutralKeyframe,
7575
to: '15px',
7676
}, [
@@ -83,7 +83,7 @@
8383
]);
8484

8585
test_interpolation({
86-
property: 'column-rule-edge-start-outset',
86+
property: 'column-rule-edge-start-inset',
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-end-outset',
98+
property: 'column-rule-edge-end-inset',
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-start-outset',
110+
property: 'column-rule-interior-start-inset',
111111
from: 'initial', // initial is 50%.
112112
to: '40%',
113113
}, [
@@ -119,7 +119,7 @@
119119
{ at: 1.5, expect: '35%' },
120120
]);
121121
test_interpolation({
122-
property: 'column-rule-interior-end-outset',
122+
property: 'column-rule-interior-end-inset',
123123
from: 'initial', // initial is 50%.
124124
to: '40%',
125125
}, [
@@ -132,7 +132,7 @@
132132
]);
133133

134134
test_interpolation({
135-
property: 'column-rule-edge-start-outset',
135+
property: 'column-rule-edge-start-inset',
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-end-outset',
147+
property: 'column-rule-edge-end-inset',
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-start-outset',
159+
property: 'column-rule-interior-start-inset',
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-end-outset',
171+
property: 'column-rule-interior-end-inset',
172172
from: 'inherit',
173173
to: '10px',
174174
}, [
@@ -181,7 +181,7 @@
181181
]);
182182

183183
test_interpolation({
184-
property: 'column-rule-edge-start-outset',
184+
property: 'column-rule-edge-start-inset',
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-end-outset',
196+
property: 'column-rule-edge-end-inset',
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-start-outset',
208+
property: 'column-rule-interior-start-inset',
209209
from: 'unset',
210210
to: '40%',
211211
}, [
@@ -217,7 +217,7 @@
217217
{ at: 1.5, expect: '35%' },
218218
]);
219219
test_interpolation({
220-
property: 'column-rule-interior-end-outset',
220+
property: 'column-rule-interior-end-inset',
221221
from: 'unset',
222222
to: '40%',
223223
}, [
@@ -230,47 +230,47 @@
230230
]);
231231

232232
test_interpolation({
233-
property: 'column-rule-edge-start-outset',
233+
property: 'column-rule-edge-start-inset',
234234
from: '-5px',
235235
to: '5px'
236236
}, [
237-
{ at: -0.3, expect: '-8px' }, // column-rule-edge-start-outset can be negative
237+
{ at: -0.3, expect: '-8px' }, // column-rule-edge-start-inset 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-end-outset',
245+
property: 'column-rule-edge-end-inset',
246246
from: '-5px',
247247
to: '5px'
248248
}, [
249-
{ at: -0.3, expect: '-8px' }, // column-rule-edge-end-outset can be negative
249+
{ at: -0.3, expect: '-8px' }, // column-rule-edge-end-inset 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-start-outset',
257+
property: 'column-rule-interior-start-inset',
258258
from: '-5px',
259259
to: '5px'
260260
}, [
261-
{ at: -0.3, expect: '-8px' }, // column-rule-interior-start-outset can be negative
261+
{ at: -0.3, expect: '-8px' }, // column-rule-interior-start-inset 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-end-outset',
269+
property: 'column-rule-interior-end-inset',
270270
from: '-5px',
271271
to: '5px'
272272
}, [
273-
{ at: -0.3, expect: '-8px' }, // column-rule-interior-end-outset can be negative
273+
{ at: -0.3, expect: '-8px' }, // column-rule-interior-end-inset 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-start-outset',
282+
property: 'column-rule-edge-start-inset',
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-end-outset',
294+
property: 'column-rule-edge-end-inset',
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-start-outset',
306+
property: 'column-rule-interior-start-inset',
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-end-outset',
318+
property: 'column-rule-interior-end-inset',
319319
from: '100%',
320320
to: '1px',
321321
}, [
@@ -328,7 +328,7 @@
328328
]);
329329

330330
test_interpolation({
331-
property: 'column-rule-edge-start-outset',
331+
property: 'column-rule-edge-start-inset',
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-end-outset',
343+
property: 'column-rule-edge-end-inset',
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-start-outset',
355+
property: 'column-rule-interior-start-inset',
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-end-outset',
367+
property: 'column-rule-interior-end-inset',
368368
from: '10px',
369369
to: '10%',
370370
}, [

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

Lines changed: 15 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -2,9 +2,9 @@
22
<html>
33
<head>
44
<meta charset="utf-8">
5-
<title>gap decorations row-rule-outset properties neutral keyframe</title>
5+
<title>gap decorations row-rule-inset properties neutral keyframe</title>
66
<link rel="help" href="https://drafts.csswg.org/css-gaps-1/#outset">
7-
<meta name="assert" content="gap decorations row-rule-outset value list supports neutral keyframe.">
7+
<meta name="assert" content="gap decorations row-rule-inset value list supports neutral keyframe.">
88
<script src="/resources/testharness.js"></script>
99
<script src="/resources/testharnessreport.js"></script>
1010
<script src="/css/support/interpolation-testcommon.js"></script>
@@ -14,30 +14,30 @@
1414
<script>
1515
test(() => {
1616
target.style.rowRuleStyle = 'solid';
17-
target.style.rowRuleEdgeStartOutset = '1px';
18-
target.style.rowRuleEdgeEndOutset = '1px';
19-
target.style.rowRuleInteriorStartOutset = '1px';
20-
target.style.rowRuleInteriorEndOutset = '1px';
21-
var animation = target.animate([{}, {rowRuleEdgeStartOutset: '11px'}], 1000);
17+
target.style.rowRuleEdgeStartInset = '1px';
18+
target.style.rowRuleEdgeEndInset = '1px';
19+
target.style.rowRuleInteriorStartInset = '1px';
20+
target.style.rowRuleInteriorEndInset = '1px';
21+
var animation = target.animate([{}, {rowRuleEdgeStartInset: '11px'}], 1000);
2222
animation.pause();
2323
animation.currentTime = 500;
24-
assert_equals(getComputedStyle(target).rowRuleEdgeStartOutset, '6px');
24+
assert_equals(getComputedStyle(target).rowRuleEdgeStartInset, '6px');
2525

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

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

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

0 commit comments

Comments
 (0)