mirrors/ladybird
0
0
Fork 0
mirror of https://github.com/LadybirdBrowser/ladybird.git synced 2025-04-22 12:35:14 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 9

LibWeb: Make transform: scale(calc(..)) work

Browse source 
The `transform` property supports transform functions that sometimes
need their `calc(percentage)` values to be converted to a number instead
of a length. Currently this only applies to the `scale*` family of
functions, which are marked as such in `TransformFunctions.json`.

We were not consistently applying the `NumberPercentage` type to these
functions though, and in addition, any `NumberPercentage` value would
not consider calculated values.
This commit is contained in:
Jelle Raaijmakers 2025-03-25 14:04:17 +00:00
parent 1844e10cd3
commit 99f243de86
5 changed files with 26 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
Libraries/LibWeb/CSS/Parser/ValueParsing.cpp
View file

@ -3313,6 +3313,12 @@ RefPtr<CSSStyleValue> 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 {};
});

16
Libraries/LibWeb/CSS/StyleValues/TransformationStyleValue.cpp
View file

@ -24,17 +24,15 @@ Transformation TransformationStyleValue::to_transformation() const
Vector<TransformValue> 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() });

10
Libraries/LibWeb/CSS/Transformation.cpp
View file

@ -46,7 +46,15 @@ ErrorOr<Gfx::FloatMatrix4x4> Transformation::to_matrix(Optional<Painting::Painta
[&](CSS::NumberPercentage const& value) -> ErrorOr<float> {
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");
});
};

2
Tests/LibWeb/Text/expected/css/getComputedStyle-transform.txt
View file

@ -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)

2
Tests/LibWeb/Text/input/css/getComputedStyle-transform.html
View file

@ -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)",