[css-masking-1] Mask on mask behavior

[dirkschulze]

Moved from w3c/svgwg#608, opened by @RazrFalcon

https://www.w3.org/TR/css-masking-1/#the-mask

I'm trying to understand how a mask element with a mask attribute/property should be rendered.

I've made a simple example, but no matter what I do - it still renders the same in all applications. Looks like everyone is simply ignoring the mask property. Does no one support it or am I missing something?

<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">

    <linearGradient id="lg1">
        <stop offset="0" stop-color="white" stop-opacity="0"/>
        <stop offset="1" stop-color="black"/>
    </linearGradient>

    <mask id="mask1">
        <rect id="rect1" x="40" y="40" width="120" height="120" fill="black"/>
    </mask>
    <mask id="mask2" mask="url(#mask1)" maskUnits="userSpaceOnUse" x="0" y="0" width="200" height="200">
        <rect id="rect1" x="20" y="20" width="160" height="160" fill="url(#lg1)"
              transform="rotate(90 100 100)"/>
    </mask>
    <rect id="rect2" x="20" y="20" width="160" height="160" fill="green" mask="url(#mask2)"/>

    <rect id="frame" x="1" y="1" width="198" height="198" fill="none" stroke="black"/>
</svg>

[dirkschulze]

I created a slightly modified example: https://codepen.io/krit/pen/PXoYNN

Edge does seem to support mask on mask but is the only browser that does. Firefox on Windows looks white btw.

[BigBadaboom]

Just a couple of comments on the above test cases.

There are a couple of gotchas here, that may be worth noting just to avoid others scratching their heads like I did for a while.

The first issue is fairly obvious. In the original SVG supplied by @RazrFalcon, the mask1 mask is a black square on black, so it is blank. Meaning that the correct rendering of the test case should be blank. Ie. librsvg is the only correct one here (albeit possibly accidentally).

The second issue relates to the gradient. It is interpolating from transparent white to black. This can cause problems if gradients aren't being interpolated and composited in the correct colour space. For example, Dirk's test case is blank on Firefox due to this. If we modify the gradient by adding a halfway step, the masked green square is now visible.

https://codepen.io/PaulLeBeau/pen/BvyBXZ

To avoid these issues causing confusion, it might be a good idea not to use that problematic gradient and instead use a more straightforward test case that more directly addresses the mask on mask issue.

<svg viewBox="0 0 200 200" width="200" height="200">

    <mask id="mask1">
        <circle id="rect1" cx="100" cy="100" r="50" fill="gray"/>
    </mask>
    <mask id="mask2" mask="url(#mask1)" maskUnits="userSpaceOnUse"
          x="0" y="0" width="200" height="200">
        <rect id="rect1" x="20" y="20" width="160" height="160" fill="white"/>
    </mask>
    <rect id="rect2" x="20" y="20" width="160" height="160" fill="green" mask="url(#mask2)"/>

    <rect id="frame" x="1" y="1" width="198" height="198" fill="none" stroke="black"/>
</svg>

https://codepen.io/PaulLeBeau/pen/RENwro

[RazrFalcon]

@BigBadaboom can you provide a PNG as a reference for the last example?

[BigBadaboom]

Sure. I should have done that anyway... :/

[RazrFalcon]

Yes. Looks like librsvg is the only one that supports it.

[dirkschulze]

@RazrFalcon From the test of @BigBadaboom it seems like browsers do support mask on mask. (Thanks for catching the issue btw.) Can we close this issue now?

[BigBadaboom]

@dirkschulze No they don't all support it. I just tested Chrome, Firefox, Safari and Edge. The only one that rendered my test case correctly was Edge.

[dirkschulze]

@BigBadaboom Argh, must have checked with the wrong test. Indeed, doesn't work on Chrome or Firefox. First mask still works, not the mask on the mask. Simply gets ignored.