RGBCube/serenity
1
Fork 0
mirror of https://github.com/RGBCube/serenity synced 2025-05-31 12:28:12 +00:00
Code Issues Activity Actions

LibWeb: Fix hit-testing by excluding CSS transform from clip rect check

Browse source 
Transforms are applied to both clip rectangle and position, so we need
to remove the transform from clip rectangle before checking if position
falls within the clip rectangle.

In this change, the removal of transform is moved into
`Paintable::clip_rect()` that is shared between hit-testing and
painting.

This change fixes hit-testing in Discord's multifactor authentication
form.
This commit is contained in:
Aliaksandr Kalenik 2024-02-22 04:41:12 +01:00 • committed by Andreas Kling
parent 309259aeb6
commit 9968c9f7a6
3 changed files with 45 additions and 8 deletions
Download patch file Download diff file Expand all files Collapse all files

32
Tests/LibWeb/Text/input/hit_testing/overflow-hidden-wrapped-into-css-translate.html Normal file
View file

@ -0,0 +1,32 @@
<!DOCTYPE html><style type="text/css">
body {
width: 500px;
height: 500px;
position: relative;
border: 1px solid black;
}
#translation {
position: absolute;
top: 50%;
width: 300px;
transform: translate(0px, -50%);
}
#box {
width: 300px;
height: 300px;
background-color: magenta;
cursor: pointer;
}
#hidden-overflow {
overflow: hidden;
}
</style><div id="translation"><div id="hidden-overflow"><div id="empty-wrapper"><div id="box">
<script src="../include.js"></script>
<script>
test(() => {
printElement(internals.hitTest(100, 400).node);
});
</script>