LibWeb: Resolve shorthand for border-radius

This takes care of the 1, 2, 3 and 4 parameter shorthand of the border-
radius identifier.
There are more as well as the ominous '/' character but that is for
another time. The 2 and 3 parameter versions are weird enough already.
I don't think anybody uses anything other than the 1 or 4 parameter
version or even the elliptical stuff.

1 files changed, 54 insertions, 0 deletions

diff --git a/Userland/Libraries/LibWeb/CSS/StyleResolver.cpp b/Userland/Libraries/LibWeb/CSS/StyleResolver.cpp
index 4f215da022..0d72b5fce4 100644
--- a/Userland/Libraries/LibWeb/CSS/StyleResolver.cpp
+++ b/Userland/Libraries/LibWeb/CSS/StyleResolver.cpp
@@ -264,6 +264,60 @@ static void set_property_expanding_shorthands(StyleProperties& style, CSS::Prope
         return;
     }
 
+    if (property_id == CSS::PropertyID::BorderRadius) {
+        // FIXME: Allow for two values per corner to support elliptical radii.
+        // FIXME: Add support the '/' to specify elliptical radii.
+        if (value.is_length()) {
+            style.set_property(CSS::PropertyID::BorderTopLeftRadius, value);
+            style.set_property(CSS::PropertyID::BorderTopRightRadius, value);
+            style.set_property(CSS::PropertyID::BorderBottomRightRadius, value);
+            style.set_property(CSS::PropertyID::BorderBottomLeftRadius, value);
+            return;
+        }
+        if (value.is_string()) {
+            auto parts = split_on_whitespace(value.to_string());
+            if (value.is_string() && parts.size() == 2) {
+                auto diagonal1 = parse_css_value(context, parts[0]);
+                auto diagonal2 = parse_css_value(context, parts[1]);
+                if (diagonal1 && diagonal2) {
+                    style.set_property(CSS::PropertyID::BorderTopLeftRadius, *diagonal1);
+                    style.set_property(CSS::PropertyID::BorderBottomRightRadius, *diagonal1);
+                    style.set_property(CSS::PropertyID::BorderTopRightRadius, *diagonal2);
+                    style.set_property(CSS::PropertyID::BorderBottomLeftRadius, *diagonal2);
+                }
+                return;
+            }
+            if (value.is_string() && parts.size() == 3) {
+                auto top_left = parse_css_value(context, parts[0]);
+                auto diagonal = parse_css_value(context, parts[1]);
+                auto bottom_right = parse_css_value(context, parts[2]);
+                if (top_left && diagonal && bottom_right) {
+                    style.set_property(CSS::PropertyID::BorderTopLeftRadius, *top_left);
+                    style.set_property(CSS::PropertyID::BorderBottomRightRadius, *bottom_right);
+                    style.set_property(CSS::PropertyID::BorderTopRightRadius, *diagonal);
+                    style.set_property(CSS::PropertyID::BorderBottomLeftRadius, *diagonal);
+                }
+                return;
+            }
+            if (value.is_string() && parts.size() == 4) {
+                auto top_left = parse_css_value(context, parts[0]);
+                auto top_right = parse_css_value(context, parts[1]);
+                auto bottom_right = parse_css_value(context, parts[2]);
+                auto bottom_left = parse_css_value(context, parts[3]);
+                if (top_left && top_right && bottom_right && bottom_left) {
+                    style.set_property(CSS::PropertyID::BorderTopLeftRadius, *top_left);
+                    style.set_property(CSS::PropertyID::BorderBottomRightRadius, *bottom_right);
+                    style.set_property(CSS::PropertyID::BorderTopRightRadius, *top_right);
+                    style.set_property(CSS::PropertyID::BorderBottomLeftRadius, *bottom_left);
+                }
+                return;
+            }
+            dbgln("Unsure what to do with CSS border-radius value '{}'", value.to_string());
+            return;
+        }
+        return;
+    }
+
     if (property_id == CSS::PropertyID::BorderTop
         || property_id == CSS::PropertyID::BorderRight
         || property_id == CSS::PropertyID::BorderBottom