REGRESSION (r230574): Interrupted hardware transitions don't behave correctly
[WebKit-https.git] / LayoutTests / transitions / interrupted-transition-hardware.html
1 <!DOCTYPE html>
2
3 <html>
4 <head>
5     <style>
6
7         div {
8             position: absolute;
9             left: 0;
10             top: 0;
11             height: 100px;
12             width: 100px;
13         }
14         
15         #test {
16             background-color: red;
17             transition: transform calc(24 * 60 * 60s) linear;
18             transition-delay: calc(-12 * 60 * 60s);
19             transform: none;
20         }
21
22         #test.transitions {
23             transform: translateX(100px);
24         }
25
26         #cover {
27             transform: translateX(25px);
28             background-color: green;
29         }
30
31     </style>
32 </head>
33 <body>
34
35     <div id="test"></div>
36     <div id="cover"></div>
37
38     <script type="text/javascript">
39
40         if (window.testRunner)
41             testRunner.waitUntilDone();
42
43         const test = document.getElementById("test");
44
45         requestAnimationFrame(() => {
46             test.classList.add("transitions");
47             requestAnimationFrame(() => {
48                 test.classList.remove("transitions");
49                 requestAnimationFrame(() => {
50                     requestAnimationFrame(() => {
51                         if (window.testRunner)
52                             testRunner.notifyDone();
53                     });
54                 });
55             });
56         });
57         
58     </script>
59
60 </body>
61 </html>