LibWeb: Handle calc percentages when interpolating scale function

Also clean up the corresponding handling in
TransformationStyleValue::to_transformation
This commit is contained in:
Callum Law 2025-11-14 14:10:40 +13:00 committed by Jelle Raaijmakers
parent 15e4deb831
commit ec14948175
Notes: github-actions[bot] 2025-11-16 21:50:59 +00:00
3 changed files with 21 additions and 7 deletions

View file

@ -773,9 +773,9 @@ RefPtr<StyleValue const> interpolate_transform(DOM::Element& element, StyleValue
auto& calculated = value->as_calculated();
if (calculated.resolves_to_angle()) {
values.append(AngleOrCalculated { calculated });
} else if (calculated.resolves_to_length_percentage()) {
} else if (calculated.resolves_to_length()) {
values.append(LengthPercentage { calculated });
} else if (calculated.resolves_to_number()) {
} else if (calculated.resolves_to_number() || calculated.resolves_to_percentage()) {
values.append(NumberPercentage { calculated });
} else {
dbgln("Calculation `{}` inside {} transform-function is not a recognized type", calculated.to_string(SerializationMode::Normal), to_string(transformation.transform_function()));

View file

@ -41,12 +41,9 @@ Transformation TransformationStyleValue::to_transformation() const
if (transformation_value->is_calculated()) {
auto& calculated = transformation_value->as_calculated();
if (function_type == TransformFunctionParameterType::NumberPercentage
&& (calculated.resolves_to_number() || calculated.resolves_to_percentage())) {
values.append(NumberPercentage { calculated });
} else if (calculated.resolves_to_length_percentage()) {
if (calculated.resolves_to_length()) {
values.append(LengthPercentage { calculated });
} else if (calculated.resolves_to_number()) {
} else if (calculated.resolves_to_number() || calculated.resolves_to_percentage()) {
values.append(NumberPercentage { calculated });
} else if (calculated.resolves_to_angle()) {
values.append(AngleOrCalculated { calculated });

View file

@ -0,0 +1,17 @@
<!DOCTYPE html>
<html>
<style>
#foo {
transition: transform 1s;
transform: scale(50%);
}
</style>
<div id="foo"></div>
<script>
requestAnimationFrame(() => {
requestAnimationFrame(() => {
foo.style.transform = "scale(calc(50% + 25%))";
});
});
</script>
</html>