Bug 271653 – [WPE] Holepunch doesn't work when the video element has rounded corners

• Status: RESOLVED
• Resolution: FIXED
• Component: WPE WebKit

[Miguel Gomez]

Easily reproducible by loading some youtube page, like https://www.youtube.com/watch?v=TRgqtaYb4sU.

In order to put the rounded corners to the video element, a rounded rectangle clipping is done. As it's currently implemented, this means that when painting the video frames, the shader will check whether each of the pixels is inside the rounded rectangle. If the pixel is outside, then it's color is set to (0,0,0,0). If it's inside, the pixels has the color from the video frame. If the pixel is exactly on the border, the pixel has the color of the video frame with half its opacity, to do some antialiasing. Then the pixel is blended onto the background content, which requires blending to be enabled.

On the other hand, holepunch requires blending to be disabled, because it has to overwrite the background with transparent pixels.

When both things are put together, the holepunch disables the blending to overwrite the background, but the rounded rectangle clipping enables it, so it breaks the holepunch feature.

An easy fix for this concrete case would be disabling rounded rectangle clipping when rendering holepunch buffers. This would remove the rounded corners, but the holepuch would work.

But for a more general case where there can be more than a rounded rect clip active at the same time, this approach would break all of rounded clips.

To make this work properly I think that we need to add an alternate implementation for the clipping that's able to work without blending. This is possible, but it breaks antialiasing of the rounded corners, as blending is used for that. The alternate implementation could complement the existent one when blend can't be used. I that case, instead of setting the color to (0,0,0,0) when the pixel is out of the clip, we would need to use "discard" in the shader so that fragment is discarded. This way only the pixels that are inside the clips are rendered. The bad thing about this is that there won't be antialiasing in the rounded corners when this alternate path is enabled.

[Miguel Gomez]

In the end I came up with a solution to perform the rounded rectangle clipping without the need of blending.

The idea is to discard the fragments that are out of the rectangle in the fragment shader, instead of painting them transparent as we're doing now.

The difference between blending being enabled or not is whether we can do some antialiasing on the pixels that are on the border of the rounded corners. When blending is enabled, we can reduce the opacity of those pixels depending on how much they are inside the rect, which improves the visual result.

On the other hand, when blending is disabled we can't use that strategy, so the result will be visually worse. The good thing is that the only case where blending will be disabled is when we're rendering a holepunch buffer, to that should be ok,

[Miguel Gomez]

Pull request: https://github.com/WebKit/WebKit/pull/26460

[EWS]

Committed 276876@main (5e4935006d80): <https://commits.webkit.org/276876@main>

Reviewed commits have been landed. Closing PR #26460 and removing active labels.