viewport-unit-transform-responsive.html

<!DOCTYPE html>
<style>
#target {
  position: absolute;
  width: 100px;
  height: 100px;
  background: blue;
}
</style>
This box should be located in the center of the page.
<div id="target"></div>
<script src="../../resources/compositor-controls.js"></script>
<script>
setAnimationRequiresRaster();
if (window.testRunner) {
  testRunner.waitUntilDone();
}
function waitForCompositor() {
  return document.body.animate({opacity: [1, 1]}, 1).finished;
}

var position = 'translate(calc(50vw - 50px), calc(50vh - 50px))';
var animation = target.animate({transform: [position, position]}, 1e10);
animation.ready.then(() => {
  window.resizeTo(window.innerWidth / 2, window.innerHeight / 2);
}).then(waitForCompositor).then(() => {
  if (window.testRunner) {
    testRunner.notifyDone();
  }
});
</script>

chromium/third_party/blink/web_tests/animations/responsive/viewport-unit-transform-responsive.html