mirrors/ladybird
0
0
Fork 0
mirror of https://github.com/LadybirdBrowser/ladybird.git synced 2025-09-12 20:42:21 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 9

LibWeb: Account for fixed position in nearest scrollable ancestor lookup

Browse source 
Scroll offset of body does not affect position of fixed elements, so
nearest scrollable lookup should early return from ancestor scrollable
lookup loop once "position: fixed" box is encountered.

Fixes regression introduced in 866608532a
This commit is contained in:
Aliaksandr Kalenik 2024-09-01 01:23:49 +02:00 • committed by Alexander Kalenik
commit 59f2b4fefc
Notes: github-actions[bot] 2024-09-01 10:43:25 +00:00
3 changed files with 145 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

67
Tests/LibWeb/Ref/reference/scrollable-content-inside-fixed-position-box-ref.html Normal file
View file

@ -0,0 +1,67 @@
<!DOCTYPE html>
<link rel="match" href="reference/scrollable-content-inside-fixed-position-box-ref.html" />
<style>
* {
scrollbar-width: none;
}
body {
margin: 0;
padding: 0;
height: 2000px;
}
.abspos-element {
position: absolute;
top: 20px;
left: 20px;
width: 250px;
height: 300px;
padding: 10px;
background-color: #f1f1f1;
border: 1px solid #ccc;
overflow-y: auto;
}
.abspos-element .box {
margin-bottom: 10px;
padding: 10px;
color: white;
text-align: center;
font-weight: bold;
border-radius: 5px;
}
.box1 {
background-color: #ff5733;
height: 100px;
}
.box2 {
background-color: #33c1ff;
height: 150px;
}
.box3 {
background-color: #75ff33;
height: 120px;
}
.box4 {
background-color: #ff33e6;
height: 80px;
}
.box5 {
background-color: #ffd633;
height: 140px;
}
</style>
<div class="abspos-element">
<h2>Fixed Element</h2>
<div class="box box1">Box 1</div>
<div class="box box2">Box 2</div>
<div class="box box3">Box 3</div>
<div class="box box4">Box 4</div>
<div class="box box5">Box 5</div>
</div>

72
Tests/LibWeb/Ref/scrollable-content-inside-fixed-position-box.html Normal file
View file

@ -0,0 +1,72 @@
<!DOCTYPE html>
<link rel="match" href="reference/scrollable-content-inside-fixed-position-box-ref.html" />
<style>
* {
scrollbar-width: none;
}
body {
margin: 0;
padding: 0;
height: 2000px;
}
.fixed-element {
position: fixed;
top: 20px;
left: 20px;
width: 250px;
height: 300px;
padding: 10px;
background-color: #f1f1f1;
border: 1px solid #ccc;
overflow-y: auto;
}
.fixed-element .box {
margin-bottom: 10px;
padding: 10px;
color: white;
text-align: center;
font-weight: bold;
border-radius: 5px;
}
.box1 {
background-color: #ff5733;
height: 100px;
}
.box2 {
background-color: #33c1ff;
height: 150px;
}
.box3 {
background-color: #75ff33;
height: 120px;
}
.box4 {
background-color: #ff33e6;
height: 80px;
}
.box5 {
background-color: #ffd633;
height: 140px;
}
</style>
<div class="fixed-element">
<h2>Fixed Element</h2>
<div class="box box1">Box 1</div>
<div class="box box2">Box 2</div>
<div class="box box3">Box 3</div>
<div class="box box4">Box 4</div>
<div class="box box5">Box 5</div>
</div>
<script>
window.onload = function () {
window.scroll(0, 500);
};
</script>

6
Userland/Libraries/LibWeb/Painting/PaintableBox.cpp
View file

@ -1107,10 +1107,14 @@ void PaintableWithLines::resolve_paint_properties()
RefPtr<ScrollFrame const> PaintableBox::nearest_scroll_frame() const
{
if (is_fixed_position())
return nullptr;
auto const* paintable = this->containing_block();
while (paintable) {
if (paintable->own_scroll_frame())
return paintable->own_scroll_frame();
if (paintable->is_fixed_position())
return nullptr;
paintable = paintable->containing_block();
}
return nullptr;
@ -1132,6 +1136,8 @@ PaintableBox const* PaintableBox::nearest_scrollable_ancestor() const
while (paintable) {
if (paintable->is_scrollable())
return paintable;
if (paintable->is_fixed_position())
return nullptr;
paintable = paintable->containing_block();
}
return nullptr;