animate-layer-scale-inherit-3.html (1168B)
1 <!DOCTYPE HTML> 2 <html class="reftest-wait"> 3 <title>Testcase, bug 1122526</title> 4 <style> 5 6 #outer, #inner { 7 display: inline-block; 8 background: white; 9 color: black; 10 } 11 /* 12 * We use step-end with reverse direction to paint the initial state 13 * on the first frame, and step to the last state on the next frame. 14 */ 15 #inner { animation: HoldTransform step-end 100s reverse } 16 #inner { 17 vertical-align: top; 18 height: 100px; 19 width: 100px; 20 background: repeating-linear-gradient(to top left, yellow, blue 10px); 21 } 22 @keyframes HoldTransform { 23 /* need to initially rasterize at non-identity transform to hit the 24 * bug at all 25 * NOTE: These keyframes will be used reverse direction. 26 */ 27 0% { transform: none } 28 100% { transform: scale(0.2) } 29 } 30 31 </style> 32 33 <div id="outer"> 34 <div id="inner"> 35 </div> 36 </div> 37 38 <script> 39 40 document.getElementById("inner").addEventListener("animationstart", StartListener); 41 42 function StartListener(event) { 43 // Animation should be zoomed to transform:none after the first frame. 44 requestAnimationFrame(RemoveReftestWait); 45 } 46 47 function RemoveReftestWait() { 48 document.documentElement.classList.remove("reftest-wait"); 49 } 50 51 </script>