Bug 282530 – mask-image broken with mask-mode: luminance

• Status: NEW
• Component: CSS

[Tuur Martens]

Created attachment 473123 [details]
minimal reproduction file

Sorry for the bad title.
I've been trying to find out exactly what is going on, but it hasn't been easy.

Anyhow, I'm not sure of exactly what triggers this bug, which I realize isn't very helpful. I'll post this here so perhaps more eyes could look into it, as will I, as much as is possible.

Scenario sketch:
I want a gradient "blob". I tried to use a blurred out SVG for that, but that caused rendering issues in every single browser I tried.
So we opted to use a solid color div with a mask applied to it.
I got the mask small enough to fit in 1.5KiB, so it's part of the html file because I can only seem to attach one attachment.
For some reason this mask works only sometimes, and the only browsers where I encounter issues are webkit-based.
In the attached file it seems to work on some window widths, but not others, so try messing with the window size.

Once again my apologies for making such a vague report, but my intention is to bring more eyes upon the issue.

What actually happens:
The result SOMETIMES is a solid color, as if the mask was never applied. Other times, it behaves as expected. Possibly related to image size.

What is supposed to happen:
The mask is visually applied.

Reproduced in:
WebKitGTK 2.46.1
GStreamer 1.24.7
GTK 4.17.0
Libadwaita 1.7.0
Distributor: GNOME

[Alexey Proskuryakov]

I can reproduce this in Safari too.

[Simon Fraser (smfr)]

Created attachment 473145 [details]
Clearer testcase

Seems to happen when things go above a certain size.

[Radar WebKit Bug Importer]

<rdar://problem/139292158>

[Simon Fraser (smfr)]

It's not about the WebP image; this happens with a gradient too.

[Simon Fraser (smfr)]

Drawing commands for the good state:

handleItem save
handleItem clip (rect (8,50) width=1272 height=833)
handleItem begin-transparency-layer (opacity 1.00)
handleItem fill-composited-rect (rect (8,50) width=1272 height=833) (color #FF0000) (composite-operation source-over) (blend-mode normal)
handleItem set-state (change-flags [composite-mode]) (composite-mode  (composite-operation destination-in) (blend-mode normal))
handleItem begin-transparency-layer (opacity 1.00)
handleItem set-state (change-flags [draw-luminance-mask]) (draw-luminance-mask 1)
handleItem save
handleItem clip (rect (8,50) width=1272 height=833)
handleItem save
handleItem set-state (change-flags [composite-mode]) (composite-mode  (composite-operation source-over) (blend-mode normal))
handleItem clip (rect (8,50) width=1272 height=833)
handleItem translate (x 8.00) (y 50.00)
handleItem fill-rect-with-gradient (rect (0,0) width=1272 height=833)
handleItem restore
handleItem restore
handleItem end-transparency-layer
handleItem end-transparency-layer
handleItem restore


Drawing commands for the bad state:

handleItem save
handleItem clip (rect (8,50) width=1199 height=833)
handleItem begin-transparency-layer (opacity 1.00)
handleItem fill-composited-rect (rect (8,50) width=1199 height=833) (color #FF0000) (composite-operation source-over) (blend-mode normal)
handleItem set-state (change-flags [composite-mode]) (composite-mode  (composite-operation destination-in) (blend-mode normal))
handleItem begin-transparency-layer (opacity 1.00)
handleItem set-state (change-flags [draw-luminance-mask]) (draw-luminance-mask 0)
handleItem draw-pattern (image-identifier 479) (pattern-transform {m=((0.50,0.00)(0.00,0.50)) t=(0.00,0.00)}) (tile-rect (0,0) width=2 height=1666) (dest-rect (8,50) width=1199 height=833) (phase (8,50)) (spacing width=0 height=0)
handleItem end-transparency-layer
handleItem end-transparency-layer
handleItem restore

[Simon Fraser (smfr)]

Here's the reason for the divergence:
    const float maxPatternTilePixels = 2048 * 2048;

[Simon Fraser (smfr)]

drawPattern always turns off the luminance mask state:

    destContext.setDrawLuminanceMask(false);
    destContext.drawPattern(Ref { *m_cachedImage }, destRect, adjustedSrcRect, adjustedPatternCTM, phase, spacing, options);

[Simon Fraser (smfr)]

`mask-mode: luminance` just seems broken in general.

I'm having the same bug with a very lightweight svg that im masking, curiously the result changes from Safari on IOS to Safari on OSX as I only encounter it on IOS... smaller size seems to fix the problem though.

Created attachment 473379 [details]
Svg minimal Reproduction