ladybird/Tests/LibWeb/Text/input/hit_testing/overflow-hidden-wrapped-into-css-translate.html
Aliaksandr Kalenik 9968c9f7a6 LibWeb: Fix hit-testing by excluding CSS transform from clip rect check
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.
2024-02-22 07:36:20 +01:00

32 lines
625 B
HTML

<!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>