search

web-platform-tests / interop

web-platform-tests Interop project
https://wpt.fyi/interop
317 stars 28 forks source link

Carryover evaluation: Masking #476

Closed nairnandu closed 9 months ago

nairnandu commented 1 year ago

To evaluate continuation of the Masking focus area in Interop 2024

Original proposal:

Labeled tests (2023):

Also consider the possibility of adding new tests in 2024

jsnkuhn commented 1 year ago

As the person that specifically asked about better support for mask-image I must say I'm concerned to still see Chromes 18% support. I know that there are still 3 months left in the year but to see pretty much no progress on this at all 9 months into the year is honestly disheartening.

image

foolip commented 1 year ago

@jsnkuhn the Chrome team is working on the Masking focus area and we expect to make good progress in the last 3 months of the year.

thebabydino commented 1 year ago

Chromium browsers have a non-standard text value for mask-clip - any chance this could become standard? It could be so useful.

One use case is for glassmorphism effects on text. This effect could also be achieved in Firefox using element(), but it requires an extra element.

Chrome (top) and Firefox (bottom) screenshot collage of the emoji glassmorphism effect for comparison. The emojis are obviously different, but the result is otherwise pretty similar.

Another use case is for getting such alpha XOR :hover/ :focus animated gradient ghost buttons.

Screenshot. Shows the pastel ghost buttons filling up from the bottom to the top on hover and this fill XOR-ing the button text and icon.

Another missing feature of masking would be the ability to subtract a mask layer from the result of compositing the layers below it - we can currently only perform the subtraction the other way around. Though I guess cross-browser support for luminance masks could help there.