1432553-1.html (1119B)
1 <!DOCTYPE html> 2 <html class="reftest-wait"> 3 <head> 4 <meta http-equiv="content-type" content="text/html; charset=UTF-8"> 5 <meta charset="utf-8"> 6 <title>Retained display list test</title> 7 <style type="text/css"> 8 .back { 9 position: absolute; 10 left: 50px; 11 top: 50px; 12 height: 400px; 13 width: 400px; 14 15 background: white; 16 } 17 18 #parent { 19 position: fixed; 20 top: 0px; 21 left: 300px; 22 width: 200px; 23 height: 200px; 24 25 border: none; 26 background-color: green; 27 } 28 29 .translate { 30 transform: translateX(0px); 31 } 32 33 #child { 34 position: fixed; 35 } 36 37 .container { 38 position: absolute; 39 left: 0px; 40 top: 0px; 41 width: 600px; 42 height: 600px; 43 z-index: 1; 44 } 45 </style> 46 </head> 47 <body> 48 <div class="container"> 49 <div class="back"></div> 50 <div id="parent"> 51 <div id="child"></div> 52 </div> 53 </div> 54 55 <script type="text/javascript"> 56 function doTest() { 57 document.getElementById("parent").classList.add("translate"); 58 document.documentElement.removeAttribute("class"); 59 } 60 61 window.addEventListener("MozReftestInvalidate", doTest); 62 63 // setTimeout(doTest, 1000); 64 </script> 65 </body> 66 </html>