ladybird/Tests/LibWeb/Ref/iframe-contains-scrollable-box.html
Aliaksandr Kalenik ea8d0304e9 LibWeb: Create clip and scroll frame trees separately for each navigable
While introducing clip and scroll frame trees, I made a mistake by
assuming that the paintable tree includes boxes from nested navigables.
Therefore, this comment in the code was incorrect, and clip/scroll
frames were simply not assigned for iframes:
// NOTE: We only need to refresh the scroll state for traversables
//       because they are responsible for tracking the state of all
//       nested navigables.

As a result, anything with "overflow: scroll" is currently not
scrollable inside an iframe

This change fixes that by ensuring clip and scroll frames are assigned
and refreshed for each navigable. To achieve this, I had to modify the
display list building process to record a separate display list for each
navigable. This is necessary because scroll frame ids are local to a
navigable, making it impossible to call
`DisplayList::apply_scroll_offsets()` on a display list that contains
ids from multiple navigables.
2024-08-10 10:38:12 +02:00

46 lines
1 KiB
HTML

<!DOCTYPE html>
<link rel="match" href="reference/iframe-contains-scrollable-box-ref.html" />
<style>
iframe {
width: 300px;
height: 200px;
border: 1px solid #ccc;
}
</style>
<iframe
srcdoc="
<!DOCTYPE html>
<style>
* {
scrollbar-width: none;
}
body {
margin: 0;
}
#scrollable-box {
width: 300px;
height: 200px;
overflow-y: scroll;
border: 1px solid #ccc;
box-sizing: border-box;
}
#scroll-space-filler {
height: 300px;
}
#box {
width: 50px;
height: 50px;
background-color: magenta;
}
</style>
<div id='scrollable-box'>
<div id='scroll-space-filler'></div>
<div id='box'></div>
<div id='scroll-space-filler'></div>
</div>
<script>
const scrollable = document.getElementById('scrollable-box');
scrollable.scrollTop = 300;
</script>
"
></iframe>