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
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
|
<!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)'},
]);
test_interpolation({
property: 'offset-path',
from: 'ray(-10deg farthest-corner at 0% 0px)',
to: 'ray(-50deg farthest-corner at 100% 100px)'
}, [
{at: -1, expect: 'ray(30deg farthest-corner at -100% -100px)'},
{at: 0, expect: 'ray(-10deg farthest-corner at 0% 0px)'},
{at: 0.125, expect: 'ray(-15deg farthest-corner at 12.5% 12.5px)'},
{at: 0.875, expect: 'ray(-45deg farthest-corner at 87.5% 87.5px)'},
{at: 1, expect: 'ray(-50deg farthest-corner at 100% 100px)'},
{at: 2, expect: 'ray(-90deg farthest-corner at 200% 200px)'},
]);
test_interpolation({
property: 'offset-path',
from: 'ray(-10deg farthest-corner)',
to: 'ray(-50deg farthest-corner at 100% 100%)'
}, [
// TODO: Test intermediate values as well, once the expected behavior
// is clear in the spec. Right now it's a bit unclear whether or how to
// interpolate to/from the initial 'auto' value.
{at: 1, expect: 'ray(-50deg farthest-corner at 100% 100%)'},
]);
// No interpolation between different sizes and/or different containment and/or coord-boxes.
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)'
});
test_no_interpolation({
property: 'offset-path',
from: 'ray(-10deg farthest-corner) content-box',
to: 'ray(-50deg farthest-corner at 100% 100%) padding-box'
});
</script>
</body>
</html>
|
