Ladybird/ladybird
1
0
Fork 0
mirror of https://github.com/LadybirdBrowser/ladybird.git synced 2025-06-11 02:13:56 +09:00
Code Activity

LibWeb: Ensure scroll offset is applied to mask-images

Browse source 
When recording the display list for a stacking context, the following
operations (relevant to this bug) happened:
* push a stacking context
  * as part of that push a None-value to the scroll frame id stack
* apply filters
* apply masking
* paint recursively

This meant that mask-images were always recorded without scroll frame
id, causing them to be painted without any scroll offset. As a result
mask-images would break as soon as the website using them was scrolled.

Instead, push to the scroll frame id stack later to solve the problem:
* push a stacking context
* apply filters
* apply masking
* push a None-value to the scroll frame id stack
* paint recursively
This commit is contained in:
InvalidUsernameException 2025-05-29 19:57:21 +02:00 • committed by Alexander Kalenik
parent ed65d5b342
commit 164afdcc59
Notes: github-actions[bot] 2025-05-29 20:03:16 +00:00
4 changed files with 31 additions and 2 deletions
Download patch file Download diff file Expand all files Collapse all files

2
Libraries/LibWeb/Painting/DisplayListRecorder.cpp
View file

@ -310,12 +310,10 @@ void DisplayListRecorder::push_stacking_context(PushStackingContextParams params
.matrix = params.transform.matrix,
},
.clip_path = params.clip_path });
m_scroll_frame_id_stack.append({});
}
void DisplayListRecorder::pop_stacking_context()
{
(void)m_scroll_frame_id_stack.take_last();
append(PopStackingContext {});
}

2
Libraries/LibWeb/Painting/StackingContext.cpp
View file

@ -371,7 +371,9 @@ void StackingContext::paint(PaintContext& context) const
}
}
context.display_list_recorder().push_scroll_frame_id({});
paint_internal(context);
context.display_list_recorder().pop_scroll_frame_id();
if (!filter.is_empty()) {
context.display_list_recorder().restore();

11
Tests/LibWeb/Ref/expected/mask-image-with-scroll-offset-ref.html Normal file
View file

@ -0,0 +1,11 @@
<!DOCTYPE html>
<style>
* { scrollbar-width: none; }
body { height: 200vh; }
div {
width: 100px;
height: 100px;
background-color: green;
}
</style>
<div></div>

18
Tests/LibWeb/Ref/input/mask-image-with-scroll-offset.html Normal file
View file

@ -0,0 +1,18 @@
<!DOCTYPE html>
<link rel="match" href="../expected/mask-image-with-scroll-offset-ref.html" />
<style>
* { scrollbar-width: none; }
body { height: 200vh; }
#spacer { height: 100px; }
#mask-image-box {
background-color: green;
width: 100px;
height: 200px;
mask-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAADIAQMAAAAk8taCAAAABlBMVEUAAAAAAAClZ7nPAAAAAXRSTlMAQObYZgAAACJJREFUSMftxyEBAAAIA7D3T0sDsBQAtbmll4qZmV0PgFcD8QgJXHxT3vkAAAAASUVORK5CYII=");
}
</style>
<div id="spacer"></div>
<div id="mask-image-box"></div>
<script>
window.scrollTo(0, 100);
</script>