diff --git a/Tests/LibWeb/Text/expected/WebAnimations/transitions/parse-transition-calc-duration-delay.txt b/Tests/LibWeb/Text/expected/WebAnimations/transitions/parse-transition-calc-duration-delay.txt
new file mode 100644
index 00000000000..be36d109cd5
--- /dev/null
+++ b/Tests/LibWeb/Text/expected/WebAnimations/transitions/parse-transition-calc-duration-delay.txt
@@ -0,0 +1 @@
+ PASS! (Didn't crash)
diff --git a/Tests/LibWeb/Text/input/WebAnimations/transitions/parse-transition-calc-duration-delay.html b/Tests/LibWeb/Text/input/WebAnimations/transitions/parse-transition-calc-duration-delay.html
new file mode 100644
index 00000000000..a1c4dd89ff3
--- /dev/null
+++ b/Tests/LibWeb/Text/input/WebAnimations/transitions/parse-transition-calc-duration-delay.html
@@ -0,0 +1,16 @@
+
+
+
+
+
diff --git a/Userland/Libraries/LibWeb/CSS/Parser/Parser.cpp b/Userland/Libraries/LibWeb/CSS/Parser/Parser.cpp
index b72cdd8dcbf..1c2d7e47b10 100644
--- a/Userland/Libraries/LibWeb/CSS/Parser/Parser.cpp
+++ b/Userland/Libraries/LibWeb/CSS/Parser/Parser.cpp
@@ -5354,10 +5354,10 @@ RefPtr Parser::parse_transition_value(TokenStream& t
if (auto time = parse_time(tokens); time.has_value()) {
switch (time_value_count) {
case 0:
- transition.duration = time.release_value().value();
+ transition.duration = time.release_value();
break;
case 1:
- transition.delay = time.release_value().value();
+ transition.delay = time.release_value();
break;
default:
dbgln_if(CSS_PARSER_DEBUG, "Transition property has more than two time values");
diff --git a/Userland/Libraries/LibWeb/CSS/StyleComputer.cpp b/Userland/Libraries/LibWeb/CSS/StyleComputer.cpp
index a4768349df2..38bc93eed05 100644
--- a/Userland/Libraries/LibWeb/CSS/StyleComputer.cpp
+++ b/Userland/Libraries/LibWeb/CSS/StyleComputer.cpp
@@ -696,8 +696,8 @@ void StyleComputer::for_each_property_expanding_shorthands(PropertyID property_i
Array>, 4> transition_values;
for (auto const& transition : transitions) {
transition_values[0].append(*transition.property_name);
- transition_values[1].append(TimeStyleValue::create(transition.duration));
- transition_values[2].append(TimeStyleValue::create(transition.delay));
+ transition_values[1].append(transition.duration.as_style_value());
+ transition_values[2].append(transition.delay.as_style_value());
if (transition.easing)
transition_values[3].append(*transition.easing);
}
diff --git a/Userland/Libraries/LibWeb/CSS/StyleValues/TransitionStyleValue.h b/Userland/Libraries/LibWeb/CSS/StyleValues/TransitionStyleValue.h
index 7ea806e253f..a6fe7ba219e 100644
--- a/Userland/Libraries/LibWeb/CSS/StyleValues/TransitionStyleValue.h
+++ b/Userland/Libraries/LibWeb/CSS/StyleValues/TransitionStyleValue.h
@@ -6,6 +6,7 @@
#pragma once
+#include
#include
#include
#include
@@ -17,8 +18,8 @@ class TransitionStyleValue final : public StyleValueWithDefaultOperators property_name;
- CSS::Time duration { CSS::Time::make_seconds(0.0) };
- CSS::Time delay { CSS::Time::make_seconds(0.0) };
+ TimeOrCalculated duration { CSS::Time::make_seconds(0.0) };
+ TimeOrCalculated delay { CSS::Time::make_seconds(0.0) };
ValueComparingRefPtr easing;
bool operator==(Transition const&) const = default;