mirror of
https://github.com/LadybirdBrowser/ladybird.git
synced 2025-10-04 07:09:41 +00:00
336684bc5c
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.
44 lines
1.4 KiB
HTML
44 lines
1.4 KiB
HTML
<!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>
|