layout: correct `position: absolute' (FINALLY)

This fixes a) resolution of `position: absolute' percentage sizes with
an indefinite containing block size (wait what?), and b) positioning of
`position: absolute' inner block boxes inside inline boxes.

a) is possible because `position: absolute' does not affect its
parent's layout. I would love to have a long talk with whoever
thought that specifying it like this is a good idea. You know, just
because you can... anyways, shockingly enough, this was still the more
straightforward part.

b) forced me to change the box tree to allow blocks inside inlines,
which is ugly, but no big deal. Two questions then remained:
1. *where* to put such boxes, and
2. *how large* these boxes should be; this is hardly obvious since
an inline box does not have an unambiguous width or height.

Of course the CSS standard, never too eager to fulfill my basic
expectations, says nothing about this (other than "it's not defined").
So I first tried to reverse engineer what Gecko does, and after hours of
pain and suffering I realized... that it's broken LOL
https://bugzilla.mozilla.org/show_bug.cgi?id=489100

Therefore I ended up (partially) copying Blink behavior, which, while
equally nonsensical as Gecko (and of course divergent), at least does
not change after a partial layout. Thank you LayoutNG for saving my
sanity.

As for the practical benefits: this fixes the bug where Invidious
[video] tags wouldn't show up. Hey, it's something!

Still left to-do: `position: absolute' for `display: inline' boxes.

8 files changed, 103 insertions, 0 deletions

diff --git a/test/layout/absolute-percentage-width-of-container.color.expected b/test/layout/absolute-percentage-width-of-container.color.expected
new file mode 100644
index 00000000..34941763
--- /dev/null
+++ b/test/layout/absolute-percentage-width-of-container.color.expected
@@ -0,0 +1,3 @@
+test test
+test     
+x
diff --git a/test/layout/absolute-percentage-width-of-container.html b/test/layout/absolute-percentage-width-of-container.html
new file mode 100644
index 00000000..e1ffda7d
--- /dev/null
+++ b/test/layout/absolute-percentage-width-of-container.html
@@ -0,0 +1,10 @@
+<div style="position: relative; display: inline-block">
+<div style="position: absolute; width: 100%; background: red; margin-top: 1em">
+test
+</div>
+test test
+<br>
+</div>
+<br>
+<br>
+x
diff --git a/test/layout/inline-block-no-margin-collapsing.expected b/test/layout/inline-block-no-margin-collapsing.expected
new file mode 100644
index 00000000..f6b17a14
--- /dev/null
+++ b/test/layout/inline-block-no-margin-collapsing.expected
@@ -0,0 +1,3 @@
+
+
+test
diff --git a/test/layout/inline-block-no-margin-collapsing.html b/test/layout/inline-block-no-margin-collapsing.html
new file mode 100644
index 00000000..de41d5a1
--- /dev/null
+++ b/test/layout/inline-block-no-margin-collapsing.html
@@ -0,0 +1,3 @@
+<div style="display: inline-block; margin-top: 1em">
+<div style="margin-top: 1em">
+test
diff --git a/test/layout/position-absolute-block-in-inline.color.expected b/test/layout/position-absolute-block-in-inline.color.expected
new file mode 100644
index 00000000..226cd8eb
--- /dev/null
+++ b/test/layout/position-absolute-block-in-inline.color.expected
@@ -0,0 +1,6 @@
+absolute 1
+line twoabsolute 2
+absolute 3
+line four
+absolute 4
+
diff --git a/test/layout/position-absolute-block-in-inline.html b/test/layout/position-absolute-block-in-inline.html
new file mode 100644
index 00000000..05298fc7
--- /dev/null
+++ b/test/layout/position-absolute-block-in-inline.html
@@ -0,0 +1,35 @@
+<!-- absolute, display: inline-block -->
+<div style="position: relative">
+<br>
+<div>
+line
+<div style="display: inline-block; position: absolute; top: 0; left: 0; background-color: red">
+absolute 1
+</div>
+<!-- TODO I don't really understand why, but this should overprint
+"two", not the other way around.
+<div style="display: inline-block; position: absolute; background-color: red">
+absolute 2
+</div>
+-->
+two
+<div style="display: inline-block; position: absolute; background-color: red">
+absolute 2
+</div>
+</div>
+</div>
+
+<!-- absolute, display: block -->
+<div style="position: relative">
+<br>
+<div>
+line
+<div style="position: absolute; top: 0; left: 0; background-color: blue">
+absolute 3
+</div>
+four
+<div style="display: block; position: absolute; background-color: yellow">
+absolute 4
+</div>
+</div>
+</div>
diff --git a/test/layout/position-absolute-with-relative-inline-parent-offset.color.expected b/test/layout/position-absolute-with-relative-inline-parent-offset.color.expected
new file mode 100644
index 00000000..65d90717
--- /dev/null
+++ b/test/layout/position-absolute-with-relative-inline-parent-offset.color.expected
@@ -0,0 +1,19 @@
+
+Note: the absolute box is sized differently than boxes in other engines, because
+the CSS standard explicitly specifies this as UB and I *really* don't want to
+make this even more complex.
+
+I don't care, but feel free to fix it ;)
+
+(Also, position: absolute should overprint inline boxes after it, but it
+doesn't. This needs further investigation.)
+
+
+
+test test test testadsfasdf
+test test 2t 2ttest
+asdfasd fasd    
+                
+
+
+test 
diff --git a/test/layout/position-absolute-with-relative-inline-parent-offset.html b/test/layout/position-absolute-with-relative-inline-parent-offset.html
new file mode 100644
index 00000000..c86d844c
--- /dev/null
+++ b/test/layout/position-absolute-with-relative-inline-parent-offset.html
@@ -0,0 +1,24 @@
+<!-- don't ask -->
+<p>
+Note: the absolute box is sized differently than boxes in other engines,
+because the CSS standard explicitly specifies this as UB and I *really*
+don't want to make this even more complex.
+<p>
+I don't care, but feel free to fix it ;)
+<p>
+(Also, position: absolute should overprint inline boxes after it, but it
+doesn't. This needs further investigation.)
+</p>
+<br>
+<br>test test <span style="position:relative">test test<div style="display: inline-block">adsfasdf</div><BR>
+test test test test
+<div>
+<div style="display: block; position: absolute; top: 0em; left: 0; height: 100%; background: red; width: 3em">2t 2t 2</div>
+asdfasd fasd
+</div>
+</div>
+<br>
+<br>
+<br>
+test
+</span>