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: Add support for `align-items` and `align-self` in CSS grid

Christophe Naud-Dulude 1 year ago
parent
dfbc2839b4
commit
11b844ce20
6 changed files with 167 additions and 0 deletions
Unified View Show Diff Stats
  1. 42 0
      Tests/LibWeb/Layout/expected/grid/align-items.txt
  2. 42 0
      Tests/LibWeb/Layout/expected/grid/align-self.txt
  3. 12 0
      Tests/LibWeb/Layout/input/grid/align-items.html
  4. 12 0
      Tests/LibWeb/Layout/input/grid/align-self.html
  5. 58 0
      Userland/Libraries/LibWeb/Layout/GridFormattingContext.cpp
  6. 1 0
      Userland/Libraries/LibWeb/Layout/GridFormattingContext.h

+ 42 - 0
Tests/LibWeb/Layout/expected/grid/align-items.txt
View File 

@@ -0,0 +1,42 @@
 
+Viewport <#document> at (0,0) content-size 800x600 children: not-inline
 
+  BlockContainer <html> at (1,1) content-size 798x262.40625 [BFC] children: not-inline
 
+    BlockContainer <body> at (10,10) content-size 780x244.40625 children: not-inline
 
+      BlockContainer <(anonymous)> at (10,10) content-size 780x0 children: inline
 
+        TextNode <#text>
 
+      Box <div.grid.start> at (31,31) content-size 738x39.46875 [GFC] children: not-inline
 
+        BlockContainer <div> at (32,32) content-size 367x17.46875 [BFC] children: inline
 
+          line 0 width: 50.203125, height: 17.46875, bottom: 17.46875, baseline: 13.53125
 
+            frag 0 from TextNode start: 0, length: 6, rect: [32,32 50.203125x17.46875]
 
+              "Start1"
 
+          TextNode <#text>
 
+        BlockContainer <div.item-padding> at (411,42) content-size 347x17.46875 [BFC] children: inline
 
+          line 0 width: 52.671875, height: 17.46875, bottom: 17.46875, baseline: 13.53125
 
+            frag 0 from TextNode start: 0, length: 6, rect: [411,42 52.671875x17.46875]
 
+              "Start2"
 
+          TextNode <#text>
 
+      BlockContainer <(anonymous)> at (10,91.46875) content-size 780x0 children: inline
 
+        TextNode <#text>
 
+      Box <div.grid.center> at (31,112.46875) content-size 738x39.46875 [GFC] children: not-inline
 
+        BlockContainer <div> at (32,123.46875) content-size 367x17.46875 [BFC] children: inline
 
+          line 0 width: 59.390625, height: 17.46875, bottom: 17.46875, baseline: 13.53125
 
+            frag 0 from TextNode start: 0, length: 7, rect: [32,123.46875 59.390625x17.46875]
 
+              "Center1"
 
+          TextNode <#text>
 
+        BlockContainer <div.item-padding> at (411,123.46875) content-size 347x17.46875 [BFC] children: inline
 
+          line 0 width: 61.859375, height: 17.46875, bottom: 17.46875, baseline: 13.53125
 
+            frag 0 from TextNode start: 0, length: 7, rect: [411,123.46875 61.859375x17.46875]
 
+              "Center2"
 
+          TextNode <#text>
 
+      BlockContainer <(anonymous)> at (10,172.9375) content-size 780x0 children: inline
 
+        TextNode <#text>
 
+      Box <div.grid.end> at (31,193.9375) content-size 738x39.46875 [GFC] children: not-inline
 
+        BlockContainer <div> at (32,214.9375) content-size 367x17.46875 [BFC] children: inline
 
+          line 0 width: 35.671875, height: 17.46875, bottom: 17.46875, baseline: 13.53125
 
+            frag 0 from TextNode start: 0, length: 4, rect: [32,214.9375 35.671875x17.46875]
 
+              "End1"
 
+          TextNode <#text>
 
+        BlockContainer <div.item-padding> at (411,204.9375) content-size 347x17.46875 [BFC] children: inline
 
+          line 0 width: 38.140625, height: 17.46875, bottom: 17.46875, baseline: 13.53125
 
+            frag 0 from TextNode start: 0, length: 4, rect: [411,204.9375 38.140625x17.46875]
 
+              "End2"
 
+          TextNode <#text>

+ 42 - 0
Tests/LibWeb/Layout/expected/grid/align-self.txt
View File 

@@ -0,0 +1,42 @@
 
+Viewport <#document> at (0,0) content-size 800x600 children: not-inline
 
+  BlockContainer <html> at (1,1) content-size 798x262.40625 [BFC] children: not-inline
 
+    BlockContainer <body> at (10,10) content-size 780x244.40625 children: not-inline
 
+      BlockContainer <(anonymous)> at (10,10) content-size 780x0 children: inline
 
+        TextNode <#text>
 
+      Box <div.grid> at (31,31) content-size 738x39.46875 [GFC] children: not-inline
 
+        BlockContainer <div.start> at (32,32) content-size 367x17.46875 [BFC] children: inline
 
+          line 0 width: 50.203125, height: 17.46875, bottom: 17.46875, baseline: 13.53125
 
+            frag 0 from TextNode start: 0, length: 6, rect: [32,32 50.203125x17.46875]
 
+              "Start1"
 
+          TextNode <#text>
 
+        BlockContainer <div.item-padding> at (411,42) content-size 347x17.46875 [BFC] children: inline
 
+          line 0 width: 52.671875, height: 17.46875, bottom: 17.46875, baseline: 13.53125
 
+            frag 0 from TextNode start: 0, length: 6, rect: [411,42 52.671875x17.46875]
 
+              "Start2"
 
+          TextNode <#text>
 
+      BlockContainer <(anonymous)> at (10,91.46875) content-size 780x0 children: inline
 
+        TextNode <#text>
 
+      Box <div.grid> at (31,112.46875) content-size 738x39.46875 [GFC] children: not-inline
 
+        BlockContainer <div.center> at (32,123.46875) content-size 367x17.46875 [BFC] children: inline
 
+          line 0 width: 59.390625, height: 17.46875, bottom: 17.46875, baseline: 13.53125
 
+            frag 0 from TextNode start: 0, length: 7, rect: [32,123.46875 59.390625x17.46875]
 
+              "Center1"
 
+          TextNode <#text>
 
+        BlockContainer <div.item-padding> at (411,123.46875) content-size 347x17.46875 [BFC] children: inline
 
+          line 0 width: 61.859375, height: 17.46875, bottom: 17.46875, baseline: 13.53125
 
+            frag 0 from TextNode start: 0, length: 7, rect: [411,123.46875 61.859375x17.46875]
 
+              "Center2"
 
+          TextNode <#text>
 
+      BlockContainer <(anonymous)> at (10,172.9375) content-size 780x0 children: inline
 
+        TextNode <#text>
 
+      Box <div.grid> at (31,193.9375) content-size 738x39.46875 [GFC] children: not-inline
 
+        BlockContainer <div.end> at (32,214.9375) content-size 367x17.46875 [BFC] children: inline
 
+          line 0 width: 35.671875, height: 17.46875, bottom: 17.46875, baseline: 13.53125
 
+            frag 0 from TextNode start: 0, length: 4, rect: [32,214.9375 35.671875x17.46875]
 
+              "End1"
 
+          TextNode <#text>
 
+        BlockContainer <div.item-padding> at (411,204.9375) content-size 347x17.46875 [BFC] children: inline
 
+          line 0 width: 38.140625, height: 17.46875, bottom: 17.46875, baseline: 13.53125
 
+            frag 0 from TextNode start: 0, length: 4, rect: [411,204.9375 38.140625x17.46875]
 
+              "End2"
 
+          TextNode <#text>

+ 12 - 0
Tests/LibWeb/Layout/input/grid/align-items.html
View File 

@@ -0,0 +1,12 @@
 
+<!DOCTYPE html><style>
 
+    * { border: 1px solid black; }
 
+    .grid { display: grid; grid-template-columns: auto auto; padding: 20px; }
 
+    .start { align-items: start; }
 
+    .center { align-items: center; }
 
+    .end { align-items: end; }
 
+    .item-padding { padding: 10px;}
 
+</style>
 
+<body>
 
+<div class="grid start"><div>Start1</div><div class="item-padding">Start2</div></div>
 
+<div class="grid center"><div>Center1</div><div class="item-padding">Center2</div></div>
 
+<div class="grid end"><div>End1</div><div class="item-padding">End2</div></div>

+ 12 - 0
Tests/LibWeb/Layout/input/grid/align-self.html
View File 

@@ -0,0 +1,12 @@
 
+<!DOCTYPE html><style>
 
+    * { border: 1px solid black; }
 
+    .grid { display: grid; grid-template-columns: auto auto; padding: 20px; }
 
+    .start { align-self: start; }
 
+    .center { align-self: center; }
 
+    .end { align-self: end; }
 
+    .item-padding { padding: 10px;}
 
+</style>
 
+<body>
 
+<div class="grid"><div class="start">Start1</div><div class="item-padding">Start2</div></div>
 
+<div class="grid"><div class="center">Center1</div><div class="item-padding">Center2</div></div>
 
+<div class="grid"><div class="end">End1</div><div class="item-padding">End2</div></div>

+ 58 - 0
Userland/Libraries/LibWeb/Layout/GridFormattingContext.cpp
View File 

@@ -1452,6 +1452,40 @@ CSS::JustifyItems GridFormattingContext::justification_for_item(Box const& box)
 
     }
 
     }
 
 }
 
 }
 
 
 
+CSS::AlignItems GridFormattingContext::alignment_for_item(Box const& box) const
 
+{
 
+    switch (box.computed_values().align_self()) {
 
+    case CSS::AlignSelf::Auto:
 
+        return grid_container().computed_values().align_items();
 
+    case CSS::AlignSelf::End:
 
+        return CSS::AlignItems::End;
 
+    case CSS::AlignSelf::Normal:
 
+        return CSS::AlignItems::Normal;
 
+    case CSS::AlignSelf::SelfStart:
 
+        return CSS::AlignItems::SelfStart;
 
+    case CSS::AlignSelf::SelfEnd:
 
+        return CSS::AlignItems::SelfEnd;
 
+    case CSS::AlignSelf::FlexStart:
 
+        return CSS::AlignItems::FlexStart;
 
+    case CSS::AlignSelf::FlexEnd:
 
+        return CSS::AlignItems::FlexEnd;
 
+    case CSS::AlignSelf::Center:
 
+        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:
 
+        return CSS::AlignItems::Safe;
 
+    case CSS::AlignSelf::Unsafe:
 
+        return CSS::AlignItems::Unsafe;
 
+    default:
 
+        VERIFY_NOT_REACHED();
 
+    }
 
+}
 
+
 
 void GridFormattingContext::resolve_grid_item_widths()
 
 void GridFormattingContext::resolve_grid_item_widths()
 
 {
 
 {
 
     for (auto& item : m_grid_items) {
 
     for (auto& item : m_grid_items) {
 
@@ -1539,6 +1573,30 @@ void GridFormattingContext::resolve_grid_item_heights()
 
                 height += underflow_px;
 
                 height += underflow_px;
 
             }
 
             }
 
 
 
+            switch (alignment_for_item(item.box)) {
 
+            case CSS::AlignItems::Baseline:
 
+                // FIXME: Not implemented
 
+            case CSS::AlignItems::Stretch:
 
+            case CSS::AlignItems::Normal:
 
+                break;
 
+            case CSS::AlignItems::Start:
 
+            case CSS::AlignItems::FlexStart:
 
+            case CSS::AlignItems::SelfStart:
 
+                box_state.margin_bottom += underflow_px;
 
+                return a_height;
 
+            case CSS::AlignItems::End:
 
+            case CSS::AlignItems::SelfEnd:
 
+            case CSS::AlignItems::FlexEnd:
 
+                box_state.margin_top += underflow_px;
 
+                return a_height;
 
+            case CSS::AlignItems::Center:
 
+                box_state.margin_top += underflow_px / 2;
 
+                box_state.margin_bottom += underflow_px / 2;
 
+                return a_height;
 
+            default:
 
+                break;
 
+            }
 
+
 
             return height;
 
             return height;
 
         };
 
         };

+ 1 - 0
Userland/Libraries/LibWeb/Layout/GridFormattingContext.h
View File 

@@ -104,6 +104,7 @@ public:
 
 
 
 private:
 
 private:
 
     CSS::JustifyItems justification_for_item(Box const& box) const;
 
     CSS::JustifyItems justification_for_item(Box const& box) const;
 
+    CSS::AlignItems alignment_for_item(Box const& box) const;
 
 
 
     void resolve_items_box_metrics(GridDimension const dimension);
 
     void resolve_items_box_metrics(GridDimension const dimension);

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