Thu, 22 Jan 2015 13:21:57 +0100
Incorporate requested changes from Mozilla in review:
https://bugzilla.mozilla.org/show_bug.cgi?id=1123480#c6
1 <!DOCTYPE html>
2 <html class="reftest-wait">
3 <head>
4 <style type="text/css">
5 #one {
6 position:absolute;
7 left:0px; top:0px;
8 z-index:4;
9 }
10 #two {
11 position:absolute;
12 top:100px; left:100px;
13 background-color:rgb(0,0,0,0);
14 z-index:3;
15 }
16 #three {
17 position:absolute;
18 left:100px; top:100px;
19 width:200px; height:200px;
20 background-color: rgb(255,0,0);
21 opacity:0.6;
22 z-index:2;
23 }
24 #four {
25 position:absolute;
26 top:100px; left:100px;
27 z-index:1;
28 }
29 </style>
30 <script type="text/javascript">
31 var plugin, div, canvas;
32 function start() {
33 plugin = document.getElementById("four");
34 div = document.getElementById("three");
35 canvas = document.getElementById("two");
36 paintCanvas();
38 mozRequestAnimationFrame(moveSomething);
39 }
41 function paintCanvas() {
42 var ctx = canvas.getContext("2d");
43 ctx.fillStyle = "rgba(255,0,0, 0.6)";
44 ctx.fillRect(0,0, 200,200);
45 }
47 var i = 0, numLoops = 20;
48 var pluginIn = true, divIn = true, canvasIn = true;
49 function moveSomething() {
50 var didSomething = (0 === (i % 2)) ? moveSomethingOut() : moveSomethingIn();
51 if (!didSomething && ++i >= numLoops) {
52 return finish();
53 }
55 mozRequestAnimationFrame(moveSomething);
56 }
58 function finish() {
59 document.documentElement.removeAttribute("class");
60 }
62 function moveSomethingOut() {
63 if (pluginIn) {
64 plugin.style.left = "400px";
65 pluginIn = false;
66 } else if (divIn) {
67 div.style.left = "400px";
68 divIn = false;
69 } else if (canvasIn) {
70 canvas.style.left = "400px";
71 canvasIn = false;
72 } else {
73 return false;
74 }
75 return true;
76 }
78 function moveSomethingIn() {
79 if (!pluginIn) {
80 plugin.style.left = "100px";
81 pluginIn = true;
82 } else if (!divIn) {
83 div.style.left = "100px";
84 divIn = true;
85 } else if (!canvasIn) {
86 canvas.style.left = "100px";
87 canvasIn = true;
88 } else {
89 return false;
90 }
91 return true;
92 }
94 function reset() {
96 }
97 </script>
98 </style>
99 </head>
100 <body onload="start();">
101 <embed id="four" type="application/x-test" width="200" height="200"
102 drawmode="solid" color="FFFF0000"></embed>
103 <div id="three"></div>
104 <canvas id="two" width="200" height="200"></canvas>
105 <embed id="one" type="application/x-test" width="400" height="400"
106 drawmode="solid" color="9900FF00"></embed>
107 </body>
108 </html>