From 0abd469d247d24b28a8a996d04c0d7a0d6293675 Mon Sep 17 00:00:00 2001
From: MacDue <macdue@dueutil.tech>
Date: Sun, 2 Apr 2023 23:02:43 +0100
Subject: [PATCH] Base: Add background-position-x/y test page

---
 .../res/html/misc/background-position-xy.html | 25 +++++++++++++++++++
 Base/res/html/misc/welcome.html               |  1 +
 2 files changed, 26 insertions(+)
 create mode 100644 Base/res/html/misc/background-position-xy.html

diff --git a/Base/res/html/misc/background-position-xy.html b/Base/res/html/misc/background-position-xy.html
new file mode 100644
index 0000000000..7bc880e16e
--- /dev/null
+++ b/Base/res/html/misc/background-position-xy.html
@@ -0,0 +1,25 @@
+<style>
+.example {
+  display: inline-block;
+  width: 200px;
+  height: 200px;
+  border: 1px solid black;
+  background-repeat: no-repeat;
+  background-size: 30px 30px;
+  background-image: linear-gradient(red, red);
+}
+</style>
+<b>background-position-x</b><br>
+<div class="example" style="background-position-x: left"></div>
+<div class="example" style="background-position-x: center"></div>
+<div class="example" style="background-position-x: 25%"></div>
+<div class="example" style="background-position-x: 2rem"></div>
+<div class="example" style="background-position-x: right 32px"></div>
+<br>
+<br>
+<b>background-position-y</b><br>
+<div class="example" style="background-position-y: top"></div>
+<div class="example" style="background-position-y: center"></div>
+<div class="example" style="background-position-y: 25%"></div>
+<div class="example" style="background-position-y: 2rem"></div>
+<div class="example" style="background-position-y: bottom 32px"></div>
diff --git a/Base/res/html/misc/welcome.html b/Base/res/html/misc/welcome.html
index 1aaa4cb722..8dd0f24eea 100644
--- a/Base/res/html/misc/welcome.html
+++ b/Base/res/html/misc/welcome.html
@@ -114,6 +114,7 @@
             <li><a href="backdrop-filter.html">backdrop-filter</a></li>
             <li><a href="backgrounds.html">Backgrounds</a></li>
             <li><a href="background-repeat-test.html">Background-repeat</a></li>
+            <li><a href="background-position-xy.html">Background-position-x/y</a></li>
             <li><a href="box-shadow.html">Box-shadow</a></li>
             <li><a href="text-shadow.html">Text-shadow</a></li>
             <li><a href="opacity.html">Opacity</a></li>