diff options
Diffstat (limited to 'testing/web-platform/tests/html/canvas/element/manual/filters/canvas-opacity-blend-modes.html')
-rw-r--r-- | testing/web-platform/tests/html/canvas/element/manual/filters/canvas-opacity-blend-modes.html | 50 |
1 files changed, 50 insertions, 0 deletions
diff --git a/testing/web-platform/tests/html/canvas/element/manual/filters/canvas-opacity-blend-modes.html b/testing/web-platform/tests/html/canvas/element/manual/filters/canvas-opacity-blend-modes.html new file mode 100644 index 0000000000..a2d513eb62 --- /dev/null +++ b/testing/web-platform/tests/html/canvas/element/manual/filters/canvas-opacity-blend-modes.html @@ -0,0 +1,50 @@ +<!DOCTYPE html> +<link rel="match" href="canvas-opacity-blend-modes-expected.html"/> +<meta name="fuzzy" content="maxDifference=0-2; totalPixels=0-390000"> +<body> +</body> +<script> + /* + Compare how the opacity is handled in different blend modes when setting its + value with filters or with properties. + */ + + function drawSquares(canvasId, x, y, compositeOperation) { + var canvas = document.getElementById(canvasId); + var ctx = canvas.getContext('2d'); + canvas.style.position = 'absolute'; + canvas.style.left = `${x}px`; + canvas.style.top = `${y}px`; + + ctx.globalCompositeOperation = 'source-over'; + ctx.filter = 'opacity(100%)'; + ctx.fillStyle = 'green'; + ctx.fillRect(0, 0, 200, 60); + ctx.fillStyle = 'blue'; + ctx.fillRect(0, 0, 50, 50); + ctx.filter = 'opacity(70%)'; + ctx.fillStyle = 'red'; + ctx.fillRect(50, 0, 50, 50); + ctx.globalCompositeOperation = compositeOperation; + ctx.filter = 'opacity(50%)'; + ctx.fillStyle = 'yellow'; + ctx.fillRect(25, 25, 50, 50); + } + + // Fomatted in the same matrix as the drawn elements. + var compositeOperations = + ['source-over', 'source-in', 'source-out', 'source-atop','destination-over', + 'destination-in', 'destination-out', 'destination-atop', 'lighter', 'copy', + 'xor', 'multiply', 'screen', 'overlay', 'darken', + 'lighten', 'color-dodge', 'color-burn', 'hard-light', 'soft-light', + 'difference', 'exclusion', 'hue', 'saturation', 'color', + 'luminosity']; + + for (var i = 0; i < compositeOperations.length; i++){ + var canvas = document.createElement('canvas'); + canvas.id = `canvas-${i}`; + document.body.appendChild(canvas); + drawSquares(canvas.id, (i%5)*300, Math.floor(i/5)*300, + compositeOperations[i]); + } +</script> |