| <!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> |
