LibWeb: Implement very basic margin collapsing

We now collapse a block's top margin with the previous sibling's
bottom margin so that the larger margin wins.

3 files changed, 25 insertions, 1 deletions

diff --git a/Base/home/anon/www/margin-collapse-1.html b/Base/home/anon/www/margin-collapse-1.html
new file mode 100644
index 0000000000..a71abe391e
--- /dev/null
+++ b/Base/home/anon/www/margin-collapse-1.html
@@ -0,0 +1,16 @@
+<style>
+#foo {
+    border: 1px solid red;
+    margin: 25px;
+    width: 100px;
+    height: 100px;
+}
+#bar {
+    border: 1px solid green;
+    margin: 25px;
+    width: 100px;
+    height: 100px;
+}
+</style>
+<div id=foo>foo</div>
+<div id=bar>bar</div>
diff --git a/Base/home/anon/www/welcome.html b/Base/home/anon/www/welcome.html
index 19306ae8cd..ed0c2e14b1 100644
--- a/Base/home/anon/www/welcome.html
+++ b/Base/home/anon/www/welcome.html
@@ -28,6 +28,7 @@ span#ua {
     <p>Your user agent is: <b><span id="ua"></span></b></p>
     <p>Some small test pages:</p>
     <ul>
+        <li><a href="margin-collapse-1.html">margin collapsing 1</a></li>
         <li><a href="position-absolute-from-edges.html">position: absolute, offset from edges</a></li>
         <li><a href="iframe.html">iframe</a></li>
         <li><a href="many-buggies.html">many buggies</a></li>
diff --git a/Libraries/LibWeb/Layout/LayoutBlock.cpp b/Libraries/LibWeb/Layout/LayoutBlock.cpp
index 19318a9551..114a4df77d 100644
--- a/Libraries/LibWeb/Layout/LayoutBlock.cpp
+++ b/Libraries/LibWeb/Layout/LayoutBlock.cpp
@@ -477,7 +477,14 @@ void LayoutBlock::compute_position()
     if (relevant_sibling) {
         auto& previous_sibling_style = relevant_sibling->box_model();
         position_y += relevant_sibling->effective_offset().y() + relevant_sibling->height();
-        position_y += previous_sibling_style.margin_box(*this).bottom;
+
+        // Collapse top margin with bottom margin of previous sibling if necessary
+        float previous_sibling_margin_bottom = previous_sibling_style.margin().bottom.to_px(*relevant_sibling);
+        float my_margin_top = box_model().margin().top.to_px(*this);
+        if (previous_sibling_margin_bottom > my_margin_top) {
+            // Sibling's margin is larger than mine, adjust so we use sibling's.
+            position_y += previous_sibling_margin_bottom - my_margin_top;
+        }
     }
 
     set_offset({ position_x, position_y });