1<!DOCTYPE html>
2<meta charset="UTF-8">
3<style>
4.layer-reference {
5  position: absolute;
6  height: 300px;
7  width: 50px;
8  background-color: lightgrey;
9  font-family: sans-serif;
10  text-align: center;
11  padding-top: 5px;
12  border: 1px solid;
13}
14.target {
15  position: absolute;
16  width: 450px;
17  height: 10px;
18}
19.active {
20  background-color: black;
21}
22.replica {
23  background-color: green;
24}
25.spacer {
26  height: 350px;
27}
28</style>
29<body>
30
31<div class="spacer"></div>
32
33<script src="../testharness/testharness.js"></script>
34<script src="../testharness/testharnessreport.js"></script>
35<script src="resources/interpolation-test.js"></script>
36<script>
37
38[-8, -5, -2, 1, 5, 10, 12].forEach(function(zIndex, i) {
39  var layerReference = document.createElement('div');
40  layerReference.classList.add('layer-reference');
41  layerReference.style.zIndex = zIndex;
42  layerReference.style.top = '0px';
43  layerReference.style.left = 50 + (i * 50) + 'px';
44  layerReference.textContent = 'Z ' + zIndex;
45  document.body.appendChild(layerReference);
46});
47assertInterpolation({
48  property: 'z-index',
49  from: '-5',
50  to: '5'
51}, [
52  {at: -0.3, is: '-8'},
53  {at: 0, is: '-5'},
54  {at: 0.3, is: '-2'},
55  {at: 0.6, is: '1'},
56  {at: 1, is: '5'},
57  {at: 1.5, is: '10'},
58]);
59afterTest(function() {
60  var actives = document.querySelectorAll('.active');
61  var replicas = document.querySelectorAll('.replica');
62  for (var i = 0; i < actives.length; i++) {
63    actives[i].style.top = 50 + (i * 40) + 'px';
64    replicas[i].style.top = 60 + (i * 40) + 'px';
65  }
66});
67</script>
68</body>
69