LibWeb: Expand background-position layers into x/y position lists

This fixes multi-layer backgrounds with background positions. This
is a little awkard, so maybe it would be better to refactor the
parsing code to make these lists directly, but right now this is
the simplest fix.

1 files changed, 22 insertions, 3 deletions

diff --git a/Userland/Libraries/LibWeb/CSS/StyleComputer.cpp b/Userland/Libraries/LibWeb/CSS/StyleComputer.cpp
index 335559bceb..512f619263 100644
--- a/Userland/Libraries/LibWeb/CSS/StyleComputer.cpp
+++ b/Userland/Libraries/LibWeb/CSS/StyleComputer.cpp
@@ -460,11 +460,30 @@ static void set_property_expanding_shorthands(StyleProperties& style, CSS::Prope
             auto const& position = value.as_position();
             style.set_property(CSS::PropertyID::BackgroundPositionX, position.edge_x());
             style.set_property(CSS::PropertyID::BackgroundPositionY, position.edge_y());
-            return;
+        } else if (value.is_value_list()) {
+            // Expand background-position layer list into separate lists for x and y positions:
+            auto const& values_list = value.as_value_list();
+            StyleValueVector x_positions {};
+            StyleValueVector y_positions {};
+            x_positions.ensure_capacity(values_list.size());
+            y_positions.ensure_capacity(values_list.size());
+            for (auto& layer : values_list.values()) {
+                if (layer->is_position()) {
+                    auto const& position = layer->as_position();
+                    x_positions.unchecked_append(position.edge_x());
+                    y_positions.unchecked_append(position.edge_y());
+                } else {
+                    x_positions.unchecked_append(layer);
+                    y_positions.unchecked_append(layer);
+                }
+            }
+            style.set_property(CSS::PropertyID::BackgroundPositionX, StyleValueList::create(move(x_positions), values_list.separator()));
+            style.set_property(CSS::PropertyID::BackgroundPositionY, StyleValueList::create(move(y_positions), values_list.separator()));
+        } else {
+            style.set_property(CSS::PropertyID::BackgroundPositionX, value);
+            style.set_property(CSS::PropertyID::BackgroundPositionY, value);
         }
 
-        style.set_property(CSS::PropertyID::BackgroundPositionX, value);
-        style.set_property(CSS::PropertyID::BackgroundPositionY, value);
         return;
     }