third_party/WebKit/LayoutTests/compositing/draws-content/webgl-background-layer.html

   1 <!DOCTYPE html>
   2 <html>
   3   <head>
   4     <style type="text/css">
   5       .container {
   6         width: 60px;
   7         height: 60px;
   8         margin: 5px;
   9       }
  10       canvas {
  11         background-color: green;
  12       }
  13       #canvas-simple {}
  14       #canvas-padding { padding: 5px; }
  15       #canvas-border { border: 5px solid; }
  16       #canvas-image { background-image: url("../resources/simple_image.png"); }
  17       #canvas-transparent-background { background-color: rgba(0, 255, 0, 0.5); }
  18     </style>
  19     <script>
  20         if (window.testRunner) {
  21             testRunner.overridePreference("WebKitWebGLEnabled", "1");
  22             testRunner.dumpAsText();
  23         }
  24
  25         function drawCanvas(canvasID) {
  26             var canvas = document.getElementById(canvasID);
  27             var gl = canvas.getContext("webgl");
  28             gl.clearColor(0, 0, 0, 0);
  29             gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
  30         };
  31
  32         function doTest() {
  33             // Simple background can be direct-composited with content-layer.
  34             // The container GraphicsLayer does not paint anything.
  35             drawCanvas('canvas-simple');
  36
  37             // Padding makes the background-box bigger than content-box.
  38             // The container GraphicsLayer needs to paint background.
  39             drawCanvas('canvas-padding');
  40
  41             // Content layer cannot direct-composite any kind of box decoration.
  42             // The container GraphicsLayer needs to paint box decorations.
  43             drawCanvas('canvas-border');
  44
  45             // Content layer cannot direct-composite background image.
  46             // The container GraphicsLayer needs to paint background image.
  47             drawCanvas('canvas-image');
  48
  49             // Simple background can be direct-composited with content-layer.
  50             // The container GraphicsLayer does not paint anything.
  51             // The container Graphics layer must not be treated as opaque
  52             drawCanvas('canvas-transparent-background');
  53
  54             if (window.testRunner && window.internals)
  55                 document.getElementById('layer-tree').innerText = window.internals.layerTreeAsText(document);
  56         };
  57         window.addEventListener('load', doTest, false);
  58     </script>
  59   </head>
  60
  61   <body>
  62     <div class="container">
  63       <canvas id="canvas-simple" width="50" height="50"></canvas>
  64     </div>
  65     <div class="container">
  66       <canvas id="canvas-padding" width="50" height="50"></canvas>
  67     </div>
  68     <div class="container">
  69       <canvas id="canvas-border" width="50" height="50"></canvas>
  70     </div>
  71     <div class="container">
  72       <canvas id="canvas-image" width="50" height="50"></canvas>
  73     </div>
  74     <div class="container">
  75       <canvas id="canvas-transparent-background" width="50" height="50"></canvas>
  76     </div>
  77     <pre id="layer-tree"></pre>
  78   </body>
  79 </html>