masklayer-1.html (986B)
1 <!DOCTYPE html> 2 <html lang="en"> 3 <meta charset="utf-8"> 4 <title>Moving a layer in a box with a rounded clip shouldn't invalidate.</title> 5 6 <style> 7 8 #outer { 9 position: absolute; 10 top: 50px; 11 left: 50px; 12 width: 300px; 13 height: 200px; 14 background-color: #DDD; 15 overflow: hidden; 16 border-radius: 10px; 17 } 18 19 #animatedLeft { 20 position: absolute; 21 top: 50px; 22 left: 40px; 23 box-model: border-box; 24 border: 1px solid lime; 25 width: 100px; 26 height: 100px; 27 } 28 29 </style> 30 31 <body> 32 33 <div id="outer"> 34 <div id="animatedLeft" class="reftest-no-paint"></div> 35 </div> 36 37 <script> 38 39 var animatedLeft = document.getElementById("animatedLeft"); 40 41 function doTest() { 42 animatedLeft.style.left = "100px"; 43 document.documentElement.removeAttribute("class"); 44 } 45 46 // Layerize #animatedLeft 47 animatedLeft.offsetLeft; 48 animatedLeft.style.left = "60px"; 49 animatedLeft.offsetLeft; 50 animatedLeft.style.left = "40px"; 51 animatedLeft.offsetLeft; 52 53 document.addEventListener("MozReftestInvalidate", doTest); 54 55 </script>