diff options
Diffstat (limited to 'testing/web-platform/tests/svg/layout')
6 files changed, 110 insertions, 0 deletions
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-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> |