OLD | NEW |
1 <!DOCTYPE HTML> | 1 <!DOCTYPE HTML> |
2 <html> | 2 <html> |
3 <head> | 3 <head> |
4 <title>Canvas 2D Test: Red Box over Black Background</title> | 4 <title>Canvas 2D Test: Red Box over Black Background</title> |
5 <style type="text/css"> | 5 <style type="text/css"> |
6 .nomargin { | 6 .nomargin { |
7 margin: 0px auto; | 7 margin: 0px auto; |
8 } | 8 } |
9 </style> | 9 </style> |
10 <script> | 10 <script> |
11 var g_swapsBeforeAck = 6; | 11 var g_swapsBeforeAck = 6; |
12 var g_paintLoopStarted = false; | 12 var g_targetHeight, g_targetWidth; |
13 | 13 |
14 function main() | 14 function main() |
15 { | 15 { |
16 g_swapsBeforeAck = 6; | 16 if (window.outerHeight != g_targetHeight || |
| 17 window.outerWidth != g_targetWidth) |
| 18 return; |
17 | 19 |
18 if (!g_paintLoopStarted) { | 20 draw(); |
19 g_paintLoopStarted = true; | 21 waitForFinish(); |
20 draw(); | |
21 waitForFinish(); | |
22 } | |
23 } | 22 } |
24 | 23 |
25 function draw() | 24 function draw() |
26 { | 25 { |
27 var canvas = document.getElementById("c"); | 26 var canvas = document.getElementById("c"); |
28 var c2d = canvas.getContext("2d"); | 27 var c2d = canvas.getContext("2d"); |
29 c2d.clearRect(0, 0, canvas.width, canvas.height); | 28 c2d.clearRect(0, 0, canvas.width, canvas.height); |
30 c2d.fillStyle = "rgba(255, 0, 0, 0.5)"; | 29 c2d.fillStyle = "rgba(255, 0, 0, 0.5)"; |
31 c2d.fillRect(50, 50, 100, 100); | 30 c2d.fillRect(50, 50, 100, 100); |
32 } | 31 } |
33 | 32 |
34 function waitForFinish() | 33 function waitForFinish() |
35 { | 34 { |
36 if (g_swapsBeforeAck == 0) { | 35 if (g_swapsBeforeAck == 0) { |
37 domAutomationController.setAutomationId(1); | 36 domAutomationController.setAutomationId(1); |
38 domAutomationController.send("resized"); | 37 domAutomationController.send("resized"); |
39 } else { | 38 } else { |
40 g_swapsBeforeAck--; | 39 g_swapsBeforeAck--; |
41 draw(); | 40 draw(); |
42 window.webkitRequestAnimationFrame(waitForFinish); | 41 window.webkitRequestAnimationFrame(waitForFinish); |
43 } | 42 } |
44 } | 43 } |
45 | 44 |
46 function notifyLoadFinished() | 45 function notifyLoadFinished() |
47 { | 46 { |
48 domAutomationController.setAutomationId(1); | 47 domAutomationController.setAutomationId(1); |
49 domAutomationController.send("ok"); | 48 domAutomationController.send("ok"); |
50 } | 49 } |
51 | 50 |
52 function preCallResizeInChromium() | 51 function preCallResizeInChromium(targetWidth, targetHeight) |
53 { | 52 { |
| 53 g_targetWidth = targetWidth; |
| 54 g_targetHeight = targetHeight; |
54 window.onresize = main; | 55 window.onresize = main; |
55 // Call main() on a timeout in case the window did not resize for whatever | 56 // Call main() on a timeout in case the window did not resize for whatever |
56 // reason. | 57 // reason. |
57 setTimeout(main, 10000); | 58 setTimeout(main, 10000); |
58 } | 59 } |
59 </script> | 60 </script> |
60 </head> | 61 </head> |
61 <body onload="notifyLoadFinished()"> | 62 <body onload="notifyLoadFinished()"> |
62 <div style="position:relative; width:200px; height:200px; background-color:black
"> | 63 <div style="position:relative; width:200px; height:200px; background-color:black
"> |
63 </div> | 64 </div> |
64 <div style="position:absolute; top:0px; left:0px"> | 65 <div style="position:absolute; top:0px; left:0px"> |
65 <canvas id="c" width="200" height="200" class="nomargin"></canvas> | 66 <canvas id="c" width="200" height="200" class="nomargin"></canvas> |
66 </div> | 67 </div> |
67 </body> | 68 </body> |
68 </html> | 69 </html> |
OLD | NEW |