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 /testing/web-platform/tests/svg/coordinate-systems | |
| 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 'testing/web-platform/tests/svg/coordinate-systems')
17 files changed, 426 insertions, 0 deletions
diff --git a/testing/web-platform/tests/svg/coordinate-systems/abspos.html b/testing/web-platform/tests/svg/coordinate-systems/abspos.html new file mode 100644 index 0000000000..fb37bbe7f3 --- /dev/null +++ b/testing/web-platform/tests/svg/coordinate-systems/abspos.html @@ -0,0 +1,29 @@ +<!DOCTYPE html> +<title>Intrinsic sizing for <svg></title> +<link rel="help" href="https://www.w3.org/TR/SVG2/coords.html"> +<link rel="help" href="https://www.w3.org/TR/css-sizing-3/#intrinsic-sizes"> +<link rel="match" href="support/abspos-ref.html"> +<!-- + SVG embedded inside html has no intrinsic size, but has intrinsic + aspect ratio. Inline size is computed as available size of containing block, + and block size is derived from aspect ratio. +--> +<style> +#container { + width: 200px; + height: 300px; + position: relative; + border: 10px solid black; +} +#target { + fill: green; + position: absolute; + top: 0; + left: 0; + bottom: 0; + right: 0; +} +</style> +<div id="container"> + <svg id="target" viewBox="0 0 50 50"><circle cx="50%" cy="50%" r="50%"></circle></svg> +</div> diff --git a/testing/web-platform/tests/svg/coordinate-systems/outer-svg-intrinsic-size-001.html b/testing/web-platform/tests/svg/coordinate-systems/outer-svg-intrinsic-size-001.html new file mode 100644 index 0000000000..0d9e2393ad --- /dev/null +++ b/testing/web-platform/tests/svg/coordinate-systems/outer-svg-intrinsic-size-001.html @@ -0,0 +1,95 @@ +<!doctype HTML> +<head> + <link rel="help" href="https://www.w3.org/TR/SVG/coords.html#SizingSVGInCSS"> + <link rel="help" href="https://drafts.csswg.org/css-sizing-3/#intrinsic-sizes"> + <script src="/resources/testharness.js"></script> + <script src="/resources/testharnessreport.js"></script> + <style> + #wrapper { + width: 500px; + } + </style> +</head> +<body> + <div id="wrapper"> + <svg id="mySVG"></svg> + </div> + <script> + let svgElem = document.getElementById("mySVG"); + function expect_svg_width_and_height(width, height) { + let rect = svgElem.getBoundingClientRect(); + assert_equals(rect.width, width, "checking width."); + assert_equals(rect.height, height, "checking height."); + } + test(function() { + expect_svg_width_and_height(300, 150); + }, "no sizing attributes set"); + + // Just setting width and/or height: + test(function() { + svgElem.setAttribute("width", "100"); + expect_svg_width_and_height(100, 150); + }, "specified width"); + test(function() { + svgElem.setAttribute("width", "400"); + expect_svg_width_and_height(400, 150); + }, "modified specified width"); + + test(function() { + // (set height, leaving width still set) + svgElem.setAttribute("height", "100"); + expect_svg_width_and_height(400, 100); + }, "specified width and height"); + test(function() { + svgElem.setAttribute("height", "200"); + expect_svg_width_and_height(400, 200); + }, "specified width and modified specified height"); + test(function() { + svgElem.removeAttribute("width"); // leaving only 'height': + expect_svg_width_and_height(300, 200); + }, "specified height"); + test(function() { + svgElem.setAttribute("height", "250"); + expect_svg_width_and_height(300, 250); + }, "modified specified height"); + test(function() { + // clean up (go back to having no sizing attrs set) + svgElem.removeAttribute("height"); + expect_svg_width_and_height(300, 150); + }, "no specified sizing attrs (after setting & removing them)"); + + + // Just setting viewBox: + test(function() { + svgElem.setAttribute("viewBox", "0 0 10 8"); + expect_svg_width_and_height(500, 400); + }, "set a 10x8 viewBox"); + test(function() { + // Adjusting already-set viewBox: + svgElem.setAttribute("viewBox", "0 0 50 10"); + expect_svg_width_and_height(500, 100); + }, "modified viewBox to 50x20"); + test(function() { + svgElem.setAttribute("width", "100"); + expect_svg_width_and_height(100, 20); + }, "adding specified width, in presence of specified viewBox"); + test(function() { + svgElem.setAttribute("viewBox", "0 0 40 30"); + expect_svg_width_and_height(100, 75); + }, "modifiying specified viewBox, in presence of specified width"); + + test(function() { + svgElem.removeAttribute("width"); + expect_svg_width_and_height(500, 375); + }, "removing specified width, in presence of specified viewBox"); + + test(function() { + svgElem.setAttribute("height", "60"); + expect_svg_width_and_height(80, 60); + }, "adding specified height, in presence of specified viewBox"); + test(function() { + svgElem.setAttribute("viewBox", "0 0 100 120"); + expect_svg_width_and_height(50, 60); + }, "modifiying specified viewBox, in presence of specified height"); + </script> +</body> diff --git a/testing/web-platform/tests/svg/coordinate-systems/outer-svg-intrinsic-size-002.html b/testing/web-platform/tests/svg/coordinate-systems/outer-svg-intrinsic-size-002.html new file mode 100644 index 0000000000..8a65d64918 --- /dev/null +++ b/testing/web-platform/tests/svg/coordinate-systems/outer-svg-intrinsic-size-002.html @@ -0,0 +1,103 @@ +<!doctype HTML> +<head> + <link rel="help" href="https://www.w3.org/TR/SVG/coords.html#SizingSVGInCSS"> + <link rel="help" href="https://drafts.csswg.org/css-sizing-3/#intrinsic-sizes"> + <script src="/resources/testharness.js"></script> + <script src="/resources/testharnessreport.js"></script> + <style> + #wrapper { + width: 500px; + } + </style> +</head> +<body> + <div id="wrapper"> + <object id="myObj" data="support/simple.svg" + onload="go()"></object> + </div> + <script> + let objElem = document.getElementById("myObj"); + let svgElem; // initialized after obj doc loads + + function expect_svg_width_and_height(width, height) { + let rect = objElem.getBoundingClientRect(); + assert_equals(rect.width, width, "checking width."); + assert_equals(rect.height, height, "checking height."); + } + + function go() { + svgElem = objElem.contentDocument.documentElement; + + test(function() { + expect_svg_width_and_height(300, 150); + }, "no sizing attributes set"); + + // Just setting width and/or height: + test(function() { + svgElem.setAttribute("width", "100"); + expect_svg_width_and_height(100, 150); + }, "specified width"); + test(function() { + svgElem.setAttribute("width", "400"); + expect_svg_width_and_height(400, 150); + }, "modified specified width"); + + test(function() { + // (set height, leaving width still set) + svgElem.setAttribute("height", "100"); + expect_svg_width_and_height(400, 100); + }, "specified width and height"); + test(function() { + svgElem.setAttribute("height", "200"); + expect_svg_width_and_height(400, 200); + }, "specified width and modified specified height"); + test(function() { + svgElem.removeAttribute("width"); // leaving only 'height': + expect_svg_width_and_height(300, 200); + }, "specified height"); + test(function() { + svgElem.setAttribute("height", "250"); + expect_svg_width_and_height(300, 250); + }, "modified specified height"); + test(function() { + // clean up (go back to having no sizing attrs set) + svgElem.removeAttribute("height"); + expect_svg_width_and_height(300, 150); + }, "no specified sizing attrs (after setting & removing them)"); + + + // Just setting viewBox: + test(function() { + svgElem.setAttribute("viewBox", "0 0 10 8"); + expect_svg_width_and_height(500, 400); + }, "set a 10x8 viewBox"); + test(function() { + // Adjusting already-set viewBox: + svgElem.setAttribute("viewBox", "0 0 50 10"); + expect_svg_width_and_height(500, 100); + }, "modified viewBox to 50x20"); + test(function() { + svgElem.setAttribute("width", "100"); + expect_svg_width_and_height(100, 20); + }, "adding specified width, in presence of specified viewBox"); + test(function() { + svgElem.setAttribute("viewBox", "0 0 40 30"); + expect_svg_width_and_height(100, 75); + }, "modifiying specified viewBox, in presence of specified width"); + + test(function() { + svgElem.removeAttribute("width"); + expect_svg_width_and_height(500, 375); + }, "removing specified width, in presence of specified viewBox"); + + test(function() { + svgElem.setAttribute("height", "60"); + expect_svg_width_and_height(80, 60); + }, "adding specified height, in presence of specified viewBox"); + test(function() { + svgElem.setAttribute("viewBox", "0 0 100 120"); + expect_svg_width_and_height(50, 60); + }, "modifiying specified viewBox, in presence of specified height"); + }; + </script> +</body> diff --git a/testing/web-platform/tests/svg/coordinate-systems/outer-svg-intrinsic-size-003.html b/testing/web-platform/tests/svg/coordinate-systems/outer-svg-intrinsic-size-003.html new file mode 100644 index 0000000000..25549ef14e --- /dev/null +++ b/testing/web-platform/tests/svg/coordinate-systems/outer-svg-intrinsic-size-003.html @@ -0,0 +1,12 @@ +<!DOCTYPE html> +<title>Outer SVG intrinsic size with degenerate ratio</title> +<link rel="author" title="Mozilla" href="https://www.mozilla.org/"> +<link rel="help" href="https://svgwg.org/svg2-draft/coords.html#SizingSVGInCSS"> +<link rel="help" href="https://drafts.csswg.org/css-values-4/#degenerate-ratio"> +<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/6286"> +<link rel="match" href="../../css/reference/ref-filled-green-100px-square.xht"> + +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + +<img style="width: 100px; background: green;" + src="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='0' height='50px' viewBox='0 0 1 1'></svg>"> diff --git a/testing/web-platform/tests/svg/coordinate-systems/outer-svg-intrinsic-size-004.html b/testing/web-platform/tests/svg/coordinate-systems/outer-svg-intrinsic-size-004.html new file mode 100644 index 0000000000..5cccbf750f --- /dev/null +++ b/testing/web-platform/tests/svg/coordinate-systems/outer-svg-intrinsic-size-004.html @@ -0,0 +1,12 @@ +<!DOCTYPE html> +<title>Outer SVG intrinsic size with an negative size attribute</title> +<link rel="author" title="Mozilla" href="https://www.mozilla.org/"> +<link rel="help" href="https://svgwg.org/svg2-draft/coords.html#SizingSVGInCSS"> +<link rel="help" href="https://drafts.csswg.org/css-values-4/#degenerate-ratio"> +<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/6286"> +<link rel="match" href="../../css/reference/ref-filled-green-100px-square.xht"> + +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + +<img style="width: 100px; background: green;" + src="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='-1px' height='50px' viewBox='0 0 1 1'></svg>"> diff --git a/testing/web-platform/tests/svg/coordinate-systems/outer-svg-intrinsic-size-005.html b/testing/web-platform/tests/svg/coordinate-systems/outer-svg-intrinsic-size-005.html new file mode 100644 index 0000000000..8e80e1c63b --- /dev/null +++ b/testing/web-platform/tests/svg/coordinate-systems/outer-svg-intrinsic-size-005.html @@ -0,0 +1,12 @@ +<!DOCTYPE html> +<title>Outer SVG intrinsic size with negative size attributes</title> +<link rel="author" title="Mozilla" href="https://www.mozilla.org/"> +<link rel="help" href="https://svgwg.org/svg2-draft/coords.html#SizingSVGInCSS"> +<link rel="help" href="https://drafts.csswg.org/css-values-4/#degenerate-ratio"> +<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/6286"> +<link rel="match" href="../../css/reference/ref-filled-green-100px-square.xht"> + +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + +<img style="width: 100px; background: green;" + src="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='-1px' height='-50px' viewBox='0 0 1 1'></svg>"> diff --git a/testing/web-platform/tests/svg/coordinate-systems/support/abspos-ref.html b/testing/web-platform/tests/svg/coordinate-systems/support/abspos-ref.html new file mode 100644 index 0000000000..6966d8cbc8 --- /dev/null +++ b/testing/web-platform/tests/svg/coordinate-systems/support/abspos-ref.html @@ -0,0 +1,19 @@ +<!DOCTYPE html> +<title>Intrinsic sizing for <svg></title> +<link rel="help" href="https://www.w3.org/TR/SVG2/coords.html"> +<style> +#container { + width: 200px; + height: 300px; + position: relative; + border: 10px solid black; +} +#target { + fill: green; + width: 200px; + height: 200px; +} +</style> +<div id="container"> + <svg id="target" viewBox="0 0 50 50"><circle cx="50%" cy="50%" r="50%"></circle></svg> +</div> diff --git a/testing/web-platform/tests/svg/coordinate-systems/support/simple.svg b/testing/web-platform/tests/svg/coordinate-systems/support/simple.svg new file mode 100644 index 0000000000..e0af766e8f --- /dev/null +++ b/testing/web-platform/tests/svg/coordinate-systems/support/simple.svg @@ -0,0 +1,2 @@ +<svg xmlns="http://www.w3.org/2000/svg"> +</svg> diff --git a/testing/web-platform/tests/svg/coordinate-systems/support/viewBox-change-repaint-001-ref.html b/testing/web-platform/tests/svg/coordinate-systems/support/viewBox-change-repaint-001-ref.html new file mode 100644 index 0000000000..e13e368d7b --- /dev/null +++ b/testing/web-platform/tests/svg/coordinate-systems/support/viewBox-change-repaint-001-ref.html @@ -0,0 +1,11 @@ +<!doctype HTML> +<head> + <meta charset="utf-8"> + <title>Reference case for dynamic viewBox change</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> +</head> +<body> + <svg id="mySVG" style="height: 200px; width: 200px;"> + <rect width="200" height="200" fill="lime"></rect> + </svg> +</body> diff --git a/testing/web-platform/tests/svg/coordinate-systems/support/viewBox-scaling-text-001-ref.html b/testing/web-platform/tests/svg/coordinate-systems/support/viewBox-scaling-text-001-ref.html new file mode 100644 index 0000000000..effaba5fc4 --- /dev/null +++ b/testing/web-platform/tests/svg/coordinate-systems/support/viewBox-scaling-text-001-ref.html @@ -0,0 +1,22 @@ +<!DOCTYPE html> +<head> + <meta charset="utf-8"> + <title>Reference case for text scaled via SVG viewBox</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <style> + svg { + width: 100px; + height: 100px; + background: lightgray; + overflow: visible; + } + text { + font: 100px/1 monospace; + } + </style> +</head> +<body> + <svg> + <text x="0" y="100">X̂̂̂̂̂̂</text> + </svg> +</body> diff --git a/testing/web-platform/tests/svg/coordinate-systems/support/views.svg b/testing/web-platform/tests/svg/coordinate-systems/support/views.svg new file mode 100644 index 0000000000..93f801a4f8 --- /dev/null +++ b/testing/web-platform/tests/svg/coordinate-systems/support/views.svg @@ -0,0 +1,5 @@ +<svg xmlns="http://www.w3.org/2000/svg" width="100" viewBox="0 0 100 100"> + <view id="transform" viewBox="-100 -100 200 200"/> + <view id="invalid" viewBox="0 0 -100 200"/> + <rect width="100" height="100" fill="green"/> +</svg> diff --git a/testing/web-platform/tests/svg/coordinate-systems/svgtransformlist-replaceitem.html b/testing/web-platform/tests/svg/coordinate-systems/svgtransformlist-replaceitem.html new file mode 100644 index 0000000000..3322dc91ab --- /dev/null +++ b/testing/web-platform/tests/svg/coordinate-systems/svgtransformlist-replaceitem.html @@ -0,0 +1,30 @@ +<!DOCTYPE HTML> +<link rel="help" href="https://svgwg.org/svg2-draft/coords.html#InterfaceSVGTransformList"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<body> + +<svg width="800" height="600" xmlns="http://www.w3.org/2000/svg"> +<text id="text" x="200" y="200" + transform="scale(1) translate(0 0)">123</text> +<text id="ref" x="200" y="200" + transform="scale(10 1) translate(0 0)">123</text> +</svg> + +<script> +test(() => { + const referenceBox = document.querySelector('#ref').getBBox(); + const root = document.querySelector('svg'); + const text = document.querySelector('#text'); + + // Make the transform of #text same as #ref. + const scale = root.createSVGTransform(); + scale.setScale(10, 1); + text.transform.baseVal.replaceItem(scale, 0); + + const box = text.getBBox(); + assert_equals(box.y, referenceBox.y); + assert_equals(box.height, referenceBox.height); +}, 'Dynamic update of transform; replaceItem()'); +</script> +</body> diff --git a/testing/web-platform/tests/svg/coordinate-systems/view-invalid-viewBox.html b/testing/web-platform/tests/svg/coordinate-systems/view-invalid-viewBox.html new file mode 100644 index 0000000000..75b89f12a7 --- /dev/null +++ b/testing/web-platform/tests/svg/coordinate-systems/view-invalid-viewBox.html @@ -0,0 +1,6 @@ +<!doctype HTML> +<title>view element with invalid viewBox should be ignored</title> +<link rel="help" href="https://svgwg.org/svg2-draft/linking.html#ViewElement"> +<link rel="match" href="../struct/reftests/reference/green-100x100.html"> +<img src="support/views.svg#invalid"> + diff --git a/testing/web-platform/tests/svg/coordinate-systems/view-transform-viewBox.html b/testing/web-platform/tests/svg/coordinate-systems/view-transform-viewBox.html new file mode 100644 index 0000000000..7b0bede3d1 --- /dev/null +++ b/testing/web-platform/tests/svg/coordinate-systems/view-transform-viewBox.html @@ -0,0 +1,6 @@ +<!doctype HTML> +<title>view element with viewBox should be respected</title> +<link rel="help" href="https://svgwg.org/svg2-draft/linking.html#ViewElement"> +<link rel="match" href="../struct/reftests/reference/green-100x100.html"> +<img src="support/views.svg#transform" style="transform-origin: 100% 100%; transform: scale(2)"> + diff --git a/testing/web-platform/tests/svg/coordinate-systems/viewBox-baseVal-change-invalid.html b/testing/web-platform/tests/svg/coordinate-systems/viewBox-baseVal-change-invalid.html new file mode 100644 index 0000000000..364b35b4e0 --- /dev/null +++ b/testing/web-platform/tests/svg/coordinate-systems/viewBox-baseVal-change-invalid.html @@ -0,0 +1,14 @@ +<!doctype HTML> +<title>viewBox.baseVal dynamically changes to invalid value</title> +<link rel="help" href="https://www.w3.org/TR/SVG/coords.html#ViewBoxAttribute"> +<link rel="match" href="../struct/reftests/reference/green-100x100.html"> +<svg id="svg" style="height: 200px; width: 200px;" viewBox="0 0 100 100"> + <rect width="100" height="100" fill="green"></rect> +</svg> +<script> +onload = () => { + // After this, viewBox should be ignored, and the green rect should be 100x100. + svg.viewBox.baseVal.width = -100; +}; +</script> + diff --git a/testing/web-platform/tests/svg/coordinate-systems/viewBox-change-repaint-001.html b/testing/web-platform/tests/svg/coordinate-systems/viewBox-change-repaint-001.html new file mode 100644 index 0000000000..2a90349754 --- /dev/null +++ b/testing/web-platform/tests/svg/coordinate-systems/viewBox-change-repaint-001.html @@ -0,0 +1,23 @@ +<!doctype HTML> +<head> + <meta charset="utf-8"> + <title>Testcase for dynamic viewBox change</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="help" href="https://www.w3.org/TR/SVG/coords.html#ViewBoxAttribute"> + <link rel="match" href="support/viewBox-change-repaint-001-ref.html"> + <script> + function go() { + var mySVG = document.getElementById("mySVG"); + mySVG.setAttribute("viewBox", "0 0 10 10"); + } + </script> +</head> +<body onload="go()"> + <!-- After we dynamically add viewBox="0 0 10 10", the lime area should + stretch to fill the 200x200 SVG viewport, and no red should be visible. + --> + <svg id="mySVG" style="height: 200px; width: 200px;"> + <rect width="200" height="200" fill="red"></rect> + <rect width="10" height="10" fill="lime"></rect> + </svg> +</body> diff --git a/testing/web-platform/tests/svg/coordinate-systems/viewBox-scaling-text-001.html b/testing/web-platform/tests/svg/coordinate-systems/viewBox-scaling-text-001.html new file mode 100644 index 0000000000..3089043078 --- /dev/null +++ b/testing/web-platform/tests/svg/coordinate-systems/viewBox-scaling-text-001.html @@ -0,0 +1,25 @@ +<!DOCTYPE html> +<head> + <meta charset="utf-8"> + <meta name="assert" href="1px-tall-text should be visible when scaled up via the SVG viewBox attribute"> + <title>Testcase for text scaled via SVG viewBox</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="help" href="https://www.w3.org/TR/SVG/coords.html#ViewBoxAttribute"> + <link rel="match" href="support/viewBox-scaling-text-001-ref.html"> + <style> + svg { + width: 100px; + height: 100px; + background: lightgray; + overflow: visible; + } + text { + font: 1px/1 monospace; + } + </style> +</head> +<body> + <svg viewBox="0 0 1 1"> + <text x="0" y="1">X̂̂̂̂̂̂</text> + </svg> +</body> |
