src/third_party/WebKit/LayoutTests/compositing/backface-visibility/backface-visibility-webgl.html

   1 <!DOCTYPE html>
   2 <html>
   3 <head>
   4 <style>
   5   .test-div
   6   {
   7     width: 100px;
   8     height: 100px;
   9     text-align: center;
  10     background-color: gray;
  11   }
  12   .test-canvas
  13   {
  14     width: 50px;
  15     height: 50px;
  16     -webkit-backface-visibility: hidden;
  17   }
  18 </style>
  19 <script>
  20   /* Function to draw a 50x50 black opaque square with the lower-left quadrant
  21      red using WebGL */
  22   function drawRedQuadGL(elementId) {
  23     var canvas = document.getElementById(elementId);
  24     var gl = canvas.getContext("experimental-webgl");
  25     if (!gl) {
  26       throw "Unable to fetch WebGL rendering context for Canvas";
  27     }
  28     gl.viewport(0, 0, canvas.width, canvas.height);
  29     gl.clearColor(0.0, 0.0, 0.0, 1.0);
  30     gl.clear(gl.COLOR_BUFFER_BIT);
  31     gl.enable(gl.SCISSOR_TEST);
  32     gl.scissor(0, 0, canvas.width/2, canvas.height/2);
  33     gl.clearColor(1.0, 0.0, 0.0, 1.0);
  34     gl.clear(gl.COLOR_BUFFER_BIT);
  35   }
  36
  37   /* Function to add a canvas with the specified style with a specified style */
  38   function addTestCanvas(id, style) {
  39     document.write("<canvas id=\"" + id + "\" width=50px height=50px class=\"test-canvas\" style=\"" + style + "\"></canvas>");
  40     document.write("<script>drawRedQuadGL(\"" + id + "\");<\/script>");
  41   }
  42 </script>
  43 </head>
  44 <body>
  45
  46 <!-- Enable WebGL in the testing framework (without this we will fail to
  47      create a GL context) -->
  48
  49 <script>
  50   if (window.testRunner) {
  51     testRunner.overridePreference("WebKitWebGLEnabled", "1");
  52   }
  53 </script>
  54
  55 <table><tr>
  56
  57 <!-- This test draws a canvas which is facing the screen. -->
  58
  59 <td>
  60   <div class="test-div">
  61     <script>addTestCanvas("test0", "");</script>
  62   </div>
  63 </td>
  64
  65 <!-- This test draws a single-sided canvas facing away from the screen.  This
  66      should not appear. -->
  67
  68 <td>
  69   <div class="test-div">
  70     <script>addTestCanvas("test1", "transform: rotateY(180deg);");</script>
  71   </div>
  72 </td>
  73
  74 <!-- This test rotates the div away from the screen, but keeps the
  75      single-sided canvas facing towards its div.  This should appear. -->
  76
  77 <td>
  78   <div class="test-div" style="transform: rotateY(180deg)">
  79     <script>addTestCanvas("test2", "");</script>
  80   </div>
  81 </td>
  82
  83 </tr><tr>
  84
  85 <!-- This test draws a canvas inside a div which is double-sided and does not
  86      face the screen.  This should not appear because preserve-3d is set for
  87      the parent div. -->
  88
  89 <td>
  90   <div class="test-div" style="transform: rotateY(180deg); -webkit-transform-style: preserve-3d;">
  91     <script>addTestCanvas("test3", "");</script>
  92   </div>
  93 </td>
  94
  95 <!-- This test draws a canvas inside a div which is single-sided and does not
  96      face the screen.  This should appear because preserve-3d is set for the
  97      parent div. -->
  98
  99 <td>
 100   <div class="test-div" style="transform: rotateY(180deg); -webkit-transform-style: preserve-3d; -webkit-backface-visibility: hidden;">
 101     <script>addTestCanvas("test4", "transform: rotateY(180deg);");</script>
 102   </div>
 103 </td>
 104
 105 <!-- This test draws a canvas inside a div which is single-sided and does not
 106      face the screen.  This should not appear because preserve-3d is not set
 107      for the parent div.  -->
 108
 109 <td>
 110   <div class="test-div" style="transform: rotateY(180deg); -webkit-backface-visibility: hidden;">
 111     <script>addTestCanvas("test5", "transform: rotateY(180deg);")</script>
 112   </div>
 113 </td>
 114
 115 </tr></table>
 116
 117
 118 <script>
 119   if (window.testRunner) {
 120       /* Instruct the test runner that this is a pixel test */
 121       testRunner.dumpAsTextWithPixelResults();
 122       document.write("<span style='position:absolute; top:-5000px'>This test is only useful as a pixel test</span>");
 123   }
 124 </script>
 125
 126 </body>
 127 </html>