Merge Chromium + Blink git repositories
[chromium-blink-merge.git] / third_party / WebKit / LayoutTests / fast / canvas / canvas-overflow-hidden-animation.html
blob8e4750f3c6567354b521c9cf6763ed23d32e74e6
1 <!doctype html>
2 <html>
3 <head>
4 <style>
5 #canvas {
6 width: 300px;
7 height: 300px;
8 position: absolute;
9 left: 0px;
10 top: 0px;
13 #overlay {
14 width: 300px;
15 height: 300px;
16 position: absolute;
17 left: 0px;
18 top: 0px;
19 overflow: hidden;
22 #follower {
23 position: absolute;
24 left: 50px;
25 top: 50px;
26 width: 50px;
27 height: 50px;
28 background-color: #00FF00;
30 </style>
31 </head>
32 <body>
33 <canvas id="canvas"></canvas>
34 <div id="overlay"><div id="follower"></div></div>
35 <script>
36 if (window.testRunner) {
37 testRunner.waitUntilDone();
40 var canvas = document.getElementById("canvas");
41 canvas.width = 300;
42 canvas.height = 300;
44 var ctx = canvas.getContext("2d");
45 ctx.fillStyle = "#FF0000";
47 var follower = document.getElementById("follower");
49 drawLoop = function() {
50 // update the follower
51 follower.style.left = "0px";
52 follower.style.top = "0px";
54 // draw the object
55 ctx.clearRect(0, 0, 300, 300);
56 ctx.fillRect(0, 0, 50, 50);
58 if (window.testRunner) {
59 testRunner.notifyDone();
63 window.setTimeout(drawLoop, 0);
64 </script>
65 </body>
66 </html>