ladybird/Tests/LibWeb/Ref/input/mask-image-with-scroll-offset.html

<!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/mask-image-100x200.png");
}
</style>
<div id="spacer"></div>
<div id="mask-image-box"></div>
<script>
    window.scrollTo(0, 100);
</script>
<!-- FIXME: Workaround to ensure CSS mask-image is loaded before taking screenshot: https://github.com/LadybirdBrowser/ladybird/issues/3448 -->
<img style="display: none" src="../data/mask-image-100x200.png">
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 2025-05-29 19:57:21 +02:00			`<!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;`
Tests: Fix flaky test This flake was introduced in 164afdcc59af4e314fb8e2c02a71af44353f043d. 2025-05-30 01:34:58 +02:00			`mask-image: url("../data/mask-image-100x200.png");`
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 2025-05-29 19:57:21 +02:00			`}`
			`</style>`
			`<div id="spacer"></div>`
			`<div id="mask-image-box"></div>`
			`<script>`
			`window.scrollTo(0, 100);`
			`</script>`
Tests: Fix flaky test This flake was introduced in 164afdcc59af4e314fb8e2c02a71af44353f043d. 2025-05-30 01:34:58 +02:00			`<!-- FIXME: Workaround to ensure CSS mask-image is loaded before taking screenshot: https://github.com/LadybirdBrowser/ladybird/issues/3448 -->`
			`<img style="display: none" src="../data/mask-image-100x200.png">`