use-inheritance-nth-child-of.svg

Enable keyboard shortcuts

This WPT test may be referenced by the following Test IDs:
- /svg/struct/reftests/use-inheritance-nth-child-of.svg - WPT Dashboard Interop Dashboard

Checkerboard

<svg xmlns="http://www.w3.org/2000/svg" xmlns:h="http://www.w3.org/1999/xhtml" xmlns:xlink="http://www.w3.org/1999/xlink">

  <title>Use property inheritance with :nth-child(... of &lt;selector list&gt;) in SVG2</title>

  <metadata>

    <h:link rel="match" href="reference/green-100x100.svg"/>

    <h:link rel="help" href="https://svgwg.org/svg2-draft/struct.html#UseStyleInheritance"/>

    <h:link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1821258"/>

    <h:link rel="author" title="Zach Hoffman" href="mailto:zach@zrhoffman.net"/>

  </metadata>

  <style>

  :nth-child(n of use rect) { stroke: red }

  :nth-child(n of .container rect) { fill: red; stroke: red }

  rect { stroke-width: 40px; stroke: green }

  rect:root { opacity: 0 }

  </style>

  <defs>

    <g class="container">

      <rect id="r" x="20" y="20" width="60" height="60" style="fill-opacity:1"/>

    </g>

  </defs>

<g>

    <use href="#r" xlink:href="#r" style="fill: green; fill-opacity:0"/>

  </g>

  <!--

  This presumes the SVG2 use inheritance rules, in SVG1 it will display as red.

  1. The "rect" cloned by the "use" element is in a shadow DOM, so it DOES NOT

     inherit the stroke from the ":nth-child(n of use rect)" or

     ":nth-child(n of .container rect)" style rules.

  2. The cloned "rect" DOES get the rules set by the "rect" style rule, as that

     still matches elements in the shadow DOM.

  3. The "rect" DOES inherit "fill: green" from the <use>

  4. The "rect"'s own "fill-opacity: 1" overrides the "fill-opacity: 0" inherited

     from the "use" element.

  5. Even though "rect" is considered to have no parent, it is not a root element

     so does not match the rect:root style rule

-->

</svg>