summaryrefslogtreecommitdiffstats
path: root/layout/reftests/svg/use-element-shadow-tree-rule-matching.html
diff options
context:
space:
mode:
authorDaniel Baumann <daniel.baumann@progress-linux.org>2024-04-07 17:32:43 +0000
committerDaniel Baumann <daniel.baumann@progress-linux.org>2024-04-07 17:32:43 +0000
commit6bf0a5cb5034a7e684dcc3500e841785237ce2dd (patch)
treea68f146d7fa01f0134297619fbe7e33db084e0aa /layout/reftests/svg/use-element-shadow-tree-rule-matching.html
parentInitial commit. (diff)
downloadthunderbird-6bf0a5cb5034a7e684dcc3500e841785237ce2dd.tar.xz
thunderbird-6bf0a5cb5034a7e684dcc3500e841785237ce2dd.zip
Adding upstream version 1:115.7.0.upstream/1%115.7.0upstream
Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>
Diffstat (limited to '')
-rw-r--r--layout/reftests/svg/use-element-shadow-tree-rule-matching.html79
1 files changed, 79 insertions, 0 deletions
diff --git a/layout/reftests/svg/use-element-shadow-tree-rule-matching.html b/layout/reftests/svg/use-element-shadow-tree-rule-matching.html
new file mode 100644
index 0000000000..e73c910939
--- /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>