| <!DOCTYPE html> |
| <!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> |
| <title>Canvas test: 2d.layer.global-states.filter.alpha.shadow</title> |
| <h1>2d.layer.global-states.filter.alpha.shadow</h1> |
| <p class="desc">Checks that layers with filters correctly use global render states.</p> |
| <canvas id="canvas" width="90" height="90"> |
| <p class="fallback">FAIL (fallback content)</p> |
| </canvas> |
| <script> |
| const canvas = document.getElementById("canvas"); |
| const ctx = canvas.getContext('2d'); |
| |
| const svg = ` |
| <svg xmlns="http://www.w3.org/2000/svg" |
| width="90" height="90" |
| color-interpolation-filters="sRGB"> |
| <filter id="filter" x="-100%" y="-100%" width="300%" height="300%"> |
| <feDropShadow dx="5" dy="5" stdDeviation="0" flood-color="#00f" /> |
| <feComponentTransfer> |
| <feFuncA type="table" tableValues="0 0.8"></feFuncA> |
| </feComponentTransfer> |
| </filter> |
| <g filter="url(#filter)"> |
| <rect x="10" y="25" width="40" height="50" fill="rgba(255, 0, 0, 1)"/> |
| <rect x="30" y="5" width="50" height="40" fill="rgba(0, 255, 0, 1)"/> |
| </g> |
| </svg>`; |
| |
| const img = new Image(); |
| img.width = 90; |
| img.height = 90; |
| img.onload = () => { |
| ctx.fillStyle = 'rgba(128, 128, 128, 1)'; |
| ctx.fillRect(20, 15, 50, 50); |
| |
| ctx.globalAlpha = 0.75; |
| ctx.shadowOffsetX = -7; |
| ctx.shadowOffsetY = 7; |
| ctx.shadowColor = 'rgba(255, 165, 0, 0.5)'; |
| ctx.shadowBlur = 3; |
| |
| ctx.drawImage(img, 0, 0); |
| }; |
| img.src = 'data:image/svg+xml;base64,' + btoa(svg); |
| </script> |
