third_party/WebKit/LayoutTests/compositing/webgl/webgl-nonpremultiplied-blend.html

   1 <!DOCTYPE html>
   2 <html>
   3   <head>
   4     <style type="text/css" media="screen">
   5       body {
   6         outline: 10px solid transparent; /* affects layer sizes */
   7       }
   8       .canvas {
   9         margin: 20px;
  10         width: 200px;
  11         height: 200px;
  12         background-color: rgba(0, 0, 128, 0.0);
  13       }
  14     </style>
  15     <script>
  16         if (window.testRunner)
  17             testRunner.overridePreference("WebKitWebGLEnabled", "1");
  18
  19         function initWebGL(canvasName, vshader, fshader, attribs, clearColor, clearDepth, premultAlpha)
  20         {
  21             var canvas = document.getElementById(canvasName);
  22             var gl = canvas.getContext("webgl", {premultipliedAlpha: premultAlpha});
  23             if (!gl) {
  24                 alert("No WebGL context found");
  25                 return null;
  26             }
  27
  28             gl.clearColor(clearColor[0], clearColor[1], clearColor[2], clearColor[3]);
  29             gl.clearDepth(clearDepth);
  30
  31             gl.enable(gl.DEPTH_TEST);
  32             gl.enable(gl.BLEND);
  33             gl.blendFunc(gl.SRC_ALPHA, gl.ONE);
  34
  35             return gl;
  36         }
  37
  38         function drawCanvas(canvasID, premultAlpha)
  39         {
  40           var blueColor = 128.0 / 255.0 * (premultAlpha ? 0.5 : 1.0);
  41           var gl = initWebGL(canvasID, "", "", [], [ 0, 0, blueColor, 0.5 ], 1, premultAlpha);
  42           gl.viewport(0, 0, 200, 200);
  43           gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
  44         }
  45
  46         function init()
  47         {
  48           drawCanvas('canvas1', false);
  49           drawCanvas('canvas2', true);
  50        }
  51     </script>
  52   </head>
  53   <body onload="init()">
  54
  55     <canvas class="canvas" id="canvas1" style="left: 20px" width="200" height="200"></canvas>
  56     <canvas class="canvas" id="canvas2" style="left: 20px" width="200" height="200"></canvas>
  57
  58     <!-- Both should look the same. -->
  59   </body>
  60 </html>