ladybird/Tests/LibWeb/Ref/expected/scrollable-box-with-nested-stacking-context-ref.html

<!DOCTYPE html>
<style>
    * {
        scrollbar-width: none;
    }

    #container {
        width: 300px;
        height: 500px;
        overflow: auto;
        position: relative;
        border: 2px solid black;
    }

    .content {
        background-color: lightblue;
        height: 100%;
    }

    .box {
        background-color: magenta;
        width: 100px;
        height: 50px;
        position: absolute;
        top: 0px;
        right: 50px;
    }
</style>
<div id="container">
    <div class="content">
        <div class="box"></div>
    </div>
</div>
Meta: Add DOCTYPEs to ref tests 2025-03-18 19:29:54 +01:00			`<!DOCTYPE html>`
LibWeb: Apply scroll boxes offsets after painting commands recording With this change, instead of applying scroll offsets during the recording of the painting command list, we do the following: 1. Collect all boxes with scrollable overflow into a PaintContext, each with an id and the total amount of scrolling offset accumulated from ancestor scrollable boxes. 2. During the recording phase assign a corresponding scroll_frame_id to each command that paints content within a scrollable box. 3. Before executing the recorded commands, translate each command that has a scroll_frame_id by the accumulated scroll offset. This approach has following advantages: - Implementing nested scrollables becomes much simpler, as the recording phase only requires the correct assignment of the nearest scrollable's scroll_frame_id, while the accumulated offset from ancestors is applied subsequently. - The recording of painting commands is not tied to a specific offset within scrollable boxes, which means in the future, it will be possible to update the scrolling offset and repaint without the need to re-record painting commands. 2023-12-29 06:10:32 +01:00			`<style>`
LibWeb: Implement scrollbar painting Introduces the rendering of scroll thumbs in vertical and horizontal directions. Currently, the thumbs are purely graphical elements that do not respond to mouse events. Nevertheless, this is beneficial as it makes it easier to identify elements that should respond to scrolling events. Painting of scrollbars uncovers numerous bugs in the calculation of scrollable overflow rectangles highlighting all the places where elements are made scrollable whey they shouldn't be. Positively, this issue might motivate us to pay more attention to this problem to eliminate unnecessary scrollbars. Currently, the scrollbar style is uniform across all platforms: a semi-transparent gray rectangle with rounded corners. Also here we add `scrollbar-width: none` to all existing scrolling ref-tests, so they keep working with this change. 2024-02-15 21:12:50 +01:00			`* {`
			`scrollbar-width: none;`
			`}`

LibWeb: Apply scroll boxes offsets after painting commands recording With this change, instead of applying scroll offsets during the recording of the painting command list, we do the following: 1. Collect all boxes with scrollable overflow into a PaintContext, each with an id and the total amount of scrolling offset accumulated from ancestor scrollable boxes. 2. During the recording phase assign a corresponding scroll_frame_id to each command that paints content within a scrollable box. 3. Before executing the recorded commands, translate each command that has a scroll_frame_id by the accumulated scroll offset. This approach has following advantages: - Implementing nested scrollables becomes much simpler, as the recording phase only requires the correct assignment of the nearest scrollable's scroll_frame_id, while the accumulated offset from ancestors is applied subsequently. - The recording of painting commands is not tied to a specific offset within scrollable boxes, which means in the future, it will be possible to update the scrolling offset and repaint without the need to re-record painting commands. 2023-12-29 06:10:32 +01:00			`#container {`
			`width: 300px;`
			`height: 500px;`
			`overflow: auto;`
			`position: relative;`
			`border: 2px solid black;`
			`}`

			`.content {`
			`background-color: lightblue;`
			`height: 100%;`
			`}`

			`.box {`
			`background-color: magenta;`
			`width: 100px;`
			`height: 50px;`
			`position: absolute;`
			`top: 0px;`
			`right: 50px;`
			`}`
			`</style>`
			`<div id="container">`
			`<div class="content">`
			`<div class="box"></div>`
			`</div>`
			`</div>`