RGBCube/serenity
1
Fork 0
mirror of https://github.com/RGBCube/serenity synced 2025-07-26 19:37:36 +00:00
Code Issues Activity Actions

LibWeb: Add proper support for Angle parameters in transform functions

Browse source 
Also, made the `reference_length` parameter optional for the lambda that
extracts transform-function parameters, since it is only needed to
resolve `LengthPercentage` parameters.
This commit is contained in:
Sam Atkins 2022-07-14 17:45:23 +01:00 • committed by Andreas Kling
parent e60beef12e
commit b5ab961e20
3 changed files with 20 additions and 14 deletions
Download patch file Download diff file Expand all files Collapse all files

4
Userland/Libraries/LibWeb/CSS/ComputedValues.h
View file

@ -82,9 +82,11 @@ public:
float width { 0 }; float width { 0 };
}; };
using TransformValue = Variant<CSS::Angle, CSS::LengthPercentage, float>;
struct Transformation { struct Transformation {
CSS::TransformFunction function; CSS::TransformFunction function;
Vector<Variant<CSS::LengthPercentage, float>> values; Vector<TransformValue> values;
}; };
struct TransformOrigin { struct TransformOrigin {

4
Userland/Libraries/LibWeb/CSS/StyleProperties.cpp
View file

@ -261,7 +261,7 @@ Vector<CSS::Transformation> StyleProperties::transformations() const
auto& transformation_style_value = it.as_transformation(); auto& transformation_style_value = it.as_transformation();
CSS::Transformation transformation; CSS::Transformation transformation;
transformation.function = transformation_style_value.transform_function(); transformation.function = transformation_style_value.transform_function();
Vector<Variant<CSS::LengthPercentage, float>> values; Vector<TransformValue> values;
for (auto& transformation_value : transformation_style_value.values()) { for (auto& transformation_value : transformation_style_value.values()) {
if (transformation_value.is_length()) { if (transformation_value.is_length()) {
values.append({ transformation_value.to_length() }); values.append({ transformation_value.to_length() });
@ -270,7 +270,7 @@ Vector<CSS::Transformation> StyleProperties::transformations() const
} else if (transformation_value.is_numeric()) { } else if (transformation_value.is_numeric()) {
values.append({ transformation_value.to_number() }); values.append({ transformation_value.to_number() });
} else if (transformation_value.is_angle()) { } else if (transformation_value.is_angle()) {
values.append({ transformation_value.as_angle().angle().to_degrees() }); values.append({ transformation_value.as_angle().angle() });
} else { } else {
dbgln("FIXME: Unsupported value in transform!"); dbgln("FIXME: Unsupported value in transform!");
} }

26
Userland/Libraries/LibWeb/Painting/StackingContext.cpp
View file

@ -5,6 +5,7 @@
*/ */
#include <AK/Debug.h> #include <AK/Debug.h>
#include <AK/ExtraMathConstants.h>
#include <AK/QuickSort.h> #include <AK/QuickSort.h>
#include <AK/StringBuilder.h> #include <AK/StringBuilder.h>
#include <LibGfx/AffineTransform.h> #include <LibGfx/AffineTransform.h>
@ -169,10 +170,13 @@ void StackingContext::paint_internal(PaintContext& context) const
Gfx::FloatMatrix4x4 StackingContext::get_transformation_matrix(CSS::Transformation const& transformation) const Gfx::FloatMatrix4x4 StackingContext::get_transformation_matrix(CSS::Transformation const& transformation) const
{ {
auto count = transformation.values.size(); auto count = transformation.values.size();
auto value = [this, transformation](size_t index, CSS::Length& reference) -> float { auto value = [this, transformation](size_t index, Optional<CSS::Length const&> reference_length = {}) -> float {
return transformation.values[index].visit( return transformation.values[index].visit(
[this, reference](CSS::LengthPercentage const& value) { [this, reference_length](CSS::LengthPercentage const& value) {
return value.resolved(m_box, reference).to_px(m_box); return value.resolved(m_box, reference_length.value()).to_px(m_box);
},
[](CSS::Angle const& value) {
return value.to_degrees() * static_cast<float>(M_DEG2RAD);
}, },
[](float value) { [](float value) {
return value; return value;
@ -186,8 +190,8 @@ Gfx::FloatMatrix4x4 StackingContext::get_transformation_matrix(CSS::Transformati
switch (transformation.function) { switch (transformation.function) {
case CSS::TransformFunction::Matrix: case CSS::TransformFunction::Matrix:
if (count == 6) if (count == 6)
return Gfx::FloatMatrix4x4(value(0, width), value(2, width), 0, value(4, width), return Gfx::FloatMatrix4x4(value(0), value(2), 0, value(4),
value(1, height), value(3, height), 0, value(5, height), value(1), value(3), 0, value(5),
0, 0, 1, 0, 0, 0, 1, 0,
0, 0, 0, 1); 0, 0, 0, 1);
break; break;
@ -219,19 +223,19 @@ Gfx::FloatMatrix4x4 StackingContext::get_transformation_matrix(CSS::Transformati
break; break;
case CSS::TransformFunction::Scale: case CSS::TransformFunction::Scale:
if (count == 1) if (count == 1)
return Gfx::FloatMatrix4x4(value(0, width), 0, 0, 0, return Gfx::FloatMatrix4x4(value(0), 0, 0, 0,
0, value(0, height), 0, 0, 0, value(0), 0, 0,
0, 0, 1, 0, 0, 0, 1, 0,
0, 0, 0, 1); 0, 0, 0, 1);
if (count == 2) if (count == 2)
return Gfx::FloatMatrix4x4(value(0, width), 0, 0, 0, return Gfx::FloatMatrix4x4(value(0), 0, 0, 0,
0, value(0, height), 0, 0, 0, value(0), 0, 0,
0, 0, 1, 0, 0, 0, 1, 0,
0, 0, 0, 1); 0, 0, 0, 1);
break; break;
case CSS::TransformFunction::ScaleX: case CSS::TransformFunction::ScaleX:
if (count == 1) if (count == 1)
return Gfx::FloatMatrix4x4(value(0, width), 0, 0, 0, return Gfx::FloatMatrix4x4(value(0), 0, 0, 0,
0, 1, 0, 0, 0, 1, 0, 0,
0, 0, 1, 0, 0, 0, 1, 0,
0, 0, 0, 1); 0, 0, 0, 1);
@ -239,7 +243,7 @@ Gfx::FloatMatrix4x4 StackingContext::get_transformation_matrix(CSS::Transformati
case CSS::TransformFunction::ScaleY: case CSS::TransformFunction::ScaleY:
if (count == 1) if (count == 1)
return Gfx::FloatMatrix4x4(1, 0, 0, 0, return Gfx::FloatMatrix4x4(1, 0, 0, 0,
0, value(0, height), 0, 0, 0, value(0), 0, 0,
0, 0, 1, 0, 0, 0, 1, 0,
0, 0, 0, 1); 0, 0, 0, 1);
break; break;