summaryrefslogtreecommitdiffstats
path: root/layout/reftests/svg/outline-ref.html
diff options
context:
space:
mode:
authorDaniel Baumann <daniel.baumann@progress-linux.org>2024-04-19 00:47:55 +0000
committerDaniel Baumann <daniel.baumann@progress-linux.org>2024-04-19 00:47:55 +0000
commit26a029d407be480d791972afb5975cf62c9360a6 (patch)
treef435a8308119effd964b339f76abb83a57c29483 /layout/reftests/svg/outline-ref.html
parentInitial commit. (diff)
downloadfirefox-26a029d407be480d791972afb5975cf62c9360a6.tar.xz
firefox-26a029d407be480d791972afb5975cf62c9360a6.zip
Adding upstream version 124.0.1.upstream/124.0.1
Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>
Diffstat (limited to 'layout/reftests/svg/outline-ref.html')
-rw-r--r--layout/reftests/svg/outline-ref.html93
1 files changed, 93 insertions, 0 deletions
diff --git a/layout/reftests/svg/outline-ref.html b/layout/reftests/svg/outline-ref.html
new file mode 100644
index 0000000000..871446d41b
--- /dev/null
+++ b/layout/reftests/svg/outline-ref.html
@@ -0,0 +1,93 @@
+<!DOCTYPE HTML>
+<html lang="en">
+<body>
+<svg xmlns="http://www.w3.org/2000/svg" overflow="visible">
+ <g>
+ <rect id="rect" width="100" height="100" style="fill: yellow"/>
+ <text id="text" x="0" y="140" font-family="Verdana" font-size="20">
+ Hello world
+ </text>
+ <foreignObject id="foreignObject" x="0" y="160" width="200" height="60">
+ <div xmlns="http://www.w3.org/1999/xhtml">
+ Here is a paragraph that requires word wrap
+ </div>
+ </foreignObject>
+ <circle id="circle" cx="40" cy="275" r="40" style="fill: green"/>
+ <ellipse id="ellipse" cx="70" cy="380" rx="70" ry="50" style="fill: yellow"/>
+ <image id="image" x="0" y="450" height="100" width="100"/>
+ <line id="line" x1="0" y1="580" x2="100" y2="580" style="stroke: red; stroke-width: 2"/>
+ <path id="path" d="M50 600 L10 650 L90 650 Z"/>
+ <polygon id="polygon" points="300,50 350,0 400,50" style="fill: lime"/>
+ <polyline id="polyline" points="300,80 350,70 400,80" style="fill: none;stroke: black; stroke-width: 3"/>
+ <g transform="translate(300, 70)">
+ <circle id="gCircle" cx="50" cy="50" r="20" style="fill: blue"/>
+ </g>
+ <g transform="translate(300, 150)">
+ <circle id="ggCircle" cx="50" cy="50" r="20" style="fill: green"/>
+ <g>
+ <rect id="ggRect" x="15" y ="15" width="30" height="10" style="fill: blue"/>
+ </g>
+ </g>
+ <svg x="300" y="250">
+ <rect id="innerRect" x="30" y="10" height="50" width="50" style="fill: red"/>
+ </svg>
+ <a xlink:href="#" id="link">
+ <text x="300" y="350" font-family="Verdana" font-size="20">
+ link
+ </text>
+ </a>
+ </g>
+</svg>
+<script>
+
+function createOutline(boundingRect) {
+ // Outline starts from a top-left shift pixel of the bounding rect
+ var left = boundingRect.left - 1;
+ var top = boundingRect.top - 1;
+ var right = boundingRect.right;
+ var bottom = boundingRect.bottom;
+ var width = boundingRect.width;
+ var height = boundingRect.height;
+
+ var lines = document.createElement("div");
+ var styles = 'border: 1px solid black;'
+ + 'width: ' + width + 'px;'
+ + 'height: ' + height + 'px;'
+ + 'position: absolute;'
+ + 'top: ' + top + 'px;'
+ + 'left: ' + left + 'px;';
+
+ lines.setAttribute('style', styles);
+ document.body.appendChild(lines);
+}
+
+window.onload = function drawOutline() {
+ var elements = ['rect', 'foreignObject', 'circle',
+ 'ellipse', 'image', 'line', 'path',
+ 'polygon', 'polyline', 'text','gCircle',
+ 'innerRect', 'link'];
+ elements.forEach(id => {
+ var element = document.getElementById(id);
+ createOutline(element.getBoundingClientRect());
+ });
+
+ var ggRect = document.getElementById('ggRect');
+ var ggRectbbox = ggRect.getBoundingClientRect();
+ createOutline(ggRectbbox);
+
+ var ggCircle = document.getElementById('ggCircle');
+ var ggCirclebbox = ggCircle.getBoundingClientRect();
+
+ var ggbbox = {
+ left: ggRectbbox.left,
+ top: ggRectbbox.top,
+ right: ggCirclebbox.right,
+ bottom: ggCirclebbox.bottom
+ };
+ ggbbox.width = ggbbox.right - ggbbox.left;
+ ggbbox.height = ggbbox.bottom - ggbbox.top;
+ createOutline(ggbbox);
+}
+</script>
+</body>
+</html> \ No newline at end of file