<!DOCTYPE html>
<html>
<head>
<style type="text/css" media="screen">
canvas {
margin: 20px;
width: 200px;
height: 200px;
padding: 0 0;
}
.border {
border: 1px solid black;
}
</style>
<script src="../../resources/run-after-layout-and-paint.js"></script>
<script>
function initWebGL()
{
var canvas = document.getElementById('canvas');
var gl = canvas.getContext("webgl", {'antialias': false});
if (!gl) {
alert("No WebGL context found");
return null;
}
return gl;
}
var gl = null;
function init()
{
gl = initWebGL();
gl.viewport(0, 0, 200, 200);
gl.clearColor(1, 0, 0, 1); // red
gl.clear(gl.COLOR_BUFFER_BIT);
runAfterLayoutAndPaint(drawGreen, true);
}
// Note that this test can't actually reproduce an under-invalidation bug when
// running as a web test, because the under-invalidation causes surface
// under-damage only, and it won't be shown in the captured image as the image
// is always treated as fully damaged. You need to run this test in browser
// to verify an under-invalidation bug.
function drawGreen()
{
gl.clearColor(0, 1, 0, 1); // green
gl.clear(gl.COLOR_BUFFER_BIT);
}
</script>
</head>
<body onload="init()">
<canvas id="canvas" width="200" height="200"></canvas>
</body>
</html>