Bug 265894 - Part 14. Reftest for style matching in use-element shadow tree.
MozReview-Commit-ID: CtCsa7gT56B
--- a/layout/reftests/svg/reftest.list
+++ b/layout/reftests/svg/reftest.list
@@ -508,16 +508,18 @@ fuzzy-if(skiaContent,1,100) == tspan-xy-
fuzzy-if(skiaContent,1,100) == tspan-xy-anchor-end-01.svg tspan-xy-anchor-end-ref.svg
== use-01.svg pass.svg
== use-01-extref.svg pass.svg
== use-02-extref.svg use-02-extref-ref.svg
== use-extref-dataURI-01.svg pass.svg
== use-children.svg pass.svg
+== use-element-shadow-tree-rule-matching.html pass.svg
+
# test case for Fragment URLs
# https://drafts.csswg.org/css-values/#local-urls
== use-localRef-marker-01.svg use-localRef-marker-01-ref.svg
== use-localRef-clipPath-01.svg use-localRef-clipPath-01-ref.svg
== use-localRef-filter-01.svg use-localRef-filter-01-ref.svg
== use-localRef-fill-01.svg use-localRef-fill-01-ref.svg
== use-localRef-link.html pass.svg
== use-localRef-stroke-01.svg use-localRef-stroke-01-ref.svg
new file mode 100644
--- /dev/null
+++ b/layout/reftests/svg/use-element-shadow-tree-rule-matching.html
@@ -0,0 +1,79 @@
+<!DOCTYPE html>
+<html>
+<style type="text/css">
+ div {
+ width: 100px;
+ height:100px;
+ position: fixed;
+ }
+
+ /* #outer is in main DOM, circle instance in use-element shadow DOM,
+ should not match this rule for cloned circle instance. */
+ #outer circle {
+ stroke: red;
+ fill: red;
+ stroke-width: 4px;
+ }
+
+ /* div is in main DOM, rect instance in use-element shadow DOM.
+ should not match this rule for cloned rect instance. */
+ div rect {
+ stroke: red;
+ fill: red;
+ stroke-width: 4px;
+ }
+
+ /* use element is host of shadow tree, not part of it. This rule should
+ not match any elements in the use-element shadow tree. */
+ use > rect, use > circle {
+ stroke: red;
+ fill: red;
+ stroke-width: 4px;
+ }
+
+ /* A cloned symbol instance inside an use-element shadow tree should match
+ rules of symbol tag, instead of svg tag. */
+ svg {
+ fill: red;
+ }
+ symbol {
+ fill: lime;
+ }
+</style>
+
+<body style="background-color: lime;">
+
+<svg>
+ <defs>
+ <circle id="circle" cx="25" cy="25" r="25" />
+ <rect id="rect" width="100" height="100"/>
+ <symbol id="symbol">
+ <circle cx="25" cy="25" r="25" />
+ </symbol>
+ </defs>
+
+ <g id="outer">
+ <use xlink:href="#circle" fill="lime" width="50" height="50" />
+ </g>
+</svg>
+
+<div style="left: 0px; top: 10px;">
+ <svg>
+ <use xlink:href="#rect" fill="lime" width="50" height="50" />
+ </svg>
+</div>
+
+<div style="left: 110px; top: 10px;">
+ <svg>
+ <use xlink:href="#symbol" fill="lime" width="50" height="50" />
+ </svg>
+</div>
+
+<div style="left: 220px; top: 10px;">
+ <svg>
+ <use xlink:href="#symbol" width="50" height="50" />
+ </svg>
+</div>
+
+</body>
+</html>