Google Git
Sign in
webkit / WebKit / e161858fcb97f8c2e40b57d9e0c60052ef5055e0 / . / LayoutTests / transitions / change-values-during-transition.html
blob: 929a23a26ebbaba75cf99c3e58c0d18f26d780cc [file] [log] [blame]
commit-queue@webkit.org068bde22010-08-17 23:57:42 +0000[diff] [blame]1<!DOCTYPE html>
pol@apple.com2d453c82008-12-15 21:51:37 +0000[diff] [blame]2
simon.fraser@apple.com4803cdd2011-04-26 03:25:14 +0000[diff] [blame]3<html>
pol@apple.com2d453c82008-12-15 21:51:37 +0000[diff] [blame]4<head>
simon.fraser@apple.com4803cdd2011-04-26 03:25:14 +0000[diff] [blame]5 <style>
pol@apple.com2d453c82008-12-15 21:51:37 +0000[diff] [blame]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>
simon.fraser@apple.com4803cdd2011-04-26 03:25:14 +0000[diff] [blame]15 <script>
rniwa@webkit.orgcc082ecd2012-06-16 03:42:58 +0000[diff] [blame]16 if (window.testRunner) {
17 testRunner.dumpAsText();
18 testRunner.waitUntilDone();
pol@apple.com2d453c82008-12-15 21:51:37 +0000[diff] [blame]19 }
20
jparent@chromium.orgde2b1c42009-12-02 21:36:03 +0000[diff] [blame]21 var result = "PASS";
pol@apple.com2d453c82008-12-15 21:51:37 +0000[diff] [blame]22 const defaultTolerance = 10;
commit-queue@webkit.org068bde22010-08-17 23:57:42 +0000[diff] [blame]23 var transitionStartTime;
pol@apple.com2d453c82008-12-15 21:51:37 +0000[diff] [blame]24
jparent@chromium.orgde2b1c42009-12-02 21:36:03 +0000[diff] [blame]25 function isCloseEnough(actual, desired)
pol@apple.com2d453c82008-12-15 21:51:37 +0000[diff] [blame]26 {
pol@apple.com2d453c82008-12-15 21:51:37 +0000[diff] [blame]27 var diff = Math.abs(actual - desired);
jparent@chromium.orgde2b1c42009-12-02 21:36:03 +0000[diff] [blame]28 return diff < defaultTolerance;
pol@apple.com2d453c82008-12-15 21:51:37 +0000[diff] [blame]29 }
30
31 function changeValues()
32 {
33 var box = document.getElementById('box');
34 box.style.webkitTransitionDuration = "0.1s";
35 }
36
jparent@chromium.orgde2b1c42009-12-02 21:36:03 +0000[diff] [blame]37 function getXPosition()
pol@apple.com2d453c82008-12-15 21:51:37 +0000[diff] [blame]38 {
39 var t = window.getComputedStyle(document.getElementById('box')).webkitTransform;
jparent@chromium.orgde2b1c42009-12-02 21:36:03 +0000[diff] [blame]40 t = t.split("(");
41 t = t[1].split(",");
42 return t[4];
43 }
44
commit-queue@webkit.org068bde22010-08-17 23:57:42 +0000[diff] [blame]45 function checkIntermediateValue()
jparent@chromium.orgde2b1c42009-12-02 21:36:03 +0000[diff] [blame]46 {
commit-queue@webkit.org068bde22010-08-17 23:57:42 +0000[diff] [blame]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 + ')';
pol@apple.com2d453c82008-12-15 21:51:37 +0000[diff] [blame]54 }
55
commit-queue@webkit.org068bde22010-08-17 23:57:42 +0000[diff] [blame]56 function checkFinalValue()
pol@apple.com2d453c82008-12-15 21:51:37 +0000[diff] [blame]57 {
commit-queue@webkit.org068bde22010-08-17 23:57:42 +0000[diff] [blame]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
jparent@chromium.orgde2b1c42009-12-02 21:36:03 +0000[diff] [blame]68 document.getElementById('result').innerText = result;
rniwa@webkit.orgcc082ecd2012-06-16 03:42:58 +0000[diff] [blame]69 if (window.testRunner)
70 testRunner.notifyDone();
pol@apple.com2d453c82008-12-15 21:51:37 +0000[diff] [blame]71 }
72
73 function goBack()
74 {
75 var box = document.getElementById('box');
76 box.style.webkitTransform = 'translateX(0)';
commit-queue@webkit.org068bde22010-08-17 23:57:42 +0000[diff] [blame]77 transitionStartTime = new Date().getTime();
pol@apple.com2d453c82008-12-15 21:51:37 +0000[diff] [blame]78 }
79
80 function start()
81 {
82 var box = document.getElementById('box');
commit-queue@webkit.org068bde22010-08-17 23:57:42 +0000[diff] [blame]83 setTimeout(changeValues, 100);
84 setTimeout(checkIntermediateValue, 500);
85 setTimeout(checkFinalValue, 1300);
pol@apple.com2d453c82008-12-15 21:51:37 +0000[diff] [blame]86 box.style.webkitTransform = 'translateX(100px)';
commit-queue@webkit.org068bde22010-08-17 23:57:42 +0000[diff] [blame]87 transitionStartTime = new Date().getTime();
pol@apple.com2d453c82008-12-15 21:51:37 +0000[diff] [blame]88 }
89
90 window.addEventListener('load', start, false);
91 document.addEventListener('webkitTransitionEnd', goBack, false);
pol@apple.com2d453c82008-12-15 21:51:37 +0000[diff] [blame]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>