[Web Animations] Turn Web Animations with CSS integration on for test runners
[WebKit-https.git] / LayoutTests / transitions / change-values-during-transition.html
1 <!DOCTYPE html>
2
3 <html>
4 <head>
5   <style>
6     #box {
7       height: 100px;
8       width: 100px;
9       background-color: blue;
10       -webkit-transition-duration: 1s;
11       -webkit-transition-timing-function: linear;
12       -webkit-transition-property: -webkit-transform;
13     }
14   </style>
15   <script>
16     if (window.testRunner) {
17       testRunner.dumpAsText();
18       testRunner.waitUntilDone();
19     }
20     
21     var result = "PASS";
22     const defaultTolerance = 10;
23     var transitionStartTime;
24     
25     function isCloseEnough(actual, desired)
26     {
27         var diff = Math.abs(actual - desired);
28         return diff < defaultTolerance;
29     }
30     
31     function changeValues()
32     {
33         var box = document.getElementById('box');
34         box.style.webkitTransitionDuration = "0.1s";
35     }
36     
37     function getXPosition()
38     {
39         var t = window.getComputedStyle(document.getElementById('box')).webkitTransform;
40         t = t.split("(");
41         t = t[1].split(",");
42         return t[4];
43     }
44     
45     function checkIntermediateValue()
46     {
47         // We should be roughly halfway in the transition from 0 to 100, but the
48         // timeout may not fire exactly then. Figure out where we should be 
49         // based on a linear interpolation of timestamps.
50         var actualXPos = getXPosition();
51         var expectedXPos = (new Date().getTime() - transitionStartTime)/1000 * 100;
52         if (!isCloseEnough(actualXPos, expectedXPos))
53             result = 'FAIL for intermediate value (was: ' + actualXPos + ', expected: ' + expectedXPos + ')';
54     }
55
56     function checkFinalValue()
57     {
58         var actualXPos = getXPosition();
59         var transitionFraction = (new Date().getTime() - transitionStartTime)/100;
60         var expectedXPos = 100 - Math.min(transitionFraction, 1) * 100;
61  
62         if (!isCloseEnough(actualXPos, expectedXPos)) {
63             if (result == 'PASS')
64                 result = '';
65             result += 'FAIL for final value (was: ' + actualXPos + ', expected: ' + expectedXPos + ')';
66         }
67         
68         document.getElementById('result').innerText = result;
69         if (window.testRunner)
70             testRunner.notifyDone();
71     }
72     
73     function goBack()
74     {
75         var box = document.getElementById('box');
76         box.style.webkitTransform = 'translateX(0)';
77         transitionStartTime = new Date().getTime();
78     }
79
80     function start()
81     {
82         var box = document.getElementById('box');
83         setTimeout(changeValues, 100);
84         setTimeout(checkIntermediateValue, 500);
85         setTimeout(checkFinalValue, 1300);
86         box.style.webkitTransform = 'translateX(100px)';
87         transitionStartTime = new Date().getTime();
88     }
89     
90     window.addEventListener('load', start, false);
91     document.addEventListener('webkitTransitionEnd', goBack, false);
92   </script>
93 </head>
94 <body>
95
96 <p>Test changes -webkit-transition-duration while the transition is running to ensure that the running transition is not affected</p>
97 <div id="box">
98 </div>
99 <div id="result">
100 </div>
101 </body>
102 </html>