930ba2780704e6badb286b01f6c999cb3ccaea2e
[WebKit-https.git] / LayoutTests / transitions / interrupt-transform-transition.html
1 <html>
2 <head>
3   <title>Interrupted hardware 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
17     .moved {
18 /*      -webkit-transform: translateX(300px);*/
19     }
20   </style>
21   <script type="text/javascript" charset="utf-8">
22     if (window.layoutTestController) {
23       layoutTestController.dumpAsText();
24       layoutTestController.waitUntilDone();
25     }
26
27     function test()
28     {
29       var t = window.getComputedStyle(document.getElementById('box')).webkitTransform;
30       // grab the x value from the matrix()
31       var lastValueRE = /([\.\d]+),[^,]+\)$/;
32       var xTranslate = lastValueRE.exec(t)[1];
33       var result = (xTranslate > 0) ? 'PASS' : 'FAIL: transition should be re-targeted from 200px in x, so x > 0';
34       document.getElementById('result').innerHTML = result;
35
36       if (window.layoutTestController)
37           layoutTestController.notifyDone();
38     }
39
40     function startTest()
41     {
42       var box = document.getElementById('box');
43       box.style.webkitTransform = 'translate(200px, 0)';
44       
45       window.setTimeout(function() {
46         box.style.webkitTransform = 'translate(0, 200px)';
47         window.setTimeout(test, 0);
48       }, 300);
49
50     }
51   </script>
52 </head>
53 <body onload="startTest()">
54   <p>Interrupted hardware transition should not jump back to pre-transtion transform</p>
55   <div id="box" class="box">
56   </div>
57   <div id="result">
58   </div>
59 </body>
60 </html>