LibWeb: Add tests for justify-*: left/right

(cherry picked from commit 1d30d84f4132fce8234e1755dec92d08491726ff)
SerenityOS · Nov 8, 2024 · a9dd1a1 · a9dd1a1
1 parent b2d8231
commit a9dd1a1
Show file tree

Hide file tree

Showing 12 changed files with 1,285 additions and 713 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/expected/flex/justify-content-with-margin-auto-child.txt b/Tests/LibWeb/Layout/expected/flex/justify-content-with-margin-auto-child.txt
diff --git a/Tests/LibWeb/Layout/expected/grid/justify-content.txt b/Tests/LibWeb/Layout/expected/grid/justify-content.txt
@@ -1,6 +1,6 @@
 Viewport <#document> at (0,0) content-size 800x600 children: not-inline
-  BlockContainer <html> at (0,0) content-size 800x101 [BFC] children: not-inline
-    BlockContainer <body> at (8,8) content-size 784x85 children: not-inline
+  BlockContainer <html> at (0,0) content-size 800x135 [BFC] children: not-inline
+    BlockContainer <body> at (8,8) content-size 784x119 children: not-inline
       Box <div.container> at (8,8) content-size 784x17 [GFC] children: not-inline
         BlockContainer <div> at (8,8) content-size 392x17 [BFC] children: inline
           frag 0 from TextNode start: 0, length: 9, rect: [8,8 67.96875x17] baseline: 13.296875
@@ -54,10 +54,34 @@ Viewport <#document> at (0,0) content-size 800x600 children: not-inline
           frag 0 from TextNode start: 0, length: 9, rect: [724.03125,76 67.96875x17] baseline: 13.296875
               "wikipedia"
           TextNode <#text>
+      BlockContainer <(anonymous)> at (8,93) content-size 784x0 children: inline
+        TextNode <#text>
+      Box <div.container> at (8,93) content-size 784x17 [GFC] children: not-inline
+        BlockContainer <div> at (8,93) content-size 67.96875x17 [BFC] children: inline
+          frag 0 from TextNode start: 0, length: 9, rect: [8,93 67.96875x17] baseline: 13.296875
+              "wikipedia"
+          TextNode <#text>
+        BlockContainer <div> at (75.96875,93) content-size 67.96875x17 [BFC] children: inline
+          frag 0 from TextNode start: 0, length: 9, rect: [75.96875,93 67.96875x17] baseline: 13.296875
+              "wikipedia"
+          TextNode <#text>
+      BlockContainer <(anonymous)> at (8,110) content-size 784x0 children: inline
+        TextNode <#text>
+      Box <div.container> at (8,110) content-size 784x17 [GFC] children: not-inline
+        BlockContainer <div> at (656.0625,110) content-size 67.96875x17 [BFC] children: inline
+          frag 0 from TextNode start: 0, length: 9, rect: [656.0625,110 67.96875x17] baseline: 13.296875
+              "wikipedia"
+          TextNode <#text>
+        BlockContainer <div> at (724.03125,110) content-size 67.96875x17 [BFC] children: inline
+          frag 0 from TextNode start: 0, length: 9, rect: [724.03125,110 67.96875x17] baseline: 13.296875
+              "wikipedia"
+          TextNode <#text>
+      BlockContainer <(anonymous)> at (8,127) content-size 784x0 children: inline
+        TextNode <#text>
 
 ViewportPaintable (Viewport<#document>) [0,0 800x600]
-  PaintableWithLines (BlockContainer<HTML>) [0,0 800x101]
-    PaintableWithLines (BlockContainer<BODY>) [8,8 784x85]
+  PaintableWithLines (BlockContainer<HTML>) [0,0 800x135]
+    PaintableWithLines (BlockContainer<BODY>) [8,8 784x119]
       PaintableBox (Box<DIV>.container) [8,8 784x17]
         PaintableWithLines (BlockContainer<DIV>) [8,8 392x17]
           TextPaintable (TextNode<#text>)
@@ -87,3 +111,16 @@ ViewportPaintable (Viewport<#document>) [0,0 800x600]
           TextPaintable (TextNode<#text>)
         PaintableWithLines (BlockContainer<DIV>) [724.03125,76 67.96875x17]
           TextPaintable (TextNode<#text>)
+      PaintableWithLines (BlockContainer(anonymous)) [8,93 784x0]
+      PaintableBox (Box<DIV>.container) [8,93 784x17]
+        PaintableWithLines (BlockContainer<DIV>) [8,93 67.96875x17]
+          TextPaintable (TextNode<#text>)
+        PaintableWithLines (BlockContainer<DIV>) [75.96875,93 67.96875x17]
+          TextPaintable (TextNode<#text>)
+      PaintableWithLines (BlockContainer(anonymous)) [8,110 784x0]
+      PaintableBox (Box<DIV>.container) [8,110 784x17]
+        PaintableWithLines (BlockContainer<DIV>) [656.0625,110 67.96875x17]
+          TextPaintable (TextNode<#text>)
+        PaintableWithLines (BlockContainer<DIV>) [724.03125,110 67.96875x17]
+          TextPaintable (TextNode<#text>)
+      PaintableWithLines (BlockContainer(anonymous)) [8,127 784x0]
diff --git a/Tests/LibWeb/Layout/expected/grid/justify-items.txt b/Tests/LibWeb/Layout/expected/grid/justify-items.txt
@@ -1,6 +1,6 @@
 Viewport <#document> at (0,0) content-size 800x600 children: not-inline
-  BlockContainer <html> at (1,1) content-size 798x81 [BFC] children: not-inline
-    BlockContainer <body> at (10,10) content-size 780x63 children: not-inline
+  BlockContainer <html> at (1,1) content-size 798x123 [BFC] children: not-inline
+    BlockContainer <body> at (10,10) content-size 780x105 children: not-inline
       BlockContainer <(anonymous)> at (10,10) content-size 780x0 children: inline
         TextNode <#text>
       Box <div.grid.start> at (11,11) content-size 778x19 [GFC] children: not-inline
@@ -22,10 +22,26 @@ Viewport <#document> at (0,0) content-size 800x600 children: not-inline
           frag 0 from TextNode start: 0, length: 3, rect: [758.671875,54 29.328125x17] baseline: 13.296875
               "End"
           TextNode <#text>
+      BlockContainer <(anonymous)> at (10,73) content-size 780x0 children: inline
+        TextNode <#text>
+      Box <div.grid.left> at (11,74) content-size 778x19 [GFC] children: not-inline
+        BlockContainer <div> at (12,75) content-size 32.875x17 [BFC] children: inline
+          frag 0 from TextNode start: 0, length: 4, rect: [12,75 32.875x17] baseline: 13.296875
+              "Left"
+          TextNode <#text>
+      BlockContainer <(anonymous)> at (10,94) content-size 780x0 children: inline
+        TextNode <#text>
+      Box <div.grid.right> at (11,95) content-size 778x19 [GFC] children: not-inline
+        BlockContainer <div> at (746.03125,96) content-size 41.96875x17 [BFC] children: inline
+          frag 0 from TextNode start: 0, length: 5, rect: [746.03125,96 41.96875x17] baseline: 13.296875
+              "Right"
+          TextNode <#text>
+      BlockContainer <(anonymous)> at (10,115) content-size 780x0 children: inline
+        TextNode <#text>
 
 ViewportPaintable (Viewport<#document>) [0,0 800x600]
-  PaintableWithLines (BlockContainer<HTML>) [0,0 800x83]
-    PaintableWithLines (BlockContainer<BODY>) [9,9 782x65]
+  PaintableWithLines (BlockContainer<HTML>) [0,0 800x125]
+    PaintableWithLines (BlockContainer<BODY>) [9,9 782x107]
       PaintableWithLines (BlockContainer(anonymous)) [10,10 780x0]
       PaintableBox (Box<DIV>.grid.start) [10,10 780x21]
         PaintableWithLines (BlockContainer<DIV>) [11,11 45.859375x19]
@@ -38,3 +54,12 @@ ViewportPaintable (Viewport<#document>) [0,0 800x600]
       PaintableBox (Box<DIV>.grid.end) [10,52 780x21]
         PaintableWithLines (BlockContainer<DIV>) [757.671875,53 31.328125x19]
           TextPaintable (TextNode<#text>)
+      PaintableWithLines (BlockContainer(anonymous)) [10,73 780x0]
+      PaintableBox (Box<DIV>.grid.left) [10,73 780x21]
+        PaintableWithLines (BlockContainer<DIV>) [11,74 34.875x19]
+          TextPaintable (TextNode<#text>)
+      PaintableWithLines (BlockContainer(anonymous)) [10,94 780x0]
+      PaintableBox (Box<DIV>.grid.right) [10,94 780x21]
+        PaintableWithLines (BlockContainer<DIV>) [745.03125,95 43.96875x19]
+          TextPaintable (TextNode<#text>)
+      PaintableWithLines (BlockContainer(anonymous)) [10,115 780x0]
diff --git a/Tests/LibWeb/Layout/expected/grid/justify-self.txt b/Tests/LibWeb/Layout/expected/grid/justify-self.txt
@@ -1,6 +1,6 @@
 Viewport <#document> at (0,0) content-size 800x600 children: not-inline
-  BlockContainer <html> at (1,1) content-size 798x75 [BFC] children: not-inline
-    Box <body> at (10,10) content-size 780x57 [GFC] children: not-inline
+  BlockContainer <html> at (1,1) content-size 798x113 [BFC] children: not-inline
+    Box <body> at (10,10) content-size 780x95 [GFC] children: not-inline
       BlockContainer <(anonymous)> (not painted) [BFC] children: inline
         TextNode <#text>
       BlockContainer <div> at (11,11) content-size 43.859375x17 [BFC] children: inline
@@ -21,13 +21,29 @@ Viewport <#document> at (0,0) content-size 800x600 children: not-inline
         TextNode <#text>
       BlockContainer <(anonymous)> (not painted) [BFC] children: inline
         TextNode <#text>
+      BlockContainer <div> at (11,68) content-size 32.875x17 [BFC] children: inline
+        frag 0 from TextNode start: 0, length: 4, rect: [11,68 32.875x17] baseline: 13.296875
+            "Left"
+        TextNode <#text>
+      BlockContainer <(anonymous)> (not painted) [BFC] children: inline
+        TextNode <#text>
+      BlockContainer <div> at (747.03125,87) content-size 41.96875x17 [BFC] children: inline
+        frag 0 from TextNode start: 0, length: 5, rect: [747.03125,87 41.96875x17] baseline: 13.296875
+            "Right"
+        TextNode <#text>
+      BlockContainer <(anonymous)> (not painted) [BFC] children: inline
+        TextNode <#text>
 
 ViewportPaintable (Viewport<#document>) [0,0 800x600]
-  PaintableWithLines (BlockContainer<HTML>) [0,0 800x77]
-    PaintableBox (Box<BODY>) [9,9 782x59]
+  PaintableWithLines (BlockContainer<HTML>) [0,0 800x115]
+    PaintableBox (Box<BODY>) [9,9 782x97]
       PaintableWithLines (BlockContainer<DIV>) [10,10 45.859375x19]
         TextPaintable (TextNode<#text>)
       PaintableWithLines (BlockContainer<DIV>) [372.46875,29 55.046875x19]
         TextPaintable (TextNode<#text>)
       PaintableWithLines (BlockContainer<DIV>) [758.671875,48 31.328125x19]
         TextPaintable (TextNode<#text>)
+      PaintableWithLines (BlockContainer<DIV>) [10,67 34.875x19]
+        TextPaintable (TextNode<#text>)
+      PaintableWithLines (BlockContainer<DIV>) [746.03125,86 43.96875x19]
+        TextPaintable (TextNode<#text>)
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
@@ -1,6 +1,6 @@
 <!DOCTYPE html><style>
 * {
-    border: 15px solid black;
+    border: 1px solid black;
 }
       .outer {
         display: flex;
@@ -22,6 +22,8 @@
       .space-around { justify-content: space-around; }
       .space-between { justify-content: space-between; }
       .space-evenly { justify-content: space-evenly; }
+      .left { justify-content: left; }
+      .right { justify-content: right; }
 
       .row { flex-direction: row; border-color: red; }
       .row.reverse { flex-direction: row-reverse; }
@@ -40,6 +42,8 @@
 <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 outer left"><div>left</div></div>
+<div class="row outer right"><div>right</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>
@@ -48,6 +52,8 @@
 <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="row reverse outer left"><div>left</div></div>
+<div class="row reverse outer right"><div>right</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>
@@ -56,6 +62,8 @@
 <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 outer left"><div>left</div></div>
+<div class="column outer right"><div>right</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>
@@ -64,3 +72,5 @@
 <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>
+<div class="column reverse outer left"><div>left</div></div>
+<div class="column reverse outer right"><div>right</div></div>
diff --git a/Tests/LibWeb/Layout/input/flex/justify-content-1.html b/Tests/LibWeb/Layout/input/flex/justify-content-1.html
@@ -27,6 +27,8 @@
       .space-around { justify-content: space-around; }
       .space-between { justify-content: space-between; }
       .space-evenly { justify-content: space-evenly; }
+      .left { justify-content: left; }
+      .right { justify-content: right; }
 
       .row { flex-direction: row; }
       .row.reverse { flex-direction: row-reverse; }
@@ -45,6 +47,8 @@
 <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 outer left"><div>left</div><div>a</div><div>b</div></div>
+<div class="row outer right"><div>right</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>
@@ -53,6 +57,8 @@
 <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="row reverse outer left"><div>left</div><div>a</div><div>b</div></div>
+<div class="row reverse outer right"><div>right</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>
@@ -61,6 +67,8 @@
 <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 outer left"><div>left</div><div>a</div><div>b</div></div>
+<div class="column outer right"><div>right</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>
@@ -69,3 +77,5 @@
 <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>
+<div class="column reverse outer left"><div>left</div><div>a</div><div>b</div></div>
+<div class="column reverse outer right"><div>right</div><div>a</div><div>b</div></div>
diff --git a/Tests/LibWeb/Layout/input/flex/justify-content-with-margin-auto-child.html b/Tests/LibWeb/Layout/input/flex/justify-content-with-margin-auto-child.html
@@ -23,6 +23,8 @@
       .flex-end { justify-content: flex-end; }
       .start { justify-content: start; }
       .end { justify-content: end; }
+      .left { justify-content: left; }
+      .right { justify-content: right; }
       .flex-start div, .start div {
           margin-left: auto;
       }
@@ -42,15 +44,23 @@
 <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 left"><div>left</div><div>a</div><div>b</div></div>
+<div class="row outer right"><div>right</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 left"><div>left</div><div>a</div><div>b</div></div>
+<div class="row reverse outer right"><div>right</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 left"><div>left</div><div>a</div><div>b</div></div>
+<div class="column outer right"><div>right</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 left"><div>left</div><div>a</div><div>b</div></div>
+<div class="column reverse outer right"><div>right</div><div>a</div><div>b</div></div>
diff --git a/Tests/LibWeb/Layout/input/grid/justify-content.html b/Tests/LibWeb/Layout/input/grid/justify-content.html
@@ -11,4 +11,6 @@
 <div class="container" style="justify-content: stretch;"><div>wikipedia</div><div>wikipedia</div></div>
 <div class="container" style="justify-content: start;"><div>wikipedia</div><div>wikipedia</div></div>
 <div class="container" style="justify-content: center;"><div>wikipedia</div><div>wikipedia</div></div>
-<div class="container" style="justify-content: end;"><div>wikipedia</div><div>wikipedia</div></div>
+<div class="container" style="justify-content: end;"><div>wikipedia</div><div>wikipedia</div></div>
+<div class="container" style="justify-content: left;"><div>wikipedia</div><div>wikipedia</div></div>
+<div class="container" style="justify-content: right;"><div>wikipedia</div><div>wikipedia</div></div>
diff --git a/Tests/LibWeb/Layout/input/grid/justify-items.html b/Tests/LibWeb/Layout/input/grid/justify-items.html
@@ -4,8 +4,12 @@
     .start { justify-items: start; }
     .center { justify-items: center; }
     .end { justify-items: end; }
+    .left { justify-items: left; }
+    .right { justify-items: right; }
 </style>
 <body>
 <div class="grid start"><div>Start</div></div>
 <div class="grid center"><div>Center</div></div>
-<div class="grid end"><div>End</div></div>
+<div class="grid end"><div>End</div></div>
+<div class="grid left"><div>Left</div></div>
+<div class="grid right"><div>Right</div></div>
diff --git a/Tests/LibWeb/Layout/input/grid/justify-self.html b/Tests/LibWeb/Layout/input/grid/justify-self.html
@@ -12,4 +12,6 @@
 <div style="justify-self: start">Start</div>
 <div style="justify-self: center">Center</div>
 <div style="justify-self: end">End</div>
+<div style="justify-self: left">Left</div>
+<div style="justify-self: right">Right</div>
 </body>