1<!DOCTYPE html>
2<meta charset="UTF-8">
3<style>
4.target {
5  display: inline-block;
6  -webkit-perspective: 50;
7  perspective: 50;
8  margin-top: 50px;
9  margin-bottom: 25px;
10}
11.transformed {
12  width: 50px;
13  height: 50px;
14  background: black;
15  transform: rotateY(45deg);
16}
17.replica .transformed {
18  background: green;
19}
20.replica {
21  position: relative;
22  left: -50px;
23  opacity: 0.75;
24}
25</style>
26<body>
27<template id="target-template">
28<div><div class="transformed"></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>
34assertInterpolation({
35  property: 'perspective-origin',
36  prefixedProperty: ['-webkit-perspective-origin'],
37  from: '0% 50%',
38  to: '100% 150%'
39}, [
40  {at: -0.3, is: '-30% 20%'},
41  {at: 0, is: '0% 50%'},
42  {at: 0.3, is: '30% 80%'},
43  {at: 0.6, is: '60% 110%'},
44  {at: 1, is: '100% 150%'},
45  {at: 1.5, is: '150% 200%'}
46]);
47</script>
48</body>
49