LibWeb: Implement flex reverse layouts

This builds on the work done by implementing the flex order CSS
property and implements flex reverse layouts by just reversing
the order and the items within each order bucket.

3 files changed, 22 insertions, 6 deletions

diff --git a/Base/res/html/misc/flex-order.html b/Base/res/html/misc/flex-order.html
index c0f328934e..e065aa55b2 100644
--- a/Base/res/html/misc/flex-order.html
+++ b/Base/res/html/misc/flex-order.html
@@ -76,6 +76,12 @@
     <div class="box" style="order: 1;flex: 80% 0 1;">2</div>
     <div class="box" style="flex: 80% 0 0;">3</div>
 </div>
+<p>1/1/<> - reverse</p>
+<div class="my-container" style="flex-direction: row-reverse; width: 500px;">
+    <div class="box" style="order: 1;flex: 80% 0 4;">1</div>
+    <div class="box" style="order: 1;flex: 80% 0 1;">2</div>
+    <div class="box" style="flex: 80% 0 0;">3</div>
+</div>
 <p>3/-1/-2</p>
 <div class="my-container" style="width: 500px;">
     <div class="box" style="order: 3;flex: 80% 0 4;">1</div>
diff --git a/Userland/Libraries/LibWeb/Layout/FlexFormattingContext.cpp b/Userland/Libraries/LibWeb/Layout/FlexFormattingContext.cpp
index 74ce0b9afc..de64b3d631 100644
--- a/Userland/Libraries/LibWeb/Layout/FlexFormattingContext.cpp
+++ b/Userland/Libraries/LibWeb/Layout/FlexFormattingContext.cpp
@@ -48,8 +48,6 @@ void FlexFormattingContext::run(Box const& run_box, LayoutMode)
 
     // This implements https://www.w3.org/TR/css-flexbox-1/#layout-algorithm
 
-    // FIXME: Implement reverse and ordering.
-
     // 1. Generate anonymous flex items
     generate_anonymous_flex_items();
 
@@ -203,13 +201,25 @@ void FlexFormattingContext::generate_anonymous_flex_items()
     });
 
     auto keys = order_item_bucket.keys();
-    quick_sort(keys, [](auto& a, auto& b) { return a < b; });
+
+    if (is_direction_reverse()) {
+        quick_sort(keys, [](auto& a, auto& b) { return a > b; });
+    } else {
+        quick_sort(keys, [](auto& a, auto& b) { return a < b; });
+    }
 
     for (auto key : keys) {
         auto order_bucket = order_item_bucket.get(key);
         if (order_bucket.has_value()) {
-            for (auto flex_item : order_bucket.value()) {
-                m_flex_items.append(move(flex_item));
+            auto items = order_bucket.value();
+            if (is_direction_reverse()) {
+                for (auto flex_item : items.in_reverse()) {
+                    m_flex_items.append(move(flex_item));
+                }
+            } else {
+                for (auto flex_item : items) {
+                    m_flex_items.append(move(flex_item));
+                }
             }
         }
     }
diff --git a/Userland/Libraries/LibWeb/Layout/FlexFormattingContext.h b/Userland/Libraries/LibWeb/Layout/FlexFormattingContext.h
index d6d50bb2a1..71b28718be 100644
--- a/Userland/Libraries/LibWeb/Layout/FlexFormattingContext.h
+++ b/Userland/Libraries/LibWeb/Layout/FlexFormattingContext.h
@@ -118,7 +118,7 @@ private:
 
     bool is_row_layout() const { return m_flex_direction == CSS::FlexDirection::Row || m_flex_direction == CSS::FlexDirection::RowReverse; }
     bool is_single_line() const { return flex_container().computed_values().flex_wrap() == CSS::FlexWrap::Nowrap; }
-
+    bool is_direction_reverse() const { return m_flex_direction == CSS::FlexDirection::ColumnReverse || m_flex_direction == CSS::FlexDirection::RowReverse; }
     void populate_specified_margins(FlexItem&, CSS::FlexDirection) const;
 
     FormattingState::NodeState& m_flex_container_state;