mirror of
https://github.com/LadybirdBrowser/ladybird.git
synced 2025-06-11 02:13:56 +09:00
LibWeb: Ensure scroll offset is applied to mask-images
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:
parent
ed65d5b342
commit
164afdcc59
Notes:
github-actions[bot]
2025-05-29 20:03:16 +00:00
Author: https://github.com/InvalidUsernameException
Commit: 164afdcc59
Pull-request: https://github.com/LadybirdBrowser/ladybird/pull/4916
Reviewed-by: https://github.com/gmta ✅
Reviewed-by: https://github.com/kalenikaliaksandr ✅
4 changed files with 31 additions and 2 deletions
|
@ -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 {});
|
||||
}
|
||||
|
||||
|
|
|
@ -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();
|
||||
|
|
|
@ -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
18
Tests/LibWeb/Ref/input/mask-image-with-scroll-offset.html
Normal 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>
|
Loading…
Add table
Add a link
Reference in a new issue