diff options
author | Daniel Baumann <daniel.baumann@progress-linux.org> | 2024-04-19 01:47:29 +0000 |
---|---|---|
committer | Daniel Baumann <daniel.baumann@progress-linux.org> | 2024-04-19 01:47:29 +0000 |
commit | 0ebf5bdf043a27fd3dfb7f92e0cb63d88954c44d (patch) | |
tree | a31f07c9bcca9d56ce61e9a1ffd30ef350d513aa /layout/reftests/svg/use-element-shadow-tree-rule-matching.html | |
parent | Initial commit. (diff) | |
download | firefox-esr-0ebf5bdf043a27fd3dfb7f92e0cb63d88954c44d.tar.xz firefox-esr-0ebf5bdf043a27fd3dfb7f92e0cb63d88954c44d.zip |
Adding upstream version 115.8.0esr.upstream/115.8.0esr
Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>
Diffstat (limited to 'layout/reftests/svg/use-element-shadow-tree-rule-matching.html')
-rw-r--r-- | layout/reftests/svg/use-element-shadow-tree-rule-matching.html | 79 |
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> |