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.
Author: https://github.com/Calme1709 Commit: https://github.com/LadybirdBrowser/ladybird/commit/acc8b905493 Pull-request: https://github.com/LadybirdBrowser/ladybird/pull/7297 Reviewed-by: https://github.com/gmta ✅
2026-04-26 17:55:07 +02:00 · 2025-12-24 23:05:32 +13:00 · 2026-01-02 10:44:05 +00:00
parent 6964593377
commit acc8b90549
8 changed files with 67 additions and 8 deletions
--- a/Tests/LibWeb/Text/input/css/gradient-position-serialization.html
+++ b/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>