third_party/WebKit/LayoutTests/animations/transform-responsive-neutral-keyframe.html

   1 <!DOCTYPE html>
   2 <style>
   3 div {
   4   position: absolute;
   5   width: 100px;
   6   height: 100px;
   7 }
   8 #target {
   9   background: red;
  10   transform: translateY(100px);
  11   animation: test 1e8s;
  12 }
  13 #expected {
  14   background: green;
  15   transform: translateY(50px);
  16 }
  17 @keyframes test {
  18   to { transform: translateX(100px); }
  19 }
  20 </style>
  21 <div id="target"></div>
  22 <div id="expected"></div>
  23 <script>
  24 if (window.testRunner)
  25   testRunner.waitUntilDone();
  26
  27 requestAnimationFrame(() => {
  28   requestAnimationFrame(() => {
  29     target.style.transform = 'translateY(50px)';
  30     requestAnimationFrame(() => {
  31       if (window.testRunner)
  32         testRunner.notifyDone();
  33     });
  34   });
  35 });
  36 </script>