Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(8)

Issues Search
    My Issues | Starred     Open | Closed | All

Side by Side Diff: third_party/WebKit/LayoutTests/compositing/draws-content/canvas-background-layer.html

Issue 2629083003: Fix box shadow rendering on opaque WebGL canvases (Closed)
Patch Set: fixed tests Created 3 years, 11 months ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View unified diff | Download patch
« no previous file with comments | « no previous file | third_party/WebKit/LayoutTests/compositing/draws-content/canvas-background-layer-expected.txt » ('j') | no next file with comments »
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
OLDNEW
1 <!DOCTYPE html> 1 <!DOCTYPE html>
2 <html> 2 <html>
3 <head> 3 <head>
4 <style type="text/css"> 4 <style type="text/css">
5 .container { 5 .container {
6 width: 60px; 6 width: 60px;
7 height: 60px; 7 height: 60px;
8 margin: 5px; 8 margin: 5px;
9 } 9 }
10 canvas { 10 canvas {
11 background-color: green; 11 background-color: green;
12 } 12 }
13 #canvas-simple {} 13 #canvas-simple {}
14 #canvas-padding { padding: 5px; } 14 #canvas-padding { padding: 5px; }
15 #canvas-border { border: 5px solid; } 15 #canvas-border { border: 5px solid; }
16 #canvas-image { background-image: url("../resources/simple_image.png"); } 16 #canvas-image { background-image: url("../resources/simple_image.png"); }
17 #canvas-transparent-background { background-color: rgba(0, 255, 0, 0.5); } 17 #canvas-transparent-background { background-color: rgba(0, 255, 0, 0.5); }
18 #canvas-opaque { border: 5px solid; } 18 #canvas-opaque {}
19 #canvas-opaque-border { border: 5px solid; }
20 #canvas-opaque-box-shadow { box-shadow: 10px 10px 0px red; }
19 </style> 21 </style>
20 <script> 22 <script>
21 if (window.testRunner) 23 if (window.testRunner)
22 testRunner.dumpAsText(); 24 testRunner.dumpAsText();
23 25
24 function drawCanvas(canvasID, hasAlpha) { 26 function drawCanvas(canvasID, hasAlpha) {
25 var canvas = document.getElementById(canvasID); 27 var canvas = document.getElementById(canvasID);
26 var context = canvas.getContext("2d", {alpha: hasAlpha}); 28 var context = canvas.getContext("2d", {alpha: hasAlpha});
27 context.clearRect(0, 0, canvas.width, canvas.height); 29 context.clearRect(0, 0, canvas.width, canvas.height);
28 }; 30 };
(...skipping 16 matching lines...) Expand all
45 // Content layer cannot direct-composite background image. 47 // Content layer cannot direct-composite background image.
46 // The container GraphicsLayer needs to paint background image. 48 // The container GraphicsLayer needs to paint background image.
47 drawCanvas('canvas-image', true); 49 drawCanvas('canvas-image', true);
48 50
49 // Simple background can be direct-composited with content-layer. 51 // Simple background can be direct-composited with content-layer.
50 // The container GraphicsLayer does not paint anything. 52 // The container GraphicsLayer does not paint anything.
51 // The content layer should not be treated as opaque because the 53 // The content layer should not be treated as opaque because the
52 // background color is not opaque. 54 // background color is not opaque.
53 drawCanvas('canvas-transparent-background', true); 55 drawCanvas('canvas-transparent-background', true);
54 56
55 // Background cannot be direct-composited because of box decoration. 57 // Contents of the canvas are opaque so the background does
56 // However contents of the canvas are opaque so the background does
57 // not need to be painted. 58 // not need to be painted.
58 drawCanvas('canvas-opaque', false); 59 drawCanvas('canvas-opaque', false);
59 60
61 // The layer for this canvas is technically opaque because it has
62 // opaque contents and an opque border style, but blink does not
63 // currently analyze border style opacity, so the layer will be
64 // conservatively considered non-opaque. If a future CL causes
65 // this test to fail due to this case being marked as opaque, that
66 // would be an improvement.
67 drawCanvas('canvas-opaque-border', false);
68
69 // The presence of a of a box shadow makes the canvas's layer
70 // non-opaque even though canvas contents are opque.
71 drawCanvas('canvas-opaque-box-shadow', false);
72
60 if (window.testRunner && window.internals) 73 if (window.testRunner && window.internals)
61 document.getElementById('layer-tree').innerText = window.interna ls.layerTreeAsText(document); 74 document.getElementById('layer-tree').innerText = window.interna ls.layerTreeAsText(document);
62 }; 75 };
63 window.addEventListener('load', doTest, false); 76 window.addEventListener('load', doTest, false);
64 </script> 77 </script>
65 </head> 78 </head>
66 79
67 <body> 80 <body>
68 <div class="container"> 81 <div class="container">
69 <canvas id="canvas-simple" width="50" height="50"></canvas> 82 <canvas id="canvas-simple" width="50" height="50"></canvas>
70 </div> 83 </div>
71 <div class="container"> 84 <div class="container">
72 <canvas id="canvas-transparent-background" width="50" height="50"></canvas > 85 <canvas id="canvas-transparent-background" width="50" height="50"></canvas >
73 </div> 86 </div>
74 <div class="container"> 87 <div class="container">
75 <canvas id="canvas-padding" width="50" height="50"></canvas> 88 <canvas id="canvas-padding" width="50" height="50"></canvas>
76 </div> 89 </div>
77 <div class="container"> 90 <div class="container">
78 <canvas id="canvas-border" width="50" height="50"></canvas> 91 <canvas id="canvas-border" width="50" height="50"></canvas>
79 </div> 92 </div>
80 <div class="container"> 93 <div class="container">
81 <canvas id="canvas-image" width="50" height="50"></canvas> 94 <canvas id="canvas-image" width="50" height="50"></canvas>
82 </div> 95 </div>
83 <div class="container"> 96 <div class="container">
84 <canvas id="canvas-opaque" width="50" height="50"></canvas> 97 <canvas id="canvas-opaque" width="50" height="50"></canvas>
85 </div> 98 </div>
99 <div class="container">
100 <canvas id="canvas-opaque-border" width="50" height="50"></canvas>
101 </div>
102 <div class="container">
103 <canvas id="canvas-opaque-box-shadow" width="50" height="50"></canvas>
104 </div>
86 <pre id="layer-tree"></pre> 105 <pre id="layer-tree"></pre>
87 </body> 106 </body>
88 </html> 107 </html>
OLDNEW
« no previous file with comments | « no previous file | third_party/WebKit/LayoutTests/compositing/draws-content/canvas-background-layer-expected.txt » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698