third_party/WebKit/LayoutTests/animations/zoom-responsive-transform-animation.html

   1 <!DOCTYPE html>
   2 <style>
   3 #container {
   4   position: absolute;
   5   top: 0;
   6   font-size: 10px;
   7 }
   8 .target {
   9   width: 40px;
  10   height: 40px;
  11   border-top: solid;
  12   border-left: solid;
  13   margin-bottom: 20px;
  14 }
  15 </style>
  16 <div id="container"></div>
  17 <script>
  18 [
  19   'perspective(200px) translate3D(10px, 10px, 10px)',
  20   'matrix(0, 1, 1, 0, 10, 10)',
  21   'matrix3d(' +
  22     '0, 1, 0, 0, ' +
  23     '1, 0, 0, 0, ' +
  24     '0, 0, 1, 0, ' +
  25     '10, 10, 10, 1)',
  26   'perspective(200px) rotateY(45deg)',
  27   'none',
  28 ].forEach(transform => {
  29   var text = document.createElement('div');
  30   text.textContent = transform;
  31   container.appendChild(text);
  32
  33   var target = document.createElement('div');
  34   target.classList.add('target');
  35   container.appendChild(target);
  36   target.animate([
  37     {transform: transform},
  38     {transform: transform},
  39   ], 1e8);
  40 });
  41
  42 if (window.testRunner)
  43   testRunner.waitUntilDone();
  44
  45 requestAnimationFrame(() => {
  46   requestAnimationFrame(() => {
  47     internals.setZoomFactor(2);
  48     requestAnimationFrame(() => {
  49       if (window.testRunner)
  50         testRunner.notifyDone();
  51     });
  52   });
  53 });
  54 </script>