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>