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
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
|
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>offset-distance interpolation</title>
<link rel="author" title="Eric Willigers" href="mailto:ericwilligers@chromium.org">
<link rel="help" href="https://drafts.fxtf.org/motion-1/#offset-distance-property">
<meta name="assert" content="offset-distance supports animation.">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/css/support/interpolation-testcommon.js"></script>
</head>
<style>
.parent {
offset-path: ray(30deg closest-side);
}
.target {
offset-path: ray(10deg closest-side);
}
</style>
<body>
<script>
'use strict';
test_no_interpolation({
property: 'offset-path',
from: "path('M 0 0 L 100 100 M 100 200 L 200 200 Z L 200 100 Z')",
to: "ray(0deg closest-side)",
});
test_no_interpolation({
property: 'offset-path',
from: "ray(0deg closest-corner)",
to: "none",
});
// Neutral keyframes use the inline style.
test_interpolation({
property: 'offset-path',
from: neutralKeyframe,
to: 'ray(20deg closest-side)',
}, [
{at: -0.3, expect: 'ray(7deg closest-side)'},
{at: 0, expect: 'ray(10deg closest-side)'},
{at: 0.3, expect: 'ray(13deg closest-side)'},
{at: 0.6, expect: 'ray(16deg closest-side)'},
{at: 1, expect: 'ray(20deg closest-side)'},
{at: 1.5, expect: 'ray(25deg closest-side)'},
]);
// No interpolation to a ray from the initial value 'none'.
test_no_interpolation({
property: 'offset-path',
from: 'initial',
to: 'ray(20deg closest-side)',
});
// 'inherit' keyframes use the parent style.
test_interpolation({
property: 'offset-path',
from: 'inherit',
to: 'ray(20deg closest-side)',
}, [
{at: -0.3, expect: 'ray(33deg closest-side)'},
{at: 0, expect: 'ray(30deg closest-side)'},
{at: 0.3, expect: 'ray(27deg closest-side)'},
{at: 0.6, expect: 'ray(24deg closest-side)'},
{at: 1, expect: 'ray(20deg closest-side)'},
{at: 1.5, expect: 'ray(15deg closest-side)'},
]);
// No interpolation to a ray from the initial value 'none'.
test_no_interpolation({
property: 'offset-path',
from: 'unset',
to: 'ray(20deg closest-side)',
});
// No interpolation to a ray from the initial value 'none'.
test_no_interpolation({
property: 'offset-path',
from: 'none',
to: 'ray(20deg closest-side)',
});
// Interpolation between rays.
test_interpolation({
property: 'offset-path',
from: 'ray(10deg sides contain)',
to: 'ray(50deg sides contain)'
}, [
{at: -1, expect: 'ray(-30deg sides contain)'},
{at: 0, expect: 'ray(10deg sides contain)'},
{at: 0.125, expect: 'ray(15deg sides contain)'},
{at: 0.875, expect: 'ray(45deg sides contain)'},
{at: 1, expect: 'ray(50deg sides contain)'},
{at: 2, expect: 'ray(90deg sides contain)'},
]);
test_interpolation({
property: 'offset-path',
from: 'ray(-10deg farthest-corner)',
to: 'ray(-50deg farthest-corner)'
}, [
{at: -1, expect: 'ray(30deg farthest-corner)'},
{at: 0, expect: 'ray(-10deg farthest-corner)'},
{at: 0.125, expect: 'ray(-15deg farthest-corner)'},
{at: 0.875, expect: 'ray(-45deg farthest-corner)'},
{at: 1, expect: 'ray(-50deg farthest-corner)'},
{at: 2, expect: 'ray(-90deg farthest-corner)'},
]);
// No interpolation between different sizes and/or different containment.
test_no_interpolation({
property: 'offset-path',
from: 'ray(200deg farthest-side)',
to: 'ray(300deg sides)'
});
test_no_interpolation({
property: 'offset-path',
from: 'ray(200deg sides contain)',
to: 'ray(300deg sides)'
});
test_no_interpolation({
property: 'offset-path',
from: 'ray(200deg farthest-side contain)',
to: 'ray(300deg sides)'
});
</script>
</body>
</html>
|
