We use cookies to ensure you get the best experience on our website
Home Explore Help
Register Sign In
0ct0pu5
/
ladybird
1
0
Fork 0
Files Issues 0 Pull Requests 0 Wiki
Browse Source

LibWeb: Support `start` and `end` alignment values in flex layout

These should just behave the same as `flex-start` and `flex-end`.
Andreas Kling 2 years ago
parent
abd6380cce
commit
9e807d7c6a
4 changed files with 69 additions and 0 deletions
Split View Show Diff Stats
  1. 31 0
      Tests/LibWeb/Layout/expected/flex/align-keywords-start-and-end.txt
  2. 28 0
      Tests/LibWeb/Layout/input/flex/align-keywords-start-and-end.html
  3. 4 0
      Userland/Libraries/LibWeb/CSS/Enums.json
  4. 6 0
      Userland/Libraries/LibWeb/Layout/FlexFormattingContext.cpp

+ 31 - 0
Tests/LibWeb/Layout/expected/flex/align-keywords-start-and-end.txt
View File 

@@ -0,0 +1,31 @@
 
+Viewport <#document> at (0,0) content-size 800x600 children: not-inline
 
+  BlockContainer <html> at (1,1) content-size 798x284.40625 [BFC] children: not-inline
 
+    BlockContainer <body> at (10,10) content-size 780x266.40625 children: not-inline
 
+      Box <div.flex.row.align-start> at (11,11) content-size 500x200 flex-container(row) [FFC] children: not-inline
 
+        BlockContainer <div> at (12,12) content-size 136.5x17.46875 flex-item [BFC] children: inline
 
+          line 0 width: 136.5, height: 17.46875, bottom: 17.46875, baseline: 13.53125
 
+            frag 0 from TextNode start: 0, length: 18, rect: [12,12 136.5x17.46875]
 
+              "align-items: start"
 
+          TextNode <#text>
 
+      Box <div.flex.align-end> at (11,213) content-size 500x19.46875 flex-container(row) [FFC] children: not-inline
 
+        BlockContainer <div> at (12,214) content-size 121.453125x17.46875 flex-item [BFC] children: inline
 
+          line 0 width: 121.453125, height: 17.46875, bottom: 17.46875, baseline: 13.53125
 
+            frag 0 from TextNode start: 0, length: 16, rect: [12,214 121.453125x17.46875]
 
+              "align-items: end"
 
+          TextNode <#text>
 
+      BlockContainer <(anonymous)> at (10,233.46875) content-size 780x0 children: inline
 
+        TextNode <#text>
 
+      Box <div.flex.align-start> at (11,234.46875) content-size 500x19.46875 flex-container(row) [FFC] children: not-inline
 
+        BlockContainer <div> at (12,235.46875) content-size 136.5x17.46875 flex-item [BFC] children: inline
 
+          line 0 width: 136.5, height: 17.46875, bottom: 17.46875, baseline: 13.53125
 
+            frag 0 from TextNode start: 0, length: 18, rect: [12,235.46875 136.5x17.46875]
 
+              "align-items: start"
 
+          TextNode <#text>
 
+      Box <div.flex.column.align-end> at (11,255.9375) content-size 500x19.46875 flex-container(column) [FFC] children: not-inline
 
+        BlockContainer <div> at (388.546875,256.9375) content-size 121.453125x17.46875 flex-item [BFC] children: inline
 
+          line 0 width: 121.453125, height: 17.46875, bottom: 17.46875, baseline: 13.53125
 
+            frag 0 from TextNode start: 0, length: 16, rect: [388.546875,256.9375 121.453125x17.46875]
 
+              "align-items: end"
 
+          TextNode <#text>
 
+      BlockContainer <(anonymous)> at (10,276.40625) content-size 780x0 children: inline
 
+        TextNode <#text>

+ 28 - 0
Tests/LibWeb/Layout/input/flex/align-keywords-start-and-end.html
View File 

@@ -0,0 +1,28 @@
 
+<!doctype html><style>
 
+* { 
+    border: 1px solid black;
 
+}
 
+.flex {
 
+    display: flex;
 
+    width: 500px;
 
+    background: pink;
 
+}
 
+.row {
 
+    flex-direction: row;
 
+    height: 200px;
 
+}
 
+.column {
 
+    flex-direction: column;
 
+}
 
+.flex > div {
 
+    background: orange;
 
+}
 
+.align-start {
 
+    align-items: start;
 
+}
 
+.align-end {
 
+    align-items: end;
 
+}
 
+</style>
 
+<div class="flex row align-start"><div>align-items: start</div></div><div class="flex align-end"><div>align-items: end</div></div>
 
+<div class="flex align-start"><div>align-items: start</div></div><div class="flex column align-end"><div>align-items: end</div></div>

+ 4 - 0
Userland/Libraries/LibWeb/CSS/Enums.json
View File 

@@ -10,12 +10,14 @@
 
     "align-items": [
 
         "baseline",
 
         "center",
 
+        "end",
 
         "flex-end",
 
         "flex-start",
 
         "normal",
 
         "safe",
 
         "self-end",
 
         "self-start",
 
+        "start",
 
         "stretch",
 
         "unsafe"
 
     ],
 
@@ -23,12 +25,14 @@
 
         "auto",
 
         "baseline",
 
         "center",
 
+        "end",
 
         "flex-end",
 
         "flex-start",
 
         "normal",
 
         "safe",
 
         "self-end",
 
         "self-start",
 
+        "start",
 
         "stretch",
 
         "unsafe"
 
     ],

+ 6 - 0
Userland/Libraries/LibWeb/Layout/FlexFormattingContext.cpp
View File 

@@ -1461,6 +1461,8 @@ CSS::AlignItems FlexFormattingContext::alignment_for_item(Box const& box) const
 
         return CSS::AlignItems::Center;
 
     case CSS::AlignSelf::Baseline:
 
         return CSS::AlignItems::Baseline;
 
+    case CSS::AlignSelf::Start:
 
+        return CSS::AlignItems::Start;
 
     case CSS::AlignSelf::Stretch:
 
         return CSS::AlignItems::Stretch;
 
     case CSS::AlignSelf::Safe:
 
@@ -1482,10 +1484,12 @@ void FlexFormattingContext::align_all_flex_items_along_the_cross_axis()
 
             case CSS::AlignItems::Baseline:
 
                 // FIXME: Implement this
 
                 //  Fallthrough
 
+            case CSS::AlignItems::Start:
 
             case CSS::AlignItems::FlexStart:
 
             case CSS::AlignItems::Stretch:
 
                 item.cross_offset = -half_line_size + item.margins.cross_before + item.borders.cross_before + item.padding.cross_before;
 
                 break;
 
+            case CSS::AlignItems::End:
 
             case CSS::AlignItems::FlexEnd:
 
                 item.cross_offset = half_line_size - item.cross_size.value() - item.margins.cross_after - item.borders.cross_after - item.padding.cross_after;
 
                 break;
 
@@ -2136,10 +2140,12 @@ CSSPixelPoint FlexFormattingContext::calculate_static_position(Box const& box) c
 
     case CSS::AlignItems::Baseline:
 
         // FIXME: Implement this
 
         //  Fallthrough
 
+    case CSS::AlignItems::Start:
 
     case CSS::AlignItems::FlexStart:
 
     case CSS::AlignItems::Stretch:
 
         cross_offset = -half_line_size + cross_margin_before + cross_border_before + cross_padding_before;
 
         break;
 
+    case CSS::AlignItems::End:
 
     case CSS::AlignItems::FlexEnd:
 
         cross_offset = half_line_size - inner_cross_size(box) - cross_margin_after - cross_border_after - cross_padding_after;
 
         break;

Contact | Legal | Takedown | Status
Self-hosted public services - About
NibbleSpot by 0ct0pu5