diff options
| author | Daniel Baumann <daniel.baumann@progress-linux.org> | 2024-04-19 00:47:55 +0000 |
|---|---|---|
| committer | Daniel Baumann <daniel.baumann@progress-linux.org> | 2024-04-19 00:47:55 +0000 |
| commit | 26a029d407be480d791972afb5975cf62c9360a6 (patch) | |
| tree | f435a8308119effd964b339f76abb83a57c29483 /layout/reftests/svg/use-element-shadow-tree-rule-matching.html | |
| parent | Initial commit. (diff) | |
| download | firefox-upstream/124.0.1.tar.xz firefox-upstream/124.0.1.zip | |
Adding upstream version 124.0.1.upstream/124.0.1
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.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> |