blob: a00828dee66a2ad83107701773e465848925ff6e [file] [log] [blame]
<!DOCTYPE HTML>
<!-- READ BEFORE UPDATING:
If this test is updated make sure to increment the "revision" value of the
associated test in content/test/gpu/gpu_tests/pixel_test_pages.py. This will ensure
that the baseline images are regenerated on the next run.
-->
<html>
<head>
<title>OffscreenCanvas commit flow on main thread: green square on white background.</title>
<style type="text/css">
.nomargin {
margin: 0px auto;
}
</style>
<script>
var g_swapsBeforeAck = 15;
var g_frameNumber = 0;
var gl;
function main()
{
var canvas = document.getElementById("c");
var offscreenCanvas = canvas.transferControlToOffscreen();
gl = offscreenCanvas.getContext("webgl", {preserveDrawingBuffer: true});
gl.clearColor(1, 0, 0, 1);
gl.clear(gl.COLOR_BUFFER_BIT);
drawLoop();
}
function drawTriangle()
{
gl.clearColor(0, 1, 0, 1);
gl.clear(gl.COLOR_BUFFER_BIT);
var prog = gl.createProgram();
var vs = gl.createShader(gl.VERTEX_SHADER);
gl.shaderSource(vs, ['attribute vec2 pos;',
'void main() {',
' gl_Position = vec4(pos, 0., 1.);',
'}'].join('\n'));
gl.compileShader(vs);
if (!gl.getShaderParameter(vs, gl.COMPILE_STATUS)) {
throw 'failed to compiled shader';
}
gl.attachShader(prog, vs);
var fs = gl.createShader(gl.FRAGMENT_SHADER);
gl.shaderSource(fs, ['void main() {',
' gl_FragColor = vec4(1.);',
'}'].join('\n'));
gl.compileShader(fs);
if (!gl.getShaderParameter(fs, gl.COMPILE_STATUS)) {
throw 'failed to compiled shader';
}
gl.attachShader(prog, fs);
gl.linkProgram(prog);
if (!gl.getProgramParameter(prog, gl.LINK_STATUS)) {
throw "Could not link the shader program!";
}
gl.useProgram(prog);
gl.bindBuffer(gl.ARRAY_BUFFER, gl.createBuffer());
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([-.5,0, 0,.5, .5,0]), gl.STATIC_DRAW);
var attr = gl.getAttribLocation(prog, 'pos');
gl.enableVertexAttribArray(attr);
gl.vertexAttribPointer(attr, 2, gl.FLOAT, false, 0, 0);
gl.drawArrays(gl.TRIANGLE_STRIP, 0, 3);
}
function drawLoop()
{
if (g_frameNumber < 10) {
g_frameNumber++;
// Purposely intersperse overdraw and non-overdraw commit cases to see
// if OffscreenCanvas commit() handles both cases well.
if (0 == g_frameNumber % 2) {
// When promise is used, the next drawLoop() is called after the first
// frame is resolved; therefore there is no overdraw in this case.
gl.commit().then(drawLoop);
} else {
// When the next drawLoop() is invoked regardless the promise resolve
// status of the previous commit(), the frame committed in the next
// drawLoop() is very likely to be overdrawn.
gl.commit();
drawLoop();
}
} else {
drawTriangle();
gl.commit();
// The following clear is never committed
gl.clearColor(0, 0, 1, 1);
gl.clear(gl.COLOR_BUFFER_BIT);
waitForFinish();
}
}
function waitForFinish()
{
if (g_swapsBeforeAck == 0) {
domAutomationController.setAutomationId(1);
domAutomationController.send("SUCCESS");
} else {
g_swapsBeforeAck--;
document.getElementById('container').style.zIndex = g_swapsBeforeAck + 1;
window.requestAnimationFrame(waitForFinish);
}
}
</script>
</head>
<body onload="main()">
<div style="position:relative; width:300px; height:300px; background-color:white">
</div>
<div id="container" style="position:absolute; top:0px; left:0px">
<canvas id="c" width="300" height="300" class="nomargin"></canvas>
</div>
</body>
</html>