LibWeb: Support blending in CSS and the canvas

[skyz1]

This PR adds support for the mix-blend-mode CSS property.
It also implements compositing and various blending modes via the globalCompositeOperation attribute in the canvas.

This makes some more tests in https://wpt.fyi/results/html/canvas/element/compositing pass.

[skyz1]

I adapted the code to use blender instead of blend mode. However I am not sure if "plus-darken" works correctly, as the Spec seems to have an incorrect formula, the implementation differs between popular Browsers, and and I don't know how it should look like.

[konradekk]

oh! neatly structured! 👍🏻

[konradekk]

how does this behave?

Suggested change

	return max(vec4(0.0), source + destination - vec4(1.0));
	return max(vec4(0.0), vec4(1.0) - ((vec4(1.0) - destination) + (vec4(1.0) - source))));

[skyz1]

Sadly, this does not work either...

I failed to find an implementation of this mode using Skia on Github. Even WebKit, the only Engine that supports it, has no implementation using Skia. I think the problem is the transparent black background, but I currently have no workaround.

[skyz1]

I extended the scope of this PR and also implemented the mi-blend-mode CSS property. Now blending can be tested using this demo. It seems like all modes except plus-darker work pretty well, although there are some slight deviations from WebKit and Chromium. This may be caused by the pre-multiplied alpha.

[konradekk]

it seems that it is enough to

• pass .isolate = computed_values.isolation() == CSS::Isolation::Isolate in push_stacking_context_params,
• propagate from there to PushStackingContext, and
• use in DisplayListPlayerSkia like this

    if (command.opacity < 1 || command.mix_blend_mode != "normal"sv || command.isolate) {

to have working isolation on the mdn page you mentioned.

[konradekk]

could you try the following?

Suggested change

	// FIXME: This value is only correctly supported by Safari in combination with Core Graphics.
	// It looks like the spec is wrong about the formula. We therefore use the one from
	// https://developer.apple.com/documentation/coregraphics/cgblendmode/plusdarker for now.
	// However it also does not work.
	return SkRuntimeEffect::MakeForBlender(SkString(R"(
	vec4 main(vec4 source, vec4 destination) {
	return max(vec4(0.0), source + destination - vec4(1.0));
	}
	)"))
	return SkRuntimeEffect::MakeForBlender(SkString(R"(
	vec4 main(vec4 source, vec4 destination) {
	return saturate(saturate(destination.a + source.a) - saturate(destination.a - destination) - saturate(source.a - source));
	}
	)"))
	.effect->makeBlender(nullptr);

[konradekk]

nit: to align with hinted code, you can also switch to

Suggested change

	vec4 main(vec4 source, vec4 destination) {
	return min(vec4(1.0), source + destination);
	}
	vec4 main(vec4 source, vec4 destination) {
	return saturate(source + destination);
	}