diff --git a/testing/web-platform/tests/css/compositing/background-blending/background-blend-mode-plus-lighter.html b/testing/web-platform/tests/css/compositing/background-blending/background-blend-mode-plus-lighter.html new file mode 100644 index 00000000000000..0816dc691b7f81 --- /dev/null +++ b/testing/web-platform/tests/css/compositing/background-blending/background-blend-mode-plus-lighter.html @@ -0,0 +1,32 @@ + +background-blend-mode: plus-lighter test + + + + + diff --git a/testing/web-platform/tests/css/compositing/background-blending/reference/background-blend-mode-plus-lighter-ref.html b/testing/web-platform/tests/css/compositing/background-blending/reference/background-blend-mode-plus-lighter-ref.html new file mode 100644 index 00000000000000..550981986b0474 --- /dev/null +++ b/testing/web-platform/tests/css/compositing/background-blending/reference/background-blend-mode-plus-lighter-ref.html @@ -0,0 +1,20 @@ + +background-blend-mode: plus-lighter test + + + + diff --git a/testing/web-platform/tests/css/compositing/mix-blend-mode/mix-blend-mode-plus-lighter-basic.html b/testing/web-platform/tests/css/compositing/mix-blend-mode/mix-blend-mode-plus-lighter-basic.html new file mode 100644 index 00000000000000..fcf2d172afd6b1 --- /dev/null +++ b/testing/web-platform/tests/css/compositing/mix-blend-mode/mix-blend-mode-plus-lighter-basic.html @@ -0,0 +1,42 @@ + +mix-blend-mode: plus-lighter test + + + + + + +
+
+
+
+
diff --git a/testing/web-platform/tests/css/compositing/mix-blend-mode/mix-blend-mode-plus-lighter-svg-basic.html b/testing/web-platform/tests/css/compositing/mix-blend-mode/mix-blend-mode-plus-lighter-svg-basic.html new file mode 100644 index 00000000000000..4762389ca92574 --- /dev/null +++ b/testing/web-platform/tests/css/compositing/mix-blend-mode/mix-blend-mode-plus-lighter-svg-basic.html @@ -0,0 +1,21 @@ + +mix-blend-mode: plus-lighter SVG test + + + + + + + + + + + + + diff --git a/testing/web-platform/tests/css/compositing/mix-blend-mode/mix-blend-mode-plus-lighter-svg.html b/testing/web-platform/tests/css/compositing/mix-blend-mode/mix-blend-mode-plus-lighter-svg.html index 4762389ca92574..fc5e94e74e90b0 100644 --- a/testing/web-platform/tests/css/compositing/mix-blend-mode/mix-blend-mode-plus-lighter-svg.html +++ b/testing/web-platform/tests/css/compositing/mix-blend-mode/mix-blend-mode-plus-lighter-svg.html @@ -1,21 +1,37 @@ mix-blend-mode: plus-lighter SVG test - + - + diff --git a/testing/web-platform/tests/css/compositing/mix-blend-mode/mix-blend-mode-plus-lighter.html b/testing/web-platform/tests/css/compositing/mix-blend-mode/mix-blend-mode-plus-lighter.html index ae3dff155dce88..e6fc4d73a0421e 100644 --- a/testing/web-platform/tests/css/compositing/mix-blend-mode/mix-blend-mode-plus-lighter.html +++ b/testing/web-platform/tests/css/compositing/mix-blend-mode/mix-blend-mode-plus-lighter.html @@ -1,42 +1,38 @@ mix-blend-mode: plus-lighter test - + - + diff --git a/testing/web-platform/tests/css/compositing/mix-blend-mode/reference/mix-blend-mode-plus-lighter-basic-ref.html b/testing/web-platform/tests/css/compositing/mix-blend-mode/reference/mix-blend-mode-plus-lighter-basic-ref.html new file mode 100644 index 00000000000000..e5acd26b6fd498 --- /dev/null +++ b/testing/web-platform/tests/css/compositing/mix-blend-mode/reference/mix-blend-mode-plus-lighter-basic-ref.html @@ -0,0 +1,57 @@ + +mix-blend-mode: plus-lighter test + + + + + +
+
+
+
+
+
+
diff --git a/testing/web-platform/tests/css/compositing/mix-blend-mode/reference/mix-blend-mode-plus-lighter-ref.html b/testing/web-platform/tests/css/compositing/mix-blend-mode/reference/mix-blend-mode-plus-lighter-ref.html index e5acd26b6fd498..4709ab8b6882eb 100644 --- a/testing/web-platform/tests/css/compositing/mix-blend-mode/reference/mix-blend-mode-plus-lighter-ref.html +++ b/testing/web-platform/tests/css/compositing/mix-blend-mode/reference/mix-blend-mode-plus-lighter-ref.html @@ -1,57 +1,20 @@ mix-blend-mode: plus-lighter test - + - + diff --git a/testing/web-platform/tests/css/compositing/mix-blend-mode/reference/mix-blend-mode-plus-lighter-svg-basic-ref.html b/testing/web-platform/tests/css/compositing/mix-blend-mode/reference/mix-blend-mode-plus-lighter-svg-basic-ref.html new file mode 100644 index 00000000000000..9193bb574b3f95 --- /dev/null +++ b/testing/web-platform/tests/css/compositing/mix-blend-mode/reference/mix-blend-mode-plus-lighter-svg-basic-ref.html @@ -0,0 +1,19 @@ + +mix-blend-mode: plus-lighter SVG test + + + + + + + + + + + + + + diff --git a/testing/web-platform/tests/css/compositing/mix-blend-mode/reference/mix-blend-mode-plus-lighter-svg-ref.html b/testing/web-platform/tests/css/compositing/mix-blend-mode/reference/mix-blend-mode-plus-lighter-svg-ref.html index 9193bb574b3f95..8e1cb707599c4f 100644 --- a/testing/web-platform/tests/css/compositing/mix-blend-mode/reference/mix-blend-mode-plus-lighter-svg-ref.html +++ b/testing/web-platform/tests/css/compositing/mix-blend-mode/reference/mix-blend-mode-plus-lighter-svg-ref.html @@ -1,19 +1,14 @@ mix-blend-mode: plus-lighter SVG test - + + diff --git a/testing/web-platform/tests/css/compositing/support/plus-lighter.js b/testing/web-platform/tests/css/compositing/support/plus-lighter.js new file mode 100644 index 00000000000000..cadefa57282360 --- /dev/null +++ b/testing/web-platform/tests/css/compositing/support/plus-lighter.js @@ -0,0 +1,47 @@ +import { clamp01, multiplyAlpha, unmultiplyAlpha } from "./utils.js"; + +export function plusLighter(pixels) { + if (pixels.length === 1) return pixels[0]; + + return pixels.reduce((destination, source) => { + const premultipliedSource = multiplyAlpha(source); + const premultipliedDestination = multiplyAlpha(destination); + const premultipliedResult = premultipliedDestination.map((channel, i) => + clamp01(channel + premultipliedSource[i]) + ); + return unmultiplyAlpha(premultipliedResult); + }); +} + +export const tests = [ + // Each test is a list of colors to composite. + // Each color is [r, g, b, a], unmultiplied, in the range 0-1. + [ + [1, 0, 0, 0.5], + [0, 0, 1, 0.5], + ], + [ + [1, 0, 0, 0.25], + [0, 0, 1, 0.25], + ], + [ + [0.5, 0, 0, 0.5], + [0, 0, 1, 0.5], + ], + // Test clamping + [ + [1, 0, 0, 1], + [0, 0, 1, 1], + ], + // Test more than two elements + [ + [0.5, 0, 0, 0.25], + [0.25, 0.25, 0, 0.25], + [0.25, 0, 0.1, 0.25], + [0, 0, 0.1, 0.25], + ], + // Test a single element + [ + [0.5, 0, 0, 0.25], + ], +]; diff --git a/testing/web-platform/tests/css/compositing/support/utils.js b/testing/web-platform/tests/css/compositing/support/utils.js new file mode 100644 index 00000000000000..eb369ce2e58f0a --- /dev/null +++ b/testing/web-platform/tests/css/compositing/support/utils.js @@ -0,0 +1,31 @@ +export function multiplyAlpha(pixel) { + return pixel.map((channel, i) => { + // Pass the alpha channel through unchanged + if (i === 3) return channel; + // Otherwise, multiply by alpha + return channel * pixel[3]; + }); +} + +export function unmultiplyAlpha(pixel) { + return pixel.map((channel, i) => { + // Pass the alpha channel through unchanged + if (i === 3) return channel; + // Avoid divide-by-zero + if (pixel[3] === 0) return channel; + // Divide by alpha + return channel / pixel[3]; + }); +} + +export function clamp01(value) { + if (value < 0) return 0; + if (value > 1) return 1; + return value; +} + +const toPercent = (num) => `${num * 100}%`; +export const toCSSColor = (pixel) => + `rgb(${toPercent(pixel[0])} ${toPercent(pixel[1])} ${toPercent(pixel[2])} / ${ + pixel[3] + })`;