1957693 - feComposite subtraction fail when filter input comes from another SVG filter

Status: NEW

(Core :: SVG, defect)

Description

[Ana Tudor]

Attachment: bcomp.png

User Agent: Mozilla/5.0 (X11; Linux x86_64; rv:138.0) Gecko/20100101 Firefox/138.0

Steps to reproduce:

The idea is to create an inner shadow for an img (inset shadows don't work on img elements) after rounding its corners to give it a squircle shape (this result).

To create this kind of shadow, we blur the filter input, offset it and then subtract the alpha of this blurred and offset version from the SourceAlpha using feComposite with operator set to out. Basically, this:

<svg width="0" height="0" aria-hidden="true">
  <filter id="shadow">
    <feGaussianBlur stdDeviation="8"/>
    <feOffset dx="8" dy="6"/>
    <feComposite in="SourceAlpha" operator="out"/>
  </filter>
</svg>

This works fine if the filter input is the image itself.

But let's say we want to round the image first, meaning the input of this filter becomes the output of the rounding one. Which works as follows: we apply a large blur (which has the side effect of a certain corner rounding), and then a feComponentTransfer which pushes all pixels whose alpha is below .5 to be fully transparent and all the others to be fully opaque. Finally, we restrict the original image to this shape, but that's less important here.

<svg width="0" height="0" aria-hidden="true">
  <filter id="round" primitiveUnits="objectBoundingBox">
    <feGaussianBlur stdDeviation=".2"/>
    <feComponentTransfer>
      <feFuncA type="discrete" tableValues="0 1"/>
    </feComponentTransfer>
    <!-- --
    <feComposite in="SourceGraphic" operator="in"/><!-- -->
  </filter>
</svg>

Actual results:

When the input of the shadow filter is this round filter, then the result of the feComposite in the shadow filter is empty in Firefox,

Expected results:

The result should still be the inner shadow, just like when the input is the img element itself, only this time on the rounded corners shape. This is what happens in both Chrome and Safari (though Safari has other different issues related to corner rounding).

If we specify the input of the blur primitive to be SourceAlpha, then Firefox produces the correct result too.

<svg width="0" height="0" aria-hidden="true">
  <filter id="shadow">
    <feGaussianBlur in="SourceAlpha" stdDeviation="8"/>
    <feOffset dx="8" dy="6"/>
    <feComposite in="SourceAlpha" operator="out"/>
  </filter>
</svg>

Live test https://codepen.io/thebabydino/pen/LEYMGNw

Comment 1

[BugBot [:suhaib / :marco/ :calixte]]

The Bugbug bot thinks this bug should belong to the 'Core::SVG' component, and is moving the bug to that component. Please correct in case you think the bot is wrong.