src/third_party/WebKit/LayoutTests/compositing/draws-content/canvas-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       #canvas-opaque { border: 5px solid; }
  19     </style>
  20     <script>
  21         if (window.testRunner)
  22             testRunner.dumpAsText();
  23
  24         function drawCanvas(canvasID, hasAlpha) {
  25             var canvas = document.getElementById(canvasID);
  26             var context = canvas.getContext("2d", {alpha: hasAlpha});
  27             context.clearRect(0, 0, canvas.width, canvas.height);
  28         };
  29
  30         function doTest() {
  31             // Simple background can be direct-composited with content-layer.
  32             // The container GraphicsLayer does not paint anything.
  33             // The content layer should be treated as opaque because the
  34             // background color is opaque.
  35             drawCanvas('canvas-simple', true);
  36
  37             // Padding makes the background-box bigger than content-box.
  38             // The container GraphicsLayer needs to paint background.
  39             drawCanvas('canvas-padding', true);
  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', true);
  44
  45             // Content layer cannot direct-composite background image.
  46             // The container GraphicsLayer needs to paint background image.
  47             drawCanvas('canvas-image', true);
  48
  49             // Simple background can be direct-composited with content-layer.
  50             // The container GraphicsLayer does not paint anything.
  51             // The content layer should not be treated as opaque because the
  52             // background color is not opaque.
  53             drawCanvas('canvas-transparent-background', true);
  54
  55             // Background cannot be direct-composited because of box decoration.
  56             // However contents of the canvas are opaque so the background does
  57             // not need to be painted.
  58             drawCanvas('canvas-opaque', false);
  59
  60             if (window.testRunner && window.internals)
  61                 document.getElementById('layer-tree').innerText = window.internals.layerTreeAsText(document);
  62         };
  63         window.addEventListener('load', doTest, false);
  64     </script>
  65   </head>
  66
  67   <body>
  68     <div class="container">
  69       <canvas id="canvas-simple" width="50" height="50"></canvas>
  70     </div>
  71     <div class="container">
  72       <canvas id="canvas-transparent-background" width="50" height="50"></canvas>
  73     </div>
  74     <div class="container">
  75       <canvas id="canvas-padding" width="50" height="50"></canvas>
  76     </div>
  77     <div class="container">
  78       <canvas id="canvas-border" width="50" height="50"></canvas>
  79     </div>
  80     <div class="container">
  81       <canvas id="canvas-image" width="50" height="50"></canvas>
  82     </div>
  83     <div class="container">
  84       <canvas id="canvas-opaque" width="50" height="50"></canvas>
  85     </div>
  86     <pre id="layer-tree"></pre>
  87   </body>
  88 </html>