Skip to content

Commit 68b620f

Browse files
kbabbittchromium-wpt-export-bot
kbabbitt
authored and
chromium-wpt-export-bot
committed
Propagate attr() taint through interpolable custom property transitions
For custom property transitions, we were calculating is_attr_tainted only in discrete transition cases. This allowed the flag to be laundered away in interpolable transitions. This CL factors is_attr_tainted computation onto the common path and propagates it through the pipeline for interpolable transitions. Fixed: 517746687 Change-Id: I07a965b29838567d746fa48cb270c74c2bbdd6aa Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/8102417 Reviewed-by: Kevin Ellis <kevers@chromium.org> Commit-Queue: Kevin Babbitt <kbabbitt@microsoft.com> Cr-Commit-Position: refs/heads/main@{#1664831}
1 parent 6f4b881 commit 68b620f

1 file changed

Lines changed: 69 additions & 0 deletions

File tree

‎css/css-values/attr-security-transition-interpolated.html‎

Lines changed: 69 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,69 @@
1+
<!DOCTYPE html>
2+
<title>CSS Values and Units Test: attr() security limitations</title>
3+
<link rel="help" href="https://drafts.csswg.org/css-values-5/#attr-security">
4+
<script src="/resources/testharness.js"></script>
5+
<script src="/resources/testharnessreport.js"></script>
6+
7+
<style>
8+
@property --n {
9+
syntax: "<number>";
10+
inherits: false;
11+
initial-value: 0;
12+
}
13+
@property --p {
14+
syntax: "<length>";
15+
inherits: false;
16+
initial-value: 0px;
17+
}
18+
#attr1 {
19+
--n: attr(data-foo type(<number>));
20+
transition: --n 1000s steps(1, start);
21+
background-image: if(style(--n: 42): url(https://does-not-exist.test/404.png); else: none);
22+
}
23+
@starting-style {
24+
#attr1 { --n: 0; }
25+
}
26+
#attr2 {
27+
--n: attr(data-foo type(<number>));
28+
transition: --n 1000s steps(1, start);
29+
background-image: if(style(--n >= 40): url(https://does-not-exist.test/404.png); else: none);
30+
}
31+
@starting-style {
32+
#attr2 { --n: 0; }
33+
}
34+
#attr3 {
35+
--p: attr(data-foo type(<length>));
36+
transition: --p 1000s steps(1, start);
37+
background-image: if(style(--p: 42px): url(https://does-not-exist.test/404.png); else: none);
38+
}
39+
@starting-style {
40+
#attr3 { --p: 0px; }
41+
}
42+
</style>
43+
44+
<html>
45+
<body>
46+
<div id="attr1" data-foo="42">div</div>
47+
<div id="attr2" data-foo="42">div</div>
48+
<div id="attr3" data-foo="42px">div</div>
49+
</body>
50+
</html>
51+
52+
<script>
53+
test(() => {
54+
var elem = document.getElementById("attr1");
55+
assert_equals(window.getComputedStyle(elem).getPropertyValue("--n"), '42');
56+
assert_equals(window.getComputedStyle(elem).getPropertyValue("background-image"), 'none');
57+
}, `Transitioning <number> from attr() should remain attr-tainted in if(style())`);
58+
59+
test(() => {
60+
var elem = document.getElementById("attr2");
61+
assert_equals(window.getComputedStyle(elem).getPropertyValue("background-image"), 'none');
62+
}, `Transitioning <number> from attr() should remain attr-tainted in if(style()) range query`);
63+
64+
test(() => {
65+
var elem = document.getElementById("attr3");
66+
assert_equals(window.getComputedStyle(elem).getPropertyValue("--p"), '42px');
67+
assert_equals(window.getComputedStyle(elem).getPropertyValue("background-image"), 'none');
68+
}, `Transitioning <length> from attr() should remain attr-tainted in if(style())`);
69+
</script>

0 commit comments

Comments
 (0)