third_party/WebKit/ManualTests/animation/transitions-composited-retargeting.html

   1 <html>
   2 <style>
   3 div {
   4     position: relative;
   5     height: 100px;
   6     width: 100px;
   7     background: blue;
   8     transition: left, transform 2s, 2s;
   9     left: 0px;
  10     transform: translateX(0);
  11 }
  12
  13 .transform-transition {
  14     transform: translateX(500px);
  15 }
  16
  17 .left-transition {
  18      left: 500px;
  19 }
  20
  21 .delay1 {
  22     transition-delay: 0.5s;
  23 }
  24
  25 .delay2 {
  26     transition-delay: 1s;
  27 }
  28 </style>
  29 <body>
  30 <p>
  31 Each section below has two boxes, the top runs on the main thread, the bottom
  32 on the compositor. The animations should be identical but start at different
  33 times.
  34 </p><p>
  35 This test is successful if the each pair of boxes are mostly in sync (there
  36 might be a small offset between them).
  37 </p>
  38 <hr>
  39
  40 No delay
  41 <br>
  42 <div class="main-thread"></div>
  43 <div class="compositor"></div>
  44
  45 Delay - 0.5s
  46 <br>
  47 <div class="main-thread delay1"></div>
  48 <div class="compositor delay1"></div>
  49
  50 Delay - 1s
  51 <br>
  52 <div class="main-thread delay2"></div>
  53 <div class="compositor delay2"></div>
  54
  55 <script>
  56 window.onload = function()
  57 {
  58     function toggleTransition() {
  59         var mainThread = document.querySelectorAll(".main-thread");
  60         for (var i = 0; i < mainThread.length; i++)
  61             mainThread[i].classList.toggle("left-transition");
  62         var compositor = document.querySelectorAll(".compositor");
  63         for (var i = 0; i < compositor.length; i++)
  64             compositor[i].classList.toggle("transform-transition");
  65     }
  66
  67     toggleTransition();
  68     setTimeout(toggleTransition, 300);
  69     setTimeout(toggleTransition, 1000);
  70     setTimeout(toggleTransition, 2500);
  71 }
  72 </script>
  73
  74 </body>
  75 </html>