157 lines
5.9 KiB
HTML
157 lines
5.9 KiB
HTML
<!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>
|