<!DOCTYPE html>
<html>
<head>
<style>
canvas {
background-color: rgba(0, 0, 0, 1);
}
.hidden {
visibility: hidden;
}
.visible {
visibility: visible;
}
</style>
<script>
if (window.testRunner) {
testRunner.dumpAsTextWithPixelResults();
testRunner.overridePreference("WebKitWebGLEnabled", "1");
}
function drawCanvas(canvasID, clearColor)
{
var theCanvas = document.getElementById(canvasID);
var glContext = theCanvas.getContext("webgl");
glContext.clearColor(clearColor[0], clearColor[1], clearColor[2], clearColor[3]);
glContext.clear(glContext.COLOR_BUFFER_BIT);
}
function init()
{
drawCanvas("topGL", [0, 0.5, 0, 1]);
drawCanvas("bottomGL", [1, 0, 0, 1]);
}
</script>
</head>
<body onload="init()">
<!-- Tests CSS visibility flag for WebGL layers. -->
<!-- Pixel test only. Only the green webGL canvas should be visible. The red one should be hidden. -->
<div><canvas id="topGL" class="visible" width="150" height="150"></canvas></div>
<div><canvas id="bottomGL" class="hidden" width="150" height="150"></canvas></div>
</body>
</html>