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
35// Mismatched interpolation with an empty list should not use decomposition.
36assertInterpolation({
37  property: 'transform',
38  prefixedProperty: ['-webkit-transform'],
39  from: 'none',
40  to: 'rotate(180deg)'
41}, [
42  {at: -1, is: 'rotate(-180deg)'},
43  {at: 0, is: 'none'},
44  {at: 0.25, is: 'rotate(45deg)'},
45  {at: 0.75, is: 'rotate(135deg)'},
46  {at: 1, is: 'rotate(180deg)'},
47  {at: 2, is: 'rotate(360deg)'},
48]);
49assertInterpolation({
50  property: 'transform',
51  prefixedProperty: ['-webkit-transform'],
52  from: 'rotate(180deg)',
53  to: 'none'
54}, [
55  {at: -1, is: 'rotate(360deg)'},
56  {at: 0, is: 'rotate(180deg)'},
57  {at: 0.25, is: 'rotate(135deg)'},
58  {at: 0.75, is: 'rotate(45deg)'},
59  {at: 1, is: 'none'},
60  {at: 2, is: 'rotate(-180deg)'},
61]);
62assertInterpolation({
63  property: 'transform',
64  prefixedProperty: ['-webkit-transform'],
65  from: 'none',
66  to: 'rotate(360deg)'
67}, [
68  {at: -1, is: 'rotate(-360deg)'},
69  {at: 0, is: 'none'},
70  {at: 0.25, is: 'rotate(90deg)'},
71  {at: 0.75, is: 'rotate(270deg)'},
72  {at: 1, is: 'rotate(360deg)'},
73  {at: 2, is: 'rotate(720deg)'},
74]);
75</script>
76</body>
77