LibWeb: Resolve the transition-delay property

Author: https://github.com/stelar7
Commit: a5f2024afa
Pull-request: https://github.com/SerenityOS/serenity/pull/19171

Userland/Libraries/LibWeb/CSS/ComputedValues.h

@@ -87,6 +87,7 @@ public:
     static CSS::Size row_gap() { return CSS::Size::make_auto(); }
     static CSS::BorderCollapse border_collapse() { return CSS::BorderCollapse::Separate; }
     static Vector<Vector<String>> grid_template_areas() { return {}; }
+    static CSS::Time transition_delay() { return CSS::Time::make_seconds(0); }
 };
 
 enum class BackgroundSize {
@@ -305,6 +306,7 @@ public:
     float font_size() const { return m_inherited.font_size; }
     int font_weight() const { return m_inherited.font_weight; }
     CSS::FontVariant font_variant() const { return m_inherited.font_variant; }
+    CSS::Time transition_delay() const { return m_noninherited.transition_delay; }
 
     ComputedValues clone_inherited_values() const
     {
@@ -406,6 +408,7 @@ protected:
         Vector<Vector<String>> grid_template_areas { InitialValues::grid_template_areas() };
         Gfx::Color stop_color { InitialValues::stop_color() };
         float stop_opacity { InitialValues::stop_opacity() };
+        CSS::Time transition_delay { InitialValues::transition_delay() };
     } m_noninherited;
 };
 
@@ -493,6 +496,7 @@ public:
     void set_row_gap(CSS::Size const& row_gap) { m_noninherited.row_gap = row_gap; }
     void set_border_collapse(CSS::BorderCollapse const& border_collapse) { m_noninherited.border_collapse = border_collapse; }
     void set_grid_template_areas(Vector<Vector<String>> const& grid_template_areas) { m_noninherited.grid_template_areas = grid_template_areas; }
+    void set_transition_delay(CSS::Time const& transition_delay) { m_noninherited.transition_delay = transition_delay; }
 
     void set_fill(SVGPaint value) { m_inherited.fill = value; }
     void set_stroke(SVGPaint value) { m_inherited.stroke = value; }

Userland/Libraries/LibWeb/CSS/Properties.json

@@ -1763,6 +1763,13 @@
       "top"
     ]
   },
+  "transition-delay": {
+    "inherited": false,
+    "initial": "0s",
+    "valid-types": [
+        "time"
+    ]
+  },
   "user-select": {
     "affects-layout": false,
     "inherited": false,

Userland/Libraries/LibWeb/CSS/ResolvedCSSStyleDeclaration.cpp

@@ -36,6 +36,7 @@
 #include <LibWeb/CSS/StyleValues/RectStyleValue.h>
 #include <LibWeb/CSS/StyleValues/ShadowStyleValue.h>
 #include <LibWeb/CSS/StyleValues/StyleValueList.h>
+#include <LibWeb/CSS/StyleValues/TimeStyleValue.h>
 #include <LibWeb/CSS/StyleValues/TransformationStyleValue.h>
 #include <LibWeb/DOM/Document.h>
 #include <LibWeb/DOM/Element.h>
@@ -767,8 +768,10 @@ ErrorOr<RefPtr<StyleValue const>> ResolvedCSSStyleDeclaration::style_value_for_p
         StyleValueVector matrix_functions { matrix_function };
         return StyleValueList::create(move(matrix_functions), StyleValueList::Separator::Space);
     }
-    case PropertyID::VerticalAlign:
+    case CSS::PropertyID::TransitionDelay:
-        if (auto const* length_percentage = layout_node.computed_values().vertical_align().get_pointer<LengthPercentage>()) {
+        return TimeStyleValue::create(layout_node.computed_values().transition_delay());
+    case CSS::PropertyID::VerticalAlign:
+        if (auto const* length_percentage = layout_node.computed_values().vertical_align().get_pointer<CSS::LengthPercentage>()) {
             return style_value_for_length_percentage(*length_percentage);
         }
         return IdentifierStyleValue::create(to_value_id(layout_node.computed_values().vertical_align().get<VerticalAlign>()));

Userland/Libraries/LibWeb/Layout/Node.cpp

@@ -14,6 +14,7 @@
 #include <LibWeb/CSS/StyleValues/NumberStyleValue.h>
 #include <LibWeb/CSS/StyleValues/PercentageStyleValue.h>
 #include <LibWeb/CSS/StyleValues/StyleValueList.h>
+#include <LibWeb/CSS/StyleValues/TimeStyleValue.h>
 #include <LibWeb/CSS/StyleValues/URLStyleValue.h>
 #include <LibWeb/DOM/Document.h>
 #include <LibWeb/Dump.h>
@@ -609,6 +610,15 @@ void NodeWithStyle::apply_style(const CSS::StyleProperties& computed_style)
     computed_values.set_transformations(computed_style.transformations());
     computed_values.set_transform_origin(computed_style.transform_origin());
 
+    auto transition_delay_property = computed_style.property(CSS::PropertyID::TransitionDelay);
+    if (transition_delay_property->is_time()) {
+        auto& transition_delay = transition_delay_property->as_time();
+        computed_values.set_transition_delay(transition_delay.time());
+    } else if (transition_delay_property->is_calculated()) {
+        auto& transition_delay = transition_delay_property->as_calculated();
+        computed_values.set_transition_delay(transition_delay.resolve_time().value());
+    }
+
     auto do_border_style = [&](CSS::BorderData& border, CSS::PropertyID width_property, CSS::PropertyID color_property, CSS::PropertyID style_property) {
         // FIXME: The default border color value is `currentcolor`, but since we can't resolve that easily,
         //        we just manually grab the value from `color`. This makes it dependent on `color` being