Skip to content

Commit ea4edba

Browse files
tursunovamoz-wptsync-bot
tursunova
authored and
moz-wptsync-bot
committed
Bug 1941532 [wpt PR 50067] - Handle substitutions in attribute value in attr(), a=testonly
Automatic update from web-platform-tests Handle substitutions in attribute value in attr() Handle substitutions in attributes in attr() with algorithm described in [0] when syntax is not null. Cycles handling is described in [1]. [0] https://drafts.csswg.org/css-values-5/#parse-with-a-syntax [1] w3c/csswg-drafts#11459 Bug: 389496060 Change-Id: I6ee8f9d5977782ef7527bcfc54754fe2e4f9a199 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/6157456 Reviewed-by: Anders Hartvoll Ruud <[email protected]> Commit-Queue: Munira Tursunova <[email protected]> Cr-Commit-Position: refs/heads/main@{#1406027} -- wpt-commits: 6df16e4473285e94a5aad1e4958f0fbab3b7b860 wpt-pr: 50067
1 parent 8f4062b commit ea4edba

File tree

2 files changed

+135
-2
lines changed

2 files changed

+135
-2
lines changed

‎testing/web-platform/tests/css/css-values/attr-all-types.html

+14-2
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,11 @@
66
<script src="/resources/testharnessreport.js"></script>
77

88
<style>
9+
@property --length {
10+
syntax: "<length>";
11+
inherits: false;
12+
initial-value: 10px;
13+
}
914
@property --string {
1015
syntax: "<string>";
1116
inherits: false;
@@ -18,7 +23,7 @@
1823
}
1924
</style>
2025

21-
<div id="attr"></div>
26+
<div id="attr" data-bar="3"></div>
2227
<div id="expected"></div>
2328

2429
<script>
@@ -141,6 +146,13 @@
141146
test_valid_attr('--string', 'attr(data-foo type(<string>))', '"hello"', '"hello"');
142147
test_valid_attr('--string-list', 'attr(data-foo type(<string>+))', '"hello" "hi"', '"hello" "hi"');
143148

149+
test_valid_attr('width', 'attr(data-foo type(<length>))', 'var(--length, 3px)', '10px');
150+
test_valid_attr('--y', 'attr(data-foo type(*))', 'var(--x, 3)', '3');
151+
test_valid_attr('--y', 'attr(data-foo type(*))', 'attr(data-bar, 11)', '"3"');
152+
test_valid_attr('--y', 'attr(data-foo type(*))', 'attr(data-bar type(<number>), 11)', '3');
153+
test_valid_attr('width', 'attr(data-foo type(*))', 'attr(data-bar type(<number>), 11)', '3');
154+
test_valid_attr('--y', 'attr(data-foo type(*))', 'attr(data-bar type(<number>), 11) var(--length, 3px)', '3 10px');
155+
144156
test_dimension_types_and_units();
145157

146158
test_invalid_attr('animation-name', 'attr(data-foo type(string))', 'abc');
@@ -191,4 +203,4 @@
191203
test_invalid_attr('transition-duration', 'attr(data-foo ms)', '10px foo');
192204

193205
test_invalid_attr('width', 'attr(())', '10px');
194-
</script>
206+
</script>

‎testing/web-platform/tests/css/css-values/attr-cycle.tentative.html

+121
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,121 @@
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+
<div id="attr"></div>
9+
<div id="expected"></div>
10+
11+
<script>
12+
function test_attr_cycle(property, propertyValue, attrValue) {
13+
var elem = document.getElementById("attr");
14+
var expectedValue = window.getComputedStyle(elem).getPropertyValue(property);
15+
16+
elem.setAttribute("data-foo", attrValue);
17+
elem.style.setProperty(property, propertyValue);
18+
19+
test(() => {
20+
assert_equals(window.getComputedStyle(elem).getPropertyValue(property), expectedValue,
21+
"Setting property \'" + property + "\' to the value \'" + propertyValue +
22+
"\', where \'data-foo=" + attrValue + "\' should not change it's value.");
23+
});
24+
elem.style.setProperty(property, null);
25+
}
26+
27+
function test_attr_no_cycle(property, propertyValue, attrValue, expectedValue) {
28+
var elem = document.getElementById("attr");
29+
elem.setAttribute("data-foo", attrValue);
30+
elem.style.setProperty(property, propertyValue);
31+
32+
var expectedElem = document.getElementById("expected");
33+
expectedElem.style.setProperty(property, expectedValue);
34+
35+
test(() => {
36+
assert_equals(window.getComputedStyle(elem).getPropertyValue(property),
37+
window.getComputedStyle(expectedElem).getPropertyValue(property),
38+
"Value \'" + propertyValue + "\', where \'data-foo=" + attrValue +
39+
"\' should be valid for the property \'" + property + "\'.");
40+
});
41+
42+
elem.style.setProperty(property, null);
43+
expectedElem.style.setProperty(property, null);
44+
}
45+
46+
/* Simple cycle */
47+
test_attr_cycle('--x', 'attr(data-foo type(<ident>))', 'attr(data-foo)');
48+
test_attr_cycle('--x', 'attr(data-foo type(<length>))', 'attr(data-foo type(<length>))');
49+
test_attr_cycle('--y', 'attr(data-foo type(*))', 'attr(data-foo type(*))');
50+
51+
var attrElem = document.getElementById("attr");
52+
53+
attrElem.setAttribute('data-bar', 'attr(data-foo)');
54+
test_attr_cycle('--y', 'attr(data-foo type(*))', 'attr(data-bar type(*))');
55+
attrElem.removeAttribute('data-bar');
56+
57+
/* Cycle with attr() and var() */
58+
attrElem.style.setProperty('--x', 'attr(data-foo type(*))');
59+
test_attr_cycle('--y', 'attr(data-foo type(*))', 'var(--x)');
60+
attrElem.style.setProperty('--x', null);
61+
62+
attrElem.setAttribute('data-bar', 'var(--y)');
63+
test_attr_cycle('--y', 'attr(data-foo type(<string>))', 'attr(data-bar type(<string>))');
64+
attrElem.removeAttribute('data-bar');
65+
66+
attrElem.setAttribute('data-bar', 'var(--x)');
67+
test_attr_cycle('--x', 'attr(data-foo type(*), attr(data-bar))', 'attr(data-foo type(*))');
68+
attrElem.removeAttribute('data-bar');
69+
70+
attrElem.style.setProperty('--x', 'attr(data-foo type(*))');
71+
attrElem.setAttribute('data-bar', 'var(--x)');
72+
test_attr_cycle('--y', 'attr(data-foo type(*))', 'attr(data-bar type(*), 11) var(--x)');
73+
attrElem.style.setProperty('--x', null);
74+
attrElem.removeAttribute('data-bar');
75+
76+
/* Cycle with fallback */
77+
test_attr_cycle('--x', 'attr(data-foo type(<length>), 11px)', 'attr(data-foo type(<length>))');
78+
test_attr_cycle('--x', 'attr(data-foo type(<length>))', 'attr(data-foo type(<length>), 11px)');
79+
test_attr_cycle('--y', 'attr(data-foo type(*), 11px)', 'attr(data-foo type(*))');
80+
81+
attrElem.setAttribute('data-bar', '11px');
82+
test_attr_cycle('--x', 'attr(data-foo type(<length>), attr(data-bar type(<length>)))', 'attr(data-foo type(*))');
83+
attrElem.removeAttribute('data-bar');
84+
attrElem.setAttribute('data-bar', 'abc');
85+
test_attr_cycle('--y', 'attr(data-foo type(*), attr(data-bar))', 'attr(data-foo type(*))');
86+
attrElem.removeAttribute('data-bar');
87+
88+
/* Cycle with var() and fallback */
89+
attrElem.style.setProperty('--x', 'var(--y)');
90+
test_attr_cycle('--y', 'var(--x, 100)', 'var(--y)');
91+
attrElem.style.setProperty('--x', null);
92+
93+
attrElem.setAttribute('data-bar', 'var(--y)');
94+
attrElem.style.setProperty('--x', 'attr(data-foo)');
95+
test_attr_cycle('--y', 'attr(data-foo type(*))', 'attr(data-bar type(*), 11) var(--x, 3)');
96+
attrElem.style.setProperty('--x', null);
97+
attrElem.removeAttribute('data-bar');
98+
99+
/* Cycle in fallback */
100+
test_attr_cycle('--y', 'attr(data-foo type(*), var(--y))', '3');
101+
test_attr_cycle('--y', 'attr(data-foo type(*), attr(data-foo))', '3');
102+
103+
attrElem.style.setProperty('--x', 'var(--y)');
104+
test_attr_cycle('--y', 'attr(data-foo type(*), var(--x))', '3');
105+
attrElem.style.setProperty('--x', null);
106+
107+
attrElem.setAttribute('data-bar', 'attr(data-foo type(*))');
108+
test_attr_cycle('--y', 'attr(data-foo type(*), attr(data-bar type(*)))', '3');
109+
attrElem.removeAttribute('data-bar');
110+
111+
/* No cycle, use raw CSS string without substitution */
112+
attrElem.setAttribute('data-bar', 'var(--y)');
113+
test_attr_no_cycle('--y', 'attr(data-foo type(<string>))', 'attr(data-bar type(<string>))', '');
114+
attrElem.removeAttribute('data-bar');
115+
116+
attrElem.style.setProperty('--x', 'attr(data-foo)');
117+
attrElem.setAttribute('data-bar', 'var(--x)');
118+
test_attr_no_cycle('--y', 'attr(data-foo type(*))', 'attr(data-bar, 11) var(--x, 3)', '"var(--x)" "attr(data-bar, 11) var(--x, 3)"');
119+
attrElem.removeAttribute('data-bar');
120+
attrElem.style.setProperty('--x', null);
121+
</script>

0 commit comments

Comments
 (0)