diff options
Diffstat (limited to 'testing/web-platform/tests/svg/struct/reftests/use-inheritance-nth-last-child-of.svg')
| -rw-r--r-- | testing/web-platform/tests/svg/struct/reftests/use-inheritance-nth-last-child-of.svg | 37 |
1 files changed, 37 insertions, 0 deletions
diff --git a/testing/web-platform/tests/svg/struct/reftests/use-inheritance-nth-last-child-of.svg b/testing/web-platform/tests/svg/struct/reftests/use-inheritance-nth-last-child-of.svg new file mode 100644 index 0000000000..229be9cbf9 --- /dev/null +++ b/testing/web-platform/tests/svg/struct/reftests/use-inheritance-nth-last-child-of.svg @@ -0,0 +1,37 @@ +<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> |