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

LibWeb: Apply the CSS transform-origin property

Browse source 
We don't have transform-box yet, so this applies to the border-box
for now.

This also makes us pass a couple Web Platform Tests as well :^)
For example:
https://wpt.live/css/css-transforms/css3-transform-scale-002.html
This commit is contained in:
Simon Wanner 2022-03-21 19:38:00 +01:00 • committed by Andreas Kling
parent 63055ff5ad
commit 145efbe07a
6 changed files with 46 additions and 4 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -261,8 +261,7 @@ void StackingContext::paint(PaintContext& context) const
PaintContext paint_context(painter, context.palette(), context.scroll_offset());
paint_internal(paint_context);
// FIXME: Use the transform origin specified in CSS or SVG
auto transform_origin = m_box.paint_box()->absolute_position();
auto transform_origin = this->transform_origin();
auto source_rect = m_box.paint_box()->absolute_border_box_rect().translated(-transform_origin);
auto transformed_destination_rect = affine_transform.map(source_rect).translated(transform_origin);
@ -273,10 +272,19 @@ void StackingContext::paint(PaintContext& context) const
}
}
Gfx::FloatPoint StackingContext::transform_origin() const
{
auto style_value = m_box.computed_values().transform_origin();
// FIXME: respect transform-box property
auto reference_box = m_box.paint_box()->absolute_border_box_rect();
auto x = reference_box.left() + style_value.x.resolved(m_box, CSS::Length::make_px(reference_box.width())).to_px(m_box);
auto y = reference_box.top() + style_value.y.resolved(m_box, CSS::Length::make_px(reference_box.height())).to_px(m_box);
return { x, y };
}
Optional<HitTestResult> StackingContext::hit_test(Gfx::FloatPoint const& position, HitTestType type) const
{
// FIXME: Use the transform origin specified in CSS or SVG
auto transform_origin = m_box.paint_box()->absolute_position();
auto transform_origin = this->transform_origin();
auto affine_transform = combine_transformations_2d(m_box.computed_values().transformations());
auto transformed_position = affine_transform.inverse().value_or({}).map(position - transform_origin) + transform_origin;