<!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>