LibWeb: Improve gradient position serialization

`EdgeStyleValues` which consist of an offset of a `calc()`s which
resolves to 50% should be considered "centered" for
`SerializationMode::ResolvedValue` for the purpose of omitting the
position value from gradient serialization.

Libraries/LibWeb/CSS/StyleValues/ConicGradientStyleValue.cpp

@@ -22,7 +22,7 @@ String ConicGradientStyleValue::to_string(SerializationMode mode) const
         builder.append("repeating-"sv);
     builder.append("conic-gradient("sv);
     bool has_from_angle = m_properties.from_angle;
-    bool has_at_position = !m_properties.position->is_center();
+    bool has_at_position = !m_properties.position->is_center(mode);
     bool has_color_space = m_properties.interpolation_method.has_value() && m_properties.interpolation_method.value().color_space != InterpolationMethod::default_color_space(m_properties.color_syntax);
 
     if (has_from_angle)

Libraries/LibWeb/CSS/StyleValues/EdgeStyleValue.cpp

@@ -11,12 +11,12 @@
 
 namespace Web::CSS {
 
-bool EdgeStyleValue::is_center() const
+bool EdgeStyleValue::is_center(SerializationMode mode) const
 {
     if (m_properties.edge == PositionEdge::Center)
         return true;
 
-    if (m_properties.offset && m_properties.offset->is_percentage() && m_properties.offset->as_percentage().percentage().value() == 50)
+    if (m_properties.offset && m_properties.offset->to_string(mode) == "50%"sv)
         return true;
 
     return false;

Libraries/LibWeb/CSS/StyleValues/EdgeStyleValue.h

@@ -23,7 +23,7 @@ public:
     // This is nonnull as it is only called after absolutization
     NonnullRefPtr<StyleValue const> offset() const { return *m_properties.offset; }
 
-    bool is_center() const;
+    bool is_center(SerializationMode) const;
 
     virtual String to_string(SerializationMode) const override;
     virtual ValueComparingNonnullRefPtr<StyleValue const> absolutized(ComputationContext const& computation_context) const override;

Libraries/LibWeb/CSS/StyleValues/PositionStyleValue.cpp

@@ -11,9 +11,9 @@
 
 namespace Web::CSS {
 
-bool PositionStyleValue::is_center() const
+bool PositionStyleValue::is_center(SerializationMode mode) const
 {
-    return edge_x()->is_center() && edge_y()->is_center();
+    return edge_x()->is_center(mode) && edge_y()->is_center(mode);
 }
 
 CSSPixelPoint PositionStyleValue::resolved(Layout::Node const& node, CSSPixelRect const& rect) const

Libraries/LibWeb/CSS/StyleValues/PositionStyleValue.h

@@ -38,7 +38,7 @@ public:
 
     ValueComparingNonnullRefPtr<EdgeStyleValue const> edge_x() const { return m_properties.edge_x; }
     ValueComparingNonnullRefPtr<EdgeStyleValue const> edge_y() const { return m_properties.edge_y; }
-    bool is_center() const;
+    bool is_center(SerializationMode) const;
     CSSPixelPoint resolved(Layout::Node const&, CSSPixelRect const&) const;
 
     virtual ValueComparingNonnullRefPtr<StyleValue const> absolutized(ComputationContext const& computation_context) const override;

Libraries/LibWeb/CSS/StyleValues/RadialGradientStyleValue.cpp

@@ -25,7 +25,7 @@ String RadialGradientStyleValue::to_string(SerializationMode mode) const
     auto const& serialized_size = m_properties.size->to_string(mode);
 
     bool has_size = serialized_size != "farthest-corner"sv;
-    bool has_position = !m_properties.position->is_center();
+    bool has_position = !m_properties.position->is_center(mode);
     bool has_color_space = m_properties.interpolation_method.has_value() && m_properties.interpolation_method.value().color_space != InterpolationMethod::default_color_space(m_properties.color_syntax);
 
     if (has_size)

Tests/LibWeb/Text/expected/css/gradient-position-serialization.txt

@@ -0,0 +1,13 @@
+#a { background-image: radial-gradient(red, blue); }
+#b { background-image: radial-gradient(red, blue); }
+#c { background-image: radial-gradient(red, blue); }
+#d { background-image: radial-gradient(red, blue); }
+#e { background-image: radial-gradient(at calc(50%) calc(50%), red, blue); }
+#f { background-image: radial-gradient(at calc(50% * sign(1em - 1px)) calc(50% * sign(1em - 1px)), red, blue); }
+Computed:
+#a: radial-gradient(rgb(255, 0, 0), rgb(0, 0, 255))
+#b: radial-gradient(rgb(255, 0, 0), rgb(0, 0, 255))
+#c: radial-gradient(rgb(255, 0, 0), rgb(0, 0, 255))
+#d: radial-gradient(rgb(255, 0, 0), rgb(0, 0, 255))
+#e: radial-gradient(rgb(255, 0, 0), rgb(0, 0, 255))
+#f: radial-gradient(rgb(255, 0, 0), rgb(0, 0, 255))

Tests/LibWeb/Text/input/css/gradient-position-serialization.html

@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<style>
+    #a {
+        background-image: radial-gradient(at center center, red, blue);
+    }
+
+    #b {
+        background-image: radial-gradient(at 50% 50%, red, blue);
+    }
+
+    #c {
+        background-image: radial-gradient(at left 50% top 50%, red, blue);
+    }
+
+    #d {
+        background-image: radial-gradient(at right 50% bottom 50%, red, blue);
+    }
+
+    #e {
+        background-image: radial-gradient(at calc(50%) calc(50%), red, blue);
+    }
+
+    #f {
+        background-image: radial-gradient(at calc(sign(1em - 1px) * 50%) calc(sign(1em - 1px) * 50%), red, blue);
+    }
+</style>
+<div id="a"></div>
+<div id="b"></div>
+<div id="c"></div>
+<div id="d"></div>
+<div id="e"></div>
+<div id="f"></div>
+<script src="../include.js"></script>
+<script>
+    test(() => {
+        for (const rule of document.styleSheets[0].cssRules) {
+            println(rule.cssText);
+        }
+
+        println("Computed:");
+
+        for (const el of [a, b, c, d, e, f]) {
+            println(`#${el.id}: ${getComputedStyle(el).backgroundImage}`);
+        }
+    });
+</script>