REGRESSION (r230574): Interrupted hardware transitions don't behave correctly
[WebKit-https.git] / LayoutTests / transitions / transition-end-event-set-none.html
1 <html>
2 <head>
3   <style>
4     .box {
5       position: relative;
6       left: 0;
7       height: 100px;
8       width: 100px;
9       margin: 10px;
10       background-color: blue;
11       -webkit-transition-property: width, left, background-color, height, top;
12       -webkit-transition-duration: 0.2s;
13     }
14     
15     .box1 {
16       left: 50px;
17     }
18     
19     .box2 {
20       background-color: red;
21       left: 100px;
22     }
23   </style>
24   <script src="transition-end-event-helpers.js"></script>
25   <script type="text/javascript">
26     
27     var expectedEndEvents = [
28       // [property-name, element-id, elapsed-time, listen]
29       ["left", "box1", 0.2, false],
30     ];
31     
32     function startTransition()
33     {
34       var box = document.getElementById("box1");
35       box.className = "box box2";
36     }
37     
38     var firstTimeInHandleEndEvent = true;
39     function handleEndEvent(event)
40     {
41       recordTransitionEndEvent(event);
42       
43       event.target.style.webkitTransitionProperty = "none";
44       if (firstTimeInHandleEndEvent) {
45         firstTimeInHandleEndEvent = false;
46         window.setTimeout(startTransition, 100);
47       }
48     }
49
50     function setupTest()
51     {
52       var box = document.getElementById("box1");
53       box.addEventListener("webkitTransitionEnd", handleEndEvent, false);
54       box.className = "box box1";
55     }
56     
57     // We need to pass an explicit maxTime because we use two sequential
58     // transitions that each take 0.2s.
59     runTransitionTest(expectedEndEvents, setupTest, 0.5);
60   </script>
61 </head>
62 <body>
63
64 <p>Initiating transitions on various properties of all boxes.</p>
65
66 <div id="container">
67   <div id="box1" class="box"></div>
68 </div>
69
70 <div id="result"></div>
71
72 </body>
73 </html>