<!DOCTYPE html> <html class="reftest-wait"> <head> <style type="text/css"> #one { position:absolute; left:0px; top:0px; z-index:4; } #two { position:absolute; top:100px; left:100px; background-color:rgb(0,0,0,0); z-index:3; } #three { position:absolute; left:100px; top:100px; width:200px; height:200px; background-color: rgb(255,0,0); opacity:0.6; z-index:2; } #four { position:absolute; top:100px; left:100px; z-index:1; } </style> <script type="text/javascript"> var plugin, div, canvas; function start() { plugin = document.getElementById("four"); div = document.getElementById("three"); canvas = document.getElementById("two"); paintCanvas(); requestAnimationFrame(moveSomething); } function paintCanvas() { var ctx = canvas.getContext("2d"); ctx.fillStyle = "rgba(255,0,0, 0.6)"; ctx.fillRect(0,0, 200,200); } var i = 0, numLoops = 20; var pluginIn = true, divIn = true, canvasIn = true; function moveSomething() { var didSomething = (0 === (i % 2)) ? moveSomethingOut() : moveSomethingIn(); if (!didSomething && ++i >= numLoops) { return finish(); } requestAnimationFrame(moveSomething); } function finish() { document.documentElement.removeAttribute("class"); } function moveSomethingOut() { if (pluginIn) { plugin.style.left = "400px"; pluginIn = false; } else if (divIn) { div.style.left = "400px"; divIn = false; } else if (canvasIn) { canvas.style.left = "400px"; canvasIn = false; } else { return false; } return true; } function moveSomethingIn() { if (!pluginIn) { plugin.style.left = "100px"; pluginIn = true; } else if (!divIn) { div.style.left = "100px"; divIn = true; } else if (!canvasIn) { canvas.style.left = "100px"; canvasIn = true; } else { return false; } return true; } function reset() { } </script> </style> </head> <body onload="start();"> <embed id="four" type="application/x-test" width="200" height="200" drawmode="solid" color="FFFF0000"></embed> <div id="three"></div> <canvas id="two" width="200" height="200"></canvas> <embed id="one" type="application/x-test" width="400" height="400" drawmode="solid" color="9900FF00"></embed> </body> </html>