1<!DOCTYPE html>
2<meta charset="UTF-8">
3<style>
4.target {
5  position: relative;
6  width: 100px;
7  height: 100px;
8  background-color: black;
9  display: inline-block;
10  margin: 20px 0px 20px 0px;
11  object-fit: fill;
12}
13.replica {
14  background-color: green;
15}
16</style>
17<body>
18<script src="../testharness/testharness.js"></script>
19<script src="../testharness/testharnessreport.js"></script>
20<script src="resources/interpolation-test.js"></script>
21<script>
22
23assertInterpolation({
24  property: 'object-position',
25  from: '50% 50%',
26  to: '100% 100%'
27}, [
28  {at: -0.3, is: '35% 35%'},
29  {at: 0, is: '50% 50%'},
30  {at: 0.5, is: '75% 75%'},
31  {at: 1, is: '100% 100%'},
32  {at: 1.5, is: '125% 125%'}
33]);
34
35assertInterpolation({
36  property: 'object-position',
37  from: '100px 200px',
38  to: '0px 0px'
39}, [
40  {at: -0.3, is: '130px 260px'},
41  {at: 0, is: '100px 200px'},
42  {at: 0.5, is: '50px 100px'},
43  {at: 1, is: '0px 0px'},
44  {at: 1.5, is: '-50px -100px'}
45]);
46
47// Zero seem to be a special case in the old implementation
48assertInterpolation({
49  property: 'object-position',
50  from: '50% 100%',
51  to: '0px 0px'
52}, [
53  {at: -0.3, is: '65% 130%'},
54  {at: 0, is: '50% 100%'},
55  {at: 0.5, is: '25% 50%'},
56  {at: 1, is: '0px 0px'},
57  {at: 1.5, is: '-25% -50%'}
58]);
59
60assertInterpolation({
61  property: 'object-position',
62  from: '50% 100%',
63  to: '50px 100px'
64}, [
65  {at: -0.3, is: 'calc(65% + -15px) calc(130% + -30px)'},
66  {at: 0, is: '50% 100%'},
67  {at: 0.5, is: 'calc(25% + 25px) calc(50% + 50px)'},
68  {at: 1, is: '50px 100px'},
69  {at: 1.5, is: 'calc(-25% + 75px) calc(-50% + 150px)'}
70]);
71
72assertInterpolation({
73  property: 'object-position',
74  from: 'center',
75  to: 'top right'
76}, [
77  {at: -0.3, is: '35% 65%'},
78  {at: 0, is: '50% 50%'},
79  {at: 0.5, is: '75% 25%'},
80  {at: 1, is: '100% 0%'},
81  {at: 1.5, is: '125% -25%'}
82]);
83</script>
84</body>
85