blob: c0d3536e9efacf5ecbd17613568be825238d3c5e [file] [log] [blame]
<!DOCTYPE html>
<html>
<head>
<style>
.test-div
{
width: 100px;
height: 100px;
text-align: center;
background-color: gray;
}
.test-canvas
{
width: 50px;
height: 50px;
-webkit-backface-visibility: hidden;
}
</style>
<script>
/* Function to draw a 50x50 black opaque square with the lower-left quadrant
red using WebGL */
function drawRedQuadGL(elementId) {
var canvas = document.getElementById(elementId);
var gl = canvas.getContext("experimental-webgl");
if (!gl) {
throw "Unable to fetch WebGL rendering context for Canvas";
}
gl.viewport(0, 0, canvas.width, canvas.height);
gl.clearColor(0.0, 0.0, 0.0, 1.0);
gl.clear(gl.COLOR_BUFFER_BIT);
gl.enable(gl.SCISSOR_TEST);
gl.scissor(0, 0, canvas.width/2, canvas.height/2);
gl.clearColor(1.0, 0.0, 0.0, 1.0);
gl.clear(gl.COLOR_BUFFER_BIT);
}
/* Function to add a canvas with the specified style with a specified style */
function addTestCanvas(id, style) {
document.write("<canvas id=\"" + id + "\" width=50px height=50px class=\"test-canvas\" style=\"" + style + "\"></canvas>");
document.write("<script>drawRedQuadGL(\"" + id + "\");<\/script>");
}
</script>
</head>
<body>
<table><tr>
<!-- This test draws a canvas which is facing the screen. -->
<td>
<div class="test-div">
<script>addTestCanvas("test0", "");</script>
</div>
</td>
<!-- This test draws a single-sided canvas facing away from the screen. This
should not appear. -->
<td>
<div class="test-div">
<script>addTestCanvas("test1", "-webkit-transform: rotateY(180deg);");</script>
</div>
</td>
<!-- This test rotates the div away from the screen, but keeps the
single-sided canvas facing towards its div. This should appear. -->
<td>
<div class="test-div" style="-webkit-transform: rotateY(180deg)">
<script>addTestCanvas("test2", "");</script>
</div>
</td>
</tr><tr>
<!-- This test draws a canvas inside a div which is double-sided and does not
face the screen. This should not appear because preserve-3d is set for
the parent div. -->
<td>
<div class="test-div" style="-webkit-transform: rotateY(180deg); -webkit-transform-style: preserve-3d;">
<script>addTestCanvas("test3", "");</script>
</div>
</td>
<!-- This test draws a canvas inside a div which is single-sided and does not
face the screen. This should appear because preserve-3d is set for the
parent div. -->
<td>
<div class="test-div" style="-webkit-transform: rotateY(180deg); -webkit-transform-style: preserve-3d; -webkit-backface-visibility: hidden;">
<script>addTestCanvas("test4", "-webkit-transform: rotateY(180deg);");</script>
</div>
</td>
<!-- This test draws a canvas inside a div which is single-sided and does not
face the screen. This should not appear because preserve-3d is not set
for the parent div. -->
<td>
<div class="test-div" style="-webkit-transform: rotateY(180deg); -webkit-backface-visibility: hidden;">
<script>addTestCanvas("test5", "-webkit-transform: rotateY(180deg);")</script>
</div>
</td>
</tr></table>
<script>
if (window.testRunner) {
/* Instruct the test runner that this is a pixel test */
testRunner.dumpAsText(true);
document.write("<span style='position:absolute; top:-5000px'>This test is only useful as a pixel test</span>");
}
</script>
</body>
</html>