ladybird/Tests/LibWeb/Text/input/hit_testing/inline-stacking-context.html

<!DOCTYPE html>
<style>
span {
    z-index: 10;
    background: orange;
    position: relative;
    opacity: 0.5;
    font-size: 100px;
}
div {
    z-index: 5;
    width: 100px;
    height: 100px;
    background: green;
    position: relative;
    top: -10px;
}
</style><span id="inline-stacking-context">hello</span><div></div>
<script src="../include.js"></script>
<script>
    test(() => {
        println(internals.hitTest(50, 50).node === document.getElementById("inline-stacking-context"));
    });
</script>
Meta: Add DOCTYPEs to most text tests 2025-03-18 19:28:35 +01:00			`<!DOCTYPE html>`
LibWeb: Allow inline nodes to establish a stacking context With this change, a stacking context can be established by any paintable, including inline paintables. The stacking context traversal is updated to remove the assumption that the stacking context root is paintable box. 2024-01-03 02:40:31 +01:00			`<style>`
			`span {`
			`z-index: 10;`
			`background: orange;`
			`position: relative;`
			`opacity: 0.5;`
			`font-size: 100px;`
			`}`
			`div {`
			`z-index: 5;`
			`width: 100px;`
			`height: 100px;`
			`background: green;`
			`position: relative;`
			`top: -10px;`
			`}`
			`</style><span id="inline-stacking-context">hello</span><div></div>`
			`<script src="../include.js"></script>`
			`<script>`
			`test(() => {`
LibWeb: Replace InlinePaintable with PaintableWithLines created per line InlinePaintable was an ad-hoc paintable type required to support the fragmentation of inline nodes across multiple lines. It existed because there was no way to associate multiple paintables with a single layout node. This resulted in a lot of duplicated code between PaintableBox and InlinePaintable. For example, most of the CSS properties like background, border, shadows, etc. and hit-testing are almost identical for both of them. However, the code had to be duplicated to account for the fact that InlinePaintable creates a box for each line. And we had quite many places that operate on paintables with a code like: ``` if (box.is_paintable_box()) { // do something } else (box.is_inline_paintable()) { // do exactly the same as for paintable box but using InlinePaintable } ``` This change replaces the usage of `InlinePaintable` with `PaintableWithLines` created for each line, which is now possible because we support having multiple paintables per layout node. By doing that, we remove lots of duplicated code and bring our implementation closer to the spec. 2024-10-13 21:29:47 +02:00			`println(internals.hitTest(50, 50).node === document.getElementById("inline-stacking-context"));`
LibWeb: Allow inline nodes to establish a stacking context With this change, a stacking context can be established by any paintable, including inline paintables. The stacking context traversal is updated to remove the assumption that the stacking context root is paintable box. 2024-01-03 02:40:31 +01:00			`});`
			`</script>`