LibWeb: Convert border-radii from Length to LengthPercentage :^)

The visit_lengths() code is a bit awkward but we'll clean that up later.

Userland/Libraries/LibWeb/CSS/ComputedValues.h

@@ -36,6 +36,7 @@ public:
     static float flex_grow() { return 0.0f; }
     static float flex_shrink() { return 1.0f; }
     static float opacity() { return 1.0f; }
+    static CSS::Length border_radius() { return Length::make_px(0); }
 };
 
 struct BackgroundLayerData {
@@ -119,10 +120,10 @@ public:
     const BorderData& border_right() const { return m_noninherited.border_right; }
     const BorderData& border_bottom() const { return m_noninherited.border_bottom; }
 
-    const CSS::Length& border_bottom_left_radius() const { return m_noninherited.border_bottom_left_radius; }
-    const CSS::Length& border_bottom_right_radius() const { return m_noninherited.border_bottom_right_radius; }
-    const CSS::Length& border_top_left_radius() const { return m_noninherited.border_top_left_radius; }
-    const CSS::Length& border_top_right_radius() const { return m_noninherited.border_top_right_radius; }
+    const CSS::LengthPercentage& border_bottom_left_radius() const { return m_noninherited.border_bottom_left_radius; }
+    const CSS::LengthPercentage& border_bottom_right_radius() const { return m_noninherited.border_bottom_right_radius; }
+    const CSS::LengthPercentage& border_top_left_radius() const { return m_noninherited.border_top_left_radius; }
+    const CSS::LengthPercentage& border_top_right_radius() const { return m_noninherited.border_top_right_radius; }
 
     CSS::Overflow overflow_x() const { return m_noninherited.overflow_x; }
     CSS::Overflow overflow_y() const { return m_noninherited.overflow_y; }
@@ -181,10 +182,10 @@ protected:
         BorderData border_top;
         BorderData border_right;
         BorderData border_bottom;
-        Length border_bottom_left_radius;
-        Length border_bottom_right_radius;
-        Length border_top_left_radius;
-        Length border_top_right_radius;
+        LengthPercentage border_bottom_left_radius { InitialValues::border_radius() };
+        LengthPercentage border_bottom_right_radius { InitialValues::border_radius() };
+        LengthPercentage border_top_left_radius { InitialValues::border_radius() };
+        LengthPercentage border_top_right_radius { InitialValues::border_radius() };
         Color background_color { InitialValues::background_color() };
         Vector<BackgroundLayerData> background_layers;
         CSS::FlexDirection flex_direction { InitialValues::flex_direction() };
@@ -234,10 +235,10 @@ public:
     void set_overflow_y(CSS::Overflow value) { m_noninherited.overflow_y = value; }
     void set_list_style_type(CSS::ListStyleType value) { m_inherited.list_style_type = value; }
     void set_display(CSS::Display value) { m_noninherited.display = value; }
-    void set_border_bottom_left_radius(CSS::Length value) { m_noninherited.border_bottom_left_radius = value; }
-    void set_border_bottom_right_radius(CSS::Length value) { m_noninherited.border_bottom_right_radius = value; }
-    void set_border_top_left_radius(CSS::Length value) { m_noninherited.border_top_left_radius = value; }
-    void set_border_top_right_radius(CSS::Length value) { m_noninherited.border_top_right_radius = value; }
+    void set_border_bottom_left_radius(CSS::LengthPercentage value) { m_noninherited.border_bottom_left_radius = value; }
+    void set_border_bottom_right_radius(CSS::LengthPercentage value) { m_noninherited.border_bottom_right_radius = value; }
+    void set_border_top_left_radius(CSS::LengthPercentage value) { m_noninherited.border_top_left_radius = value; }
+    void set_border_top_right_radius(CSS::LengthPercentage value) { m_noninherited.border_top_right_radius = value; }
     BorderData& border_left() { return m_noninherited.border_left; }
     BorderData& border_top() { return m_noninherited.border_top; }
     BorderData& border_right() { return m_noninherited.border_right; }

Userland/Libraries/LibWeb/CSS/Parser/Parser.cpp

@@ -3009,18 +3009,18 @@ RefPtr<StyleValue> Parser::parse_border_value(Vector<StyleComponentValueRule> co
 RefPtr<StyleValue> Parser::parse_border_radius_value(Vector<StyleComponentValueRule> const& component_values)
 {
     if (component_values.size() == 2) {
-        auto horizontal = parse_length(component_values[0]);
-        auto vertical = parse_length(component_values[1]);
-        if (horizontal.has_value() && vertical.has_value())
-            return BorderRadiusStyleValue::create(horizontal.value(), vertical.value());
+        auto horizontal = parse_dimension(component_values[0]);
+        auto vertical = parse_dimension(component_values[1]);
+        if (horizontal.has_value() && horizontal->is_length_percentage() && vertical.has_value() && vertical->is_length_percentage())
+            return BorderRadiusStyleValue::create(horizontal->length_percentage(), vertical->length_percentage());
 
         return nullptr;
     }
 
     if (component_values.size() == 1) {
-        auto radius = parse_length(component_values[0]);
-        if (radius.has_value())
-            return BorderRadiusStyleValue::create(radius.value(), radius.value());
+        auto radius = parse_dimension(component_values[0]);
+        if (radius.has_value() && radius->is_length_percentage())
+            return BorderRadiusStyleValue::create(radius->length_percentage(), radius->length_percentage());
         return nullptr;
     }
 

Userland/Libraries/LibWeb/CSS/StyleValue.h

@@ -564,14 +564,14 @@ private:
 
 class BorderRadiusStyleValue final : public StyleValue {
 public:
-    static NonnullRefPtr<BorderRadiusStyleValue> create(Length const& horizontal_radius, Length const& vertical_radius)
+    static NonnullRefPtr<BorderRadiusStyleValue> create(LengthPercentage const& horizontal_radius, LengthPercentage const& vertical_radius)
     {
         return adopt_ref(*new BorderRadiusStyleValue(horizontal_radius, vertical_radius));
     }
     virtual ~BorderRadiusStyleValue() override { }
 
-    Length const& horizontal_radius() const { return m_horizontal_radius; }
-    Length const& vertical_radius() const { return m_vertical_radius; }
+    LengthPercentage const& horizontal_radius() const { return m_horizontal_radius; }
+    LengthPercentage const& vertical_radius() const { return m_vertical_radius; }
     bool is_elliptical() const { return m_is_elliptical; }
 
     virtual String to_string() const override
@@ -590,7 +590,7 @@ public:
     }
 
 private:
-    BorderRadiusStyleValue(Length const& horizontal_radius, Length const& vertical_radius)
+    BorderRadiusStyleValue(LengthPercentage const& horizontal_radius, LengthPercentage const& vertical_radius)
         : StyleValue(Type::BorderRadius)
         , m_horizontal_radius(horizontal_radius)
         , m_vertical_radius(vertical_radius)
@@ -600,13 +600,21 @@ private:
 
     virtual void visit_lengths(Function<void(CSS::Length&)> visitor) override
     {
-        visitor(m_horizontal_radius);
-        visitor(m_vertical_radius);
+        if (!m_horizontal_radius.is_percentage()) {
+            Length temp = m_horizontal_radius.length();
+            visitor(temp);
+            m_horizontal_radius = move(temp);
+        }
+        if (!m_vertical_radius.is_percentage()) {
+            Length temp = m_vertical_radius.length();
+            visitor(temp);
+            m_vertical_radius = move(temp);
+        }
     }
 
     bool m_is_elliptical;
-    Length m_horizontal_radius;
-    Length m_vertical_radius;
+    LengthPercentage m_horizontal_radius;
+    LengthPercentage m_vertical_radius;
 };
 
 class BoxShadowStyleValue final : public StyleValue {

Userland/Libraries/LibWeb/Painting/BorderPainting.cpp

@@ -11,13 +11,16 @@
 
 namespace Web::Painting {
 
-BorderRadiusData normalized_border_radius_data(Layout::Node const& node, Gfx::FloatRect const& rect, CSS::Length top_left_radius, CSS::Length top_right_radius, CSS::Length bottom_right_radius, CSS::Length bottom_left_radius)
+BorderRadiusData normalized_border_radius_data(Layout::Node const& node, Gfx::FloatRect const& rect, CSS::LengthPercentage top_left_radius, CSS::LengthPercentage top_right_radius, CSS::LengthPercentage bottom_right_radius, CSS::LengthPercentage bottom_left_radius)
 {
-    // FIXME: some values should be relative to the height() if specified, but which? For now, all relative values are relative to the width.
-    auto bottom_left_radius_px = bottom_left_radius.resolved_or_zero(node, rect.width()).to_px(node);
-    auto bottom_right_radius_px = bottom_right_radius.resolved_or_zero(node, rect.width()).to_px(node);
-    auto top_left_radius_px = top_left_radius.resolved_or_zero(node, rect.width()).to_px(node);
-    auto top_right_radius_px = top_right_radius.resolved_or_zero(node, rect.width()).to_px(node);
+    // FIXME: Some values should be relative to the height() if specified, but which?
+    //        Spec just says "Refer to corresponding dimension of the border box."
+    //        For now, all relative values are relative to the width.
+    auto width_length = CSS::Length::make_px(rect.width());
+    auto bottom_left_radius_px = bottom_left_radius.resolved(width_length).resolved_or_zero(node, rect.width()).to_px(node);
+    auto bottom_right_radius_px = bottom_right_radius.resolved(width_length).resolved_or_zero(node, rect.width()).to_px(node);
+    auto top_left_radius_px = top_left_radius.resolved(width_length).resolved_or_zero(node, rect.width()).to_px(node);
+    auto top_right_radius_px = top_right_radius.resolved(width_length).resolved_or_zero(node, rect.width()).to_px(node);
 
     // Scale overlapping curves according to https://www.w3.org/TR/css-backgrounds-3/#corner-overlap
     auto f = 1.0f;

Userland/Libraries/LibWeb/Painting/BorderPainting.h

@@ -17,7 +17,7 @@ struct BorderRadiusData {
     float bottom_right { 0 };
     float bottom_left { 0 };
 };
-BorderRadiusData normalized_border_radius_data(Layout::Node const&, Gfx::FloatRect const&, CSS::Length top_left_radius, CSS::Length top_right_radius, CSS::Length bottom_right_radius, CSS::Length bottom_left_radius);
+BorderRadiusData normalized_border_radius_data(Layout::Node const&, Gfx::FloatRect const&, CSS::LengthPercentage top_left_radius, CSS::LengthPercentage top_right_radius, CSS::LengthPercentage bottom_right_radius, CSS::LengthPercentage bottom_left_radius);
 
 enum class BorderEdge {
     Top,