From e73ad78ba6097884003cafd626063551c390cb68 Mon Sep 17 00:00:00 2001
From: Andreas Kling <kling@serenityos.org>
Date: Tue, 5 May 2020 16:06:22 +0200
Subject: [PATCH] LibWeb: Add support for "display: inline-block"

This display type is implemented using a LayoutBlock that is_inline().
Basically it behaves like a block internally, and its children are laid
out in the normal block layout fashion. Externally however, it behaves
like an atomic inline-level box.

Layout of inline-block boxes happens in three stages:

1. The outer dimensions of the block are computed during the recursive
   normal layout pass. We skip positioning, but lay out children.

2. Later on, during line layout in the *containing block*, the inline
   block now contributes a linebox fragment. When linebox fragments are
   positioned, we learn the final position of the inline block. That's
   when we set the inline block's position.

3. We re-layout the inline block's children once again. This is done to
   make sure they end up in the right position. The layout tree doesn't
   use relative offsets, so after we position the inline block in (2),
   its children will not have its positions updated. Relayout moves
   all children of inline blocks to the right place.

This is a rather naive approach but it does get the basic behavior into
place so we can iterate on it. :^)
---
 Base/home/anon/www/inline-block.html    | 20 ++++++++++++++++++++
 Base/home/anon/www/welcome.html         |  1 +
 Libraries/LibWeb/DOM/Element.cpp        |  7 +++++--
 Libraries/LibWeb/Layout/LayoutBlock.cpp | 22 +++++++++++++++++++++-
 Libraries/LibWeb/Layout/LayoutBlock.h   |  2 ++
 Libraries/LibWeb/Layout/LayoutNode.h    |  2 ++
 6 files changed, 51 insertions(+), 3 deletions(-)
 create mode 100644 Base/home/anon/www/inline-block.html
diff --git a/Base/home/anon/www/inline-block.html b/Base/home/anon/www/inline-block.html
new file mode 100644
index 00000000000..72ecf0d0992
--- /dev/null
+++ b/Base/home/anon/www/inline-block.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <title>display: inline-block</title>
+<style>
+div {
+  display: inline-block;
+  width: 200px;
+  height: 100px;
+  margin: 20px;
+  border: 1px solid black;
+}
+</style>
+    </head>
+    <body>
+        <div>Hello friends! This <b>div</b> has <b>display: inline-block</b> :^)</div>
+        <div>Hello friends! That means its laid out like a block on the inside.</div>
+        <div>Hello friends! But it acts like an atomic inline box on the outside!</div>
+    </body>
+</html>
diff --git a/Base/home/anon/www/welcome.html b/Base/home/anon/www/welcome.html
index d9ed0eb87ae..2fffcb8f6cc 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="inline-block.html">display: inline-block; test</a></li>
         <li><a href="canvas-path-quadratic-curve.html">canvas path quadratic curve test</a></li>
         <li><a href="pngsuite_siz_png.html">pngsuite odd sizes test</a></li>
         <li><a href="pngsuite_bas_png.html">pngsuite basic formats test</a></li>
diff --git a/Libraries/LibWeb/DOM/Element.cpp b/Libraries/LibWeb/DOM/Element.cpp
index c439e5c7d66..85fbfc90dca 100644
--- a/Libraries/LibWeb/DOM/Element.cpp
+++ b/Libraries/LibWeb/DOM/Element.cpp
@@ -130,8 +130,11 @@ RefPtr<LayoutNode> Element::create_layout_node(const StyleProperties* parent_sty
         return adopt(*new LayoutTableRow(*this, move(style)));
     if (display == "table-cell")
         return adopt(*new LayoutTableCell(*this, move(style)));
-    if (display == "inline-block")
-        return adopt(*new LayoutBlock(this, move(style)));
+    if (display == "inline-block") {
+        auto inline_block = adopt(*new LayoutBlock(this, move(style)));
+        inline_block->set_inline(true);
+        return inline_block;
+    }
 
     dbg() << "Unknown display type: _" << display << "_";
     return adopt(*new LayoutInline(*this, move(style)));
diff --git a/Libraries/LibWeb/Layout/LayoutBlock.cpp b/Libraries/LibWeb/Layout/LayoutBlock.cpp
index 95b78887edd..ebe2abaaff6 100644
--- a/Libraries/LibWeb/Layout/LayoutBlock.cpp
+++ b/Libraries/LibWeb/Layout/LayoutBlock.cpp
@@ -56,7 +56,9 @@ LayoutNode& LayoutBlock::inline_wrapper()
 void LayoutBlock::layout()
 {
     compute_width();
-    compute_position();
+
+    if (!is_inline())
+        compute_position();
 
     if (children_are_inline())
         layout_inline_children();
@@ -168,6 +170,12 @@ void LayoutBlock::layout_inline_children()
             if (is<LayoutReplaced>(fragment.layout_node()))
                 const_cast<LayoutReplaced&>(to<LayoutReplaced>(fragment.layout_node())).set_rect(fragment.rect());
 
+            if (fragment.layout_node().is_inline_block()) {
+                auto& inline_block = const_cast<LayoutBlock&>(to<LayoutBlock>(fragment.layout_node()));
+                inline_block.set_rect(fragment.rect());
+                inline_block.layout();
+            }
+
             float final_line_box_width = 0;
             for (auto& fragment : line_box.fragments())
                 final_line_box_width += fragment.rect().width();
@@ -418,4 +426,16 @@ LineBox& LayoutBlock::add_line_box()
     return m_line_boxes.last();
 }
 
+void LayoutBlock::split_into_lines(LayoutBlock& container)
+{
+    ASSERT(is_inline());
+
+    layout();
+
+    auto* line_box = &container.ensure_last_line_box();
+    if (line_box->width() > 0 && line_box->width() + width() > container.width())
+        line_box = &container.add_line_box();
+    line_box->add_fragment(*this, 0, 0, width(), height());
+}
+
 }
diff --git a/Libraries/LibWeb/Layout/LayoutBlock.h b/Libraries/LibWeb/Layout/LayoutBlock.h
index 0eaab2520cb..269eb2b6aa0 100644
--- a/Libraries/LibWeb/Layout/LayoutBlock.h
+++ b/Libraries/LibWeb/Layout/LayoutBlock.h
@@ -63,6 +63,8 @@ public:
     template<typename Callback>
     void for_each_fragment(Callback) const;
 
+    virtual void split_into_lines(LayoutBlock& container) override;
+
 private:
     virtual bool is_block() const override { return true; }
 
diff --git a/Libraries/LibWeb/Layout/LayoutNode.h b/Libraries/LibWeb/Layout/LayoutNode.h
index 84f2f8bc148..a9d64d61f58 100644
--- a/Libraries/LibWeb/Layout/LayoutNode.h
+++ b/Libraries/LibWeb/Layout/LayoutNode.h
@@ -97,6 +97,8 @@ public:
     bool is_inline() const { return m_inline; }
     void set_inline(bool b) { m_inline = b; }
 
+    bool is_inline_block() const { return is_inline() && is_block(); }
+
     virtual void layout();
     virtual void render(RenderingContext&);
 
