1571244 - Background-clip:text doesn't work when using multiple background layer and when the text layer is the top one

Status: NEW

(Core :: Web Painting, defect, P3)

Description

[Temani Afif]

User Agent: Mozilla/5.0 (Windows NT 6.3; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/75.0.3770.142 Safari/537.36

Steps to reproduce:

Here is a simple code to reproduce. I kept the wekbit prefix so we can compare with Chrome
HtML: <div class="box">some text</div>
CSS:
.box {
font-size:40px;
color:transparent;
background-image:
linear-gradient(red,red),
linear-gradient(yellow,yellow);
-webkit-background-clip:
text,
padding-box;
background-clip:
text,
padding-box;
}

A jsfiddle link: https://jsfiddle.net/wx3v5ct9/

Actual results:

The actual result is a red only background.

Expected results:

We should see a yellow background and the text in red. It works fine on Chrome.
It also works fine if the text layer is at the bottom, but we have to reduce the top layer to see it.

Example: https://jsfiddle.net/qwhz34en/

---

Here is two SO questions where I am using this technique that fail in Firefox:
https://stackoverflow.com/q/57251932/8620333
https://stackoverflow.com/q/56669587/8620333

Comment 1

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

The priority flag is not set for this bug.
:emilio, could you have a look please?

For more information, please visit auto_nag documentation.

Comment 2

[alexander]

Looks like a duplicate of https://bugzilla.mozilla.org/show_bug.cgi?id=1481498