<!DOCTYPE HTML> <html class="reftest-wait" reftest-scrollport-w="800" reftest-scrollport-h="1000" reftest-displayport-w="800" reftest-displayport-h="1000" reftest-no-sync-layers> <head> <meta name="viewport" content="width=600; height=400; initial-scale=1.0"> <title></title> <script type="text/javascript"> function initialPaint() { window.removeEventListener("MozAfterPaint", initialPaint, false); setTimeout(type, 0); } function type() { var box = document.getElementById("input"); box.value = "Hello kitty"; window.addEventListener("MozAfterPaint", repaint, false); } function repaint() { window.removeEventListener("MozAfterPaint", repaint, false); setTimeout(finish, 0); } function finish() { document.documentElement.removeAttribute("class"); } window.addEventListener("MozAfterPaint", initialPaint, false); </script> </head> <body style="width: 600px; height: 400px;"> <div style="position: absolute; left: 0px; top: 0px; width=600px height=600px"> <div style="position: absolute; left: 0px; top: 0px; width: 600px; height: 400px; background-color: green;"></div> <div style="position: absolute; left: 0px; top: 400px; width: 100px; height: 100px;"> <input type="text" id="input" size="20" style="border: none;"></input> </div> <div style="position: absolute; left: 0px; top: 500px; width: 600px; height: 100px; background-color: yellow;"></div> </div> </body> </html>