Blitz - WPT: scale-and-rotate-both-specified-on-animation-keyframes.html

wpt / css / css-transforms / animation / scale-and-rotate-both-specified-on-animation-keyframes.html

/css/css-transforms/animation/scale-and-rotate-both-specified-on-animation-keyframes.html

<!DOCTYPE html>
<html class="reftest-wait">
<head>
<title>Animating both the "scale" and "rotate" property</title>
<link rel="help" href="https://drafts.csswg.org/css-transforms-2/#individual-transforms">
<link rel="match" href="scale-and-rotate-both-specified-on-animation-keyframes-ref.html">

<style>

@keyframes scale-and-rotate-animation {
    0%      { scale: 1.5; rotate: 0deg; }
    0.001%  { scale: 1; rotate: 90deg; }
    100%    { scale: 1; rotate: 90deg; }
}

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

    transform-origin: bottom left;
    animation: scale-and-rotate-animation linear 100s;
}

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

<script>

(async function() {
    // We need to wait for the animation to have started and progressed for one frame
    // before taking the snapshot.
    await Promise.all(document.getAnimations().map(animation => animation.ready));
    await new Promise(requestAnimationFrame);
    document.documentElement.classList.remove("reftest-wait");
})();

</script>
</body>
</html>

/css/css-transforms/animation/scale-and-rotate-both-specified-on-animation-keyframes-ref.html

<!DOCTYPE html>
<html>
<head>
<title>Animating both the "scale" and "rotate" property</title>
<link rel="help" href="https://drafts.csswg.org/css-transforms-2/#individual-transforms">

<style>

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

    transform-origin: bottom left;
    rotate: 90deg;
}

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