diff options
| author | Daniel Baumann <daniel.baumann@progress-linux.org> | 2024-04-28 14:29:10 +0000 |
|---|---|---|
| committer | Daniel Baumann <daniel.baumann@progress-linux.org> | 2024-04-28 14:29:10 +0000 |
| commit | 2aa4a82499d4becd2284cdb482213d541b8804dd (patch) | |
| tree | b80bf8bf13c3766139fbacc530efd0dd9d54394c /layout/reftests/svg/use-element-shadow-tree-rule-matching.html | |
| parent | Initial commit. (diff) | |
| download | firefox-2aa4a82499d4becd2284cdb482213d541b8804dd.tar.xz firefox-2aa4a82499d4becd2284cdb482213d541b8804dd.zip | |
Adding upstream version 86.0.1.upstream/86.0.1upstream
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> |