1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
|
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS Animations: Expansion of shorthand properties</title>
<link rel="help" href="https://www.w3.org/TR/web-animations-1/#calculating-computed-keyframes">
<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>
|
