LibWeb: Implement scrollIntoView with 'center' block position
This fixes a crash on: https://docs.github.com/en/get-started/learning-about-github/githubs-plans
This commit is contained in:
parent
b3c8974718
commit
ccdf82c9be
Notes:
sideshowbarker
2024-07-17 08:27:05 +09:00
Author: https://github.com/shannonbooth Commit: https://github.com/SerenityOS/serenity/commit/ccdf82c9be Pull-request: https://github.com/SerenityOS/serenity/pull/24369 Reviewed-by: https://github.com/awesomekling
3 changed files with 31 additions and 1 deletions
1
Tests/LibWeb/Text/expected/scroll-into-view-center.txt
Normal file
1
Tests/LibWeb/Text/expected/scroll-into-view-center.txt
Normal file
|
@ -0,0 +1 @@
|
|||
The page has been scrolled to y: 800
|
29
Tests/LibWeb/Text/input/scroll-into-view-center.html
Normal file
29
Tests/LibWeb/Text/input/scroll-into-view-center.html
Normal file
|
@ -0,0 +1,29 @@
|
|||
<script src="include.js"></script>
|
||||
<style>
|
||||
body {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
#box {
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
background-color: magenta;
|
||||
}
|
||||
</style>
|
||||
<div style="height: 1000px"></div>
|
||||
<div style="margin-left: 500px" onclick="clickHandler(event)" id="box"></div>
|
||||
<div style="height: 1000px"></div>
|
||||
<script>
|
||||
function clickHandler(event) {
|
||||
document.getElementById("box").scrollIntoView({ block: "center" });
|
||||
}
|
||||
|
||||
asyncTest(done => {
|
||||
document.addEventListener("scroll", event => {
|
||||
println("The page has been scrolled to y: " + window.scrollY);
|
||||
done();
|
||||
});
|
||||
|
||||
document.getElementById("box").dispatchEvent(new Event("click"));
|
||||
});
|
||||
</script>
|
|
@ -1672,7 +1672,7 @@ static ErrorOr<void> scroll_an_element_into_view(DOM::Element& target, Bindings:
|
|||
}
|
||||
// 3. Otherwise, if block is "center", then align the center of target bounding border box with the center of scrolling box in scrolling box’s block flow direction.
|
||||
else if (block == Bindings::ScrollLogicalPosition::Center) {
|
||||
TODO();
|
||||
y = element_edge_a + (element_height / 2) - (scrolling_box_height / 2);
|
||||
}
|
||||
// 4. Otherwise, block is "nearest":
|
||||
else {
|
||||
|
|
Loading…
Add table
Reference in a new issue