diff options
Diffstat (limited to 'testing/web-platform/tests/svg/layout')
17 files changed, 299 insertions, 0 deletions
diff --git a/testing/web-platform/tests/svg/layout/svg-foreign-relayout-001.html b/testing/web-platform/tests/svg/layout/svg-foreign-relayout-001.html new file mode 100644 index 0000000000..2c8a814152 --- /dev/null +++ b/testing/web-platform/tests/svg/layout/svg-foreign-relayout-001.html @@ -0,0 +1,14 @@ +<!DOCTYPE html> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1462742"> +<link rel="match" href="../../css/reference/ref-filled-green-100px-square-only.html"> +<p>Test passes if there is a filled green square.</p> +<svg width=100 height=100> + <foreignObject id=target width=0 height=100> + <canvas id=inner style="background: green; position: absolute; width: 100px; height: 100px; left: 0; top: 0;"></canvas> + </foreignObject> +</svg> +<script> +document.body.offsetTop; +document.getElementById('inner').width = '100'; +document.getElementById('target').setAttribute('width', '100'); +</script> diff --git a/testing/web-platform/tests/svg/layout/svg-foreign-relayout-002.html b/testing/web-platform/tests/svg/layout/svg-foreign-relayout-002.html new file mode 100644 index 0000000000..cebc2d492d --- /dev/null +++ b/testing/web-platform/tests/svg/layout/svg-foreign-relayout-002.html @@ -0,0 +1,14 @@ +<!DOCTYPE html> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1462742"> +<link rel="match" href="../../css/reference/ref-filled-green-100px-square-only.html"> +<p>Test passes if there is a filled green square.</p> +<svg width=100 height=100> + <foreignObject id=target x=100 width=100 height=100> + <canvas id=inner style="background: green; position: absolute; width: 100px; height: 100px; left: 0; top: 0;"></canvas> + </foreignObject> +</svg> +<script> +document.body.offsetTop; +document.getElementById('inner').width = '100'; +document.getElementById('target').setAttribute('x', '0'); +</script> diff --git a/testing/web-platform/tests/svg/layout/svg-intrinsic-size-invalidation-ref.html b/testing/web-platform/tests/svg/layout/svg-intrinsic-size-invalidation-ref.html new file mode 100644 index 0000000000..acfc7be517 --- /dev/null +++ b/testing/web-platform/tests/svg/layout/svg-intrinsic-size-invalidation-ref.html @@ -0,0 +1,21 @@ +<!doctype html> +<style> +#avatar { + width: 100px; + display: block; +} +#container { + width: max-content; + border: 10px solid green; +} +#ancestor { + padding: 10px; +} +</style> +<div id="ancestor"> + <div id="container"> + <svg viewBox="0 0 128 128" xmlns="http://www.w3.org/2000/svg" id="avatar"> + <rect height="100%" width="100%" fill="blue"></rect> + </svg> + </div> +</div> diff --git a/testing/web-platform/tests/svg/layout/svg-intrinsic-size-invalidation.html b/testing/web-platform/tests/svg/layout/svg-intrinsic-size-invalidation.html new file mode 100644 index 0000000000..7c3daf8e5c --- /dev/null +++ b/testing/web-platform/tests/svg/layout/svg-intrinsic-size-invalidation.html @@ -0,0 +1,30 @@ +<!doctype html> +<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1730351"> +<link rel="help" href="https://drafts.csswg.org/css-sizing/#valdef-width-max-content"> +<link rel="match" href="svg-intrinsic-size-invalidation-ref.html"> +<style> +#avatar { + width: 128px; + display: block; +} +#container { + width: max-content; + border: 10px solid green; +} +</style> +<div id="ancestor"> + <div id="container"> + <svg viewBox="0 0 128 128" xmlns="http://www.w3.org/2000/svg" id="avatar"> + <rect height="100%" width="100%" fill="blue"></rect> + </svg> + </div> +</div> +<script> + onload = function() { + let avatar = document.getElementById("avatar"); + let ancestor = document.getElementById("ancestor"); + avatar.getBoundingClientRect(); + avatar.style.maxWidth = "100px"; + ancestor.style.padding = "10px"; + } +</script> diff --git a/testing/web-platform/tests/svg/layout/svg-use-symbol-animateMotion-print-ref.html b/testing/web-platform/tests/svg/layout/svg-use-symbol-animateMotion-print-ref.html new file mode 100644 index 0000000000..07e162c8a5 --- /dev/null +++ b/testing/web-platform/tests/svg/layout/svg-use-symbol-animateMotion-print-ref.html @@ -0,0 +1,12 @@ +<!doctype html> +<html> +<style> + body { margin: 0 } +</style> +<body> +<svg width=200 height=200 viewBox="0 0 200 200"> + <rect fill="purple" width=100 height=100 /> + <rect fill="blue" width=50 height=50 /> +</svg> +</body> +</html> diff --git a/testing/web-platform/tests/svg/layout/svg-use-symbol-animateMotion-print.html b/testing/web-platform/tests/svg/layout/svg-use-symbol-animateMotion-print.html new file mode 100644 index 0000000000..aa658117b6 --- /dev/null +++ b/testing/web-platform/tests/svg/layout/svg-use-symbol-animateMotion-print.html @@ -0,0 +1,25 @@ +<!DOCTYPE HTML> +<!doctype html> +<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1843883"> +<link rel="match" href="svg-use-symbol-animateMotion-print-ref.html"> +<html> +<head> +<style> + body { margin: 0 } +</style> +</head> +<body> +<!-- Should see a blue square inside the top left quarter of a purple square --> +<svg width=200 height=200 viewBox="0 0 200 200"> + <defs> + <symbol id="r" viewBox="0 0 200 200"> + <rect fill="blue" x="-40" width=100 height=100> + <animateMotion dur="1s" fill="freeze" from="40,0" to="40,0" /> + </rect> + </symbol> + </defs> + <rect fill="purple" width=100 height=100 /> + <use href="#r" width="100" height="100" /> +</svg> +</body> +</html> diff --git a/testing/web-platform/tests/svg/layout/svg-use-symbol-animateTransform-print-ref.html b/testing/web-platform/tests/svg/layout/svg-use-symbol-animateTransform-print-ref.html new file mode 100644 index 0000000000..07e162c8a5 --- /dev/null +++ b/testing/web-platform/tests/svg/layout/svg-use-symbol-animateTransform-print-ref.html @@ -0,0 +1,12 @@ +<!doctype html> +<html> +<style> + body { margin: 0 } +</style> +<body> +<svg width=200 height=200 viewBox="0 0 200 200"> + <rect fill="purple" width=100 height=100 /> + <rect fill="blue" width=50 height=50 /> +</svg> +</body> +</html> diff --git a/testing/web-platform/tests/svg/layout/svg-use-symbol-animateTransform-print.html b/testing/web-platform/tests/svg/layout/svg-use-symbol-animateTransform-print.html new file mode 100644 index 0000000000..f979d8317c --- /dev/null +++ b/testing/web-platform/tests/svg/layout/svg-use-symbol-animateTransform-print.html @@ -0,0 +1,24 @@ +<!doctype html> +<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1843883"> +<link rel="match" href="svg-use-symbol-animateTransform-print-ref.html"> +<html> +<head> +<style> + body { margin: 0 } +</style> +</head> +<body> +<!-- Should see a blue square inside the top left quarter of a purple square --> +<svg width=200 height=200 viewBox="0 0 200 200"> + <defs> + <symbol id="r" viewBox="0 0 200 200"> + <rect fill="blue" x="-40" width=100 height=100> + <animateTransform attributeName="transform" dur="1s" fill="freeze" type="translate" from="40,0" to="40,0" /> + </rect> + </symbol> + </defs> + <rect fill="purple" width=100 height=100 /> + <use href="#r" width="100" height="100" /> +</svg> +</body> +</html> diff --git a/testing/web-platform/tests/svg/layout/svg-use-symbol-opacity-print-ref.html b/testing/web-platform/tests/svg/layout/svg-use-symbol-opacity-print-ref.html new file mode 100644 index 0000000000..d6b2f6bd9b --- /dev/null +++ b/testing/web-platform/tests/svg/layout/svg-use-symbol-opacity-print-ref.html @@ -0,0 +1,12 @@ +<!doctype html> +<html> +<style> + body { margin: 0 } +</style> +<body> +<svg width=200 height=200 viewBox="0 0 200 200"> + <rect fill="purple" width=100 height=100 /> + <rect fill="blue" fill-opacity="0.5" width=50 height=50 /> +</svg> +</body> +</html> diff --git a/testing/web-platform/tests/svg/layout/svg-use-symbol-opacity-print.html b/testing/web-platform/tests/svg/layout/svg-use-symbol-opacity-print.html new file mode 100644 index 0000000000..339939b0c3 --- /dev/null +++ b/testing/web-platform/tests/svg/layout/svg-use-symbol-opacity-print.html @@ -0,0 +1,24 @@ +<!doctype html> +<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1843883"> +<link rel="match" href="svg-use-symbol-opacity-print-ref.html"> +<html> +<head> +<style> + body { margin: 0 } +</style> +</head> +<body> +<!-- Should see a semi-transparent blue square inside the top left quarter of a purple square --> +<svg width=200 height=200 viewBox="0 0 200 200"> + <defs> + <symbol id="r" viewBox="0 0 200 200"> + <rect fill="blue" width=100 height=100> + <set attributeName="fill-opacity" to="0.5" fill="freeze"/> + </rect> + </symbol> + </defs> + <rect fill="purple" width=100 height=100 /> + <use href="#r" width="100" height="100" /> +</svg> +</body> +</html> diff --git a/testing/web-platform/tests/svg/layout/svg-use-symbol-path-print-ref.html b/testing/web-platform/tests/svg/layout/svg-use-symbol-path-print-ref.html new file mode 100644 index 0000000000..07e162c8a5 --- /dev/null +++ b/testing/web-platform/tests/svg/layout/svg-use-symbol-path-print-ref.html @@ -0,0 +1,12 @@ +<!doctype html> +<html> +<style> + body { margin: 0 } +</style> +<body> +<svg width=200 height=200 viewBox="0 0 200 200"> + <rect fill="purple" width=100 height=100 /> + <rect fill="blue" width=50 height=50 /> +</svg> +</body> +</html> diff --git a/testing/web-platform/tests/svg/layout/svg-use-symbol-path-print.html b/testing/web-platform/tests/svg/layout/svg-use-symbol-path-print.html new file mode 100644 index 0000000000..c671a8413a --- /dev/null +++ b/testing/web-platform/tests/svg/layout/svg-use-symbol-path-print.html @@ -0,0 +1,24 @@ +<!doctype html> +<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1843883"> +<link rel="match" href="svg-use-symbol-path-print-ref.html"> +<html> +<head> +<style> + body { margin: 0 } +</style> +</head> +<body> +<!-- Should see a blue square inside the top left quarter of a purple square --> +<svg width=200 height=200 viewBox="0 0 200 200"> + <defs> + <symbol id="r" viewBox="0 0 200 200"> + <path fill="blue"> + <set attributeName="d" to="M0,0 L100,0 L100,100 L0,100 Z" fill="freeze"/> + </path> + </symbol> + </defs> + <rect fill="purple" width=100 height=100 /> + <use href="#r" width="100" height="100" /> +</svg> +</body> +</html> diff --git a/testing/web-platform/tests/svg/layout/svg-use-symbol-width-2-print.html b/testing/web-platform/tests/svg/layout/svg-use-symbol-width-2-print.html new file mode 100644 index 0000000000..ec08fd98b4 --- /dev/null +++ b/testing/web-platform/tests/svg/layout/svg-use-symbol-width-2-print.html @@ -0,0 +1,16 @@ +<!doctype html> +<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1853727"> +<link rel="match" href="svg-use-symbol-width-print-ref.html"> +<style> + body { margin: 0 } +</style> +<!-- Should see a blue square inside the top left quarter of a purple square --> +<svg width=200 height=200 viewbox="0 0 200 200"> + <defs> + <symbol id="r" viewBox="0 0 200 200"> + <rect fill="blue" style="width:100px;height:100px" /> + </symbol> + </defs> + <rect fill="purple" style="width:100px;height:100px" /> + <use href="#r" width="100" height="100" x="0" y="0" /> +</svg> diff --git a/testing/web-platform/tests/svg/layout/svg-use-symbol-width-print-ref.html b/testing/web-platform/tests/svg/layout/svg-use-symbol-width-print-ref.html new file mode 100644 index 0000000000..6c94e34c04 --- /dev/null +++ b/testing/web-platform/tests/svg/layout/svg-use-symbol-width-print-ref.html @@ -0,0 +1,8 @@ +<!doctype html> +<style> + body { margin: 0 } +</style> +<svg width=200 height=200 viewbox="0 0 200 200"> + <rect fill="purple" x=0 y=0 width=100 height=100 /> + <rect fill="blue" x=0 y=0 width=50 height=50 /> +</svg> diff --git a/testing/web-platform/tests/svg/layout/svg-use-symbol-width-print.html b/testing/web-platform/tests/svg/layout/svg-use-symbol-width-print.html new file mode 100644 index 0000000000..ae56d68eee --- /dev/null +++ b/testing/web-platform/tests/svg/layout/svg-use-symbol-width-print.html @@ -0,0 +1,18 @@ +<!doctype html> +<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1706939"> +<link rel="match" href="svg-use-symbol-width-print-ref.html"> +<link rel="author" title="Emilio Cobos Álvarez" href="mailto:emilio@crisal.io"> +<link rel="author" title="Mozilla" href="https://mozilla.org"> +<style> + body { margin: 0 } +</style> +<!-- Should see a blue square inside the top left quarter of a purple square --> +<svg width=200 height=200 viewbox="0 0 200 200"> + <defs> + <symbol id="r" viewBox="0 0 200 200"> + <rect fill="blue" x=0 y=0 width=100 height=100 /> + </symbol> + </defs> + <rect fill="purple" x=0 y=0 width=100 height=100 /> + <use href="#r" width="100" height="100" x="0" y="0" /> +</svg> diff --git a/testing/web-platform/tests/svg/layout/svg-with-precent-dimensions-relayout-ref.html b/testing/web-platform/tests/svg/layout/svg-with-precent-dimensions-relayout-ref.html new file mode 100644 index 0000000000..1a15a9f2b8 --- /dev/null +++ b/testing/web-platform/tests/svg/layout/svg-with-precent-dimensions-relayout-ref.html @@ -0,0 +1,12 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<link rel="help" href="https://crbug.com/1016759"> +<body> +<span style="position:relative; font-size:100px;"> + <br> + <svg style="position:absolute; border:1px solid black; width:100%; height:100%;"> + <rect x="10" y="10" width="100" height="100" fill="red" id="child" stroke="blue" stroke-width="5px"/> + </svg> +</span> +</body> +</html> diff --git a/testing/web-platform/tests/svg/layout/svg-with-precent-dimensions-relayout.html b/testing/web-platform/tests/svg/layout/svg-with-precent-dimensions-relayout.html new file mode 100644 index 0000000000..9d04f412b7 --- /dev/null +++ b/testing/web-platform/tests/svg/layout/svg-with-precent-dimensions-relayout.html @@ -0,0 +1,21 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title> + Ensure SVGs with percentage dimensions do not overflow auto-sized parents on + child-initiated re-layout. +</title> +<link rel="help" href="https://crbug.com/1016759"> +<link rel=match href="svg-with-precent-dimensions-relayout-ref.html"> +<body> +<span style="position:relative; font-size:100px;"> + <br> + <svg style="position:absolute; border:1px solid black; width:100%; height:100%;"> + <rect x="10" y="10" width="100" height="100" fill="red" id="child" stroke="blue" stroke-width="20px"/> + </svg> +</span> +</body> +<script> + document.body.offsetTop; + document.getElementById("child").setAttribute('stroke-width', '5px'); +</script> +</html> |