1<!DOCTYPE html>
2<meta charset="UTF-8">
3<style>
4.target {
5  color: white;
6  width: 100px;
7  height: 100px;
8  background-color: black;
9  display: inline-block;
10  overflow: hidden;
11}
12.replica {
13  background-color: green;
14}
15.target div {
16  width: 10px;
17  height: 10px;
18  display: inline-block;
19  background: orange;
20  margin: 1px;
21}
22.test {
23  overflow: hidden;
24}
25</style>
26<body>
27<template id="target-template">
28<div></div>
29</template>
30<script src="../testharness/testharness.js"></script>
31<script src="../testharness/testharnessreport.js"></script>
32<script src="resources/interpolation-test.js"></script>
33<script>
34
35assertInterpolation({
36  property: 'transform',
37  prefixedProperty: ['-webkit-transform'],
38  from: 'skewX(10rad)',
39  to: 'skewX(20rad)'
40}, [
41  {at: -1, is: 'skewX(0rad)'},
42  {at: 0, is: 'skewX(10rad)'},
43  {at: 0.25, is: 'skewX(12.5rad)'},
44  {at: 0.75, is: 'skewX(17.5rad)'},
45  {at: 1, is: 'skewX(20rad)'},
46  {at: 2, is: 'skewX(30rad)'},
47]);
48assertInterpolation({
49  property: 'transform',
50  prefixedProperty: ['-webkit-transform'],
51  from: 'skewY(10rad)',
52  to: 'skewY(20rad)'
53}, [
54  {at: -1, is: 'skewY(0rad)'},
55  {at: 0, is: 'skewY(10rad)'},
56  {at: 0.25, is: 'skewY(12.5rad)'},
57  {at: 0.75, is: 'skewY(17.5rad)'},
58  {at: 1, is: 'skewY(20rad)'},
59  {at: 2, is: 'skewY(30rad)'},
60]);
61</script>
62</body>
63