Refactoring: Pull all fullscreen code out of Document and into its own helper class
[WebKit-https.git] / LayoutTests / transitions / start-transform-transition.html
1 <html>
2 <head>
3   <style>
4     .box {
5       position: relative;
6       width: 100px;
7       height: 100px;
8       background-color: blue;
9       -webkit-transition-property: -webkit-transform;
10       -webkit-transition-duration: 5s;
11       -webkit-transform: translate(0, 0);
12     }
13
14     .moved {
15       -webkit-transform: translateX(300px);
16     }
17   </style>
18   <script>
19     if (window.testRunner) {
20       testRunner.dumpAsText();
21       testRunner.waitUntilDone();
22     }
23
24     function test()
25     {
26       var t = window.getComputedStyle(document.getElementById('box')).webkitTransform;
27       // grab the x value from the matrix()
28       var lastValueRE = /([\.\d]+),[^,]+\)$/;
29       var xTranslate = lastValueRE.exec(t)[1];
30       var result = (xTranslate > 0) ? 'PASS' : 'FAIL: transition should be running, so x > 0';
31       document.getElementById('result').innerHTML = result;
32
33       if (window.testRunner)
34           testRunner.notifyDone();
35     }
36
37     function startTest()
38     {
39       window.setTimeout(function() {
40         document.getElementById('box').className = 'moved box';
41         window.setTimeout(test, 200);
42       }, 200);
43     }
44   </script>
45 </head>
46 <body onload="startTest()">
47   <p>Box should start transition from style change on timer</p>
48   <div id="container">
49     <div id="box" class="box" onclick="this.className='redirected box'">
50     </div>
51   </div>
52   <div id="result">
53   </div>
54 </body>
55 </html>