| <!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); } |
| #canvas-opaque {} |
| #canvas-opaque-border { border: 5px solid; } |
| #canvas-opaque-box-shadow { box-shadow: 10px 10px 0px red; } |
| </style> |
| <script> |
| if (window.testRunner) |
| testRunner.dumpAsText(); |
| |
| function drawCanvas(canvasID, hasAlpha) { |
| var canvas = document.getElementById(canvasID); |
| var context = canvas.getContext("2d", {alpha: hasAlpha}); |
| context.clearRect(0, 0, canvas.width, canvas.height); |
| }; |
| |
| function doTest() { |
| // Simple background can be direct-composited with content-layer. |
| // The container GraphicsLayer does not paint anything. |
| // The content layer should be treated as opaque because the |
| // background color is opaque. |
| drawCanvas('canvas-simple', true); |
| |
| // Padding makes the background-box bigger than content-box. |
| // The container GraphicsLayer needs to paint background. |
| drawCanvas('canvas-padding', true); |
| |
| // Content layer cannot direct-composite any kind of box decoration. |
| // The container GraphicsLayer needs to paint box decorations. |
| drawCanvas('canvas-border', true); |
| |
| // Content layer cannot direct-composite background image. |
| // The container GraphicsLayer needs to paint background image. |
| drawCanvas('canvas-image', true); |
| |
| // Simple background can be direct-composited with content-layer. |
| // The container GraphicsLayer does not paint anything. |
| // The content layer should not be treated as opaque because the |
| // background color is not opaque. |
| drawCanvas('canvas-transparent-background', true); |
| |
| // Contents of the canvas are opaque so the background does |
| // not need to be painted. |
| drawCanvas('canvas-opaque', false); |
| |
| // The layer for this canvas is technically opaque because it has |
| // opaque contents and an opque border style, but blink does not |
| // currently analyze border style opacity, so the layer will be |
| // conservatively considered non-opaque. If a future CL causes |
| // this test to fail due to this case being marked as opaque, that |
| // would be an improvement. |
| drawCanvas('canvas-opaque-border', false); |
| |
| // The presence of a of a box shadow makes the canvas's layer |
| // non-opaque even though canvas contents are opque. |
| drawCanvas('canvas-opaque-box-shadow', false); |
| |
| if (window.testRunner && window.internals) |
| document.getElementById('layer-tree').innerText = window.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-transparent-background" 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-opaque" width="50" height="50"></canvas> |
| </div> |
| <div class="container"> |
| <canvas id="canvas-opaque-border" width="50" height="50"></canvas> |
| </div> |
| <div class="container"> |
| <canvas id="canvas-opaque-box-shadow" width="50" height="50"></canvas> |
| </div> |
| <pre id="layer-tree"></pre> |
| </body> |
| </html> |
