From 3fd870a429b3dfd263aedee9b67b6f1bed5d89f3 Mon Sep 17 00:00:00 2001
From: Alan Kemp <alan@alankemp.com>
Date: Sun, 9 Jul 2023 22:49:45 +0100
Subject: [PATCH] LibWeb: Create EdgeStyleValue for BackgroundPositionXY with
 no offset

When specifying either `background-position-x: right` or
`background-position-y: bottom` without an offset value no
EdgeStyleValue was created.

However, the spec says the offset should be optional.

Now, if you do not provide an offset, it creates the EdgeStyleValue
with a default offset of 0 pixels.
---
 .../res/html/misc/background-position-xy.html |  2 ++
 .../Text/expected/background-position-xy.txt  |  2 ++
 .../Text/input/background-position-xy.html    | 21 +++++++++++++++++++
 .../Libraries/LibWeb/CSS/Parser/Parser.cpp    |  4 +++-
 4 files changed, 28 insertions(+), 1 deletion(-)
 create mode 100644 Tests/LibWeb/Text/expected/background-position-xy.txt
 create mode 100644 Tests/LibWeb/Text/input/background-position-xy.html

diff --git a/Base/res/html/misc/background-position-xy.html b/Base/res/html/misc/background-position-xy.html
index 7bc880e16e..a89fcca4f5 100644
--- a/Base/res/html/misc/background-position-xy.html
+++ b/Base/res/html/misc/background-position-xy.html
@@ -15,6 +15,7 @@
 <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>
+<div class="example" style="background-position-x: right"></div>
 <br>
 <br>
 <b>background-position-y</b><br>
@@ -23,3 +24,4 @@
 <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>
+<div class="example" style="background-position-y: bottom"></div>
diff --git a/Tests/LibWeb/Text/expected/background-position-xy.txt b/Tests/LibWeb/Text/expected/background-position-xy.txt
new file mode 100644
index 0000000000..65c214a249
--- /dev/null
+++ b/Tests/LibWeb/Text/expected/background-position-xy.txt
@@ -0,0 +1,2 @@
+ right 0px
+bottom 0px
diff --git a/Tests/LibWeb/Text/input/background-position-xy.html b/Tests/LibWeb/Text/input/background-position-xy.html
new file mode 100644
index 0000000000..14ba2b5239
--- /dev/null
+++ b/Tests/LibWeb/Text/input/background-position-xy.html
@@ -0,0 +1,21 @@
+<script src="include.js"></script>
+<script>
+    test(() => {
+        var pos_x = document.getElementById("position-x")
+        var pos_y = document.getElementById("position-y")
+        println(getComputedStyle(pos_x).backgroundPositionX)
+        println(getComputedStyle(pos_y).backgroundPositionY)
+    });
+</script>
+<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>
+<div id="position-x" class="example" style="background-position-x: right"></div><div id="position-y" class="example" style="background-position-y: bottom"></div>
diff --git a/Userland/Libraries/LibWeb/CSS/Parser/Parser.cpp b/Userland/Libraries/LibWeb/CSS/Parser/Parser.cpp
index 2aa09f40ef..a974ddc543 100644
--- a/Userland/Libraries/LibWeb/CSS/Parser/Parser.cpp
+++ b/Userland/Libraries/LibWeb/CSS/Parser/Parser.cpp
@@ -4783,7 +4783,9 @@ ErrorOr<RefPtr<StyleValue>> Parser::parse_single_background_position_x_or_y_valu
         return EdgeStyleValue::create(relative_edge, *offset);
     }
 
-    return nullptr;
+    // If no offset is provided create this element but with an offset of default value of zero
+    transaction.commit();
+    return EdgeStyleValue::create(relative_edge, Length::make_px(0));
 }
 
 ErrorOr<RefPtr<StyleValue>> Parser::parse_single_background_repeat_value(TokenStream<ComponentValue>& tokens)