Skip to content

Commit 2135c04

Browse files
tursunovachromium-wpt-export-bot
tursunova
authored and
chromium-wpt-export-bot
committed
Use css syntax stream parser in attr()
With recent modifications in attr() spec [0], <attr-type> is now replaced with <syntax> [1], so replaced css_attr_type with css syntax stream parser. Since <dimension-unit> is not part of <syntax>, temporary remove tests with dimension unit types until the spec issue [2] will be resolved. [0] https://drafts.csswg.org/css-values-5/#attr-notation> [1] https://drafts.csswg.org/css-values-5/#css-syntax [2] w3c/csswg-drafts#11034 Bug: 369858674, 40320391 Change-Id: I865c8cf5c848339a9766be0a04c5dc3f94983878 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/5975668 Reviewed-by: Anders Hartvoll Ruud <[email protected]> Commit-Queue: Munira Tursunova <[email protected]> Cr-Commit-Position: refs/heads/main@{#1376296}
1 parent 30d1140 commit 2135c04

18 files changed

+123
-258
lines changed

‎css/css-values/attr-all-types.html

Lines changed: 82 additions & 117 deletions
Original file line numberDiff line numberDiff line change
@@ -22,20 +22,6 @@
2222
<div id="expected"></div>
2323

2424
<script>
25-
const dimensionTypeToUnits = {
26-
"length": ["em", "ex", "cap", "ch", "ic", "rem", "lh", "rlh", "vw", "vh ", "vi", "vb", "vmin", "vmax"],
27-
"angle": ["deg", "grad", "rad", "turn"],
28-
"time": ["ms", "ms"],
29-
"frequency": ["Hz", "kHz"],
30-
"flex": ["fr"]
31-
};
32-
const dimensionTypeToProperty = {
33-
"length": ["width"],
34-
"angle": ["font-style"],
35-
"time": ["transition-duration"],
36-
"flex": ["grid-template-columns"]
37-
}
38-
3925
function test_valid_attr(property, attrString, attrValue, expectedValue) {
4026
var elem = document.getElementById("attr");
4127
elem.setAttribute("data-foo", attrValue);
@@ -70,112 +56,91 @@
7056
elem.style.setProperty(property, null);
7157
}
7258

73-
function test_dimension_types_and_units() {
74-
for(const [type, units] of Object.entries(dimensionTypeToUnits)) {
75-
const property = dimensionTypeToProperty[type];
76-
const val = "3";
77-
units.forEach(unit => {
78-
const expectedValue = val + unit;
79-
80-
const dimensionTypeAttrString = 'attr(data-foo ' + type + ')';
81-
test_valid_attr(property, dimensionTypeAttrString, expectedValue, expectedValue);
82-
83-
const dimensionUnitAttrString = 'attr(data-foo ' + unit + ')';
84-
test_valid_attr(property, dimensionUnitAttrString, val, expectedValue);
85-
});
86-
}
87-
}
88-
8959
test_valid_attr('content', 'attr(data-foo)', 'abc', '"abc"');
9060
test_valid_attr('content', 'attr(data-foo,)', 'abc', '"abc"');
9161

92-
test_valid_attr('content', 'attr(data-foo string)', 'abc', '"abc"');
93-
test_valid_attr('content', 'attr(data-foo string,)', 'abc', '"abc"');
94-
test_valid_attr('content', 'attr(data-foo string)', 'attr(data-foo)', '"attr(data-foo)"');
95-
96-
test_valid_attr('animation-name', 'attr(data-foo ident)', 'anim', 'anim');
97-
test_valid_attr('animation-name', 'attr(data-foo ident, anim-fallback)', '"anim"', 'anim-fallback');
98-
test_valid_attr('animation-name', 'attr(data-foo ident, anim-fallback)', 'initial', 'anim-fallback');
99-
100-
test_valid_attr('background-color', 'attr(data-foo color)', 'red', 'red');
101-
test_valid_attr('background-color', 'attr(data-foo color)', '#ff0099aa', '#ff0099aa');
102-
test_valid_attr('background-color', 'attr(data-foo color, red)', '10', 'red');
103-
test_valid_attr('background-color', 'attr(data-foo color, green)', '1000px', 'green');
104-
test_valid_attr('background-color', 'attr(data-foo color, green)', 'rgb(255, 0, 0)', 'green');
105-
106-
test_valid_attr('font-weight', 'attr(data-foo number)', '10', '10');
107-
test_valid_attr('font-weight', 'attr(data-foo number, 30)', '10px', '30');
108-
test_valid_attr('font-weight', 'attr(data-foo number, calc(10 + 20))', '10px', '30');
109-
110-
test_valid_attr('font-size', 'attr(data-foo percentage)', '10%', '10%');
111-
test_valid_attr('font-size', 'attr(data-foo percentage, 10px)', 'abc', '10px');
112-
test_valid_attr('--x', 'attr(data-foo percentage, abc)', '10', 'abc');
113-
114-
test_valid_attr('width', 'attr(data-foo length)', '10px', '10px');
115-
test_valid_attr('width', 'attr(data-foo length, red)', '10px', '10px');
116-
test_valid_attr('width', 'attr(data-foo length, 42px)', 'calc(1px + 3px)', '42px');
117-
118-
test_valid_attr('font-style', 'attr(data-foo angle)', '10deg', '10deg');
119-
test_valid_attr('font-style', 'attr(data-foo angle, 10deg)', '30', '10deg');
120-
test_valid_attr('font-style', 'attr(data-foo angle, italic)', '30', 'italic');
121-
122-
test_valid_attr('transition-duration', 'attr(data-foo time)', '10ms', '10ms');
123-
test_valid_attr('transition-duration', 'attr(data-foo time, 30s)', '10m', '30s');
124-
test_valid_attr('transition-duration', 'attr(data-foo time, calc(10s + 20s))', '10m', '30s');
125-
126-
test_valid_attr('grid-template-columns', '30px attr(data-foo flex)', '1fr', '30px 1fr');
127-
test_valid_attr('grid-template-columns', 'attr(data-foo flex, 3fr)', '1fr 1fr', '3fr');
128-
test_valid_attr('grid-template-columns', 'attr(data-foo flex, calc(1px + 2px))', '10px', '3px');
129-
130-
test_valid_attr('height', 'attr(data-foo px)', '10', '10px');
131-
test_valid_attr('width', 'calc(attr(data-foo px) + 1px)', '10', '11px');
132-
test_valid_attr('--x', 'attr(data-foo px) 11px', '10', '10px 11px');
133-
test_valid_attr('grid-template-columns', 'attr(data-foo fr)', '10', '10fr');
134-
test_valid_attr('grid-template-columns', 'attr(data-foo fr, 3fr)', '10fr', '3fr');
135-
136-
test_valid_attr('--string', 'attr(data-foo string)', 'hello', '"hello"');
137-
test_valid_attr('--string-list', 'attr(data-foo string)', 'hello', '"hello"');
138-
139-
test_dimension_types_and_units();
140-
141-
test_invalid_attr('animation-name', 'attr(data-foo ident)', 'initial');
142-
test_invalid_attr('animation-name', 'attr(data-foo ident)', '"anim"');
143-
test_invalid_attr('animation-name', 'attr(data-foo ident)', '"none"');
144-
145-
test_invalid_attr('background-color', 'attr(data-foo color)', 'rgb(0 255 0)');
146-
test_invalid_attr('background-color', 'attr(data-foo color)', 'color-mix(in lch, red, pink)');
147-
test_invalid_attr('background-color', 'attr(data-foo color)', 'light-dark(#333b3c, #efefec)');
148-
test_invalid_attr('background-color', 'attr(data-foo red)', 'abc');
149-
test_invalid_attr('background-color', 'attr(data-foo, red)', 'abc');
150-
151-
test_invalid_attr('font-size', 'attr(data-foo number)', '10');
152-
test_invalid_attr('font-weight', 'attr(data-foo number),', '10');
153-
test_invalid_attr('font-weight', 'attr(data-foo number)', 'calc(1 + 3)');
154-
155-
test_invalid_attr('font-size', 'attr(data-foo percentage)', 'abc');
156-
test_invalid_attr('font-size', 'attr(data-foo percentage)', '10% a');
157-
test_invalid_attr('font-size', 'attr(data-foo percentage, 10rad)', 'abc');
158-
159-
test_invalid_attr('width', 'attr(data-foo length)', '10');
160-
test_invalid_attr('width', 'attr(data-foo length, 30)', 'calc(10 + 20)');
161-
test_invalid_attr('width', 'attr(data-foo length, calc(10 + 20))', 'abc');
162-
163-
test_invalid_attr('font-style', 'attr(data-foo angle)', '10%');
164-
test_invalid_attr('font-style', 'attr(data-foo angle)', 'calc(10px + 20px)');
165-
test_invalid_attr('font-style', 'attr(data-foo angle, calc(10 + 20))', 'calc(10px + 20px)');
166-
167-
test_invalid_attr('transition-duration', 'attr(data-foo time)', '10');
168-
test_invalid_attr('transition-duration', 'attr(data-foo time)', '10 ms');
169-
test_invalid_attr('transition-duration', 'attr(data-foo time)', 'calc(1ms + 2ms)s');
170-
171-
test_invalid_attr('grid-template-columns', 'attr(data-foo flex)', '10px');
172-
test_invalid_attr('grid-template-columns', 'attr(data-foo flex)', '"30fr"');
173-
test_invalid_attr('grid-template-columns', 'attr(data-foo flex, calc(1deg + 2deg))', '10px');
174-
175-
test_invalid_attr('width', 'attr(data-foo px)', '10px');
176-
test_invalid_attr('height', 'attr(data-foo fr)', '10');
177-
test_invalid_attr('transition-duration', 'attr(data-foo ms)', '10px');
178-
test_invalid_attr('transition-duration', 'attr(data-foo ms)', '10px foo');
62+
test_valid_attr('content', 'attr(data-foo <string>)', '"abc"', '"abc"');
63+
test_valid_attr('content', 'attr(data-foo <string>,)', '"abc"', '"abc"');
64+
test_valid_attr('content', 'attr(data-foo <string>)', '"attr(data-foo)"', '"attr(data-foo)"');
65+
66+
test_valid_attr('animation-name', 'attr(data-foo <custom-ident>)', 'anim', 'anim');
67+
test_valid_attr('animation-name', 'attr(data-foo <custom-ident>, anim-fallback)', '"anim"', 'anim-fallback');
68+
test_valid_attr('animation-name', 'attr(data-foo <custom-ident>, anim-fallback)', 'initial', 'anim-fallback');
69+
70+
test_valid_attr('background-color', 'attr(data-foo <color>)', 'red', 'red');
71+
test_valid_attr('background-color', 'attr(data-foo <color>)', '#ff0099aa', '#ff0099aa');
72+
test_valid_attr('background-color', 'attr(data-foo <color>, red)', '10', 'red');
73+
test_valid_attr('background-color', 'attr(data-foo <color>, green)', '1000px', 'green');
74+
test_valid_attr('background-color', 'attr(data-foo <color>, green)', 'rgb(255, 0, 0)', 'rgb(255, 0, 0)');
75+
test_valid_attr('background-color', 'attr(data-foo <color>)', 'color-mix(in lch, red, pink)', 'color-mix(in lch, red, pink)');
76+
test_valid_attr('background-color', 'attr(data-foo <color>)', 'light-dark(#333b3c, #efefec)', 'light-dark(#333b3c, #efefec)');
77+
78+
test_valid_attr('font-weight', 'attr(data-foo <number>)', '10', '10');
79+
test_valid_attr('font-weight', 'attr(data-foo <number>, 30)', '10px', '30');
80+
test_valid_attr('font-weight', 'attr(data-foo <number> | lighter | bold, bold)', 'lighter', 'lighter');
81+
test_valid_attr('font-weight', 'attr(data-foo <number> | lighter | bold, lighter)', '10px', 'lighter');
82+
test_valid_attr('font-weight', 'attr(data-foo <number>)', 'calc(3 + 3)', '6');
83+
test_valid_attr('font-weight', 'attr(data-foo <number>, calc(10 + 20))', '10px', '30');
84+
85+
test_valid_attr('font-size', 'attr(data-foo <percentage>)', '10%', '10%');
86+
test_valid_attr('font-size', 'attr(data-foo <percentage>, 10px)', 'abc', '10px');
87+
test_valid_attr('font-size', 'attr(data-foo <percentage> | <length>, 10)', '10px', '10px');
88+
test_valid_attr('--x', 'attr(data-foo <percentage>, abc)', '10', 'abc');
89+
90+
test_valid_attr('width', 'attr(data-foo <length>)', '10px', '10px');
91+
test_valid_attr('width', 'attr(data-foo <length>, red)', '10px', '10px');
92+
test_valid_attr('width', 'attr(data-foo <length>, 42px)', 'calc(1px + 3px)', '4px');
93+
94+
test_valid_attr('font-style', 'attr(data-foo <angle>)', '10deg', '10deg');
95+
test_valid_attr('font-style', 'attr(data-foo <angle>, 10deg)', '30', '10deg');
96+
test_valid_attr('font-style', 'attr(data-foo <angle>, italic)', '30', 'italic');
97+
test_valid_attr('font-style', 'attr(data-foo <angle>, 3deg)', 'italic', '3deg');
98+
test_valid_attr('font-style', 'attr(data-foo <angle> | italic, 3deg)', 'italic', 'italic');
99+
100+
test_valid_attr('transition-duration', 'attr(data-foo <time>)', '10ms', '10ms');
101+
test_valid_attr('transition-duration', 'attr(data-foo <time>, 30s)', '10m', '30s');
102+
test_valid_attr('transition-duration', 'attr(data-foo <time>, calc(10s + 20s))', '10m', '30s');
103+
104+
test_valid_attr('--x', 'attr(data-foo <number>) 11', '10', '10 11');
105+
test_valid_attr('--string', 'attr(data-foo <string>)', '"hello"', '"hello"');
106+
test_valid_attr('--string-list', 'attr(data-foo <string>+)', '"hello" "hi"', '"hello" "hi"');
107+
108+
test_invalid_attr('animation-name', 'attr(data-foo string)', 'abc');
109+
test_invalid_attr('animation-name', 'attr(data-foo < string>)', 'abc');
110+
test_invalid_attr('animation-name', 'attr(data-foo <string >)', 'abc');
111+
112+
test_invalid_attr('animation-name', 'attr(data-foo <custom-ident>)', 'initial');
113+
test_invalid_attr('animation-name', 'attr(data-foo <custom-ident>)', '"anim"');
114+
test_invalid_attr('animation-name', 'attr(data-foo <custom-ident>)', '"none"');
115+
test_invalid_attr('animation-name', 'attr(data-foo <custom-ident> <ident>)', '"none"');
116+
117+
test_invalid_attr('background-color', 'attr(data-foo <color>)', 'rgb(0)');
118+
test_invalid_attr('background-color', 'attr(data-foo <red>)', 'abc');
119+
test_invalid_attr('background-color', 'attr(data-foo <color> | <red>)', 'abc');
120+
test_invalid_attr('background-color', 'attr(data-foo <color> |)', 'abc');
121+
test_invalid_attr('background-color', 'attr(data-foo, <red>)', 'abc');
122+
123+
test_invalid_attr('font-size', 'attr(data-foo <number>)', '10');
124+
test_invalid_attr('font-size', 'attr(data-foo <number> !)', '10');
125+
test_invalid_attr('font-weight', 'attr(data-foo <number>),', '10');
126+
test_invalid_attr('width', 'attr(data-foo <number>, 30px)', '10');
127+
128+
test_invalid_attr('font-size', 'attr(data-foo <percentage>)', 'abc');
129+
test_invalid_attr('font-size', 'attr(data-foo <percentage>)', '10% a');
130+
test_invalid_attr('font-size', 'attr(data-foo <percentage>, 10rad)', 'abc');
131+
test_invalid_attr('font-size', 'attr(data-foo <number> | <length>, 30px)', '10');
132+
133+
test_invalid_attr('width', 'attr(data-foo <length>)', '10');
134+
test_invalid_attr('width', 'attr(data-foo <length>, 30)', 'calc(10 + 20)');
135+
test_invalid_attr('width', 'attr(data-foo <length>, calc(10 + 20))', 'abc');
136+
137+
test_invalid_attr('font-style', 'attr(data-foo <angle>)', '10%');
138+
test_invalid_attr('font-style', 'attr(data-foo <angle>)', 'calc(10px + 20px)');
139+
test_invalid_attr('font-style', 'attr(data-foo <angle>, calc(10 + 20))', 'calc(10px + 20px)');
140+
141+
test_invalid_attr('transition-duration', 'attr(data-foo <time>)', '10');
142+
test_invalid_attr('transition-duration', 'attr(data-foo <time>)', '10 ms');
143+
test_invalid_attr('transition-duration', 'attr(data-foo <time>)', 'calc(1ms + 2ms)s');
179144

180145
test_invalid_attr('width', 'attr(())', '10px');
181146
</script>

‎css/css-values/attr-color-invalid-cast.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,7 @@
3030
html { background: white; overflow: hidden; }
3131
#outer { position: relative; background: red; width: 200px; height: 200px; }
3232

33-
#outer { background: attr(data-test color, green); }
33+
#outer { background: attr(data-test <color>, green); }
3434

3535
</style>
3636

‎css/css-values/attr-color-valid.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,7 @@
3030
html { background: white; overflow: hidden; }
3131
#outer { position: relative; background: red; width: 200px; height: 200px; }
3232

33-
#outer { background: attr(data-test color); }
33+
#outer { background: attr(data-test <color>); }
3434

3535
</style>
3636

‎css/css-values/attr-container-style-query.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77
#container {
88
--foo: bar;
99
}
10-
@container style(--foo: attr(data-foo ident)) {
10+
@container style(--foo: attr(data-foo <custom-ident>)) {
1111
#target { color: green; }
1212
}
1313
</style>

‎css/css-values/attr-crash.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55
<head>
66
<style>
77
#div {
8-
--prop: attr(data-foo ident);
8+
--prop: attr(data-foo <ident>);
99
}
1010
</style>
1111
</head>

‎css/css-values/attr-in-max.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@
1616
html { background: white; overflow: hidden; }
1717
#outer { position: relative; background: green; }
1818

19-
#outer { width: max(attr(data-test length)); height: 200px; }
19+
#outer { width: max(attr(data-test <length>)); height: 200px; }
2020
</style>
2121

2222
</head>

‎css/css-values/attr-in-slotted-ref.html

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
<!DOCTYPE html>
2+
<title>CSS Values Test: attr() in pseudo element ::slotted</title>
3+
<div class=host>
4+
<template shadowrootmode=open>
5+
<style>
6+
::slotted(div) {
7+
color: green;
8+
}
9+
</style>
10+
<slot></slot>
11+
</template>
12+
<div>PASS if green</div>
13+
</div>

‎css/css-values/attr-in-slotted.html

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
<!DOCTYPE html>
2+
<title>CSS Values Test: attr() in pseudo element ::slotted</title>
3+
<link rel="help" href="https://drafts.csswg.org/css-values/#attr-notation">
4+
<link rel="match" href="attr-in-slotted-ref.html">
5+
<div class=host>
6+
<template shadowrootmode=open>
7+
<style>
8+
::slotted(div) {
9+
color: red;
10+
color: attr(data-color <color>, yellow);
11+
}
12+
</style>
13+
<slot data-color=blue></slot>
14+
</template>
15+
<div data-color=green>PASS if green</div>
16+
</div>

‎css/css-values/attr-invalidation.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66
<script src="/resources/testharnessreport.js"></script>
77
<style>
88
div {
9-
width: attr(data-foo length);
9+
width: attr(data-foo <length>);
1010
}
1111
</style>
1212

‎css/css-values/attr-length-invalid-cast.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,7 @@
3030
html { background: white; overflow: hidden; }
3131
#outer { position: relative; background: green; }
3232

33-
#outer { width: attr(data-test length, 200px); height: 200px; }
33+
#outer { width: attr(data-test <length>, 200px); height: 200px; }
3434

3535
</style>
3636

‎css/css-values/attr-length-valid-zero-nofallback.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -32,7 +32,7 @@
3232
#outer2 { background: red; }
3333

3434
#outer { width: 200px; height: 200px; }
35-
#outer2 { width: 200px; width: attr(data-test length); height: 200px; }
35+
#outer2 { width: 200px; width: attr(data-test <length>); height: 200px; }
3636

3737
</style>
3838

‎css/css-values/attr-length-valid-zero.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -32,7 +32,7 @@
3232
#outer2 { background: red; }
3333

3434
#outer { width: 200px; height: 200px; }
35-
#outer2 { width: 200px; width: attr(data-test length, 0); height: 200px; }
35+
#outer2 { width: 200px; width: attr(data-test <length>, 0); height: 200px; }
3636

3737
</style>
3838

‎css/css-values/attr-length-valid.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,7 @@
3030
html { background: white; overflow: hidden; }
3131
#outer { position: relative; background: green; }
3232

33-
#outer { width: attr(data-test length); height: 200px; }
33+
#outer { width: attr(data-test <length>); height: 200px; }
3434

3535
</style>
3636

‎css/css-values/attr-notype-fallback-ref.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@
1313
}
1414

1515
#four::after {
16-
content: "";
16+
content: "Not fallback value";
1717
}
1818

1919
#five::after {

‎css/css-values/attr-pseudo-elem-invalidation.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@
2323
function test_pseudo_element_invalidation(pseudoSelector) {
2424
let elem = document.getElementById("div");
2525
elem.setAttribute("data-foo", "150%");
26-
elem.style["font-size"]= "attr(data-foo percentage)";
26+
elem.style["font-size"]= "attr(data-foo <percentage>)";
2727
let old_font_size = window.getComputedStyle(elem, pseudoSelector).getPropertyValue("font-size");
2828
elem.setAttribute("data-foo", "300%");
2929
let new_font_size = window.getComputedStyle(elem, pseudoSelector).getPropertyValue("font-size");

0 commit comments

Comments
 (0)