| <!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(20);} |
| } |
| .animate { |
| animation: scale 1s infinite; |
| position: relative; |
| top: 45%; |
| left: 45%; |
| width: 10%; |
| height: 10%; |
| } |
| </style> |
| <div style="width: 200px; height: 200px; overflow: hidden; position: relative"> |
| <div class="animate"> |
| <div class="animate"> |
| <div style="width: 2px; height: 1px; background: blue"></div> |
| <div style="width: 2px; height: 1px; 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: 95px; left: 0; width: 200px; height: 10px; background: white"></div> |
| </div> |
| <script> |
| takeScreenshotDelayed(200); |
| </script> |
