diff --git a/Userland/Libraries/LibWeb/CSS/StyleComputer.cpp b/Userland/Libraries/LibWeb/CSS/StyleComputer.cpp index a8df5c7410..f11102708b 100644 --- a/Userland/Libraries/LibWeb/CSS/StyleComputer.cpp +++ b/Userland/Libraries/LibWeb/CSS/StyleComputer.cpp @@ -52,6 +52,7 @@ #include #include #include +#include #include #include #include @@ -1104,6 +1105,20 @@ static ErrorOr> interpolate_value(DOM::Element& TRY(interpolate_value(element, from_position.edge_x(), to_position.edge_x(), delta))->as_edge(), TRY(interpolate_value(element, from_position.edge_y(), to_position.edge_y(), delta))->as_edge()); } + case StyleValue::Type::Ratio: { + auto from_ratio = from.as_ratio().ratio(); + auto to_ratio = to.as_ratio().ratio(); + + // The interpolation of a is defined by converting each to a number by dividing the first value + // by the second (so a ratio of 3 / 2 would become 1.5), taking the logarithm of that result (so the 1.5 would + // become approximately 0.176), then interpolating those values. The result during the interpolation is + // converted back to a by inverting the logarithm, then interpreting the result as a with the + // result as the first value and 1 as the second value. + auto from_number = log(from_ratio.value()); + auto to_number = log(to_ratio.value()); + auto interp_number = interpolate_raw(from_number, to_number, delta); + return RatioStyleValue::create(Ratio(pow(M_E, interp_number))); + } case StyleValue::Type::Rect: { auto from_rect = from.as_rect().rect(); auto to_rect = to.as_rect().rect();