зеркало из https://github.com/mozilla/gecko-dev.git
110 строки
2.2 KiB
HTML
110 строки
2.2 KiB
HTML
<!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>
|
|
|