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
|
<!DOCTYPE html>
<html>
<head>
<style>
:root {
font: 10px Ahem;
}
</style>
</head>
<body>
<template id="target-template">
<svg width="200px" height="300px" viewBox="0 0 1500 1000">
<rect class="target" x="10" y="10" width="10" height="10" />
</svg>
</template>
<script src="resources/interpolation-test.js"></script>
<script>
'use strict';
assertAttributeInterpolation({
property: 'width',
from: 10,
to: 60
}, [
{at: -0.4, is: 0},
{at: 0, is: 10},
{at: 0.2, is: 20},
{at: 0.6, is: 40},
{at: 1, is: 60},
{at: 1.4, is: 80}
]);
assertAttributeInterpolation({
property: 'width',
from: '10%',
to: '60%'
}, [
{at: -0.4, is: '0%'},
{at: 0, is: '10%'},
{at: 0.2, is: '20%'},
{at: 0.6, is: '40%'},
{at: 1, is: '60%'},
{at: 1.4, is: '80%'}
]);
assertAttributeInterpolation({
property: 'width',
from: '10em',
to: '60em'
}, [
{at: -0.4, is: '0em'},
{at: 0, is: '10em'},
{at: 0.2, is: '20em'},
{at: 0.6, is: '40em'},
{at: 1, is: '60em'},
{at: 1.4, is: '80em'}
]);
assertAttributeInterpolation({
property: 'width',
from: '10ex',
to: '60ex'
}, [
{at: -0.4, is: '0ex'},
{at: 0, is: '10ex'},
{at: 0.2, is: '20ex'},
{at: 0.6, is: '40ex'},
{at: 1, is: '60ex'},
{at: 1.4, is: '80ex'}
]);
assertAttributeInterpolation({
property: 'width',
from: '10rem',
to: '60rem'
}, [
{at: -0.4, is: '0rem'},
{at: 0, is: '10rem'},
{at: 0.2, is: '20rem'},
{at: 0.6, is: '40rem'},
{at: 1, is: '60rem'},
{at: 1.4, is: '80rem'}
]);
assertAttributeInterpolation({
property: 'width',
from: '10in',
to: '20rem'
}, [
{at: -0.4, is: '1264'},
{at: 0, is: '10in'},
{at: 0.2, is: '808'},
{at: 0.6, is: '504'},
{at: 1, is: '20rem'},
{at: 1.4, is: '0'}
]);
</script>
</body>
</html>
|
