| <!DOCTYPE html> |
| <html> |
| <head> |
| <style type="text/css"> |
| .container { |
| width: 60px; |
| height: 60px; |
| margin: 5px; |
| } |
| canvas { |
| background-color: green; |
| } |
| #canvas-simple {} |
| #canvas-padding { padding: 5px; } |
| #canvas-border { border: 5px solid; } |
| #canvas-image { background-image: url("../resources/simple_image.png"); } |
| #canvas-transparent-background { background-color: rgba(0, 255, 0, 0.5); } |
| </style> |
| <script> |
| if (window.testRunner) { |
| testRunner.dumpAsText(); |
| } |
| |
| function drawCanvas(canvasID) { |
| var canvas = document.getElementById(canvasID); |
| var gl = canvas.getContext("webgl"); |
| gl.clearColor(0, 0, 0, 0); |
| gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT); |
| }; |
| |
| function doTest() { |
| // Simple background can be direct-composited with content-layer. |
| // The container GraphicsLayer does not paint anything. |
| drawCanvas('canvas-simple'); |
| |
| // Padding makes the background-box bigger than content-box. |
| // The container GraphicsLayer needs to paint background. |
| drawCanvas('canvas-padding'); |
| |
| // Content layer cannot direct-composite any kind of box decoration. |
| // The container GraphicsLayer needs to paint box decorations. |
| drawCanvas('canvas-border'); |
| |
| // Content layer cannot direct-composite background image. |
| // The container GraphicsLayer needs to paint background image. |
| drawCanvas('canvas-image'); |
| |
| // Simple background can be direct-composited with content-layer. |
| // The container GraphicsLayer does not paint anything. |
| // The container Graphics layer must not be treated as opaque |
| drawCanvas('canvas-transparent-background'); |
| |
| if (window.testRunner && window.internals) |
| document.getElementById('layer-tree').innerText = internals.layerTreeAsText(document); |
| }; |
| window.addEventListener('load', doTest, false); |
| </script> |
| </head> |
| |
| <body> |
| <div class="container"> |
| <canvas id="canvas-simple" width="50" height="50"></canvas> |
| </div> |
| <div class="container"> |
| <canvas id="canvas-padding" width="50" height="50"></canvas> |
| </div> |
| <div class="container"> |
| <canvas id="canvas-border" width="50" height="50"></canvas> |
| </div> |
| <div class="container"> |
| <canvas id="canvas-image" width="50" height="50"></canvas> |
| </div> |
| <div class="container"> |
| <canvas id="canvas-transparent-background" width="50" height="50"></canvas> |
| </div> |
| <pre id="layer-tree"></pre> |
| </body> |
| </html> |
