10 border: 1px solid black;
11 background-repeat: no-repeat;
12 -webkit-transition-duration: 1s;
13 -webkit-transition-timing-function: linear;
14 -webkit-transition-property: background-position;
18 background-image: url('../fast/backgrounds/repeat/resources/gradient.gif'), url('../fast/backgrounds/repeat/resources/gradient.gif');
19 background-position: 0 0, 0 80px;
23 background-position: 80px 80px, 80px 0;
26 /* Mismatched layers */
28 background-image: url('../fast/backgrounds/repeat/resources/gradient.gif'), url('../fast/backgrounds/repeat/resources/gradient.gif');
29 background-position: 0 0, 0 80px;
33 background-image: url('../fast/backgrounds/repeat/resources/gradient.gif');
34 background-position: 80px 80px;
38 background-image: url('../fast/backgrounds/repeat/resources/gradient.gif');
39 background-position: 80px 80px;
43 background-image: url('../fast/backgrounds/repeat/resources/gradient.gif'), url('../fast/backgrounds/repeat/resources/gradient.gif');
44 background-position: 0 0, 0 80px;
48 <script src="resources/transition-test-helpers.js"></script>
49 <script type="text/javascript">
51 const expectedValues = [
52 // [time, element-id, property, expected-value, tolerance]
53 [0.5, 'box', 'background-position', [40, 40], 2],
54 [0.5, 'box2', 'background-position', [40, 40], 2],
55 [0.5, 'box3', 'background-position', [40, 40], 2],
60 document.getElementById('box').className = 'box final';
61 document.getElementById('box2').className = 'box final';
62 document.getElementById('box3').className = 'box final';
65 runTransitionTest(expectedValues, setupTest, usePauseAPI);
70 <div id="box" class="box"></div>
71 <div id="box2" class="box"></div>
72 <div id="box3" class="box"></div>