LibWeb: Add a very naive Layout::FlexFormattingContext :^)

This is very dumb and only lays out its child boxes on a horizontal
line with their shrink-to-fit widths.

You have to start somewhere! :^)

Userland/Libraries/LibWeb/CMakeLists.txt

@@ -152,6 +152,7 @@ set(SOURCES
     Layout/ButtonBox.cpp
     Layout/CanvasBox.cpp
     Layout/CheckBox.cpp
+    Layout/FlexFormattingContext.cpp
     Layout/FormattingContext.cpp
     Layout/FrameBox.cpp
     Layout/ImageBox.cpp

Userland/Libraries/LibWeb/Layout/FlexFormattingContext.cpp

@@ -0,0 +1,62 @@
+/*
+ * Copyright (c) 2021, Andreas Kling <kling@serenityos.org>
+ * All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions are met:
+ *
+ * 1. Redistributions of source code must retain the above copyright notice, this
+ *    list of conditions and the following disclaimer.
+ *
+ * 2. Redistributions in binary form must reproduce the above copyright notice,
+ *    this list of conditions and the following disclaimer in the documentation
+ *    and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS"
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
+ * IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
+ * DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE
+ * FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL
+ * DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR
+ * SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER
+ * CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY,
+ * OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+ * OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+#include <LibWeb/Layout/BlockBox.h>
+#include <LibWeb/Layout/Box.h>
+#include <LibWeb/Layout/FlexFormattingContext.h>
+
+namespace Web::Layout {
+
+FlexFormattingContext::FlexFormattingContext(Box& context_box, FormattingContext* parent)
+    : FormattingContext(context_box, parent)
+{
+}
+
+FlexFormattingContext::~FlexFormattingContext()
+{
+}
+
+void FlexFormattingContext::run(Box& box, LayoutMode layout_mode)
+{
+    // FIXME: This is *extremely* naive and only supports flex items laid out on a single horizontal line.
+
+    // First, compute the width of each flex item.
+    box.for_each_child_of_type<Box>([&](Box& child_box) {
+        auto shrink_to_fit_result = calculate_shrink_to_fit_widths(child_box);
+        auto shrink_to_fit_width = min(max(shrink_to_fit_result.preferred_minimum_width, 0.0f), shrink_to_fit_result.preferred_width);
+        layout_inside(child_box, layout_mode);
+        child_box.set_width(shrink_to_fit_width);
+    });
+
+    // Then, place the items on a line.
+    float x = 0;
+    box.for_each_child_of_type<Box>([&](Box& child_box) {
+        child_box.set_offset(x, 0);
+        x += child_box.border_box_width();
+    });
+}
+
+}

Userland/Libraries/LibWeb/Layout/FlexFormattingContext.h

@@ -0,0 +1,41 @@
+/*
+ * Copyright (c) 2021, Andreas Kling <kling@serenityos.org>
+ * All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions are met:
+ *
+ * 1. Redistributions of source code must retain the above copyright notice, this
+ *    list of conditions and the following disclaimer.
+ *
+ * 2. Redistributions in binary form must reproduce the above copyright notice,
+ *    this list of conditions and the following disclaimer in the documentation
+ *    and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS"
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
+ * IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
+ * DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE
+ * FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL
+ * DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR
+ * SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER
+ * CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY,
+ * OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+ * OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+#pragma once
+
+#include <LibWeb/Layout/FormattingContext.h>
+
+namespace Web::Layout {
+
+class FlexFormattingContext final : public FormattingContext {
+public:
+    FlexFormattingContext(Box& containing_block, FormattingContext* parent);
+    ~FlexFormattingContext();
+
+    virtual void run(Box&, LayoutMode) override;
+};
+
+}

Userland/Libraries/LibWeb/Layout/FormattingContext.cpp

@@ -1,5 +1,5 @@
 /*
- * Copyright (c) 2020, Andreas Kling <kling@serenityos.org>
+ * Copyright (c) 2020-2021, Andreas Kling <kling@serenityos.org>
  * All rights reserved.
  *
  * Redistribution and use in source and binary forms, with or without
@@ -28,6 +28,7 @@
 #include <LibWeb/Layout/BlockBox.h>
 #include <LibWeb/Layout/BlockFormattingContext.h>
 #include <LibWeb/Layout/Box.h>
+#include <LibWeb/Layout/FlexFormattingContext.h>
 #include <LibWeb/Layout/FormattingContext.h>
 #include <LibWeb/Layout/InlineFormattingContext.h>
 #include <LibWeb/Layout/ReplacedBox.h>
@@ -60,12 +61,19 @@ bool FormattingContext::creates_block_formatting_context(const Box& box)
         return true;
     if (is<TableCellBox>(box))
         return true;
+
+    // FIXME: inline-flex as well
+    if (box.parent() && box.parent()->computed_values().display() == CSS::Display::Flex) {
+        // FIXME: Flex items (direct children of the element with display: flex or inline-flex) if they are neither flex nor grid nor table containers themselves.
+        if (box.computed_values().display() != CSS::Display::Flex)
+            return true;
+    }
+
     // FIXME: table-caption
     // FIXME: anonymous table cells
     // FIXME: Block elements where overflow has a value other than visible and clip.
     // FIXME: display: flow-root
     // FIXME: Elements with contain: layout, content, or paint.
-    // FIXME: flex
     // FIXME: grid
     // FIXME: multicol
     // FIXME: column-span: all
@@ -79,6 +87,12 @@ void FormattingContext::layout_inside(Box& box, LayoutMode layout_mode)
         context.run(box, layout_mode);
         return;
     }
+    if (box.computed_values().display() == CSS::Display::Flex) {
+        FlexFormattingContext context(box, this);
+        context.run(box, layout_mode);
+        return;
+    }
+
     if (is<TableBox>(box)) {
         TableFormattingContext context(box, this);
         context.run(box, layout_mode);