clipped-animated-transform-1.html (1112B)
1 <!DOCTYPE html> 2 <html lang="en" class="reftest-wait"> 3 <meta charset="utf-8"> 4 <title>The green box shouldn't be invalidated when the blue box starts to move.</title> 5 6 <style> 7 8 body { 9 margin: 0; 10 } 11 12 #clip { 13 border: 1px solid black; 14 margin: 50px; 15 overflow: hidden; 16 height: 200px; 17 width: 400px; 18 position: relative; 19 } 20 21 #animatedTransform { 22 border: 1px solid blue; 23 width: 100px; 24 height: 100px; 25 position: absolute; 26 z-index: 1; 27 top: 50px; 28 left: 50px; 29 transition: transform ease-in-out 100s forwards; 30 } 31 32 #clip:hover > #animatedTransform, 33 #animatedTransform.animate { 34 transform: translateX(200px); 35 } 36 37 #aboveTransform { 38 position: relative; 39 margin: 50px 100px; 40 border: 1px solid lime; 41 width: 80px; 42 height: 80px; 43 z-index: 2; 44 } 45 46 </style> 47 48 <div id="clip"> 49 <div id="animatedTransform"></div> 50 </div> 51 52 <div id="aboveTransform" class="reftest-no-paint"></div> 53 54 <script> 55 56 function doTest() { 57 document.getElementById("animatedTransform").className = "animate"; 58 document.documentElement.removeAttribute("class"); 59 } 60 document.addEventListener("MozReftestInvalidate", doTest); 61 62 </script>