1428993-2.html (1093B)
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 width: 200px; 10 height: 200px; 11 background-color: red; 12 } 13 14 #parent { 15 position: fixed; 16 width: 200px; 17 height: 200px; 18 top: 0px; 19 left: 0px; 20 background-color: green; 21 } 22 23 #child { 24 position: fixed; 25 width: 100px; 26 height: 100px; 27 top: 300px; 28 background-color: green; 29 } 30 31 .translate { 32 transform: translateX(0px); 33 } 34 35 .container { 36 position: absolute; 37 top: 0px; 38 left: 0px; 39 z-index: 1; 40 } 41 </style> 42 </head> 43 44 <body> 45 <div class="container"> 46 <div class="back"></div> 47 <div id="parent"> 48 <div id="child"></div> 49 </div> 50 </div> 51 <script type="text/javascript"> 52 function doTest() { 53 document.getElementById("parent").classList.add("translate"); 54 document.documentElement.removeAttribute("class"); 55 } 56 57 window.addEventListener("MozReftestInvalidate", doTest); 58 59 // setTimeout(doTest, 5000); 60 </script> 61 </body> 62 </html>