src/third_party/WebKit/LayoutTests/compositing/webgl/webgl-with-accelerated-background-color.html

   1 <!DOCTYPE>
   2 <html>
   3 <head>
   4 <!-- Check for compositing WebGL layer and accelerated background-color layer. -->
   5 <!-- On load, there is not WebGL layer. WebGL layer is created on the fly. -->
   6 <style>
   7     #background {
   8         width: 200px;
   9         height: 200px;
  10         display: block;
  11     }
  12     #canvas {
  13         width: 200px;
  14         height: 200px;
  15         display: block;
  16     }
  17     .blue {
  18         width: 50px;
  19         height: 50px;
  20         background-color: rgba(0, 0, 255, 0.5);
  21         display: block;
  22         top: -50px;
  23         position: relative;
  24     }
  25     .composited {
  26         transform: translateZ(0);
  27     }
  28 </style>
  29 <script type="text/javascript" charset="utf-8">
  30     if (window.testRunner) {
  31         testRunner.waitUntilDone();
  32         testRunner.dumpAsTextWithPixelResults();
  33     }
  34
  35     function doTest()
  36     {
  37         window.setTimeout(function() {
  38             makeWebGLLayer();
  39             if (window.internals)
  40                 window.internals.forceCompositingUpdate(document);
  41             if (window.testRunner) {
  42                 window.setTimeout(function() {
  43                     testRunner.notifyDone();
  44                 }, 0);
  45             }
  46         }, 0);
  47     }
  48
  49     function initWebGL(vshader, fshader, attribs, clearColor, clearDepth)
  50     {
  51         var canvas = document.getElementById('canvas');
  52         var gl = canvas.getContext("webgl");
  53         if (!gl) {
  54             alert("No WebGL context found");
  55             return null;
  56         }
  57
  58         gl.clearColor(clearColor[0], clearColor[1], clearColor[2], clearColor[3]);
  59         gl.clearDepth(clearDepth);
  60
  61         gl.enable(gl.DEPTH_TEST);
  62         gl.enable(gl.BLEND);
  63         gl.blendFunc(gl.SRC_ALPHA, gl.ONE);
  64
  65         return gl;
  66     }
  67
  68     function makeWebGLLayer()
  69     {
  70         var gl = initWebGL("", "", [], [ 1.0, 0.0, 0.0, 1.0 ], 1);
  71         gl.viewport(0, 0, 200, 200);
  72         gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
  73     }
  74
  75     window.addEventListener('load', doTest, false);
  76 </script>
  77 </head>
  78 <body>
  79 <div id="background">
  80     <canvas id="canvas"></canvas>
  81     <div class="blue composited"></div>
  82 </div>
  83 </body>
  84 </html>