[Webkit-unassigned] [Bug 267211] New: SVG shape with CSS gradient mask applied doesn't work

Sun Jan 7 12:53:06 PST 2024

https://bugs.webkit.org/show_bug.cgi?id=267211

            Bug ID: 267211
           Summary: SVG shape with CSS gradient mask applied doesn't work
           Product: WebKit
           Version: Safari 17
          Hardware: Mac (Apple Silicon)
                OS: macOS 14
            Status: NEW
          Severity: Normal
          Priority: P2
         Component: CSS
          Assignee: webkit-unassigned at lists.webkit.org
          Reporter: veyndan at gmail.com

Created attachment 469334

  --> https://bugs.webkit.org/attachment.cgi?id=469334&action=review

Comparison of SVG gradient masking in CSS across browsers

When opening the following in Safari, we can see that no gradient has been applied to the `rect`.

```
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Test</title>
  </head>
  <body>
    <svg viewBox="0 0 100 100">
      <rect width="100" height="100" fill="forestgreen" style="mask-image: linear-gradient(rgb(0 0 0 / 1) 0%, rgb(0 0 0 / .1) 100%);"/>
    </svg>
  </body>
</html>
```

I expect to see a rectangle whose opacity fades from an opacity of 1 at the top to an opacity of 0.1 at the bottom.

I tested this on Chrome 120.0.6099.199, Firefox 121.0, and Safari 17.2.1. It only worked in Firefox, failing in both Chrome and Safari.

-- 
You are receiving this mail because:
You are the assignee for the bug.
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.webkit.org/pipermail/webkit-unassigned/attachments/20240107/bd3b56b1/attachment.htm>