From d7a3b65a44541931a9330817f3090ba4dd36ed28 Mon Sep 17 00:00:00 2001
From: Tom <martinmotteditfalisse@gmail.com>
Date: Sun, 6 Aug 2023 15:59:40 +0200
Subject: [PATCH] LibWeb: Vertically align HTML Button content

---
 ...should-have-vertically-aligned-content.txt | 45 ++++++++++
 ...hould-have-vertically-aligned-content.html | 18 ++++
 .../Libraries/LibWeb/Layout/TreeBuilder.cpp   | 83 ++++++++++++++-----
 3 files changed, 125 insertions(+), 21 deletions(-)
 create mode 100644 Tests/LibWeb/Layout/expected/block-and-inline/button-should-have-vertically-aligned-content.txt
 create mode 100644 Tests/LibWeb/Layout/input/block-and-inline/button-should-have-vertically-aligned-content.html
diff --git a/Tests/LibWeb/Layout/expected/block-and-inline/button-should-have-vertically-aligned-content.txt b/Tests/LibWeb/Layout/expected/block-and-inline/button-should-have-vertically-aligned-content.txt
new file mode 100644
index 0000000000..2e1d2bbf25
--- /dev/null
+++ b/Tests/LibWeb/Layout/expected/block-and-inline/button-should-have-vertically-aligned-content.txt
@@ -0,0 +1,45 @@
+Viewport <#document> at (0,0) content-size 800x600 children: not-inline
+  BlockContainer <html> at (0,0) content-size 800x600 [BFC] children: not-inline
+    BlockContainer <body> at (8,8) content-size 784x200 children: inline
+      line 0 width: 76.6875, height: 200, bottom: 200, baseline: 200
+        frag 0 from BlockContainer start: 0, length: 0, rect: [22,19 48.6875x178]
+      TextNode <#text>
+      BlockContainer <button.button.border-black> at (22,19) content-size 48.6875x178 inline-block [BFC] children: not-inline
+        BlockContainer <(anonymous)> at (22,19) content-size 48.6875x0 children: inline
+          TextNode <#text>
+        BlockContainer <(anonymous)> at (22,19) content-size 48.6875x0 children: inline
+          TextNode <#text>
+        BlockContainer <(anonymous)> at (22,19) content-size 48.6875x0 children: inline
+          TextNode <#text>
+        TableWrapper <(anonymous)> at (22,19) content-size 48.6875x178 [BFC] children: not-inline
+          BlockContainer <(anonymous)> at (22,19) content-size 48.6875x178 table-box [TFC] children: not-inline
+            Box <(anonymous)> at (22,19) content-size 48.6875x178 table-row children: not-inline
+              BlockContainer <(anonymous)> at (22,29.265625) content-size 48.6875x157.46875 table-cell [BFC] children: not-inline
+                BlockContainer <(anonymous)> at (22,29.265625) content-size 48.6875x157.46875 inline-block [BFC] children: not-inline
+                  BlockContainer <div.border-black> at (32,39.265625) content-size 28.6875x17.46875 children: inline
+                    line 0 width: 28.6875, height: 17.46875, bottom: 17.46875, baseline: 13.53125
+                      frag 0 from TextNode start: 1, length: 3, rect: [32,39.265625 28.6875x17.46875]
+                        "one"
+                    TextNode <#text>
+                  BlockContainer <div.border-black> at (32,76.734375) content-size 28.6875x100 children: inline
+                    line 0 width: 28.4375, height: 17.46875, bottom: 17.46875, baseline: 13.53125
+                      frag 0 from TextNode start: 1, length: 3, rect: [32,76.734375 28.4375x17.46875]
+                        "two"
+                    TextNode <#text>
+
+PaintableWithLines (Viewport<#document>) [0,0 800x600]
+  PaintableWithLines (BlockContainer<HTML>) [0,0 800x600]
+    PaintableWithLines (BlockContainer<BODY>) [8,8 784x200]
+      PaintableWithLines (BlockContainer<BUTTON>.button.border-black) [8,8 76.6875x200]
+        PaintableWithLines (BlockContainer(anonymous)) [22,19 48.6875x0]
+        PaintableWithLines (BlockContainer(anonymous)) [22,19 48.6875x0]
+        PaintableWithLines (BlockContainer(anonymous)) [22,19 48.6875x0]
+        PaintableWithLines (TableWrapper(anonymous)) [22,19 48.6875x178]
+          PaintableWithLines (BlockContainer(anonymous)) [22,19 48.6875x178]
+            PaintableBox (Box(anonymous)) [22,19 48.6875x178]
+              PaintableWithLines (BlockContainer(anonymous)) [22,19 48.6875x178]
+                PaintableWithLines (BlockContainer(anonymous)) [22,29.265625 48.6875x157.46875]
+                  PaintableWithLines (BlockContainer<DIV>.border-black) [22,29.265625 48.6875x37.46875]
+                    TextPaintable (TextNode<#text>)
+                  PaintableWithLines (BlockContainer<DIV>.border-black) [22,66.734375 48.6875x120]
+                    TextPaintable (TextNode<#text>)
diff --git a/Tests/LibWeb/Layout/input/block-and-inline/button-should-have-vertically-aligned-content.html b/Tests/LibWeb/Layout/input/block-and-inline/button-should-have-vertically-aligned-content.html
new file mode 100644
index 0000000000..009a3327e1
--- /dev/null
+++ b/Tests/LibWeb/Layout/input/block-and-inline/button-should-have-vertically-aligned-content.html
@@ -0,0 +1,18 @@
+<style type="text/css">
+    .border-black {
+        border: 10px solid black;
+    }
+
+    button {
+        height: 200px;
+    }
+</style>
+
+<body>
+    <button class="button border-black">
+        <div class="border-black">
+            one
+        </div>
+        <div class="border-black" style="height: 100px">
+            two
+        </div>
diff --git a/Userland/Libraries/LibWeb/Layout/TreeBuilder.cpp b/Userland/Libraries/LibWeb/Layout/TreeBuilder.cpp
index 1590567534..8af309adf9 100644
--- a/Userland/Libraries/LibWeb/Layout/TreeBuilder.cpp
+++ b/Userland/Libraries/LibWeb/Layout/TreeBuilder.cpp
@@ -18,6 +18,7 @@
 #include <LibWeb/DOM/ParentNode.h>
 #include <LibWeb/DOM/ShadowRoot.h>
 #include <LibWeb/Dump.h>
+#include <LibWeb/HTML/HTMLButtonElement.h>
 #include <LibWeb/HTML/HTMLInputElement.h>
 #include <LibWeb/HTML/HTMLProgressElement.h>
 #include <LibWeb/Layout/ListItemBox.h>
@@ -219,6 +220,27 @@ ErrorOr<void> TreeBuilder::create_pseudo_element_if_needed(DOM::Element& element
     return {};
 }
 
+static bool is_ignorable_whitespace(Layout::Node const& node)
+{
+    if (node.is_text_node() && static_cast<TextNode const&>(node).text_for_rendering().is_whitespace())
+        return true;
+
+    if (node.is_anonymous() && node.is_block_container() && static_cast<BlockContainer const&>(node).children_are_inline()) {
+        bool contains_only_white_space = true;
+        node.for_each_in_inclusive_subtree_of_type<TextNode>([&contains_only_white_space](auto& text_node) {
+            if (!text_node.text_for_rendering().is_whitespace()) {
+                contains_only_white_space = false;
+                return IterationDecision::Break;
+            }
+            return IterationDecision::Continue;
+        });
+        if (contains_only_white_space)
+            return true;
+    }
+
+    return false;
+}
+
 ErrorOr<void> TreeBuilder::create_layout_tree(DOM::Node& dom_node, TreeBuilder::Context& context)
 {
     JS::GCPtr<Layout::Node> layout_node;
@@ -350,6 +372,46 @@ ErrorOr<void> TreeBuilder::create_layout_tree(DOM::Node& dom_node, TreeBuilder::
         }
     }
 
+    // https://html.spec.whatwg.org/multipage/rendering.html#button-layout
+    // If the element is an input element, or if it is a button element and its computed value for
+    // 'display' is not 'inline-grid', 'grid', 'inline-flex', or 'flex', then the element's box has
+    // a child anonymous button content box with the following behaviors:
+    if (is<HTML::HTMLButtonElement>(dom_node) && !display.is_grid_inside() && !display.is_flex_inside()) {
+        auto& parent = *dom_node.layout_node();
+
+        // If the box does not overflow in the vertical axis, then it is centered vertically.
+        auto table_computed_values = CSS::ComputedValues();
+        static_cast<CSS::MutableComputedValues&>(table_computed_values).set_display(CSS::Display::from_short(CSS::Display::Short::Table));
+        static_cast<CSS::MutableComputedValues&>(table_computed_values).set_height(CSS::Size::make_percentage(CSS::Percentage(100)));
+
+        auto cell_computed_values = CSS::ComputedValues();
+        static_cast<CSS::MutableComputedValues&>(cell_computed_values).set_display(CSS::Display { CSS::Display::Internal::TableCell });
+        static_cast<CSS::MutableComputedValues&>(cell_computed_values).set_vertical_align(CSS::VerticalAlign::Middle);
+
+        auto flow_root_computed_values = CSS::ComputedValues();
+        static_cast<CSS::MutableComputedValues&>(flow_root_computed_values).set_width(CSS::Size::make_percentage(CSS::Percentage(100)));
+        static_cast<CSS::MutableComputedValues&>(flow_root_computed_values).set_display(CSS::Display::from_short(CSS::Display::Short::InlineBlock));
+
+        auto table_wrapper = parent.heap().template allocate_without_realm<BlockContainer>(parent.document(), nullptr, move(table_computed_values));
+        auto cell_wrapper = parent.heap().template allocate_without_realm<BlockContainer>(parent.document(), nullptr, move(cell_computed_values));
+        auto flow_root_wrapper = parent.heap().template allocate_without_realm<BlockContainer>(parent.document(), nullptr, move(flow_root_computed_values));
+
+        Vector<JS::Handle<Node>> sequence;
+        for (auto child = parent.first_child(); child; child = child->next_sibling()) {
+            if (!is_ignorable_whitespace(*child))
+                sequence.append(*child);
+        }
+
+        for (auto& node : sequence) {
+            parent.remove_child(*node);
+            flow_root_wrapper->append_child(*node);
+        }
+
+        cell_wrapper->append_child(*flow_root_wrapper);
+        table_wrapper->append_child(*cell_wrapper);
+        parent.append_child(*table_wrapper);
+    }
+
     return {};
 }
 
@@ -479,27 +541,6 @@ static bool is_not_table_cell(Node const& node)
     return !is_table_cell(node);
 }
 
-static bool is_ignorable_whitespace(Layout::Node const& node)
-{
-    if (node.is_text_node() && static_cast<TextNode const&>(node).text_for_rendering().is_whitespace())
-        return true;
-
-    if (node.is_anonymous() && node.is_block_container() && static_cast<BlockContainer const&>(node).children_are_inline()) {
-        bool contains_only_white_space = true;
-        node.for_each_in_inclusive_subtree_of_type<TextNode>([&contains_only_white_space](auto& text_node) {
-            if (!text_node.text_for_rendering().is_whitespace()) {
-                contains_only_white_space = false;
-                return IterationDecision::Break;
-            }
-            return IterationDecision::Continue;
-        });
-        if (contains_only_white_space)
-            return true;
-    }
-
-    return false;
-}
-
 template<typename Matcher, typename Callback>
 static void for_each_sequence_of_consecutive_children_matching(NodeWithStyle& parent, Matcher matcher, Callback callback)
 {
