Blitz - WPT: transform-additive-animation.html

wpt / css / css-transforms / animation / transform-additive-animation.html

/css/css-transforms/animation/transform-additive-animation.html

<!doctype html>
<html class="reftest-wait">
<meta charset="utf-8">
<title>Verify additive transform animation behavior</title>
<link rel="match" href="transform-additive-animation-ref.html">
<link rel="help" href="https://drafts.csswg.org/css-transforms-2/#ctm">
<script src="/common/reftest-wait.js"></script>
<style>

@keyframes scale {
  0%, 100% { transform: scale(2) }
}

#target {
  width: 100px;
  height: 100px;
  background-color: black;

  transform-origin: top left;
  transform: translateX(100px);

  animation: scale 1s infinite;
  animation-composition: add;
}

</style>
<body>
  <div id="target"></div>

<script>

'use strict';

(async function() {
    // Wait for the animation to be committed on the compositor.
    await new Promise(requestAnimationFrame);
    await new Promise(requestAnimationFrame);
    await new Promise(requestAnimationFrame);
    takeScreenshot();
})();

</script>
</body>

/css/css-transforms/animation/transform-additive-animation-ref.html

<!doctype html>
<html>
<meta charset="utf-8">
<title>Reference for additive transform animation behavior</title>
<style>

div {
    width: 100px;
    height: 100px;
    background-color: black;
    transform-origin: top left;
    transform: translateX(100px) scale(2);
}

</style>
<body>
  <div></div>
</body>