Skip to content

Commit e4c73cb

Browse files
tursunovasadym-chromium
tursunova
authored and
sadym-chromium
committed
Support new syntax of attr()
Support attr()'s new syntax function according to CSS Values 5 spec [0]: attr() = attr( <attr-name> <attr-type>? , <declaration-value>?) This CL only implements the basic attr() support and does not include security concerns handling, described in [1]. Android Binary Size (arm64 high end) (TrichromeLibrary64.apk) has increased by 72,820 bytes with this commit, see detailed SuperSize HTML Diff [2]. This is unavoidable change to support attr()'as extended capabilities. [0] https://drafts.csswg.org/css-values-5/#attr-notation [1] w3c/csswg-drafts#5092 [2] https://chrome-supersize.firebaseapp.com/viewer.html?load_url=https%3A%2F%2Fstorage.googleapis.com%2Fchrome-supersize%2Foneoffs%2F5d767292566fc8a703add425aec266384201f481_0c795997696df0aefa7166aadf631be05995aac3.sizediff Bug: 40320391 Change-Id: I6703ea6a6e59cec7579dce0df6e411de238361f6 Binary-Size: See commit description. Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/5660057 Reviewed-by: Anders Hartvoll Ruud <[email protected]> Commit-Queue: Munira Tursunova <[email protected]> Cr-Commit-Position: refs/heads/main@{#1323782}
1 parent f5a760a commit e4c73cb

File tree

1 file changed

+153
-0
lines changed

1 file changed

+153
-0
lines changed

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

Lines changed: 153 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,153 @@
1+
<!DOCTYPE html>
2+
<title>CSS Values and Units Test: attr</title>
3+
<meta name="assert" content="test attr values">
4+
<link rel="help" href="https://drafts.csswg.org/css-values-5/#attr-notations">
5+
<script src="/resources/testharness.js"></script>
6+
<script src="/resources/testharnessreport.js"></script>
7+
8+
<html>
9+
<body>
10+
<div id="attr"></div>
11+
<div id="expected"></div>
12+
</body>
13+
</html>
14+
15+
<script>
16+
const dimensionTypeToUnits = {
17+
"length": ["em", "ex", "cap", "ch", "ic", "rem", "lh", "rlh", "vw", "vh ", "vi", "vb", "vmin", "vmax"],
18+
"angle": ["deg", "grad", "rad", "turn"],
19+
"time": ["ms", "ms"],
20+
"frequency": ["Hz", "kHz"],
21+
"flex": ["fr"]
22+
};
23+
const dimensionTypeToProperty = {
24+
"length": ["width"],
25+
"angle": ["font-style"],
26+
"time": ["transition-duration"],
27+
"flex": ["grid-template-columns"]
28+
}
29+
30+
function test_valid_attr(property, attrString, attrValue, expectedValue) {
31+
var elem = document.getElementById("attr");
32+
elem.setAttribute("data-foo", attrValue);
33+
elem.style[property]= attrString;
34+
35+
var expectedElem = document.getElementById("expected");
36+
expectedElem.style[property] = expectedValue;
37+
38+
test(() => {
39+
assert_equals(window.getComputedStyle(elem).getPropertyValue(property),
40+
window.getComputedStyle(expectedElem).getPropertyValue(property),
41+
"Value \'" + attrString + "\', where \'data-foo=" + attrValue +
42+
"\' should be valid for the property \'" + property + "\'.");
43+
});
44+
45+
elem.style[property] = null;
46+
expectedElem.style[property] = null;
47+
}
48+
49+
function test_invalid_attr(property, attrString, attrValue) {
50+
var elem = document.getElementById("attr");
51+
var expectedValue = window.getComputedStyle(elem).getPropertyValue(property);
52+
53+
elem.setAttribute("data-foo", attrValue);
54+
elem.style[property]= attrString;
55+
56+
test(() => {
57+
assert_equals(window.getComputedStyle(elem).getPropertyValue(property), expectedValue,
58+
"Setting property \'" + property + "\' to the value \'" + attrString +
59+
"\', where \'data-foo=" + attrValue + "\' should not change it's value.");
60+
});
61+
elem.style[property] = null;
62+
}
63+
64+
function test_dimension_types_and_units() {
65+
for(const [type, units] of Object.entries(dimensionTypeToUnits)) {
66+
const property = dimensionTypeToProperty[type];
67+
const val = "3";
68+
units.forEach(unit => {
69+
const expectedValue = val + unit;
70+
71+
const dimensionTypeAttrString = 'attr(data-foo ' + type + ')';
72+
test_valid_attr(property, dimensionTypeAttrString, expectedValue, expectedValue);
73+
74+
const dimensionUnitAttrString = 'attr(data-foo ' + unit + ')';
75+
test_valid_attr(property, dimensionUnitAttrString, val, expectedValue);
76+
});
77+
}
78+
}
79+
80+
test_valid_attr('content', 'attr(data-foo string)', 'abc', '"abc"');
81+
test_valid_attr('content', 'attr(data-foo string)', 'attr(data-foo)', '"attr(data-foo)"');
82+
83+
test_valid_attr('background-color', 'attr(data-foo color)', 'red', 'red');
84+
test_valid_attr('background-color', 'attr(data-foo color)', '#ff0099aa', '#ff0099aa');
85+
test_valid_attr('background-color', 'attr(data-foo color, red)', '10', 'red');
86+
test_valid_attr('background-color', 'attr(data-foo color, green)', '1000px', 'green');
87+
test_valid_attr('background-color', 'attr(data-foo color, green)', 'rgb(255, 0, 0)', 'green');
88+
89+
test_valid_attr('font-weight', 'attr(data-foo number)', '10', '10');
90+
test_valid_attr('font-weight', 'attr(data-foo number, 30)', '10px', '30');
91+
test_valid_attr('font-weight', 'attr(data-foo number, calc(10 + 20))', '10px', '30');
92+
93+
test_valid_attr('font-size', 'attr(data-foo percentage)', '10%', '10%');
94+
test_valid_attr('font-size', 'attr(data-foo percentage, 10px)', 'abc', '10px');
95+
test_valid_attr('--x', 'attr(data-foo percentage, abc)', '10', 'abc');
96+
97+
test_valid_attr('width', 'attr(data-foo length)', '10px', '10px');
98+
test_valid_attr('width', 'attr(data-foo length, red)', '10px', '10px');
99+
test_valid_attr('width', 'attr(data-foo length, 42px)', 'calc(1px + 3px)', '42px');
100+
101+
test_valid_attr('font-style', 'attr(data-foo angle)', '10deg', '10deg');
102+
test_valid_attr('font-style', 'attr(data-foo angle, 10deg)', '30', '10deg');
103+
test_valid_attr('font-style', 'attr(data-foo angle, italic)', '30', 'italic');
104+
105+
test_valid_attr('transition-duration', 'attr(data-foo time)', '10ms', '10ms');
106+
test_valid_attr('transition-duration', 'attr(data-foo time, 30s)', '10m', '30s');
107+
test_valid_attr('transition-duration', 'attr(data-foo time, calc(10s + 20s))', '10m', '30s');
108+
109+
test_valid_attr('grid-template-columns', '30px attr(data-foo flex)', '1fr', '30px 1fr');
110+
test_valid_attr('grid-template-columns', 'attr(data-foo flex, 3fr)', '1fr 1fr', '3fr');
111+
test_valid_attr('grid-template-columns', 'attr(data-foo flex, calc(1px + 2px))', '10px', '3px');
112+
113+
test_valid_attr('height', 'attr(data-foo px)', '10', '10px');
114+
test_valid_attr('width', 'calc(attr(data-foo px) + 1px)', '10', '11px');
115+
test_valid_attr('--x', 'attr(data-foo px) 11px', '10', '10px 11px');
116+
117+
test_dimension_types_and_units();
118+
119+
test_invalid_attr('background-color', 'attr(data-foo color)', 'rgb(0 255 0)');
120+
test_invalid_attr('background-color', 'attr(data-foo color)', 'color-mix(in lch, red, pink)');
121+
test_invalid_attr('background-color', 'attr(data-foo color)', 'light-dark(#333b3c, #efefec)');
122+
test_invalid_attr('background-color', 'attr(data-foo red)', 'abc');
123+
test_invalid_attr('background-color', 'attr(data-foo, red)', 'abc');
124+
125+
test_invalid_attr('font-size', 'attr(data-foo number)', '10');
126+
test_invalid_attr('font-weight', 'attr(data-foo number,)', '10');
127+
test_invalid_attr('font-weight', 'attr(data-foo number)', 'calc(1 + 3)');
128+
129+
test_invalid_attr('font-size', 'attr(data-foo percentage)', 'abc');
130+
test_invalid_attr('font-size', 'attr(data-foo percentage)', '10% a');
131+
test_invalid_attr('font-size', 'attr(data-foo percentage, 10rad)', 'abc');
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');
144+
145+
test_invalid_attr('grid-template-columns', 'attr(data-foo flex)', '10px');
146+
test_invalid_attr('grid-template-columns', 'attr(data-foo flex)', '"30fr"');
147+
test_invalid_attr('grid-template-columns', 'attr(data-foo flex, calc(1deg + 2deg))', '10px');
148+
149+
test_invalid_attr('width', 'attr(data-foo px)', '10px');
150+
test_invalid_attr('height', 'attr(data-foo fr)', '10');
151+
test_invalid_attr('transition-duration', 'attr(data-foo ms)', '10px');
152+
test_invalid_attr('transition-duration', 'attr(data-foo ms)', '10px foo');
153+
</script>

0 commit comments

Comments
 (0)