haikuwebkit/ManualTests/animated-canvas-as-backgrou...

43 lines
1.0 KiB
HTML

<!DOCTYPE html>
<html>
<head>
<style>
#container {
width: 300px;
height: 300px;
background-image: -webkit-canvas(sourceCanvas);
background-size: 100%;
display: inline-block;
}
</style>
</head>
<body>
<p>This test passes if two green squares are displayed below.</p>
<div>
<div style="display: inline-block">
<div id="container"></div>
</div>
<div id="canvas-container" style="display: inline-block"></div>
</div>
<script>
var ctx = document.getCSSCanvasContext('2d', 'sourceCanvas', 300, 300);
var canvas = ctx.canvas;
function asyncDraw2() {
ctx.fillStyle = "green";
ctx.fillRect(0, 0, 300, 300);
}
function asyncDraw1() {
ctx.fillStyle = "red";
ctx.fillRect(0, 0, 300, 300);
window.webkitRequestAnimationFrame(asyncDraw2);
}
window.webkitRequestAnimationFrame(asyncDraw1);
document.querySelector('#canvas-container').appendChild(canvas);
</script>
</body>
</html>