beenull/ladybird
1
0
Fork 0
mirror of https://github.com/LadybirdBrowser/ladybird.git synced 2024-11-22 07:30:19 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 6

LibWeb: Make MouseEvent.offsetX/Y ignore transforms

Browse source 
That is what the spec calls it, at least.
In code, this manifests as making the offset very aware
of the element's transform, because the click position comes
relative to the viewport, not to the transformed element.
This commit is contained in:
Psychpsyo 2024-11-19 22:26:00 +01:00
parent 24a6fd3d76
commit 1921bba601
3 changed files with 58 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

39
Libraries/LibWeb/Page/EventHandler.cpp
View file

@ -136,13 +136,44 @@ static Gfx::StandardCursor cursor_css_to_gfx(Optional<CSS::Cursor> cursor)
} }
} }
// https://drafts.csswg.org/cssom-view/#dom-mouseevent-offsetx
static CSSPixelPoint compute_mouse_event_offset(CSSPixelPoint position, Layout::Node const& layout_node) static CSSPixelPoint compute_mouse_event_offset(CSSPixelPoint position, Layout::Node const& layout_node)
{ {
auto top_left_of_layout_node = layout_node.first_paintable()->box_type_agnostic_position(); // If the event’s dispatch flag is set,
return { // FIXME: Is this guaranteed to be dispatched?
position.x() - top_left_of_layout_node.x(),
position.y() - top_left_of_layout_node.y() // return the x-coordinate of the position where the event occurred,
Gfx::Point<float> precision_offset = {
position.x().to_double(),
position.y().to_double()
}; };
// ignoring the transforms that apply to the element and its ancestors,
if (layout_node.has_css_transform()) {
auto const& paintable_box = layout_node.dom_node()->paintable_box();
auto const affine_transform = Gfx::extract_2d_affine_transform(paintable_box->transform().inverse());
auto const& origin = paintable_box->transform_origin();
Gfx::Point<float> const precision_origin = {
origin.x().to_double(),
origin.y().to_double()
};
precision_offset.translate_by(-precision_origin);
precision_offset.transform_by(affine_transform);
precision_offset.translate_by(precision_origin);
}
// relative to the origin of the padding edge of the target node
auto const top_left_of_layout_node = layout_node.first_paintable()->box_type_agnostic_position();
CSSPixelPoint offset = {
CSSPixels(precision_offset.x()),
CSSPixels(precision_offset.y())
};
offset -= top_left_of_layout_node;
// and terminate these steps.
return offset;
} }
EventHandler::EventHandler(Badge<HTML::Navigable>, HTML::Navigable& navigable) EventHandler::EventHandler(Badge<HTML::Navigable>, HTML::Navigable& navigable)

2
Tests/LibWeb/Text/expected/CSSOMView/mouse-event-offset-values.txt Normal file
View file

@ -0,0 +1,2 @@
offsetX: 45.75
offsetY: 57.078125

21
Tests/LibWeb/Text/input/CSSOMView/mouse-event-offset-values.html Normal file
View file

@ -0,0 +1,21 @@
<!DOCTYPE html>
<style>
div {
width: 100px;
height: 100px;
background-color: gray;
transform: rotate(45deg);
}
</style>
<div onClick="
println(`offsetX: ${event.offsetX}`);
println(`offsetY: ${event.offsetY}`);
"></div>
<script src="../include.js"></script>
<script>
test(() => {
internals.click(50, 60);
});
</script>