diff --git a/Libraries/LibWeb/CSS/Parser/ValueParsing.cpp b/Libraries/LibWeb/CSS/Parser/ValueParsing.cpp index 2ada1bb6187..083d33149b3 100644 --- a/Libraries/LibWeb/CSS/Parser/ValueParsing.cpp +++ b/Libraries/LibWeb/CSS/Parser/ValueParsing.cpp @@ -3313,6 +3313,12 @@ RefPtr Parser::parse_calculated_value(ComponentValue const& compo "conic-gradient"sv, "repeating-conic-gradient"sv)) { return CalculationContext { .percentages_resolve_as = ValueType::Length }; } + // https://drafts.csswg.org/css-transforms-2/#transform-functions + // The scale family of functions treats percentages as numbers. + if (function.name.is_one_of_ignoring_ascii_case( + "scale"sv, "scalex"sv, "scaley"sv, "scalez"sv, "scale3d"sv)) { + return CalculationContext { .percentages_resolve_as = ValueType::Number }; + } // FIXME: Add other functions that provide a context for resolving values return {}; }); diff --git a/Libraries/LibWeb/CSS/StyleValues/TransformationStyleValue.cpp b/Libraries/LibWeb/CSS/StyleValues/TransformationStyleValue.cpp index 4cc1583a9f8..7dc980c973c 100644 --- a/Libraries/LibWeb/CSS/StyleValues/TransformationStyleValue.cpp +++ b/Libraries/LibWeb/CSS/StyleValues/TransformationStyleValue.cpp @@ -24,17 +24,15 @@ Transformation TransformationStyleValue::to_transformation() const Vector values; size_t argument_index = 0; for (auto& transformation_value : m_properties.values) { + auto const function_type = function_metadata.parameters[argument_index].type; + if (transformation_value->is_calculated()) { auto& calculated = transformation_value->as_calculated(); - if (calculated.resolves_to_length_percentage()) { + if (function_type == TransformFunctionParameterType::NumberPercentage + && (calculated.resolves_to_number() || calculated.resolves_to_percentage())) { + values.append(NumberPercentage { calculated }); + } else if (calculated.resolves_to_length_percentage()) { values.append(LengthPercentage { calculated }); - } else if (calculated.resolves_to_percentage()) { - // FIXME: Maybe transform this for loop to always check the metadata for the correct types - if (function_metadata.parameters[argument_index].type == TransformFunctionParameterType::NumberPercentage) { - values.append(NumberPercentage { calculated }); - } else { - values.append(LengthPercentage { calculated }); - } } else if (calculated.resolves_to_number()) { values.append(NumberPercentage { calculated }); } else if (calculated.resolves_to_angle()) { @@ -45,7 +43,7 @@ Transformation TransformationStyleValue::to_transformation() const } else if (transformation_value->is_length()) { values.append({ transformation_value->as_length().length() }); } else if (transformation_value->is_percentage()) { - if (function_metadata.parameters[argument_index].type == TransformFunctionParameterType::NumberPercentage) { + if (function_type == TransformFunctionParameterType::NumberPercentage) { values.append(NumberPercentage { transformation_value->as_percentage().percentage() }); } else { values.append(LengthPercentage { transformation_value->as_percentage().percentage() }); diff --git a/Libraries/LibWeb/CSS/Transformation.cpp b/Libraries/LibWeb/CSS/Transformation.cpp index da5cd2126f0..e3e72293069 100644 --- a/Libraries/LibWeb/CSS/Transformation.cpp +++ b/Libraries/LibWeb/CSS/Transformation.cpp @@ -46,7 +46,15 @@ ErrorOr Transformation::to_matrix(Optional ErrorOr { if (value.is_percentage()) return value.percentage().as_fraction(); - return value.number().value(); + if (value.is_number()) + return value.number().value(); + if (value.is_calculated()) { + if (value.calculated()->resolves_to_number()) + return value.calculated()->resolve_number(context).value(); + if (value.calculated()->resolves_to_percentage()) + return value.calculated()->resolve_percentage(context)->as_fraction(); + } + return Error::from_string_literal("Transform contains non absolute units"); }); }; diff --git a/Tests/LibWeb/Text/expected/css/getComputedStyle-transform.txt b/Tests/LibWeb/Text/expected/css/getComputedStyle-transform.txt index 3b005942ddd..1226aeb465d 100644 --- a/Tests/LibWeb/Text/expected/css/getComputedStyle-transform.txt +++ b/Tests/LibWeb/Text/expected/css/getComputedStyle-transform.txt @@ -10,6 +10,8 @@ translateX(1px) => matrix(1, 0, 0, 1, 1, 0) translateY(1%) => matrix(1, 0, 0, 1, 0, 0) scale(1, 2) => matrix(1, 0, 0, 2, 0, 0) scale(100%, 200%) => matrix(1, 0, 0, 2, 0, 0) +scale(calc(1 / 2)) => matrix(0.5, 0, 0, 0.5, 0, 0) +scale(calc(50% + 25%)) => matrix(0.75, 0, 0, 0.75, 0, 0) scaleX(2) => matrix(2, 0, 0, 1, 0, 0) scaleX(200%) => matrix(2, 0, 0, 1, 0, 0) scaleY(2.5) => matrix(1, 0, 0, 2.5, 0, 0) diff --git a/Tests/LibWeb/Text/input/css/getComputedStyle-transform.html b/Tests/LibWeb/Text/input/css/getComputedStyle-transform.html index 3805723dc29..0cfda9ddc8a 100644 --- a/Tests/LibWeb/Text/input/css/getComputedStyle-transform.html +++ b/Tests/LibWeb/Text/input/css/getComputedStyle-transform.html @@ -23,6 +23,8 @@ "translateY(1%)", "scale(1, 2)", "scale(100%, 200%)", + "scale(calc(1 / 2))", + "scale(calc(50% + 25%))", "scaleX(2)", "scaleX(200%)", "scaleY(2.5)",