zoom-responsive-translate-animation.html

<!DOCTYPE html>
<style>
#container {
  position: absolute;
  top: 0;
  font-size: 10px;
}
.target {
  width: 40px;
  height: 40px;
  border-top: solid;
  border-left: solid;
  margin-bottom: 20px;
}
</style>
<div id="container"></div>
<div id="footer"></div>
<script>
'use strict';
[
  '10px 10px 10px',
  'none', // Composited animations fail to zoom the last expectation correctly. ):
].forEach(translation => {
  var text = document.createElement('div');
  text.textContent = translation;
  container.appendChild(text);

  var target = document.createElement('div');
  target.classList.add('target');
  container.appendChild(target);
  target.animate([
    {translate: translation},
    {translate: translation},
  ], 1e8);
});

if (window.testRunner)
  testRunner.waitUntilDone();

function waitForCompositor() {
  return footer.animate({opacity: ['1', '1']}, 1).finished;
}

requestAnimationFrame(() => {
  requestAnimationFrame(() => {
    if (window.testRunner)
      testRunner.setPageZoomFactor(2);
    requestAnimationFrame(() => {
      requestAnimationFrame(() => {
        waitForCompositor().then(() => {
          if (window.testRunner)
            testRunner.notifyDone();
        });
      });
    });
  });
});
</script>

chromium/third_party/blink/web_tests/animations/responsive/zoom-responsive-translate-animation.html