Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

LibWeb: SVG url() references don't work when SVG is inside shadow DOM #3458

Open
1 task
aplefull opened this issue Feb 4, 2025 · 0 comments
Open
1 task

LibWeb: SVG url() references don't work when SVG is inside shadow DOM #3458

aplefull opened this issue Feb 4, 2025 · 0 comments
Labels
bug Something isn't working has repro We have a way to reproduce this bug. painting Related to painting subsystem reduction of web content Issue has a simplified reduction based on real-world web content. svg

Comments

@aplefull
Copy link
Contributor

aplefull commented Feb 4, 2025

Summary

SVG elements using url() references (like gradients or masks) fail to work properly when SVG is moved into a Shadow DOM.
Reduced from icones.js.org. Specifically https://icones.js.org/collection/logos, but it affects other SVGs as well.

Operating system

Linux

Steps to reproduce

N/A

Expected behavior

SVG should look the same both inside and outside shadow DOM.

Actual behavior

When SVG is moved into shadow DOM, the url(#fill) reference stops working and rectangle doesn't receive the gradient fill.
Same issue occurs with other URL-referenced elements like masks.

URL for a reduced test case

N/A

HTML/SVG/etc. source for a reduced test case

<body>
    <svg>
        <defs>
            <lineargradient id="fill">
                <stop stop-color="crimson"/>
            </lineargradient>
        </defs>
        <rect width="100" height="100" fill="url(#fill)"/>
    </svg>
</body>
<script>
    const svg = document.querySelector("svg");
    const shadowRoot = document.body.attachShadow({
        mode: "open",
    });

    shadowRoot.innerHTML = svg.outerHTML;
    svg.remove();
</script>

Log output and (if possible) backtrace

N/A

Screenshots or screen recordings

Chrome Ladybird

Image

Image

Build flags or config settings

No response

Contribute a patch?

  • I’ll contribute a patch for this myself.
@AtkinsSJ AtkinsSJ added bug Something isn't working reduction of web content Issue has a simplified reduction based on real-world web content. has repro We have a way to reproduce this bug. painting Related to painting subsystem svg labels Feb 5, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
bug Something isn't working has repro We have a way to reproduce this bug. painting Related to painting subsystem reduction of web content Issue has a simplified reduction based on real-world web content. svg
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@AtkinsSJ @aplefull