43 lines
1.0 KiB
HTML
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>
|