nested-scale-animations.html (1404B)
1 <!DOCTYPE html> 2 <html class="reftest-wait"> 3 <title>Nested scale animations</title> 4 <link rel="author" title="Xianzhu Wang" href="mailto:wangxianzhu@chromium.org"> 5 <link rel="help" href="https://crbug.com/1165408"> 6 <link rel="match" href="nested-scale-animations-ref.html"> 7 <meta name="assert" content="Contents under nested scale animations should not be too blurry"> 8 <script src="/common/reftest-wait.js"></script> 9 <style> 10 @keyframes scale { 11 0% {transform: scale(1);} 12 1% {transform: scale(10);} 13 100% {transform: scale(10);} 14 } 15 .animate { 16 animation: scale 1s forwards; 17 position: relative; 18 top: 40%; 19 left: 40%; 20 width: 20%; 21 height: 20%; 22 } 23 </style> 24 <div style="width: 100px; height: 100px; overflow: hidden; position: relative"> 25 <div class="animate" onanimationstart="animationStarted()"> 26 <div class="animate" onanimationstart="animationStarted()"> 27 <div style="width: 4px; height: 2px; background: blue"></div> 28 <div style="width: 4px; height: 2px; background: green"></div> 29 </div> 30 </div> 31 <!-- To mask off the pixels that may be blurry/antialiased while the rendering 32 quality is acceptable. --> 33 <div style="position: absolute; top: 45px; left: 0; width: 100px; height: 10px; background: white"></div> 34 </div> 35 <script> 36 var startedCount = 0; 37 function animationStarted() { 38 startedCount++; 39 if (startedCount == 2) 40 takeScreenshotDelayed(900); 41 } 42 </script>