Merge Chromium + Blink git repositories
[chromium-blink-merge.git] / third_party / WebKit / LayoutTests / transitions / interrupted-immediately.html
blob92b58e867a304d6226f3d2d696a6a5c4c8beefe9
1 <!DOCTYPE html>
3 <html>
4 <head>
5 <style>
6 #container {
7 position: relative;
8 width: 400px;
9 height: 100px;
10 border: 1px solid black;
12 #box {
13 position: absolute;
14 left: 0px;
15 height: 100px;
16 width: 100px;
17 background-color: blue;
18 -webkit-transition-duration: 1s;
19 -webkit-transition-timing-function: linear;
21 </style>
22 <script>
23 if (window.testRunner) {
24 testRunner.dumpAsText();
25 testRunner.waitUntilDone();
28 var id;
30 function startTransition()
32 var box = document.getElementById('box');
34 box.style.left = '300px';
35 box.offsetTop; // force transition start
37 box.style.left = '0px'
38 box.offsetTop; // force transition interruption
40 // Force at least one timing update and recalc after the interruption.
41 id = requestAnimationFrame(function() {
42 cancelAnimationFrame(id);
43 var current = document.timeline.getAnimations().length;
44 document.getElementById('result').innerHTML = (current == 0) ? "PASS" : "FAIL";
45 if (window.testRunner)
46 testRunner.notifyDone();
47 });
49 window.addEventListener('load', startTransition, false)
50 </script>
51 </head>
52 <body>
54 <p>Box should stay left as style is reset immediately</p>
55 <div id="container">
56 <div id="box">
57 </div>
58 </div>
59 <div id="result">
60 </div>
61 </body>
62 </html>