LibWeb: Fail less when multiple mask images are defined

Calme1709 · AtkinsSJ · commit 1a5933cb04da · 2025-12-01T10:16:41.000Z
We don't yet support multiple images but we at least continue to use the
first rather than having none
diff --git a/Libraries/LibWeb/Layout/Node.cpp b/Libraries/LibWeb/Layout/Node.cpp
@@ -787,7 +787,15 @@ void NodeWithStyle::apply_style(CSS::ComputedProperties const& computed_style)
     computed_values.set_shape_rendering(computed_style.shape_rendering());
     computed_values.set_paint_order(computed_style.paint_order());
 
-    auto const& mask_image = computed_style.property(CSS::PropertyID::MaskImage);
+    // FIXME: We should actually support more than one mask image rather than just using the first
+    auto const& mask_image = [&] -> CSS::StyleValue const& {
+        auto const& value = computed_style.property(CSS::PropertyID::MaskImage);
+
+        if (value.is_value_list())
+            return value.as_value_list().values()[0];
+
+        return value;
+    }();
     if (mask_image.is_url()) {
         computed_values.set_mask(mask_image.as_url().url());
     } else if (mask_image.is_abstract_image()) {
diff --git a/Tests/LibWeb/Ref/expected/mask-image-multiple-same-ref.html b/Tests/LibWeb/Ref/expected/mask-image-multiple-same-ref.html
@@ -0,0 +1,9 @@
+<!DOCTYPE html>
+<style>
+    #mask-image-box {
+        background-color: green;
+        width: 100px;
+        height: 100px;
+    }
+</style>
+<div id="mask-image-box"></div>
diff --git a/Tests/LibWeb/Ref/input/mask-image-multiple-same.html b/Tests/LibWeb/Ref/input/mask-image-multiple-same.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<link rel="match" href="../expected/mask-image-multiple-same-ref.html" />
+<style>
+    #mask-image-box {
+        background-color: green;
+        width: 100px;
+        height: 200px;
+        mask-image: url("../data/mask-image-100x200.png"), url("../data/mask-image-100x200.png");
+    }
+</style>
+
+<div id="mask-image-box"></div>
+<!-- FIXME: Workaround to ensure CSS mask-image is loaded before taking screenshot: https://github.com/LadybirdBrowser/ladybird/issues/3448 -->
+<img style="display: none" src="../data/mask-image-100x200.png" />
