From 140463e8338c41071176e79d7fd8ea1d21dcdc97 Mon Sep 17 00:00:00 2001
From: Andreas Kling <kling@serenityos.org>
Date: Mon, 18 Jan 2021 17:32:34 +0100
Subject: [PATCH] LibWeb: Parse "display: flex" and create BlockBox layout
 nodes for them

I'm not 100% sure that BlockBox is the right layout node for flex
containers, but it's the most obviously fitting one we already have.
---
 Userland/Libraries/LibWeb/CSS/Identifiers.json    | 1 +
 Userland/Libraries/LibWeb/CSS/StyleProperties.cpp | 2 ++
 Userland/Libraries/LibWeb/CSS/StyleValue.h        | 1 +
 Userland/Libraries/LibWeb/DOM/Element.cpp         | 2 ++
 Userland/Libraries/LibWeb/Dump.cpp                | 4 ++++
 5 files changed, 10 insertions(+)

diff --git a/Userland/Libraries/LibWeb/CSS/Identifiers.json b/Userland/Libraries/LibWeb/CSS/Identifiers.json
index 5e412147fe..367c168b42 100644
--- a/Userland/Libraries/LibWeb/CSS/Identifiers.json
+++ b/Userland/Libraries/LibWeb/CSS/Identifiers.json
@@ -70,6 +70,7 @@
   "dotted",
   "double",
   "fixed",
+  "flex",
   "full-size-kana",
   "full-width",
   "groove",
diff --git a/Userland/Libraries/LibWeb/CSS/StyleProperties.cpp b/Userland/Libraries/LibWeb/CSS/StyleProperties.cpp
index 76b2834771..3cfe72d542 100644
--- a/Userland/Libraries/LibWeb/CSS/StyleProperties.cpp
+++ b/Userland/Libraries/LibWeb/CSS/StyleProperties.cpp
@@ -410,6 +410,8 @@ CSS::Display StyleProperties::display() const
         return CSS::Display::TableHeaderGroup;
     case CSS::ValueID::TableFooterGroup:
         return CSS::Display::TableFooterGroup;
+    case CSS::ValueID::Flex:
+        return CSS::Display::Flex;
     default:
         return CSS::Display::Block;
     }
diff --git a/Userland/Libraries/LibWeb/CSS/StyleValue.h b/Userland/Libraries/LibWeb/CSS/StyleValue.h
index 4b3d1d3ecc..7e7621431d 100644
--- a/Userland/Libraries/LibWeb/CSS/StyleValue.h
+++ b/Userland/Libraries/LibWeb/CSS/StyleValue.h
@@ -90,6 +90,7 @@ enum class Display {
     TableColumn,
     TableColumnGroup,
     TableCaption,
+    Flex,
 };
 
 enum class WhiteSpace {
diff --git a/Userland/Libraries/LibWeb/DOM/Element.cpp b/Userland/Libraries/LibWeb/DOM/Element.cpp
index 094d877475..f67ec40416 100644
--- a/Userland/Libraries/LibWeb/DOM/Element.cpp
+++ b/Userland/Libraries/LibWeb/DOM/Element.cpp
@@ -147,6 +147,8 @@ RefPtr<Layout::Node> Element::create_layout_node()
         inline_block->set_inline(true);
         return inline_block;
     }
+    if (display == CSS::Display::Flex)
+        return adopt(*new Layout::BlockBox(document(), this, move(style)));
     ASSERT_NOT_REACHED();
 }
 
diff --git a/Userland/Libraries/LibWeb/Dump.cpp b/Userland/Libraries/LibWeb/Dump.cpp
index f8f83ebc87..9124ad51e3 100644
--- a/Userland/Libraries/LibWeb/Dump.cpp
+++ b/Userland/Libraries/LibWeb/Dump.cpp
@@ -128,6 +128,7 @@ void dump_tree(StringBuilder& builder, const Layout::Node& layout_node, bool sho
     const char* inline_block_color_on = "";
     const char* line_box_color_on = "";
     const char* fragment_color_on = "";
+    const char* flex_color_on = "";
     const char* color_off = "";
 
     if (interactive) {
@@ -138,6 +139,7 @@ void dump_tree(StringBuilder& builder, const Layout::Node& layout_node, bool sho
         inline_block_color_on = "\033[36;1m";
         line_box_color_on = "\033[34;1m";
         fragment_color_on = "\033[35;1m";
+        flex_color_on = "\033[34;1m";
         color_off = "\033[0m";
     }
 
@@ -179,6 +181,8 @@ void dump_tree(StringBuilder& builder, const Layout::Node& layout_node, bool sho
             builder.appendff(" {}floating{}", floating_color_on, color_off);
         if (box.is_inline_block())
             builder.appendff(" {}inline-block{}", inline_block_color_on, color_off);
+        if (box.computed_values().display() == CSS::Display::Flex)
+            builder.appendff(" {}flex{}", flex_color_on, color_off);
 
         if (show_box_model) {
             // Dump the horizontal box properties