nested-scale-animations.html

Enable keyboard shortcuts

This WPT test may be referenced by the following Test IDs:
- /css/css-animations/nested-scale-animations.html - WPT Dashboard Interop Dashboard

<!DOCTYPE html>

<html class="reftest-wait">

<title>Nested scale animations</title>

<link rel="author" title="Xianzhu Wang" href="mailto:wangxianzhu@chromium.org">

<link rel="help" href="https://crbug.com/1165408">

<link rel="match" href="nested-scale-animations-ref.html">

<meta name="assert" content="Contents under nested scale animations should not be too blurry">

<script src="/common/reftest-wait.js"></script>

<style>

@keyframes scale {

  0% {transform: scale(1);}

  1% {transform: scale(10);}

  100% {transform: scale(10);}

.animate {

  animation: scale 1s forwards;

  position: relative;

  top: 40%;

  left: 40%;

  width: 20%;

  height: 20%;

</style>

<div style="width: 100px; height: 100px; overflow: hidden; position: relative">

  <div class="animate" onanimationstart="animationStarted()">

    <div class="animate" onanimationstart="animationStarted()">

      <div style="width: 4px; height: 2px; background: blue"></div>

      <div style="width: 4px; height: 2px; background: green"></div>

    </div>

  </div>

  <!-- To mask off the pixels that may be blurry/antialiased while the rendering

       quality is acceptable. -->

  <div style="position: absolute; top: 45px; left: 0; width: 100px; height: 10px; background: white"></div>

</div>

<script>

var startedCount = 0;

function animationStarted() {

  startedCount++;

  if (startedCount == 2)

    takeScreenshotDelayed(900);

</script>