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
|
<!DOCTYPE html>
<meta charset="UTF-8">
<title>aspect-ratio interpolation</title>
<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#aspect-ratio">
<meta name="assert" content="aspect-ratio supports animation">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/css/support/interpolation-testcommon.js"></script>
<style>
.target {
font-size: 16px;
background-color: black;
width: 10px;
aspect-ratio: 0.5;
}
</style>
<body>
<template id="target-template">
<div class="container">
<div class="target"></div>
</div>
</template>
</body>
<script>
test_interpolation({
property: 'aspect-ratio',
from: '0.5',
to: '2',
}, [
{at: -0.5, expect: '0.25 / 1'},
{at: 0, expect: '0.5 / 1'},
{at: 0.5, expect: '1 / 1'},
{at: 1, expect: '2 / 1'},
{at: 1.5, expect: '4 / 1'}
]);
test_interpolation({
property: 'aspect-ratio',
from: '1 / 2',
to: '2 / 1',
}, [
{at: -0.5, expect: '0.25 / 1'},
{at: 0, expect: '0.5 / 1'},
{at: 0.5, expect: '1 / 1'},
{at: 1, expect: '2 / 1'},
{at: 1.5, expect: '4 / 1'}
]);
// Test neutral keyframe
test_interpolation({
property: 'aspect-ratio',
from: '',
to: '2 / 1',
}, [
{at: -0.5, expect: '0.25 / 1'},
{at: 0, expect: '0.5 / 1'},
{at: 0.5, expect: '1 / 1'},
{at: 1, expect: '2 / 1'},
{at: 1.5, expect: '4 / 1'}
]);
test_interpolation({
property: 'aspect-ratio',
from: 'auto 1 / 2',
to: 'auto 2 / 1',
}, [
{at: -0.5, expect: 'auto 0.25 / 1'},
{at: 0, expect: 'auto 0.5 / 1'},
{at: 0.5, expect: 'auto 1 / 1'},
{at: 1, expect: 'auto 2 / 1'},
{at: 1.5, expect: 'auto 4 / 1'}
]);
test_no_interpolation({
property: 'aspect-ratio',
from: 'auto',
to: '2 / 1',
});
test_no_interpolation({
property: 'aspect-ratio',
from: 'auto 1 / 1',
to: '2 / 1',
});
// If either number in the ratio is 0 or infinite, it represents a degenerate
// ratio and will not be interpolated:
// https://drafts.csswg.org/css-values-4/#combine-ratio
test_no_interpolation({
property: 'aspect-ratio',
from: '1 / 0',
to: '1 / 1',
});
test_no_interpolation({
property: 'aspect-ratio',
from: '1 / 1',
to: '0 / 1',
});
// Addition of <ratio>s is not possible.
// https://drafts.csswg.org/css-values/#combine-ratio
//
// And if a value type does not define a specific procedure for addition or is
// defined as not additive, its addition operation is simply Vresult = Va.
// (The first value is Va, the second value is Vb, and the result is Vresult.)
// https://drafts.csswg.org/css-values-4/#not-additive,
//
// So in this test case:
// 1. The 1st keyframe: { aspectRatio: 0.5/1, composite: 'replace', offset: 0 }
// 2. The 2nd keyframe: { aspectRatio: 1/1, composite: 'add', offset: 1 }
// and the underlying value is 2/1. Based on the spec, the composited from_value
// is 0.5/1 (because we just replace it), and the composited to_value is 2/1
// (because we use Va as the result value).
test_composition({
property: 'aspect-ratio',
underlying: '2 / 1',
replaceFrom: '0.5 / 1',
addTo: '1 / 1',
}, [
{at: 0, expect: '0.5 / 1'},
{at: 0.5, expect: '1 / 1'},
{at: 1, expect: '2 / 1'}
]);
</script>
</body>
|
