mirrors/ladybird
0
0
Fork 0
mirror of https://github.com/LadybirdBrowser/ladybird.git synced 2025-07-29 04:09:13 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 9

LibWeb: Support inserting non-inline elements into inline elements

Browse source 
Our layout tree requires that all containers either have inline or
non-inline children. In order to support the layout of non-inline
elements inside inline elements, we need to do a bit of tree
restructuring. It effectively simulates temporarily closing all inline
nodes, appending the block element, and resumes appending to the last
open inline node.

The acid1.txt expectation needed to be updated to reflect the fact that
we now hoist its <p> elements out of the inline <form> they were in.
Visually, the before and after situations for acid1.html are identical.
This commit is contained in:
Jelle Raaijmakers 2025-01-15 16:37:30 +01:00 • committed by Jelle Raaijmakers
commit 336684bc5c
Notes: github-actions[bot] 2025-01-23 08:34:24 +00:00
18 changed files with 520 additions and 145 deletions
Download patch file Download diff file Expand all files Collapse all files

44
Tests/LibWeb/Ref/input/block-element-inside-inline-element.html Normal file
View file

@ -0,0 +1,44 @@
<!DOCTYPE html>
<html>
<head>
<link rel="match" href="../expected/block-element-inside-inline-element-ref.html" />
</head>
<body>
<!-- Block at end of inline element -->
<b>foo<div>bar</div></b>
<!-- Block at beginning of inline element -->
<hr>
<b><div>foo</div>bar</b>
<!-- Block in middle of inline element -->
<hr>
<b>foo<div>bar</div>baz</b>
<!-- Block in middle of two inline elements -->
<hr>
<b>foo<i>bar<div>baz</div>lorem</i>ipsum</b>
<!-- Multiple subsequent blocks -->
<hr>
<b>foo<div>bar</div><div>baz</div>lorem</b>
<!-- Multiple subsequent blocks with inline element between them -->
<hr>
<b>foo<div>bar</div><u>baz</u><div>lorem</div>ipsum</b>
<!-- Block in inline element following inline element -->
<hr>
<div>foo<b><div>bar</div></b></div>
<!-- Dynamic tree mutation test -->
<hr>
<div id="target1"></div>
<script>
document.querySelector('#target1').innerHTML = '<b>foo<div>bar</div>baz</b>';
</script>
<!-- Dynamic style update -->
<hr>
<span id="target2" style="font-weight: bold">foo <div>bar</div></span>
<script>
window.addEventListener('DOMContentLoaded', () => {
document.body.offsetWidth; // force layout
const target2 = document.querySelector('#target2');
target2.setAttribute('style', null);
});
</script>
</body>
</html>