| <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-last-child(... of <selector list>) 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-last-child(n of use rect) { stroke: red } |
| :nth-last-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-last-child(n of use rect)" or |
| ":nth-last-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> |
