LibWeb: Add vertical-align to ComputedValues

Userland/Libraries/LibWeb/CSS/ComputedValues.h

@@ -41,6 +41,7 @@ public:
     static float flex_shrink() { return 1.0f; }
     static float opacity() { return 1.0f; }
     static CSS::Length border_radius() { return Length::make_px(0); }
+    static Variant<CSS::VerticalAlign, CSS::LengthPercentage> vertical_align() { return CSS::VerticalAlign::Baseline; }
 };
 
 struct BackgroundLayerData {
@@ -131,6 +132,7 @@ public:
     Optional<CSS::LengthPercentage> const& height() const { return m_noninherited.height; }
     Optional<CSS::LengthPercentage> const& min_height() const { return m_noninherited.min_height; }
     Optional<CSS::LengthPercentage> const& max_height() const { return m_noninherited.max_height; }
+    Variant<CSS::VerticalAlign, CSS::LengthPercentage> const& vertical_align() const { return m_noninherited.vertical_align; }
 
     const CSS::LengthBox& offset() const { return m_noninherited.offset; }
     const CSS::LengthBox& margin() const { return m_noninherited.margin; }
@@ -230,6 +232,7 @@ protected:
         Vector<CSS::Transformation> transformations {};
         CSS::BoxSizing box_sizing { InitialValues::box_sizing() };
         CSS::ContentData content;
+        Variant<CSS::VerticalAlign, CSS::LengthPercentage> vertical_align { InitialValues::vertical_align() };
     } m_noninherited;
 };
 
@@ -288,6 +291,7 @@ public:
     void set_box_shadow(Vector<BoxShadowData>&& value) { m_noninherited.box_shadow = move(value); }
     void set_transformations(Vector<CSS::Transformation> value) { m_noninherited.transformations = move(value); }
     void set_box_sizing(CSS::BoxSizing value) { m_noninherited.box_sizing = value; }
+    void set_vertical_align(Variant<CSS::VerticalAlign, CSS::LengthPercentage> value) { m_noninherited.vertical_align = value; }
 
     void set_fill(Color value) { m_inherited.fill = value; }
     void set_stroke(Color value) { m_inherited.stroke = value; }

Userland/Libraries/LibWeb/CSS/ResolvedCSSStyleDeclaration.cpp

@@ -403,6 +403,29 @@ static CSS::ValueID to_css_value_id(CSS::Overflow value)
     VERIFY_NOT_REACHED();
 }
 
+static CSS::ValueID to_css_value_id(CSS::VerticalAlign value)
+{
+    switch (value) {
+    case CSS::VerticalAlign::Baseline:
+        return CSS::ValueID::Baseline;
+    case CSS::VerticalAlign::Bottom:
+        return CSS::ValueID::Bottom;
+    case CSS::VerticalAlign::Middle:
+        return CSS::ValueID::Middle;
+    case CSS::VerticalAlign::Sub:
+        return CSS::ValueID::Sub;
+    case CSS::VerticalAlign::Super:
+        return CSS::ValueID::Super;
+    case CSS::VerticalAlign::TextBottom:
+        return CSS::ValueID::TextBottom;
+    case CSS::VerticalAlign::TextTop:
+        return CSS::ValueID::TextTop;
+    case CSS::VerticalAlign::Top:
+        return CSS::ValueID::Top;
+    }
+    VERIFY_NOT_REACHED();
+}
+
 static CSS::ValueID to_css_value_id(CSS::ListStyleType value)
 {
     switch (value) {
@@ -716,6 +739,15 @@ RefPtr<StyleValue> ResolvedCSSStyleDeclaration::style_value_for_property(Layout:
             value_or_default(maybe_background_origin, IdentifierStyleValue::create(CSS::ValueID::PaddingBox)),
             value_or_default(maybe_background_clip, IdentifierStyleValue::create(CSS::ValueID::BorderBox)));
     }
+    case CSS::PropertyID::VerticalAlign:
+        if (auto const* length_percentage = layout_node.computed_values().vertical_align().get_pointer<CSS::LengthPercentage>()) {
+            if (length_percentage->is_length())
+                return LengthStyleValue::create(length_percentage->length());
+            if (length_percentage->is_percentage())
+                return PercentageStyleValue::create(length_percentage->percentage());
+            VERIFY_NOT_REACHED();
+        }
+        return IdentifierStyleValue::create(to_css_value_id(layout_node.computed_values().vertical_align().get<CSS::VerticalAlign>()));
     case CSS::PropertyID::ListStyleType:
         return IdentifierStyleValue::create(to_css_value_id(layout_node.computed_values().list_style_type()));
     case CSS::PropertyID::BoxSizing:

Userland/Libraries/LibWeb/CSS/StyleProperties.cpp

@@ -894,4 +894,43 @@ CSS::BoxSizing StyleProperties::box_sizing() const
         return {};
     }
 }
+
+Variant<CSS::VerticalAlign, CSS::LengthPercentage> StyleProperties::vertical_align() const
+{
+    auto value = property(CSS::PropertyID::VerticalAlign);
+    if (!value.has_value())
+        VERIFY_NOT_REACHED();
+
+    if (value.value()->is_identifier()) {
+        switch (value.value()->to_identifier()) {
+        case CSS::ValueID::Baseline:
+            return CSS::VerticalAlign::Baseline;
+        case CSS::ValueID::Bottom:
+            return CSS::VerticalAlign::Bottom;
+        case CSS::ValueID::Middle:
+            return CSS::VerticalAlign::Middle;
+        case CSS::ValueID::Sub:
+            return CSS::VerticalAlign::Sub;
+        case CSS::ValueID::Super:
+            return CSS::VerticalAlign::Super;
+        case CSS::ValueID::TextBottom:
+            return CSS::VerticalAlign::TextBottom;
+        case CSS::ValueID::TextTop:
+            return CSS::VerticalAlign::TextTop;
+        case CSS::ValueID::Top:
+            return CSS::VerticalAlign::Top;
+        default:
+            VERIFY_NOT_REACHED();
+        }
+    }
+
+    if (value.value()->is_length())
+        return CSS::LengthPercentage(value.value()->to_length());
+
+    if (value.value()->is_percentage())
+        return CSS::LengthPercentage(value.value()->as_percentage().percentage());
+
+    VERIFY_NOT_REACHED();
+}
+
 }

Userland/Libraries/LibWeb/CSS/StyleProperties.h

@@ -72,6 +72,7 @@ public:
     Vector<CSS::BoxShadowData> box_shadow() const;
     CSS::BoxSizing box_sizing() const;
     Optional<CSS::PointerEvents> pointer_events() const;
+    Variant<CSS::VerticalAlign, CSS::LengthPercentage> vertical_align() const;
 
     Vector<CSS::Transformation> transformations() const;
 

Userland/Libraries/LibWeb/CSS/StyleValue.h

@@ -268,6 +268,17 @@ enum class TransformFunction {
     TranslateY,
 };
 
+enum class VerticalAlign {
+    Baseline,
+    Bottom,
+    Middle,
+    Sub,
+    Super,
+    TextBottom,
+    TextTop,
+    Top,
+};
+
 enum class WhiteSpace {
     Normal,
     Pre,

Userland/Libraries/LibWeb/Layout/Node.cpp

@@ -198,6 +198,8 @@ void NodeWithStyle::apply_style(const CSS::StyleProperties& specified_style)
     m_font = specified_style.computed_font();
     m_line_height = specified_style.line_height(*this);
 
+    computed_values.set_vertical_align(specified_style.vertical_align());
+
     {
         auto attachments = specified_style.property(CSS::PropertyID::BackgroundAttachment);
         auto clips = specified_style.property(CSS::PropertyID::BackgroundClip);