zoom-responsive-translate-animation-expected.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';
if (window.testRunner)
  testRunner.setPageZoomFactor(2);

[
  '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);
});

// We must wait a frame to let compositor animations render.
if (window.testRunner)
  testRunner.waitUntilDone();

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

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

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