bug1472465-1.html (1109B)
1 <!DOCTYPE html> 2 <html class="reftest-wait"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Bug 1472465</title> 6 <style type="text/css"> 7 #container { 8 border: 1px solid; 9 width: 500px; 10 height: 500px; 11 overflow: hidden; 12 } 13 14 #box { 15 opacity: 0.1; 16 position: absolute; 17 top: 100px 18 left: 100px; 19 z-index:1; 20 background-color: green; 21 width: 100px; 22 height: 100px; 23 } 24 25 #bg { 26 position:relative; 27 width: 2500px; 28 height: 2500px; 29 left: 300px; 30 top: 300px; 31 } 32 </style> 33 34 <script type="text/javascript"> 35 function changeOpacity() { 36 var box = document.querySelector("#box"); 37 box.style.opacity = "1.0"; 38 39 document.documentElement.removeAttribute("class"); 40 } 41 42 function moveBg() { 43 var bg = document.querySelector("#bg"); 44 bg.style.top = "0px"; 45 bg.style.left = "0px"; 46 47 setTimeout(changeOpacity, 200); 48 } 49 50 function doTest() { 51 moveBg(); 52 } 53 54 window.addEventListener("MozReftestInvalidate", doTest); 55 </script> 56 57 </head> 58 <body> 59 <div id="container"> 60 <div id="bg"> 61 <div id="box"> 62 Text to force layer state to inactive, that will get flattened. 63 </div> 64 </div> 65 </div> 66 67 </body> 68 </html>