Source code
Revision control
Copy as Markdown
Other Tools
Test Info:
- This WPT test may be referenced by the following Test IDs:
- /web-animations/animation-model/keyframe-effects/background-shorthand.html - WPT Dashboard Interop Dashboard
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS Animations: Expansion of shorthand properties</title>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<style>
#block {
background: green;
background-position-x: 10px;
height: 100px;
width: 100px;
}
</style>
<body>
<div id="block"></div>
</body>
<script>
function assert_background_position_at(time, x, y) {
document.getAnimations()[0].currentTime = time;
const target = document.getElementById('block');
const style = getComputedStyle(target);
assert_equals(style.backgroundPositionX, x,
`background-position-x @${time/10}% progress`);
assert_equals(style.backgroundPositionY, y,
`background-position-y @${time/10}% progress`);
}
test(() => {
const target = document.getElementById('block');
target.animate([
{ background: 'red' },
{ backgroundPositionY: '10px', background: 'blue' }
], { duration: 1000 });
// Animation is active in the semi-closed interval [0, 1000).
// The background shorthand expands to its longhand counterparts with
// background-position-(x|y) picking up the default value of 0%.
// The explicit background-property-y in the second keyframe takes priority
// over the value from expansion of the shorthand.
const test_cases = [
{ time: -100, x: "10px", y: "0%" },
{ time: 0, x: "0%", y: "0%" },
{ time: 200, x: "0%", y: "calc(0% + 2px)" },
{ time: 500, x: "0%", y: "calc(0% + 5px)" },
{ time: 800, x: "0%", y: "calc(0% + 8px)" },
{ time: 1100, x: "10px", y: "0%" }
];
test_cases.forEach(test => {
assert_background_position_at(test.time, test.x, test.y);
});
}, 'Shorthand properties expand to longhand counterparts in computed ' +
'keyframes.');
</script>