1535822 - SVG fragments not working on mask-image CSS

Status: NEW

(Core :: SVG, defect, P3)

Description

[Alexios Tsiaparas]

Attachment: Screenshot with all different appoaches

User Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:65.0) Gecko/20100101 Firefox/65.0

Steps to reproduce:

I create an HTML element with width and height and then applied
background: url("../images/icons/combined.svg#arrow") no-repeat center center;
The above works correctly

I then used background: #90A4AE;mask-image: url("../images/icons/arrow.svg"); in order to change the icon's color
This worked as well

When I tried to combine multiple icons in one SVG, I used background: #90A4AE;mask-image: url("../images/icons/combined.svg#arrow");
This does not produce the icon with a changed color, rather it stays white (the background). I should not that when I move my mouse over the image in the inspector window (CSS panel), it displays the image correctly. I have also tested the URL directly in the browser, it works fine.

Actual results:

The background works correctly, SVG with single icon works correctly, but when I apply the SVG with multiple icons, no icons appear. If I remove the fragment, the first icon is showing normally

Expected results:

I should have seen the arrow icon in my third example

Comment 1

[Robert Longson [:longsonr]]

Please can you attach some tescases to the bug rather than just providing descriptions of testcases.

Comment 2

[Alexios Tsiaparas]

Attachment: This is the combined SVG files with two icons

Comment 3

[Alexios Tsiaparas]

Attachment: Single icon in SVG

Comment 4

[Alexios Tsiaparas]

Attachment: Test case

Comment 5

[Alexios Tsiaparas]

Comment on attachment 9051542 [details]
Test case

I cannot reproduce the error online because of CORS, output is

Content Security Policy: Ignoring “'unsafe-inline'” within script-src or style-src: nonce-source or hash-source specified
Content Security Policy: This site (https://bug1535822.bmoattachments.org) has a Report-Only policy without a report URI. CSP will not block and cannot report violations of this policy.
Content Security Policy: The page’s settings observed the loading of a resource at https://bugzilla.mozilla.org/attachment.cgi?id=9051541 (“img-src”). A CSP report is being sent.
Content Security Policy: The page’s settings observed the loading of a resource at https://bugzilla.mozilla.org/attachment.cgi?id=9051540#arrow (“img-src”). A CSP report is being sent.
Content Security Policy: The page’s settings observed the loading of a resource at https://bugzilla.mozilla.org/attachment.cgi?id=9051541 (“img-src”). A CSP report is being sent.
Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://bugzilla.mozilla.org/attachment.cgi?id=9051540#arrow. (Reason: CORS header ‘Access-Control-Allow-Origin’ missing).[Learn More]
Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://bugzilla.mozilla.org/attachment.cgi?id=9051541. (Reason: CORS header ‘Access-Control-Allow-Origin’ missing).[Learn More]
Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://bugzilla.mozilla.org/attachment.cgi?id=9051540#arrow. (Reason: CORS request did not succeed).[Learn More]
Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://bugzilla.mozilla.org/attachment.cgi?id=9051541. (Reason: CORS request did not succeed).[Learn More]
Content Security Policy: The page’s settings observed the loading of a resource at https://bugzilla.mozilla.org/attachment.cgi?id=9051541 (“img-src”). A CSP report is being sent.

Comment 6

[Alexios Tsiaparas]

(In reply to Robert Longson [:longsonr] from comment #1)

Please can you attach some tescases to the bug rather than just providing descriptions of testcases.

I tried to create a webpage that shows the error. Unfortunately, I get CORS errors online. If you save the files on your computer and change paths of mask-image to the local SVGs, you can observe that the single icon as mask is displayed correctly but the multi icon is not.

Comment 7

[Alice0775 White]

Attachment: Bug 1535822 - SVG fragments not working on mask-image CSS.zip

Comment 8

[Alice0775 White]

Attachment: comparison Nightly67 vs Edge

Comment 9

[Emilio Cobos Álvarez (:emilio)]

This looks a lot like bug 1486252, which landed with tests. Has this regressed?

Hmm, somehow the test-case works for me if I have webrender enabled, but not without... So it's likely an SVG / graphics issue.

Comment 10

[Cameron McCormack (:heycam)]

I see the same. Alice's test doesn't work for me in non-webrender before or after bug 1486252 landing either.