Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Add canvas-based test for composite modes. #41713

Merged
merged 1 commit into from
Aug 30, 2023
Merged

Add canvas-based test for composite modes. #41713

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
157 changes: 157 additions & 0 deletions css/compositing/canvas-composite-modes.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,157 @@
<!DOCTYPE HTML>
<meta charset="utf-8">
<title>Test of &lt;composite-mode&gt; 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>