1<!DOCTYPE html>
2<meta charset="UTF-8">
3<style>
4@viewport {
5  width: 800px;
6  height: 600px;
7}
8.target {
9  display: inline-block;
10  font: 20px sans-serif;
11}
12.replica {
13  color: green;
14  margin-right: 30px;
15}
16</style>
17<body>
18<template id="target-template">
19  <p>
20  v<br />v
21  </p>
22</template>
23<script src="../testharness/testharness.js"></script>
24<script src="../testharness/testharnessreport.js"></script>
25<script src="resources/interpolation-test.js"></script>
26<script>
27assertInterpolation({
28  property: 'line-height',
29  from: '4',
30  to: '14'
31}, [
32  {at: -1, is: '0'},
33  {at: -0.3, is: '1'},
34  {at: 0, is: '4'},
35  {at: 0.3, is: '7'},
36  {at: 0.6, is: '10'},
37  {at: 1, is: '14'},
38  {at: 1.5, is: '19'},
39]);
40assertInterpolation({
41  property: 'line-height',
42  from: '4px',
43  to: '14px'
44}, [
45  {at: -1, is: '0px'},
46  {at: -0.3, is: '1px'},
47  {at: 0, is: '4px'},
48  {at: 0.3, is: '7px'},
49  {at: 0.6, is: '10px'},
50  {at: 1, is: '14px'},
51  {at: 1.5, is: '19px'},
52]);
53assertInterpolation({
54  property: 'line-height',
55  from: 'normal',
56  to: 'normal'
57}, [
58  {at: -0.3, is: 'normal'},
59  {at: 0, is: 'normal'},
60  {at: 0.3, is: 'normal'},
61  {at: 0.6, is: 'normal'},
62  {at: 1, is: 'normal'},
63  {at: 1.5, is: 'normal'},
64]);
65assertInterpolation({
66  property: 'line-height',
67  from: '4',
68  to: '14px'
69}, [
70  {at: -0.3, is: '4'},
71  {at: 0, is: '4'},
72  {at: 0.3, is: '4'},
73  {at: 0.6, is: '14px'},
74  {at: 1, is: '14px'},
75  {at: 1.5, is: '14px'},
76]);
77assertInterpolation({
78  property: 'line-height',
79  from: '14px',
80  to: 'normal'
81}, [
82  {at: -0.3, is: '14px'},
83  {at: 0, is: '14px'},
84  {at: 0.3, is: '14px'},
85  {at: 0.6, is: 'normal'},
86  {at: 1, is: 'normal'},
87  {at: 1.5, is: 'normal'},
88]);
89assertInterpolation({
90  property: 'line-height',
91  from: 'normal',
92  to: '4'
93}, [
94  {at: -0.3, is: 'normal'},
95  {at: 0, is: 'normal'},
96  {at: 0.3, is: 'normal'},
97  {at: 0.6, is: '4'},
98  {at: 1, is: '4'},
99  {at: 1.5, is: '4'},
100]);
101assertInterpolation({
102  property: 'line-height',
103  from: '4',
104  to: 'normal'
105}, [
106  {at: -0.3, is: '4'},
107  {at: 0, is: '4'},
108  {at: 0.3, is: '4'},
109  {at: 0.6, is: 'normal'},
110  {at: 1, is: 'normal'},
111  {at: 1.5, is: 'normal'},
112]);
113assertInterpolation({
114  property: 'line-height',
115  from: 'normal',
116  to: '14px'
117}, [
118  {at: -0.3, is: 'normal'},
119  {at: 0, is: 'normal'},
120  {at: 0.3, is: 'normal'},
121  {at: 0.6, is: '14px'},
122  {at: 1, is: '14px'},
123  {at: 1.5, is: '14px'},
124]);
125assertInterpolation({
126  property: 'line-height',
127  from: '14px',
128  to: '4'
129}, [
130  {at: -0.3, is: '14px'},
131  {at: 0, is: '14px'},
132  {at: 0.3, is: '14px'},
133  {at: 0.6, is: '4'},
134  {at: 1, is: '4'},
135  {at: 1.5, is: '4'},
136]);
137assertInterpolation({
138  property: 'line-height',
139  from: '4vw',
140  to: '14vw'
141}, [
142  {at: -1, is: '0'},
143  {at: -0.3, is: '1vw'},
144  {at: 0, is: '4vw'},
145  {at: 0.3, is: '7vw'},
146  {at: 0.6, is: '10vw'},
147  {at: 1, is: '14vw'},
148  {at: 1.5, is: '19vw'},
149]);
150// These tests assume a viewport of 800x600.
151// assertInterpolation({
152//   property: 'line-height',
153//   from: '50vmin',
154//   to: '100px'
155// }, [
156//   {at: -0.25, is: '350px'},
157//   {at: 0, is: '300px'},
158//   {at: 0.25, is: '250px'},
159//   {at: 0.75, is: '150px'},
160//   {at: 1, is: '100px'},
161//   {at: 1.5, is: '0px'},
162// ]);
163// assertInterpolation({
164//   property: 'line-height',
165//   from: '100px',
166//   to: '50vmax'
167// }, [
168//   {at: -0.25, is: '25px'},
169//   {at: 0, is: '100px'},
170//   {at: 0.25, is: '175px'},
171//   {at: 0.75, is: '325px'},
172//   {at: 1, is: '400px'},
173//   {at: 1.5, is: '550px'},
174// ]);
175// assertInterpolation({
176//   property: 'line-height',
177//   from: '75vw',
178//   to: '25vh'
179// }, [
180//   {at: -0.25, is: '712.5px'},
181//   {at: 0, is: '600px'},
182//   {at: 0.25, is: '487.5px'},
183//   {at: 0.75, is: '262.5px'},
184//   {at: 1, is: '150px'},
185//   {at: 1.5, is: '0px'}, // line-height must not be less than 0.
186// ]);
187</script>
188</body>
189