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
|
<!DOCTYPE html>
<meta charset="UTF-8">
<title>transform-perspective composition</title>
<link rel="help" href="https://drafts.csswg.org/css-transforms-2/#three-d-transform-functions">
<meta name="assert" content="transform-perspective supports animation as a transform list">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/css/support/interpolation-testcommon.js"></script>
<body>
<script>
// Addition and accumulation of perspective values are very similar, but not
// identical. We can test the difference by constructing a scenario where a
// perspective parameter would go negative in one case (and thus be clamped
// to 0), and would not go negative in the other case.
//
// In the test below, the values differ at 1.5 progress. The reason for this
// is that at 1.5 progress, the addition case (which uses concatenation)
// computes to:
//
// perspective(10px) perspective(-50px)
//
// Since perspective cannot go negative, this is clamped to:
//
// perspective(10px) perspective(none)
//
// The accumulation case, on the other hand, combines the components
// and so ends up blending from perspective(5px) to perspective(8.33...px) at
// 1.5 progress, which results in perspective(12.5px) - this is what you would
// get with addition too, if not for the clamping behavior.
// ------------ Addition tests --------------
test_composition({
property: 'transform',
underlying: 'perspective(10px)',
addFrom: 'perspective(10px)',
addTo: 'perspective(50px)',
}, [
{at: -0.5, expect: 'perspective(4.12px)'},
{at: 0, expect: 'perspective(5px)'},
{at: 0.25, expect: 'perspective(5.45px)'},
{at: 0.5, expect: 'perspective(6.15px)'},
{at: 0.75, expect: 'perspective(7.06px)'},
{at: 1, expect: 'perspective(8.33px)'},
{at: 1.5, expect: 'perspective(10px)'},
]);
// ------------ Accumulation tests --------------
test_composition({
property: 'transform',
underlying: 'perspective(10px)',
accumulateFrom: 'perspective(10px)',
accumulateTo: 'perspective(50px)',
}, [
{at: -0.5, expect: 'perspective(4.12px)'},
{at: 0, expect: 'perspective(5px)'},
{at: 0.25, expect: 'perspective(5.45px)'},
{at: 0.5, expect: 'perspective(6.15px)'},
{at: 0.75, expect: 'perspective(7.06px)'},
{at: 1, expect: 'perspective(8.33px)'},
{at: 1.5, expect: 'perspective(12.5px)'},
]);
</script>
</body>
|
