ladybird/Tests/LibWeb/Ref/input/iframe-contains-scrollable-box.html

<!DOCTYPE html>
<link rel="match" href="../expected/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>
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-08 14:17:54 +03:00			`<!DOCTYPE html>`
Tests/LibWeb: Restructure Ref and Screenshot test dirs to match others Now each test type has the same directories: - input - expected - data Also, tests can be in subdirectories within ./input. 2024-11-05 12:49:08 +00:00			`<link rel="match" href="../expected/iframe-contains-scrollable-box-ref.html" />`
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-08 14:17:54 +03:00			`<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>`