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

Steps to reproduce:

I have two html files test.html and test2.html and an SVG file test.svg

test.html uses the <use> element to load the symbol in test.svg. The symbol includes a <mask>.

test2.html directly uses the SVG as an inline SVG without the <use> element

Contents of the file:

test.html

  <use href="test.svg#testsvg"/>
</svg>

test.svg

<svg xmlns="http://www.w3.org/2000/svg">
  <defs>
    <symbol id="testsvg">
      <mask id="mask3" x="0" y="0" width="100" height="100" >
        <rect x="0" y="0"  width="100" height="50"
              style="stroke:none; fill: #ffffff"/>

        <rect x="0" y="50" width="100" height="50"
              style="stroke:none; fill: #666666"/>
      </mask>
      <rect x="1" y="1" width="100" height="100"
            style="stroke: none; fill: #0000ff; mask: url(#mask3)"/>
    </symbol>
  </defs>
</svg>

test2.html

<svg xmlns="http://www.w3.org/2000/svg">
      <mask id="mask3" x="0" y="0" width="100" height="100" >
        <rect x="0" y="0"  width="100" height="50"
              style="stroke:none; fill: #ffffff"/>

        <rect x="0" y="50" width="100" height="50"
              style="stroke:none; fill: #666666"/>
      </mask>
  <rect x="1" y="1" width="100" height="100"
        style="stroke: none; fill: #0000ff; mask: url(#mask3)"/>
</svg>

Actual results:

test.html does not load the <mask> when loading with <use>
test.html and test2.html show different behaviors

Expected results:

test.html and test2.html should show the same behavior
test.html should load the <mask> as well since it's a part of the symbol.

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.

The severity field is not set for this bug.
:dholbert, could you have a look please?

For more information, please visit auto_nag documentation.

Does any browser match your expected rendering?

Looking at the attachments that Robert attached (from your inline SVG in comment 0), I'm seeing consistent behavior between Firefox, Chrome, and WebKit. All of them produce a solid blue rect for the testcase, vs. a half-and-half dark-vs-light blue rect for the reference case.

Given this consistent rendering between browsers, it seems likely this behavior is correct or at least required for interop...

[edit: sorry, accidentally copypasted a bogus local-testing URL when submitting a comment. Edited to remove, for clarity.]

Using Firefox's DevTools inspector to view the cloned contents in the <use> shadow-root, it looks like we don't bother to clone the mask element at all. We also don't clone e.g. filter elements (if I edit the testcase to add one of those), but we do clone other sorts of elements like rect and symbol and g (if I add some of those elements).

So it looks like we're excluding non-rendering elements from our shadow-tree-clone. And indeed, the spec has a note indicating that it used to explicitly require behavior, i.e. the spec used to only allow us to clone "graphics"/"graphical" elements:

Previous versions of SVG restricted the contents of the shadow tree to SVG graphics elements. This specification allows any valid SVG document subtree to be cloned. Cloning non-graphical content, however, will not usually have any visible effect.

(This note is a little ways down in this section: https://www.w3.org/TR/SVG2/struct.html#UseShadowTree )

So perhaps we're supposed to clone non-rendering elements now, though it seems no engine has implemented that behavior yet.

It looks like that Note dates back quite a ways, to this commit from 2016:
https://github.com/w3c/svgwg/commit/be207d229eb7935643b65501de18d4c4469783a7#diff-43ac28ae79117f723e856bf5b21f085ec5282ca29516ae78dcfaa36f28d59b4eR1126-R1132

Based on that Note, I suspect the reporter's expected-results are correct, though per comment 6 it seems like no engine has implemented that behavior yet.

Sorry, there was a problem with the detection of inactive users. I'm reverting the change.

So Daniel Holbert was right, none of the other browsers seem to handle this correctly either. However as noted, I specifically found the issue because when looking at the dev tools, the mask elements were not being loaded at all, so were not being applied when they should be.

(This is hard to detect in Chrome because Chrome dev tools does not let you expand the shadow root to see if mask gets loaded or not, but since it has the same behavior I am assuming it doesn't either)

Thanks for clarifying, master.bvik. Sounds like this is an area where nobody's currently implementing what SVG2 technically requires.