<!DOCTYPE HTML>
<meta charset="utf-8">
<title>Test of <composite-mode> values in canvas globalCompositeOperation</title>
<link rel="help" href="https://html.spec.whatwg.org/multipage/C#compositing">
<link rel="help" href="https://drafts.fxtf.org/compositing/#canvascompositingandblending">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<canvas id="canvas" width="2" height="2"></canvas>
<script>
// Test a small set of sRGB color and alpha values in the 0-255 range.
const VALUES = [ 0, 47, 193, 255 ];
const COMPOSITE_OPERATORS = {
// Define a "color" function accepting source and destination colors
// and alphas, and an "alpha" function accepting source and
// destination alphas.
"clear": {
"color": (sa, sc, da, dc) => 0,
"alpha": (sa, da) => 0
},
"copy": {
"color": (sa, sc, da, dc) => sa * sc,
"alpha": (sa, da) => sa
},
"destination": {
// TODO(dbaron): The spec says this should work, but none of
// Chromium, Gecko, or WebKit appear to implement it.
"color": (sa, sc, da, dc) => da * dc,
"alpha": (sa, da) => da
},
"source-over": {
"color": (sa, sc, da, dc) => sa * sc + da * dc * (1 - sa),
"alpha": (sa, da) => sa + da * (1 - sa)
},
"destination-over": {
"color": (sa, sc, da, dc) => sa * sc * (1 - da) + da * dc,
"alpha": (sa, da) => sa * (1 - da) + da
},
"source-in": {
"color": (sa, sc, da, dc) => sa * sc * da,
"alpha": (sa, da) => sa * da
},
"destination-in": {
"color": (sa, sc, da, dc) => da * dc * sa,
"alpha": (sa, da) => da * sa
},
"source-out": {
"color": (sa, sc, da, dc) => sa * sc * (1 - da),
"alpha": (sa, da) => sa * (1 - da)
},
"destination-out": {
"color": (sa, sc, da, dc) => da * dc * (1 - sa),
"alpha": (sa, da) => da * (1 - sa)
},
"source-atop": {
"color": (sa, sc, da, dc) => sa * sc * da + da * dc * (1 - sa),
"alpha": (sa, da) => sa * da + da * (1 - sa)
},
"destination-atop": {
"color": (sa, sc, da, dc) => sa * sc * (1 - da) + da * dc * sa,
"alpha": (sa, da) => sa * (1 - da) + da * sa
},
"xor": {
"color": (sa, sc, da, dc) => sa * sc * (1 - da) + da * dc * (1 - sa),
"alpha": (sa, da) => sa * (1 - da) + da * (1 - sa)
},
"lighter": {
// TODO(https://github.com/w3c/fxtf-drafts/issues/446): All engines
// actually implement 'lighter' using the formula for 'plus-lighter'
// given below; we should update the spec to match!
"color": (sa, sc, da, dc) => sa * sc + da * dc,
"alpha": (sa, da) => sa + da
},
"plus-darker": {
// TODO(https://github.com/w3c/fxtf-drafts/issues/447): This formula
// is almost certainly wrong. It doesn't make sense, and the one
// engine that implements this value (WebKit) does something very
// different.
"color": (sa, sc, da, dc) => Math.max(0, 1 - sa * sc + 1 - da * dc),
"alpha": (sa, da) => Math.max(0, 1 - sa + 1 - da)
},
"plus-lighter": {
"color": (sa, sc, da, dc) => Math.min(1, sa * sc + da * dc),
"alpha": (sa, da) => Math.min(1, sa + da)
}
};
let canvas = document.getElementById("canvas");
let cx = canvas.getContext("2d", { willReadFrequently: true });
function roundup_255th(n) {
return Math.ceil(n * 255) / 255;
}
function rounddown_255th(n) {
return Math.floor(n * 255) / 255;
}
for (let op in COMPOSITE_OPERATORS) {
test(function() {
cx.save();
this.add_cleanup(() => { cx.restore(); });
for (let sc of VALUES) {
for (let sa of VALUES) {
for (let dc of VALUES) {
for (let da of VALUES) {
let desc = `g=${sc} a=${sa} ${op} g=${dc} a=${da}`;
cx.restore();
cx.save();
cx.clearRect(0, 0, 2, 2);
cx.fillStyle = `rgb(0, ${dc}, 0)`;
cx.globalAlpha = da / 255;
cx.fillRect(0, 0, 2, 2);
cx.globalCompositeOperation = op;
assert_equals(cx.globalCompositeOperation, op, "composite operation");
cx.fillStyle = `rgb(0, ${sc}, 0)`;
cx.globalAlpha = sa / 255;
cx.fillRect(0, 0, 2, 2);
let imageData = cx.getImageData(0, 0, 1, 1);
assert_equals(imageData.data.length, 4, "length of ImageData");
assert_equals(imageData.data[0], 0, `red: ${desc}`);
assert_equals(imageData.data[2], 0, `blue: ${desc}`);
let expected_color = COMPOSITE_OPERATORS[op].color(sa/255, sc/255, da/255, dc/255);
let expected_alpha = COMPOSITE_OPERATORS[op].alpha(sa/255, da/255);
let allowed_color_error;
// undo the premultiplication:
if (expected_alpha == 0) {
assert_equals(expected_color, 0, `premultiplication zero check: ${desc}`);
allowed_color_error = 0;
} else {
// We want to allow for the error in the color expectation
// to increase when the expected alpha is small, because
// we want to allow for roughly the same amount of error
// in the (smaller) *premultiplied* value.
let expected_min_color = rounddown_255th(expected_color) / roundup_255th(expected_alpha);
let expected_max_color = roundup_255th(expected_color) / rounddown_255th(expected_alpha);
// Set the expectation to the midpoint of the error range
// rather than the actual accurate expectation.
expected_color = (expected_max_color + expected_min_color) / 2;
allowed_color_error = (expected_max_color - expected_min_color) / 2;
}
expected_color *= 255;
expected_alpha *= 255;
allowed_color_error *= 255;
allowed_color_error += 3.5;
assert_approx_equals(imageData.data[1], expected_color, allowed_color_error, `green: ${desc}`);
assert_approx_equals(imageData.data[3], expected_alpha, 1.01, `alpha: ${desc}`);
}
}
}
}
}, `globalCompositeOperation ${op}`);
}
</script>
Codebase Browser
chromium