2008-12-18 Pierre-Olivier Latour <pol@apple.com>
[WebKit-https.git] / LayoutTests / transitions / interrupt-transform-transition.html
1 <html>
2 <head>
3   <title>Interrupted Transition</title>
4   <style type="text/css" media="screen">
5     .box {
6       position: relative;
7       top: 0;
8       left: 0;
9       width: 100px;
10       height: 100px;
11       background-color: blue;
12       -webkit-transition-property: -webkit-transform;
13       -webkit-transition-duration: 2s;
14       -webkit-transform: translate(0, 0);
15     }
16   </style>
17   <script type="text/javascript" charset="utf-8">
18     if (window.layoutTestController) {
19       layoutTestController.dumpAsText();
20       layoutTestController.waitUntilDone();
21     }
22
23     function test()
24     {
25       var t = window.getComputedStyle(document.getElementById('box')).webkitTransform;
26       // grab the x value from the matrix()
27       var lastValueRE = /([\.\d]+),[^,]+\)$/;
28       var xTranslate = lastValueRE.exec(t)[1];
29       var result = (xTranslate > 0) ? 'PASS' : 'FAIL: transition should be re-targeted from 200px in x, so x > 0';
30       document.getElementById('result').innerHTML = result;
31
32       if (window.layoutTestController)
33           layoutTestController.notifyDone();
34     }
35
36     function startTest()
37     {
38       var box = document.getElementById('box');
39       box.style.webkitTransform = 'translate(200px, 0)';
40       
41       window.setTimeout(function() {
42         box.style.webkitTransform = 'translate(0, 200px)';
43         window.setTimeout(test, 0);
44       }, 300);
45
46     }
47   </script>
48 </head>
49 <body onload="startTest()">
50   <p>Interrupted transition should not jump back to pre-transition transform</p>
51   <div id="box" class="box">
52   </div>
53   <div id="result">
54   </div>
55 </body>
56 </html>