LadybirdBrowser/ladybird
1
1
Fork 0
mirror of https://github.com/LadybirdBrowser/ladybird.git synced 2024-11-07 20:31:04 +03:00
Code Issues Packages Projects Releases Wiki Activity

LibWeb: Account for scroll offset in Element::get_client_rects()

Browse Source
This commit is contained in:
Aliaksandr Kalenik 2024-03-17 11:22:53 +01:00 committed by Andreas Kling
parent 15524b97b6
commit 3fd1164171
Notes: sideshowbarker 2024-07-17 06:00:02 +09:00 
Author: https://github.com/kalenikaliaksandr
Commit: https://github.com/SerenityOS/serenity/commit/3fd1164171
Pull-request: https://github.com/SerenityOS/serenity/pull/23615
3 changed files with 44 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
Tests/LibWeb/Text/expected/element-get-bounding-client-rect-scroll-offset.txt Normal file
View File

@ -0,0 +1,3 @@
{"x":18,"y":518,"width":100,"height":100,"top":518,"right":118,"bottom":618,"left":18}
{"x":18,"y":418,"width":100,"height":100,"top":418,"right":118,"bottom":518,"left":18}
{"x":18,"y":318,"width":100,"height":100,"top":318,"right":118,"bottom":418,"left":18}

36
Tests/LibWeb/Text/input/element-get-bounding-client-rect-scroll-offset.html Normal file
View File

@ -0,0 +1,36 @@
<!DOCTYPE html>
<style>
body {
height: 2000px;
}
#box {
margin-top: 500px;
width: 100px;
height: 100px;
background-color: red;
}
#scrollable {
width: 400px;
height: 400px;
overflow: scroll;
border: 10px solid black;
}
</style>
<div id="scrollable">
<div id="box"></div>
</div>
<script src="include.js"></script>
<script>
test(() => {
let rectBeforeScroll = document.getElementById("box").getBoundingClientRect();
println(JSON.stringify(rectBeforeScroll));
document.getElementById("scrollable").scrollTop = 100;
let rectAfterScroll = document.getElementById("box").getBoundingClientRect();
println(JSON.stringify(rectAfterScroll));
document.getElementById("scrollable").scrollTop = 200;
let rectAfterScroll2 = document.getElementById("box").getBoundingClientRect();
println(JSON.stringify(rectAfterScroll2));
});
</script>

6
Userland/Libraries/LibWeb/DOM/Element.cpp
View File

@ -930,8 +930,10 @@ JS::NonnullGCPtr<Geometry::DOMRectList> Element::get_client_rects() const
const_cast<Document&>(document()).update_paint_and_hit_testing_properties_if_needed();
Gfx::AffineTransform transform;
CSSPixelPoint scroll_offset;
for (auto const* containing_block = this->paintable_box(); containing_block; containing_block = containing_block->containing_block()) {
transform = Gfx::extract_2d_affine_transform(containing_block->transform()).multiply(transform);
scroll_offset.translate_by(containing_block->scroll_offset());
}
auto const* paintable = this->paintable();
@ -940,12 +942,14 @@ JS::NonnullGCPtr<Geometry::DOMRectList> Element::get_client_rects() const
auto transformed_rect = transform.map(absolute_rect.translated(-paintable_box->transform_origin()).to_type<float>())
.to_type<CSSPixels>()
.translated(paintable_box->transform_origin())
.translated(-scroll_offset)
.translated(-viewport_offset);
rects.append(Geometry::DOMRect::create(realm(), transformed_rect.to_type<float>()));
} else if (paintable && is<Painting::InlinePaintable>(*paintable)) {
auto const& inline_paintable = static_cast<Painting::InlinePaintable const&>(*paintable);
auto absolute_rect = inline_paintable.bounding_rect();
absolute_rect.translate_by(-viewport_offset.x(), -viewport_offset.y());
absolute_rect.translate_by(-scroll_offset);
absolute_rect.translate_by(-viewport_offset);
rects.append(Geometry::DOMRect::create(realm(), transform.map(absolute_rect.to_type<float>())));
} else if (paintable) {
dbgln("FIXME: Failed to get client rects for element ({})", debug_description());