[css-compositing-2] Add lighter composite operator to mix-blend-mode

[khushalsagar]

This issue proposes adding "plus-lighter" to the list of blend modes specified in the Compositing and Blending spec. This blend mode is useful when cross-fading 2 elements for which all or a subset of pixels have identical color values. An example showing the problem is here : https://static-misc-3.glitch.me/composite-test/2.html.

Consider 2 elements each having a pixel with value C. These 2 elements are multiplied with opacity α and (1-α) respectively and placed in an isolated group. When blending using the 'normal' blend mode, the resulting pixel value is produced by source over compositing of the 2 elements :

Co = αs x Cs + αb x Cb x (1 – αs).

In this example, Cs = Cb = C; αs = α; αb = (1-α), which results in the follow color :
C0 = C x ( 1 - α + α^2);

For α = 0.5, this would be C x 0.75 while the desired result is C x 1.

The proposed "plus-lighter" blend-mode will add the source and backdrop color value : B(Cb, Cs) = min(Cb x αb + Cs x αs, 1). The backdrop is replaced by the result of this blending operation. For the example above this would result in :

Co = min(C x α + C x (1 - α)) = C

This issue is related to the proposal in w3c/csswg-drafts#6464 with the problem referenced in the explainer under cross-fading

[jakearchibald]

I threw a few more demos together for this over at https://jakearchibald.com/2021/dom-cross-fade/

[svgeesus]

(Shouldn't this issue be over here? )

I agree that the plus-lighter and plus-darker blend modes from Compositing-2 are useful. A sentence or two of explanation in the spec, in addition to the equations, would be helpful.

[jakearchibald]

A sentence or two of explanation in the spec, in addition to the equations, would be helpful.

As in, explaining how they're useful for cross-fading?

[svgeesus]

Like the others have, for example

Creates a color with the hue and saturation of the source color and the luminosity of the backdrop color. This preserves the gray levels of the backdrop and is useful for coloring monochrome images or tinting color images.

But yes, saying briefly why they are useful for cross fading would be good.

[jakearchibald]

@svgeesus do you know why mix-blend-mode was limited to a subset of things available to canvas' globalCompositeOperation?

[svgeesus]

I do not

[jakearchibald]

This issue is kinda a dupe of #181, except lighter vs plus-lighter

[LeaVerou]

(Shouldn't this issue be over here? )

Yes! Transferred.

[jakearchibald]

PR and tests #444

[khushalsagar]

Thanks for moving this to the right place @LeaVerou. Could you let me know what the approval/resolution process is from here?

[khushalsagar]

Updating the proposal based on the discussion here.

I propose introducing "lighter" value for the CSS property mix-blend-mode. This would map to using normal blending and lighter compositing operation when an element with this property is composited with its backdrop.

The proposal above follows the pattern of globalCompositeOperation in 2D Canvas which allows developers to configure both blend mode and compositing operators. The pattern is as follows :

1. If a blend mode value is specified, the compositing operator defaults to source-over.
2. If a compositing operator is specified, the blend mode defaults to normal.

The current proposal is limited to exposing the "lighter" compositing operator since the use-case here requires only this mode. But we can allow specifying any compositing operator going forward which would make mix-blend-mode consistent with the capabilities globalCompositeOperation provides for 2D canvas.

[smfr]

WebKit already supports plus-darker and plus-lighter in mix-blend-mode.