beenull/ladybird
1
0
Fork 0
mirror of https://github.com/LadybirdBrowser/ladybird.git synced 2024-09-29 08:11:13 +00:00
Code Issues Actions 5 Packages Projects Releases Wiki Activity

LibWeb: Adjust stacking context position by scroll offset in hit-testing

Browse source 
Fixes a bug when stacking contexts nested inside scrollable box are
treated as fixed positioned during hit-testing.
This commit is contained in:
Aliaksandr Kalenik 2024-08-07 16:24:27 +03:00 committed by Alexander Kalenik
parent 1163ff21d7
commit 53ef0e2e88
Notes: github-actions[bot] 2024-08-07 16:15:32 +00:00 
Author: https://github.com/kalenikaliaksandr
Commit: https://github.com/LadybirdBrowser/ladybird/commit/53ef0e2e884
Pull-request: https://github.com/LadybirdBrowser/ladybird/pull/1000
3 changed files with 46 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
Tests/LibWeb/Text/expected/hit_testing/stacking-context-inside-scrollable-box.txt Normal file
View file

@ -0,0 +1 @@
Establishes a stacking context. <DIV id="scroll-space-filler" >

32
Tests/LibWeb/Text/input/hit_testing/stacking-context-inside-scrollable-box.html Normal file
View file

@ -0,0 +1,32 @@
<!DOCTYPE html>
<script src="../include.js"></script>
<style>
#scrollable-box {
width: 300px;
height: 300px;
border: 1px solid #000;
overflow: auto;
padding: 10px;
}
#inner-box {
width: 100px;
height: 100px;
background-color: #f0f0f0;
border: 1px solid #ccc;
position: relative;
z-index: 1;
}
</style>
<div id="scrollable-box">
<section id="inner-box">
<p>Establishes a stacking context.</p>
</section>
<div id="scroll-space-filler" style="height: 500px"></div>
</div>
<script>
const scrollbox = document.getElementById("scrollable-box");
scrollbox.scrollTop = 200;
test(() => {
printElement(internals.hitTest(50, 50).node);
});
</script>

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

@ -415,9 +415,21 @@ TraversalDecision StackingContext::hit_test(CSSPixelPoint position, HitTestType
return TraversalDecision::Break;
}
CSSPixelPoint enclosing_scroll_offset;
if (is<PaintableBox>(paintable())) {
auto const& paintable_box = static_cast<PaintableBox const&>(paintable());
enclosing_scroll_offset = paintable_box.enclosing_scroll_frame_offset();
} else if (is<InlinePaintable>(paintable())) {
auto const& inline_paintable = static_cast<InlinePaintable const&>(paintable());
enclosing_scroll_offset = inline_paintable.enclosing_scroll_frame_offset();
}
auto position_adjusted_by_scroll_offset = transformed_position;
position_adjusted_by_scroll_offset.translate_by(-enclosing_scroll_offset);
// 1. the background and borders of the element forming the stacking context.
if (paintable().is_paintable_box()) {
if (paintable_box().absolute_border_box_rect().contains(transformed_position.x(), transformed_position.y())) {
if (paintable_box().absolute_border_box_rect().contains(position_adjusted_by_scroll_offset.x(), position_adjusted_by_scroll_offset.y())) {
auto hit_test_result = HitTestResult { .paintable = const_cast<PaintableBox&>(paintable_box()) };
if (callback(hit_test_result) == TraversalDecision::Break)
return TraversalDecision::Break;