LibWeb: Support justify-content: space-evenly in flex layouts

Aligns the cookie banner correctly on https://twitter.com/ :^)
awesomekling · Jul 5, 2023 · fb2f51a · fb2f51a
1 parent 1cb23d4
commit fb2f51a
Show file tree

Hide file tree

Showing 7 changed files with 803 additions and 87 deletions.
diff --git a/Tests/LibWeb/Layout/expected/flex/abspos-flex-child-static-position-with-justify-content.txt b/Tests/LibWeb/Layout/expected/flex/abspos-flex-child-static-position-with-justify-content.txt
diff --git a/Tests/LibWeb/Layout/expected/flex/justify-content-1.txt b/Tests/LibWeb/Layout/expected/flex/justify-content-1.txt
diff --git a/Tests/LibWeb/Layout/input/flex/abspos-flex-child-static-position-with-justify-content.html b/Tests/LibWeb/Layout/input/flex/abspos-flex-child-static-position-with-justify-content.html
@@ -21,6 +21,7 @@
       .center { justify-content: center; }
       .space-around { justify-content: space-around; }
       .space-between { justify-content: space-between; }
+      .space-evenly { justify-content: space-evenly; }
 
       .row { flex-direction: row; }
       .row.reverse { flex-direction: row-reverse; }
@@ -38,24 +39,28 @@
 <div class="row outer center"><div>center</div></div>
 <div class="row outer space-around"><div>space-around</div></div>
 <div class="row outer space-between"><div>space-between</div></div>
+<div class="row outer space-evenly"><div>space-evenly</div></div>
 <div class="row reverse outer start"><div>start</div></div>
 <div class="row reverse outer flex-start"><div>flex-start</div></div>
 <div class="row reverse outer end"><div>end</div></div>
 <div class="row reverse outer flex-end"><div>flex-end</div></div>
 <div class="row reverse outer center"><div>center</div></div>
 <div class="row reverse outer space-around"><div>space-around</div></div>
 <div class="row reverse outer space-between"><div>space-between</div></div>
+<div class="row reverse outer space-evenly"><div>space-evenly</div></div>
 <div class="column outer start"><div>start</div></div>
 <div class="column outer flex-start"><div>flex-start</div></div>
 <div class="column outer end"><div>end</div></div>
 <div class="column outer flex-end"><div>flex-end</div></div>
 <div class="column outer center"><div>center</div></div>
 <div class="column outer space-around"><div>space-around</div></div>
 <div class="column outer space-between"><div>space-between</div></div>
+<div class="column outer space-evenly"><div>space-evenly</div></div>
 <div class="column reverse outer start"><div>start</div></div>
 <div class="column reverse outer flex-start"><div>flex-start</div></div>
 <div class="column reverse outer end"><div>end</div></div>
 <div class="column reverse outer flex-end"><div>flex-end</div></div>
 <div class="column reverse outer center"><div>center</div></div>
 <div class="column reverse outer space-around"><div>space-around</div></div>
 <div class="column reverse outer space-between"><div>space-between</div></div>
+<div class="column reverse outer space-evenly"><div>space-evenly</div></div>
diff --git a/Tests/LibWeb/Layout/input/flex/justify-content-1.html b/Tests/LibWeb/Layout/input/flex/justify-content-1.html
@@ -0,0 +1,71 @@
+<!DOCTYPE html><style>
+* {
+    border: 1px solid black !important;
+}
+      .outer {
+        display: flex;
+        background: wheat;
+      }
+      .outer.row {
+        width: 300px;
+        height: 60px;
+      }
+      .outer.column {
+        width: 60px;
+        height: 300px;
+      }
+      .outer > div {
+        width: 50px;
+        height: 50px;
+        background: orange;
+      }
+      .flex-start { justify-content: flex-start; }
+      .flex-end { justify-content: flex-end; }
+      .start { justify-content: start; }
+      .end { justify-content: end; }
+      .center { justify-content: center; }
+      .space-around { justify-content: space-around; }
+      .space-between { justify-content: space-between; }
+      .space-evenly { justify-content: space-evenly; }
+
+      .row { flex-direction: row; }
+      .row.reverse { flex-direction: row-reverse; }
+      .column { flex-direction: column; }
+      .column.reverse { flex-direction: column-reverse; }
+      .reverse > div {
+          background: magenta;
+      }
+</style>
+<body>
+<div class="row outer start"><div>start</div><div>a</div><div>b</div></div>
+<div class="row outer flex-start"><div>flex-start</div><div>a</div><div>b</div></div>
+<div class="row outer end"><div>end</div><div>a</div><div>b</div></div>
+<div class="row outer flex-end"><div>flex-end</div><div>a</div><div>b</div></div>
+<div class="row outer center"><div>center</div><div>a</div><div>b</div></div>
+<div class="row outer space-around"><div>space-around</div><div>a</div><div>b</div></div>
+<div class="row outer space-between"><div>space-between</div><div>a</div><div>b</div></div>
+<div class="row outer space-evenly"><div>space-evenly</div><div>a</div><div>b</div></div>
+<div class="row reverse outer start"><div>start</div><div>a</div><div>b</div></div>
+<div class="row reverse outer flex-start"><div>flex-start</div><div>a</div><div>b</div></div>
+<div class="row reverse outer end"><div>end</div><div>a</div><div>b</div></div>
+<div class="row reverse outer flex-end"><div>flex-end</div><div>a</div><div>b</div></div>
+<div class="row reverse outer center"><div>center</div><div>a</div><div>b</div></div>
+<div class="row reverse outer space-around"><div>space-around</div><div>a</div><div>b</div></div>
+<div class="row reverse outer space-between"><div>space-between</div><div>a</div><div>b</div></div>
+<div class="row reverse outer space-evenly"><div>space-evenly</div><div>a</div><div>b</div></div>
+<div class="column outer start"><div>start</div><div>a</div><div>b</div></div>
+<div class="column outer flex-start"><div>flex-start</div><div>a</div><div>b</div></div>
+<div class="column outer end"><div>end</div><div>a</div><div>b</div></div>
+<div class="column outer flex-end"><div>flex-end</div><div>a</div><div>b</div></div>
+<div class="column outer center"><div>center</div><div>a</div><div>b</div></div>
+<div class="column outer space-around"><div>space-around</div><div>a</div><div>b</div></div>
+<div class="column outer space-between"><div>space-between</div><div>a</div><div>b</div></div>
+<div class="column outer space-evenly"><div>space-evenly</div><div>a</div><div>b</div></div>
+<div class="column reverse outer start"><div>start</div><div>a</div><div>b</div></div>
+<div class="column reverse outer flex-start"><div>flex-start</div><div>a</div><div>b</div></div>
+<div class="column reverse outer end"><div>end</div><div>a</div><div>b</div></div>
+<div class="column reverse outer flex-end"><div>flex-end</div><div>a</div><div>b</div></div>
+<div class="column reverse outer center"><div>center</div><div>a</div><div>b</div></div>
+<div class="column reverse outer space-around"><div>space-around</div><div>a</div><div>b</div></div>
+<div class="column reverse outer space-between"><div>space-between</div><div>a</div><div>b</div></div>
+<div class="column reverse outer space-evenly"><div>space-evenly</div><div>a</div><div>b</div></div>
diff --git a/Userland/Libraries/LibWeb/CSS/Enums.json b/Userland/Libraries/LibWeb/CSS/Enums.json
@@ -5,6 +5,7 @@
         "center",
         "space-between",
         "space-around",
+        "space-evenly",
         "stretch"
     ],
     "align-items": [
@@ -172,7 +173,8 @@
         "flex-end",
         "center",
         "space-between",
-        "space-around"
+        "space-around",
+        "space-evenly"
     ],
     "line-style": [
         "none",

diff --git a/Userland/Libraries/LibWeb/CSS/Identifiers.json b/Userland/Libraries/LibWeb/CSS/Identifiers.json
@@ -272,6 +272,7 @@
   "space",
   "space-around",
   "space-between",
+  "space-evenly",
   "square",
   "srgb",
   "standalone",

diff --git a/Userland/Libraries/LibWeb/Layout/FlexFormattingContext.cpp b/Userland/Libraries/LibWeb/Layout/FlexFormattingContext.cpp
@@ -1356,6 +1356,14 @@ void FlexFormattingContext::distribute_any_remaining_free_space()
                     initial_offset = space_between_items / 2.0;
                 }
                 break;
+            case CSS::JustifyContent::SpaceEvenly:
+                space_between_items = flex_line.remaining_free_space / (number_of_items + 1);
+                if (is_direction_reverse()) {
+                    initial_offset = inner_main_size(flex_container()) - space_between_items;
+                } else {
+                    initial_offset = space_between_items;
+                }
+                break;
             }
         }
 
@@ -1593,6 +1601,21 @@ void FlexFormattingContext::align_all_flex_lines()
             start_of_current_line = gap_size / 2;
             break;
         }
+        case CSS::AlignContent::SpaceEvenly: {
+            auto leftover_free_space = cross_size_of_flex_container - sum_of_flex_line_cross_sizes;
+            if (leftover_free_space < 0) {
+                // If the leftover free-space is negative this value is identical to center.
+                start_of_current_line = (cross_size_of_flex_container / 2) - (sum_of_flex_line_cross_sizes / 2);
+                break;
+            }
+
+            gap_size = leftover_free_space / (m_flex_lines.size() + 1);
+
+            // The spacing between the first/last lines and the flex container edges is the size of the spacing between flex lines.
+            start_of_current_line = gap_size;
+            break;
+        }
+
         case CSS::AlignContent::Stretch:
             start_of_current_line = 0;
             break;
@@ -2180,6 +2203,7 @@ CSSPixelPoint FlexFormattingContext::calculate_static_position(Box const& box) c
         break;
     case CSS::JustifyContent::Center:
     case CSS::JustifyContent::SpaceAround:
+    case CSS::JustifyContent::SpaceEvenly:
         pack_from_end = false;
         main_offset = inner_main_size(flex_container()) / 2.0 - inner_main_size(box) / 2.0;
         break;