From 71ed1e3e50d635a3ee8f55ebf22732c166772672 Mon Sep 17 00:00:00 2001
From: MacDue <macdue@dueutil.tech>
Date: Mon, 17 Apr 2023 01:24:06 +0100
Subject: [PATCH] Base: Add SVG `preserveAspectRatio` demo page

---
 .../html/misc/svg-preserve-aspect-ratio.html  | 185 ++++++++++++++++++
 Base/res/html/misc/welcome.html               |   1 +
 2 files changed, 186 insertions(+)
 create mode 100644 Base/res/html/misc/svg-preserve-aspect-ratio.html

diff --git a/Base/res/html/misc/svg-preserve-aspect-ratio.html b/Base/res/html/misc/svg-preserve-aspect-ratio.html
new file mode 100644
index 0000000000..e1f345d504
--- /dev/null
+++ b/Base/res/html/misc/svg-preserve-aspect-ratio.html
@@ -0,0 +1,185 @@
+<!-- Based on the hit MDN example! -->
+<style>
+  svg {
+    border: 1px solid black;
+  }
+  div {
+    display: inline-block;
+    margin: 20px;
+  }
+</style>
+
+<!-- (width>height) meet -->
+<div>
+<b>xMidYMid meet</b><br>
+<svg
+  viewBox="0 0 100 100"
+  width="100"
+  height="50"
+  preserveAspectRatio="xMidYMid meet"
+  x="0"
+  y="0">
+  <circle cx="50" cy="50" r="50" fill="red" />
+</svg>
+</div>
+
+<div>
+<b>xMinYMid meet</b><br>
+<svg
+  viewBox="0 0 100 100"
+  width="100"
+  height="50"
+  preserveAspectRatio="xMinYMid meet"
+  x="25"
+  y="0">
+  <circle cx="50" cy="50" r="50" fill="red" />
+</svg>
+</div>
+
+<div>
+<b>xMaxYMid meet</b><br>
+<svg
+  viewBox="0 0 100 100"
+  width="100"
+  height="50"
+  preserveAspectRatio="xMaxYMid meet"
+  x="50"
+  y="0">
+  <circle cx="50" cy="50" r="50" fill="red" />
+</svg>
+</div>
+
+<!-- (width>height) slice -->
+<div>
+<b>xMidYMin slice</b><br>
+<svg
+  viewBox="0 0 100 100"
+  width="100"
+  height="50"
+  preserveAspectRatio="xMidYMin slice"
+  x="0"
+  y="15">
+  <circle cx="50" cy="50" r="50" fill="red" />
+</svg>
+</div>
+
+<div>
+<b>xMidYMid slice</b><br>
+<svg
+  viewBox="0 0 100 100"
+  width="100"
+  height="50"
+  preserveAspectRatio="xMidYMid slice"
+  x="25"
+  y="15">
+  <circle cx="50" cy="50" r="50" fill="red" />
+</svg>
+</div>
+
+<div>
+<b>xMidYMax slice</b><br>
+<svg
+  viewBox="0 0 100 100"
+  width="100"
+  height="50"
+  preserveAspectRatio="xMidYMax slice"
+  x="50"
+  y="15">
+  <circle cx="50" cy="50" r="50" fill="red" />
+</svg>
+</div>
+
+<!-- (width<height) meet -->
+<div>
+  <b>xMidYMin meet</b><br>
+<svg
+  viewBox="0 0 100 100"
+  width="50"
+  height="125"
+  preserveAspectRatio="xMidYMin meet"
+  x="75"
+  y="0">
+  <circle cx="50" cy="50" r="50" fill="red" />
+</svg>
+</div>
+
+<div>
+  <b>xMidYMid meet</b><br>
+</rect>
+<svg
+  viewBox="0 0 100 100"
+  width="50"
+  height="125"
+  preserveAspectRatio="xMidYMid meet"
+  x="90"
+  y="0">
+  <circle cx="50" cy="50" r="50" fill="red" />
+</svg>
+</div>
+
+<div>
+  <b>xMidYMax meet</b><br>
+<svg
+  viewBox="0 0 100 100"
+  width="50"
+  height="125"
+  preserveAspectRatio="xMidYMax meet"
+  x="105"
+  y="0">
+  <circle cx="50" cy="50" r="50" fill="red" />
+</svg>
+</div>
+
+<!-- (width<height) slice -->
+<div>
+  <b>xMinYMid slice</b><br>
+<svg
+  viewBox="0 0 100 100"
+  width="50"
+  height="125"
+  preserveAspectRatio="xMinYMid slice"
+  x="120"
+  y="0">
+  <circle cx="50" cy="50" r="50" fill="red" />
+</svg>
+</div>
+
+<div>
+  <b>xMidYMid slice</b><br>
+<svg
+  viewBox="0 0 100 100"
+  width="50"
+  height="125"
+  preserveAspectRatio="xMidYMid slice"
+  x="135"
+  y="0">
+  <circle cx="50" cy="50" r="50" fill="red" />
+</svg>
+</div>
+
+<div>
+  <b>xMaxYMid slice</b><br>
+<svg
+  viewBox="0 0 100 100"
+  width="50"
+  height="125"
+  preserveAspectRatio="xMaxYMid slice"
+  x="150"
+  y="0">
+  <circle cx="50" cy="50" r="50" fill="red" />
+</svg>
+</div>
+
+<!-- none -->
+<div>
+  <b>none</b><br>
+<svg
+  viewBox="0 0 100 100"
+  width="160"
+  height="60"
+  preserveAspectRatio="none"
+  x="0"
+  y="30">
+  <circle cx="50" cy="50" r="50" fill="red" />
+</svg>
+</div>
diff --git a/Base/res/html/misc/welcome.html b/Base/res/html/misc/welcome.html
index 2024e8a952..03c0ecb340 100644
--- a/Base/res/html/misc/welcome.html
+++ b/Base/res/html/misc/welcome.html
@@ -71,6 +71,7 @@
             <li><a href="pre.html">pre</a></li>
             <li><a href="svg.html">svg</a></li>
             <li><a href="svg-transforms.html">svg transforms</a></li>
+            <li><a href="svg-preserve-aspect-ratio.html">svg preserveAspectRatio</a></li>
             <li><a href="small.html">small</a></li>
             <li><a href="link.html">link</a></li>
             <li><a href="afrag.html">links with fragments</a></li>