51 lines
1.3 KiB
HTML
51 lines
1.3 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<style>
|
|
canvas {
|
|
background-color: rgba(0, 0, 0, 1);
|
|
}
|
|
|
|
.hidden {
|
|
visibility: hidden;
|
|
}
|
|
|
|
.visible {
|
|
visibility: visible;
|
|
}
|
|
|
|
.composited {
|
|
-webkit-transform: translatez(0);
|
|
}
|
|
</style>
|
|
|
|
<script>
|
|
if (window.testRunner)
|
|
testRunner.dumpAsText(true);
|
|
|
|
function drawCanvas(canvasID, color)
|
|
{
|
|
var theCanvas = document.getElementById(canvasID);
|
|
var canvasContext = theCanvas.getContext("2d");
|
|
canvasContext.fillStyle = color;
|
|
canvasContext.fillRect(0, 0, 150, 150);
|
|
}
|
|
|
|
function init()
|
|
{
|
|
drawCanvas("one", "green");
|
|
drawCanvas("two", "red");
|
|
drawCanvas("three", "red");
|
|
}
|
|
</script>
|
|
</head>
|
|
|
|
<body onload="init()">
|
|
<!-- Tests CSS visibility flag for a composited canvas2D layer. -->
|
|
<!-- Pixel test only. Only the green canvas2d should be visible. The other two should be hidden. -->
|
|
<div><canvas id="one" class="composited visible" width="150" height="150"></canvas></div>
|
|
<div><canvas id="two" class="hidden" width="150" height="150"></canvas></div>
|
|
<div><canvas id="three" class="composited hidden" width="150" height="150"></canvas></div>
|
|
</body>
|
|
</html>
|