We use cookies to ensure you get the best experience on our website
Ana Sayfa Keşfet Yardım
Üye Ol Giriş Yap
0ct0pu5
/
ladybird
1
0
Çatalla 0
Dosyalar Sorunlar 0 Değişiklik İstekleri 0 Wiki
Kaynağa Gözat

LibWeb: Derive baseline from rightmost descendant

Make the existing algorithm recursive, accounting for boxes which
contain line boxes indirectly. Fixes some button alignment issues on
Wikipedia.
Andi Gallo 1 yıl önce
ebeveyn
2a8f558911
işleme
bab1d09d92
14 değiştirilmiş dosya ile 188 ekleme ve 36 silme
Görünümü Böl Farklılık Durumunu Göster
  1. 44 0
      Tests/LibWeb/Layout/expected/block-and-inline/button-baseline-align.txt
  2. 1 1
      Tests/LibWeb/Layout/expected/block-and-inline/button-should-have-vertically-aligned-content.txt
  3. 50 0
      Tests/LibWeb/Layout/expected/block-and-inline/button-with-block-content-baseline-align.txt
  4. 2 2
      Tests/LibWeb/Layout/expected/block-and-inline/button-with-multiple-words-text-node-label.txt
  5. 2 2
      Tests/LibWeb/Layout/expected/block-and-inline/button-with-text-node-label-and-font-size.txt
  6. 2 2
      Tests/LibWeb/Layout/expected/block-and-inline/button-with-text-node-label.txt
  7. 1 1
      Tests/LibWeb/Layout/expected/input-text-node-invalidation-on-value-change.txt
  8. 8 5
      Tests/LibWeb/Layout/expected/table/border-collapse-is-inherited.txt
  9. 1 1
      Tests/LibWeb/Layout/expected/table/inline-table-width.txt
  10. 9 6
      Tests/LibWeb/Layout/expected/table/nested-table-box-width.txt
  11. 9 6
      Tests/LibWeb/Layout/expected/table/row-span-and-nested-tables.txt
  12. 23 0
      Tests/LibWeb/Layout/input/block-and-inline/button-baseline-align.html
  13. 25 0
      Tests/LibWeb/Layout/input/block-and-inline/button-with-block-content-baseline-align.html
  14. 11 10
      Userland/Libraries/LibWeb/Layout/FormattingContext.cpp

+ 44 - 0
Tests/LibWeb/Layout/expected/block-and-inline/button-baseline-align.txt
Dosyayı Görüntüle 

@@ -0,0 +1,44 @@
 
+Viewport <#document> at (0,0) content-size 800x600 children: not-inline
 
+  BlockContainer <html> at (0,0) content-size 800x600 [BFC] children: not-inline
 
+    BlockContainer <body> at (8,8) content-size 784x47.671875 children: inline
 
+      line 0 width: 61.1875, height: 47.671875, bottom: 47.671875, baseline: 35.828125
 
+        frag 0 from BlockContainer start: 0, length: 0, rect: [8,8 61.1875x47.671875]
 
+      BlockContainer <div.ib> at (8,8) content-size 61.1875x47.671875 inline-block [BFC] children: inline
 
+        line 0 width: 61.1875, height: 47.671875, bottom: 47.671875, baseline: 35.828125
 
+          frag 0 from BlockContainer start: 0, length: 0, rect: [9,26 17.828125x21.84375]
 
+          frag 1 from TextNode start: 0, length: 1, rect: [28,30 8x17.46875]
 
+            " "
 
+          frag 2 from BlockContainer start: 0, length: 0, rect: [41,10 23.359375x43.671875]
 
+        TextNode <#text>
 
+        BlockContainer <div.label> at (9,26) content-size 17.828125x21.84375 inline-block [BFC] children: inline
 
+          line 0 width: 17.828125, height: 21.84375, bottom: 21.84375, baseline: 16.921875
 
+            frag 0 from TextNode start: 0, length: 1, rect: [9,26 17.828125x21.84375]
 
+              "A"
 
+          TextNode <#text>
 
+        TextNode <#text>
 
+        BlockContainer <button> at (41,10) content-size 23.359375x43.671875 inline-block [BFC] children: inline
 
+          line 0 width: 23.359375, height: 43.671875, bottom: 43.671875, baseline: 33.828125
 
+            frag 0 from TableWrapper start: 0, length: 0, rect: [41,10 23.359375x43.671875]
 
+          TableWrapper <(anonymous)> at (41,10) content-size 23.359375x43.671875 [BFC] children: not-inline
 
+            BlockContainer <(anonymous)> at (41,10) content-size 23.359375x43.671875 table-box [TFC] children: not-inline
 
+              Box <(anonymous)> at (41,10) content-size 23.359375x43.671875 table-row children: not-inline
 
+                BlockContainer <(anonymous)> at (41,10) content-size 23.359375x43.671875 table-cell [BFC] children: inline
 
+                  line 0 width: 23.359375, height: 43.671875, bottom: 43.671875, baseline: 33.828125
 
+                    frag 0 from TextNode start: 0, length: 1, rect: [41,10 23.359375x43.671875]
 
+                      "B"
 
+                  TextNode <#text>
 
+        TextNode <#text>
 
+
 
+ViewportPaintable (Viewport<#document>) [0,0 800x600]
 
+  PaintableWithLines (BlockContainer<HTML>) [0,0 800x600]
 
+    PaintableWithLines (BlockContainer<BODY>) [8,8 784x47.671875]
 
+      PaintableWithLines (BlockContainer<DIV>.ib) [8,8 61.1875x47.671875]
 
+        PaintableWithLines (BlockContainer<DIV>.label) [8,25 19.828125x23.84375]
 
+          TextPaintable (TextNode<#text>)
 
+        TextPaintable (TextNode<#text>)
 
+        PaintableWithLines (BlockContainer<BUTTON>) [36,8 33.359375x47.671875]
 
+          PaintableWithLines (TableWrapper(anonymous)) [41,10 23.359375x43.671875]
 
+            PaintableWithLines (BlockContainer(anonymous)) [41,10 23.359375x43.671875]
 
+              PaintableBox (Box(anonymous)) [41,10 23.359375x43.671875]
 
+                PaintableWithLines (BlockContainer(anonymous)) [41,10 23.359375x43.671875]
 
+                  TextPaintable (TextNode<#text>)

+ 1 - 1
Tests/LibWeb/Layout/expected/block-and-inline/button-should-have-vertically-aligned-content.txt
Dosyayı Görüntüle 

@@ -1,7 +1,7 @@
 
 Viewport <#document> at (0,0) content-size 800x600 children: not-inline
 
   BlockContainer <html> at (0,0) content-size 800x600 [BFC] children: not-inline
 
     BlockContainer <body> at (8,8) content-size 784x200 children: inline
 
-      line 0 width: 76.6875, height: 200, bottom: 200, baseline: 200
 
+      line 0 width: 76.6875, height: 200, bottom: 200, baseline: 71
 
         frag 0 from BlockContainer start: 0, length: 0, rect: [22,19 48.6875x178]
 
       TextNode <#text>
 
       BlockContainer <button.button.border-black> at (22,19) content-size 48.6875x178 inline-block [BFC] children: not-inline

+ 50 - 0
Tests/LibWeb/Layout/expected/block-and-inline/button-with-block-content-baseline-align.txt
Dosyayı Görüntüle 

@@ -0,0 +1,50 @@
 
+Viewport <#document> at (0,0) content-size 800x600 children: not-inline
 
+  BlockContainer <html> at (0,0) content-size 800x600 [BFC] children: not-inline
 
+    BlockContainer <body> at (8,8) content-size 784x47.671875 children: inline
 
+      line 0 width: 61.1875, height: 47.671875, bottom: 47.671875, baseline: 33.828125
 
+        frag 0 from BlockContainer start: 0, length: 0, rect: [8,8 61.1875x47.671875]
 
+      BlockContainer <div.ib> at (8,8) content-size 61.1875x47.671875 inline-block [BFC] children: inline
 
+        line 0 width: 61.1875, height: 47.671875, bottom: 47.671875, baseline: 33.828125
 
+          frag 0 from BlockContainer start: 0, length: 0, rect: [9,24 17.828125x21.84375]
 
+          frag 1 from TextNode start: 0, length: 1, rect: [28,28 8x17.46875]
 
+            " "
 
+          frag 2 from BlockContainer start: 0, length: 0, rect: [41,10 23.359375x43.671875]
 
+        TextNode <#text>
 
+        BlockContainer <div.label> at (9,24) content-size 17.828125x21.84375 inline-block [BFC] children: inline
 
+          line 0 width: 17.828125, height: 21.84375, bottom: 21.84375, baseline: 16.921875
 
+            frag 0 from TextNode start: 0, length: 1, rect: [9,24 17.828125x21.84375]
 
+              "A"
 
+          TextNode <#text>
 
+        TextNode <#text>
 
+        BlockContainer <button> at (41,10) content-size 23.359375x43.671875 inline-block [BFC] children: not-inline
 
+          TableWrapper <(anonymous)> at (41,10) content-size 23.359375x43.671875 [BFC] children: not-inline
 
+            BlockContainer <(anonymous)> at (41,10) content-size 23.359375x43.671875 table-box [TFC] children: not-inline
 
+              Box <(anonymous)> at (41,10) content-size 23.359375x43.671875 table-row children: not-inline
 
+                BlockContainer <(anonymous)> at (41,10) content-size 23.359375x43.671875 table-cell [BFC] children: not-inline
 
+                  BlockContainer <(anonymous)> at (41,10) content-size 23.359375x0 children: inline
 
+                    TextNode <#text>
 
+                  BlockContainer <div> at (41,10) content-size 23.359375x43.671875 children: inline
 
+                    line 0 width: 23.359375, height: 43.671875, bottom: 43.671875, baseline: 33.828125
 
+                      frag 0 from TextNode start: 0, length: 1, rect: [41,10 23.359375x43.671875]
 
+                        "B"
 
+                    TextNode <#text>
 
+                  BlockContainer <(anonymous)> at (41,53.671875) content-size 23.359375x0 children: inline
 
+                    TextNode <#text>
 
+        TextNode <#text>
 
+
 
+ViewportPaintable (Viewport<#document>) [0,0 800x600]
 
+  PaintableWithLines (BlockContainer<HTML>) [0,0 800x600]
 
+    PaintableWithLines (BlockContainer<BODY>) [8,8 784x47.671875]
 
+      PaintableWithLines (BlockContainer<DIV>.ib) [8,8 61.1875x47.671875]
 
+        PaintableWithLines (BlockContainer<DIV>.label) [8,23 19.828125x23.84375]
 
+          TextPaintable (TextNode<#text>)
 
+        TextPaintable (TextNode<#text>)
 
+        PaintableWithLines (BlockContainer<BUTTON>) [36,8 33.359375x47.671875]
 
+          PaintableWithLines (TableWrapper(anonymous)) [41,10 23.359375x43.671875]
 
+            PaintableWithLines (BlockContainer(anonymous)) [41,10 23.359375x43.671875]
 
+              PaintableBox (Box(anonymous)) [41,10 23.359375x43.671875]
 
+                PaintableWithLines (BlockContainer(anonymous)) [41,10 23.359375x43.671875]
 
+                  PaintableWithLines (BlockContainer(anonymous)) [41,10 23.359375x0]
 
+                  PaintableWithLines (BlockContainer<DIV>) [41,10 23.359375x43.671875]
 
+                    TextPaintable (TextNode<#text>)
 
+                  PaintableWithLines (BlockContainer(anonymous)) [41,53.671875 23.359375x0]

+ 2 - 2
Tests/LibWeb/Layout/expected/block-and-inline/button-with-multiple-words-text-node-label.txt
Dosyayı Görüntüle 

@@ -1,10 +1,10 @@
 
 Viewport <#document> at (0,0) content-size 800x600 children: not-inline
 
   BlockContainer <html> at (0,0) content-size 800x600 [BFC] children: not-inline
 
     BlockContainer <body> at (8,8) content-size 784x21.46875 children: inline
 
-      line 0 width: 59.921875, height: 21.46875, bottom: 21.46875, baseline: 19.46875
 
+      line 0 width: 59.921875, height: 21.46875, bottom: 21.46875, baseline: 15.53125
 
         frag 0 from BlockContainer start: 0, length: 0, rect: [13,10 49.921875x17.46875]
 
       BlockContainer <button> at (13,10) content-size 49.921875x17.46875 inline-block [BFC] children: inline
 
-        line 0 width: 49.921875, height: 17.46875, bottom: 17.46875, baseline: 17.46875
 
+        line 0 width: 49.921875, height: 17.46875, bottom: 17.46875, baseline: 13.53125
 
           frag 0 from TableWrapper start: 0, length: 0, rect: [13,10 49.921875x17.46875]
 
         TableWrapper <(anonymous)> at (13,10) content-size 49.921875x17.46875 [BFC] children: not-inline
 
           BlockContainer <(anonymous)> at (13,10) content-size 49.921875x17.46875 table-box [TFC] children: not-inline

+ 2 - 2
Tests/LibWeb/Layout/expected/block-and-inline/button-with-text-node-label-and-font-size.txt
Dosyayı Görüntüle 

@@ -1,10 +1,10 @@
 
 Viewport <#document> at (0,0) content-size 800x600 children: not-inline
 
   BlockContainer <html> at (0,0) content-size 800x600 [BFC] children: not-inline
 
     BlockContainer <body> at (8,8) content-size 784x56.40625 children: inline
 
-      line 0 width: 121.65625, height: 56.40625, bottom: 56.40625, baseline: 54.40625
 
+      line 0 width: 121.65625, height: 56.40625, bottom: 56.40625, baseline: 42.59375
 
         frag 0 from BlockContainer start: 0, length: 0, rect: [13,10 111.65625x52.40625]
 
       BlockContainer <button> at (13,10) content-size 111.65625x52.40625 inline-block [BFC] children: inline
 
-        line 0 width: 111.65625, height: 52.40625, bottom: 52.40625, baseline: 52.40625
 
+        line 0 width: 111.65625, height: 52.40625, bottom: 52.40625, baseline: 40.59375
 
           frag 0 from TableWrapper start: 0, length: 0, rect: [13,10 111.65625x52.40625]
 
         TableWrapper <(anonymous)> at (13,10) content-size 111.65625x52.40625 [BFC] children: not-inline
 
           BlockContainer <(anonymous)> at (13,10) content-size 111.65625x52.40625 table-box [TFC] children: not-inline

+ 2 - 2
Tests/LibWeb/Layout/expected/block-and-inline/button-with-text-node-label.txt
Dosyayı Görüntüle 

@@ -1,10 +1,10 @@
 
 Viewport <#document> at (0,0) content-size 800x600 children: not-inline
 
   BlockContainer <html> at (0,0) content-size 800x600 [BFC] children: not-inline
 
     BlockContainer <body> at (8,8) content-size 784x21.46875 children: inline
 
-      line 0 width: 47.21875, height: 21.46875, bottom: 21.46875, baseline: 19.46875
 
+      line 0 width: 47.21875, height: 21.46875, bottom: 21.46875, baseline: 15.53125
 
         frag 0 from BlockContainer start: 0, length: 0, rect: [13,10 37.21875x17.46875]
 
       BlockContainer <button> at (13,10) content-size 37.21875x17.46875 inline-block [BFC] children: inline
 
-        line 0 width: 37.21875, height: 17.46875, bottom: 17.46875, baseline: 17.46875
 
+        line 0 width: 37.21875, height: 17.46875, bottom: 17.46875, baseline: 13.53125
 
           frag 0 from TableWrapper start: 0, length: 0, rect: [13,10 37.21875x17.46875]
 
         TableWrapper <(anonymous)> at (13,10) content-size 37.21875x17.46875 [BFC] children: not-inline
 
           BlockContainer <(anonymous)> at (13,10) content-size 37.21875x17.46875 table-box [TFC] children: not-inline

+ 1 - 1
Tests/LibWeb/Layout/expected/input-text-node-invalidation-on-value-change.txt
Dosyayı Görüntüle 

@@ -1,7 +1,7 @@
 
 Viewport <#document> at (0,0) content-size 800x600 children: not-inline
 
   BlockContainer <html> at (0,0) content-size 800x600 [BFC] children: not-inline
 
     BlockContainer <body> at (8,8) content-size 784x21.46875 children: inline
 
-      line 0 width: 120, height: 21.46875, bottom: 21.46875, baseline: 21.46875
 
+      line 0 width: 120, height: 21.46875, bottom: 21.46875, baseline: 13.53125
 
         frag 0 from BlockContainer start: 0, length: 0, rect: [9,9 118x19.46875]
 
       BlockContainer <input#foo> at (9,9) content-size 118x19.46875 inline-block [BFC] children: not-inline
 
         Box <div> at (11,10) content-size 114x17.46875 flex-container(row) [FFC] children: not-inline

+ 8 - 5
Tests/LibWeb/Layout/expected/table/border-collapse-is-inherited.txt
Dosyayı Görüntüle 

@@ -6,7 +6,7 @@ Viewport <#document> at (0,0) content-size 800x600 children: not-inline
 
       BlockContainer <(anonymous)> at (8,8) content-size 784x0 children: inline
 
         TextNode <#text>
 
       BlockContainer <div.horizontal> at (8,8) content-size 784x199.34375 children: inline
 
-        line 0 width: 163.90625, height: 199.34375, bottom: 199.34375, baseline: 199.34375
 
+        line 0 width: 163.90625, height: 199.34375, bottom: 199.34375, baseline: 193.40625
 
           frag 0 from BlockContainer start: 0, length: 0, rect: [9,9 161.90625x197.34375]
 
         TextNode <#text>
 
         BlockContainer <table> at (9,9) content-size 161.90625x197.34375 inline-block [BFC] children: not-inline
 
@@ -143,11 +143,11 @@ Viewport <#document> at (0,0) content-size 800x600 children: not-inline
 
                       frag 0 from TextNode start: 0, length: 1, rect: [140.8125,177.875 8.453125x17.46875]
 
                         "5"
 
                     TextNode <#text>
 
-                  BlockContainer <(anonymous)> (not painted) children: inline
 
+                  BlockContainer <(anonymous)> at (9,9) content-size 0x0 children: inline
 
                     TextNode <#text>
 
-                BlockContainer <(anonymous)> (not painted) children: inline
 
+                BlockContainer <(anonymous)> at (9,9) content-size 0x0 children: inline
 
                   TextNode <#text>
 
-              BlockContainer <(anonymous)> (not painted) children: inline
 
+              BlockContainer <(anonymous)> at (9,9) content-size 0x0 children: inline
 
                 TextNode <#text>
 
         TextNode <#text>
 
       BlockContainer <(anonymous)> at (8,207.34375) content-size 784x0 children: inline
 
@@ -192,11 +192,14 @@ ViewportPaintable (Viewport<#document>) [0,0 800x600]
 
                     TextPaintable (TextNode<#text>)
 
                   PaintableWithLines (BlockContainer<TD>) [119.8125,127.40625 51.09375x39.46875]
 
                     TextPaintable (TextNode<#text>)
 
-                PaintableBox (Box<TR>) [9,166.875 161.90625x39.46875]
 
+                PaintableBox (Box<TR>) [9,166.875 161.90625x39.46875] overflow: [9,9 161.90625x197.34375]
 
                   PaintableWithLines (BlockContainer<TD>) [9,166.875 56.265625x39.46875]
 
                     TextPaintable (TextNode<#text>)
 
                   PaintableWithLines (BlockContainer<TD>) [65.265625,166.875 54.546875x39.46875]
 
                     TextPaintable (TextNode<#text>)
 
                   PaintableWithLines (BlockContainer<TD>) [119.8125,166.875 51.09375x39.46875]
 
                     TextPaintable (TextNode<#text>)
 
+                  PaintableWithLines (BlockContainer(anonymous)) [9,9 0x0]
 
+                PaintableWithLines (BlockContainer(anonymous)) [9,9 0x0]
 
+              PaintableWithLines (BlockContainer(anonymous)) [9,9 0x0]
 
       PaintableWithLines (BlockContainer(anonymous)) [8,207.34375 784x0]

+ 1 - 1
Tests/LibWeb/Layout/expected/table/inline-table-width.txt
Dosyayı Görüntüle 

@@ -1,7 +1,7 @@
 
 Viewport <#document> at (0,0) content-size 800x600 children: not-inline
 
   BlockContainer <html> at (0,0) content-size 800x600 [BFC] children: not-inline
 
     BlockContainer <body> at (8,8) content-size 784x46.9375 children: inline
 
-      line 0 width: 137.984375, height: 46.9375, bottom: 46.9375, baseline: 46.9375
 
+      line 0 width: 137.984375, height: 46.9375, bottom: 46.9375, baseline: 39
 
         frag 0 from BlockContainer start: 0, length: 0, rect: [9,9 135.984375x44.9375]
 
       BlockContainer <table> at (9,9) content-size 135.984375x44.9375 inline-block [BFC] children: not-inline
 
         TableWrapper <(anonymous)> at (9,9) content-size 135.984375x44.9375 inline-block [BFC] children: not-inline

+ 9 - 6
Tests/LibWeb/Layout/expected/table/nested-table-box-width.txt
Dosyayı Görüntüle 

@@ -52,11 +52,11 @@ Viewport <#document> at (0,0) content-size 800x600 children: not-inline
 
                             frag 0 from TextNode start: 0, length: 1, rect: [75.5625,81.46875 9.34375x17.46875]
 
                               "B"
 
                           TextNode <#text>
 
-                        BlockContainer <(anonymous)> (not painted) children: inline
 
+                        BlockContainer <(anonymous)> at (58.5625,25) content-size 0x0 children: inline
 
                           TextNode <#text>
 
-                      BlockContainer <(anonymous)> (not painted) children: inline
 
+                      BlockContainer <(anonymous)> at (58.5625,25) content-size 0x0 children: inline
 
                         TextNode <#text>
 
-                    BlockContainer <(anonymous)> (not painted) children: inline
 
+                    BlockContainer <(anonymous)> at (58.5625,25) content-size 0x0 children: inline
 
                       TextNode <#text>
 
                 BlockContainer <(anonymous)> at (58.5625,115.9375) content-size 48.265625x0 children: inline
 
                   TextNode <#text>
 
@@ -95,14 +95,17 @@ ViewportPaintable (Viewport<#document>) [0,0 800x600]
 
               PaintableWithLines (BlockContainer<TD>) [48.5625,15 68.265625x110.9375]
 
                 PaintableWithLines (BlockContainer(anonymous)) [58.5625,25 48.265625x0]
 
                 PaintableWithLines (TableWrapper(anonymous)) [58.5625,25 48.265625x90.9375]
 
-                  PaintableBox (Box<TABLE>) [58.5625,25 48.265625x90.9375]
 
-                    PaintableBox (Box<TBODY>) [63.5625,30 34.265625x74.9375] overflow: [63.5625,30 36.265625x78.9375]
 
+                  PaintableBox (Box<TABLE>) [58.5625,25 48.265625x90.9375] overflow: [58.5625,25 43.265625x85.9375]
 
+                    PaintableBox (Box<TBODY>) [63.5625,30 34.265625x74.9375] overflow: [58.5625,25 41.265625x83.9375]
 
                       PaintableBox (Box<TR>) [65.5625,32 34.265625x37.46875]
 
                         PaintableWithLines (BlockContainer<TD>) [65.5625,32 34.265625x37.46875]
 
                           TextPaintable (TextNode<#text>)
 
-                      PaintableBox (Box<TR>) [65.5625,71.46875 34.265625x37.46875]
 
+                      PaintableBox (Box<TR>) [65.5625,71.46875 34.265625x37.46875] overflow: [58.5625,25 41.265625x83.9375]
 
                         PaintableWithLines (BlockContainer<TD>) [65.5625,71.46875 34.265625x37.46875]
 
                           TextPaintable (TextNode<#text>)
 
+                        PaintableWithLines (BlockContainer(anonymous)) [58.5625,25 0x0]
 
+                      PaintableWithLines (BlockContainer(anonymous)) [58.5625,25 0x0]
 
+                    PaintableWithLines (BlockContainer(anonymous)) [58.5625,25 0x0]
 
                 PaintableWithLines (BlockContainer(anonymous)) [58.5625,115.9375 48.265625x0]
 
             PaintableBox (Box<TR>) [15,71.46875 99.828125x54.46875]
 
               PaintableWithLines (BlockContainer<TD>) [15,71.46875 31.5625x54.46875]

+ 9 - 6
Tests/LibWeb/Layout/expected/table/row-span-and-nested-tables.txt
Dosyayı Görüntüle 

@@ -64,11 +64,11 @@ Viewport <#document> at (0,0) content-size 800x600 children: not-inline
 
                             frag 0 from TextNode start: 0, length: 1, rect: [51.5625,88.9375 10.3125x17.46875]
 
                               "C"
 
                           TextNode <#text>
 
-                        BlockContainer <(anonymous)> (not painted) children: inline
 
+                        BlockContainer <(anonymous)> at (42.5625,17) content-size 0x0 children: inline
 
                           TextNode <#text>
 
-                      BlockContainer <(anonymous)> (not painted) children: inline
 
+                      BlockContainer <(anonymous)> at (42.5625,17) content-size 0x0 children: inline
 
                         TextNode <#text>
 
-                    BlockContainer <(anonymous)> (not painted) children: inline
 
+                    BlockContainer <(anonymous)> at (42.5625,17) content-size 0x0 children: inline
 
                       TextNode <#text>
 
                 BlockContainer <(anonymous)> at (42.5625,115.40625) content-size 32.265625x0 children: inline
 
                   TextNode <#text>
 
@@ -107,17 +107,20 @@ ViewportPaintable (Viewport<#document>) [0,0 800x600]
 
               PaintableWithLines (BlockContainer<TD>) [36.5625,11 44.265625x110.40625]
 
                 PaintableWithLines (BlockContainer(anonymous)) [42.5625,17 32.265625x0]
 
                 PaintableWithLines (TableWrapper(anonymous)) [42.5625,17 32.265625x98.40625]
 
-                  PaintableBox (Box<TABLE>) [42.5625,17 32.265625x98.40625]
 
-                    PaintableBox (Box<TBODY>) [43.5625,18 26.265625x88.40625] overflow: [43.5625,18 28.265625x94.40625]
 
+                  PaintableBox (Box<TABLE>) [42.5625,17 32.265625x98.40625] overflow: [42.5625,17 31.265625x97.40625]
 
+                    PaintableBox (Box<TBODY>) [43.5625,18 26.265625x88.40625] overflow: [42.5625,17 29.265625x95.40625]
 
                       PaintableBox (Box<TR>) [45.5625,20 26.265625x29.46875]
 
                         PaintableWithLines (BlockContainer<TD>) [45.5625,20 26.265625x29.46875]
 
                           TextPaintable (TextNode<#text>)
 
                       PaintableBox (Box<TR>) [45.5625,51.46875 26.265625x29.46875]
 
                         PaintableWithLines (BlockContainer<TD>) [45.5625,51.46875 26.265625x29.46875]
 
                           TextPaintable (TextNode<#text>)
 
-                      PaintableBox (Box<TR>) [45.5625,82.9375 26.265625x29.46875]
 
+                      PaintableBox (Box<TR>) [45.5625,82.9375 26.265625x29.46875] overflow: [42.5625,17 29.265625x95.40625]
 
                         PaintableWithLines (BlockContainer<TD>) [45.5625,82.9375 26.265625x29.46875]
 
                           TextPaintable (TextNode<#text>)
 
+                        PaintableWithLines (BlockContainer(anonymous)) [42.5625,17 0x0]
 
+                      PaintableWithLines (BlockContainer(anonymous)) [42.5625,17 0x0]
 
+                    PaintableWithLines (BlockContainer(anonymous)) [42.5625,17 0x0]
 
                 PaintableWithLines (BlockContainer(anonymous)) [42.5625,115.40625 32.265625x0]
 
             PaintableBox (Box<TR>) [11,67.203125 67.828125x54.203125]
 
               PaintableWithLines (BlockContainer<TD>) [11,67.203125 23.5625x54.1875]

+ 23 - 0
Tests/LibWeb/Layout/input/block-and-inline/button-baseline-align.html
Dosyayı Görüntüle 

@@ -0,0 +1,23 @@
 
+<style>
 
+    .ib {
 
+        display: inline-block;
 
+    }
 
+
 
+    .label {
 
+        display: inline-block;
 
+        border: 1px solid black;
 
+        font-size: 20px;
 
+    }
 
+
 
+    button {
 
+        display: inline-block;
 
+        border: 1px solid black;
 
+        background-color: transparent;
 
+        font-size: 40px;
 
+    }
 
+</style>
 
+
 
+<div class="ib">
 
+    <div class="label">A</div>
 
+    <button>B</button>
 
+</div>

+ 25 - 0
Tests/LibWeb/Layout/input/block-and-inline/button-with-block-content-baseline-align.html
Dosyayı Görüntüle 

@@ -0,0 +1,25 @@
 
+<style>
 
+    .ib {
 
+        display: inline-block;
 
+    }
 
+
 
+    .label {
 
+        display: inline-block;
 
+        border: 1px solid black;
 
+        font-size: 20px;
 
+    }
 
+
 
+    button {
 
+        display: inline-block;
 
+        border: 1px solid black;
 
+        background-color: transparent;
 
+        font-size: 40px;
 
+    }
 
+</style>
 
+
 
+<div class="ib">
 
+    <div class="label">A</div>
 
+    <button>
 
+        <div>B</div>
 
+    </button>
 
+</div>

+ 11 - 10
Userland/Libraries/LibWeb/Layout/FormattingContext.cpp
Dosyayı Görüntüle 

@@ -1676,17 +1676,20 @@ CSSPixelRect FormattingContext::absolute_content_rect(Box const& box) const
 
 
 Box const* FormattingContext::box_child_to_derive_baseline_from(Box const& box) const
 
 {
 
+    if (!box.has_children() || box.children_are_inline())
 
+        return nullptr;
 
     // To find the baseline of a box, we first look for the last in-flow child with at least one line box.
 
     auto const* last_box_child = box.last_child_of_type<Box>();
 
     for (Node const* child = last_box_child; child; child = child->previous_sibling()) {
 
         if (!child->is_box())
 
             continue;
 
         auto& child_box = static_cast<Box const&>(*child);
 
-        if (child_box.is_out_of_flow(*this))
 
-            continue;
 
-        if (m_state.get(child_box).line_boxes.is_empty())
 
-            continue;
 
-        return &child_box;
 
+        if (!child_box.is_out_of_flow(*this) && !m_state.get(child_box).line_boxes.is_empty()) {
 
+            return &child_box;
 
+        }
 
+        auto box_child_to_derive_baseline_from_candidate = box_child_to_derive_baseline_from(child_box);
 
+        if (box_child_to_derive_baseline_from_candidate)
 
+            return box_child_to_derive_baseline_from_candidate;
 
     }
 
     // None of the children has a line box.
 
     return nullptr;
 
@@ -1719,12 +1722,10 @@ CSSPixels FormattingContext::box_baseline(Box const& box) const
 
 
     if (!box_state.line_boxes.is_empty())
 
         return box_state.margin_box_top() + box_state.offset.y() + box_state.line_boxes.last().baseline();
 
-    if (box.has_children() && !box.children_are_inline()) {
 
-        // If none of the children have a baseline set, the bottom margin edge of the box is used.
 
-        if (auto const* child_box = box_child_to_derive_baseline_from(box)) {
 
-            return box_baseline(*child_box);
 
-        }
 
+    if (auto const* child_box = box_child_to_derive_baseline_from(box)) {
 
+        return box_baseline(*child_box);
 
     }
 
+    // If none of the children have a baseline set, the bottom margin edge of the box is used.
 
     return box_state.margin_box_height();
 
 }

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