Source code
Revision control
Copy as Markdown
Other Tools
Test Info:
- This WPT test may be referenced by the following Test IDs:
- /css/css-values/attr-security-animation.html - WPT Dashboard Interop Dashboard
<!DOCTYPE html>
<title>CSS Values and Units Test: attr() security limitations</title>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<style>
@property --s {
syntax: "<string>";
inherits: false;
initial-value: "x";
}
@property --n {
syntax: "<number>";
inherits: false;
initial-value: 0;
}
@property --p {
syntax: "<length>";
inherits: false;
initial-value: 0px;
}
#attr {
--s: attr(href);
animation: 1s anim linear;
background-image: image-set(var(--s));
}
@keyframes anim {
from {
--s: "x";
}
to {
--s: attr(href);
}
}
#attr-neutral-keyframe {
--n: attr(data-foo type(<number>));
animation: hold-number 1000s linear paused;
}
@keyframes hold-number {
to {
--n: 0;
}
}
#attr-neutral-end {
--n: attr(data-foo type(<number>));
animation: hold-number-end 1000s linear paused;
}
@keyframes hold-number-end {
from {
--n: 0;
}
}
#attr-keyframe-number {
animation: anim-number 1000s linear paused;
}
@keyframes anim-number {
from {
--n: attr(data-foo type(<number>));
}
to {
--n: 100;
}
}
#attr-composition-add {
--n: attr(data-foo type(<number>));
animation: add-number 1000s linear paused;
animation-composition: add;
}
@keyframes add-number {
from {
--n: 0;
}
to {
--n: 0;
}
}
#attr-length-neutral {
--p: attr(data-foo type(<length>));
animation: hold-length 1000s linear paused;
}
@keyframes hold-length {
to {
--p: 0px;
}
}
</style>
<html>
<body>
<div id="attr-neutral-keyframe" data-foo="42">div</div>
<div id="attr-neutral-end" data-foo="42">div</div>
<div id="attr-keyframe-number" data-foo="42">div</div>
<div id="attr-composition-add" data-foo="42">div</div>
<div id="attr-length-neutral" data-foo="42px">div</div>
</body>
</html>
<script>
test(() => {
const elem = document.getElementById("attr");
// during animation
elem.getAnimations().forEach(anim => {
anim.currentTime = 600;
});
assert_equals(
window.getComputedStyle(elem).getPropertyValue("background-image"),
"none");
// after animation
elem.getAnimations().forEach(anim => {
anim.currentTime = 3000;
});
assert_equals(
window.getComputedStyle(elem).getPropertyValue("background-image"),
"none");
}, "Non-interpolable string animation preserves attr taint");
test(() => {
var elem = document.getElementById("attr-neutral-keyframe");
assert_equals(window.getComputedStyle(elem).getPropertyValue("--n"), '42');
assert_equals(
window.getComputedStyle(elem).getPropertyValue("background-image"),
"none");
}, "Neutral start keyframe on registered <number> preserves attr taint");
test(() => {
var elem = document.getElementById("attr-neutral-end");
assert_equals(
window.getComputedStyle(elem).getPropertyValue("background-image"),
"none");
}, "Neutral end keyframe on registered <number> preserves attr taint");
test(() => {
var elem = document.getElementById("attr-keyframe-number");
assert_equals(window.getComputedStyle(elem).getPropertyValue("--n"), '42');
assert_equals(
window.getComputedStyle(elem).getPropertyValue("background-image"),
"none");
}, "Keyframe value with attr() on registered <number> preserves attr taint");
test(() => {
var elem = document.getElementById("attr-composition-add");
assert_equals(window.getComputedStyle(elem).getPropertyValue("--n"), '42');
assert_equals(
window.getComputedStyle(elem).getPropertyValue("background-image"),
"none");
}, "Additive animation composition on registered <number> preserves attr " +
"taint");
test(() => {
var elem = document.getElementById("attr-length-neutral");
assert_equals(window.getComputedStyle(elem).getPropertyValue("--p"),
'42px');
assert_equals(
window.getComputedStyle(elem).getPropertyValue("background-image"),
"none");
}, "Neutral keyframe on registered <length> preserves attr taint");
</script>