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: Account for float intrusions in list marker x offset

Aliaksandr Kalenik 1 year ago
parent
240ec9aeed
commit
0060fe3095
3 changed files with 81 additions and 1 deletions
Split View Show Diff Stats
  1. 65 0
      Tests/LibWeb/Layout/expected/block-and-inline/list-markers-intruded-by-float.txt
  2. 13 0
      Tests/LibWeb/Layout/input/block-and-inline/list-markers-intruded-by-float.html
  3. 3 1
      Userland/Libraries/LibWeb/Layout/BlockFormattingContext.cpp

+ 65 - 0
Tests/LibWeb/Layout/expected/block-and-inline/list-markers-intruded-by-float.txt
View File 

@@ -0,0 +1,65 @@
 
+Viewport <#document> at (0,0) content-size 800x600 children: not-inline
 
+  BlockContainer <html> at (0,0) content-size 800x128.8125 [BFC] children: not-inline
 
+    BlockContainer <body> at (8,16) content-size 784x104.8125 children: not-inline
 
+      BlockContainer <div.box> at (18,26) content-size 200x100 floating [BFC] children: not-inline
 
+      BlockContainer <ul> at (48,16) content-size 744x104.8125 children: not-inline
 
+        ListItemBox <li> at (48,16) content-size 744x17.46875 children: inline
 
+          line 0 width: 9.34375, height: 17.46875, bottom: 17.46875, baseline: 13.53125
 
+            frag 0 from TextNode start: 0, length: 1, rect: [328,16 9.34375x17.46875]
 
+              "a"
 
+          TextNode <#text>
 
+          ListItemMarkerBox <(anonymous)> at (304,16.234375) content-size 12x17 children: not-inline
 
+        ListItemBox <li> at (48,33.46875) content-size 744x17.46875 children: inline
 
+          line 0 width: 9.34375, height: 17.46875, bottom: 17.46875, baseline: 13.53125
 
+            frag 0 from TextNode start: 0, length: 1, rect: [328,33.46875 9.34375x17.46875]
 
+              "a"
 
+          TextNode <#text>
 
+          ListItemMarkerBox <(anonymous)> at (304,33.703125) content-size 12x17 children: not-inline
 
+        ListItemBox <li> at (48,50.9375) content-size 744x17.46875 children: inline
 
+          line 0 width: 9.34375, height: 17.46875, bottom: 17.46875, baseline: 13.53125
 
+            frag 0 from TextNode start: 0, length: 1, rect: [328,50.9375 9.34375x17.46875]
 
+              "a"
 
+          TextNode <#text>
 
+          ListItemMarkerBox <(anonymous)> at (304,51.171875) content-size 12x17 children: not-inline
 
+        ListItemBox <li> at (48,68.40625) content-size 744x17.46875 children: inline
 
+          line 0 width: 9.34375, height: 17.46875, bottom: 17.46875, baseline: 13.53125
 
+            frag 0 from TextNode start: 0, length: 1, rect: [328,68.40625 9.34375x17.46875]
 
+              "a"
 
+          TextNode <#text>
 
+          ListItemMarkerBox <(anonymous)> at (304,68.640625) content-size 12x17 children: not-inline
 
+        ListItemBox <li> at (48,85.875) content-size 744x17.46875 children: inline
 
+          line 0 width: 9.34375, height: 17.46875, bottom: 17.46875, baseline: 13.53125
 
+            frag 0 from TextNode start: 0, length: 1, rect: [328,85.875 9.34375x17.46875]
 
+              "a"
 
+          TextNode <#text>
 
+          ListItemMarkerBox <(anonymous)> at (304,86.109375) content-size 12x17 children: not-inline
 
+        ListItemBox <li> at (48,103.34375) content-size 744x17.46875 children: inline
 
+          line 0 width: 9.34375, height: 17.46875, bottom: 17.46875, baseline: 13.53125
 
+            frag 0 from TextNode start: 0, length: 1, rect: [328,103.34375 9.34375x17.46875]
 
+              "a"
 
+          TextNode <#text>
 
+          ListItemMarkerBox <(anonymous)> at (304,103.578125) content-size 12x17 children: not-inline
 
+
 
+ViewportPaintable (Viewport<#document>) [0,0 800x600]
 
+  PaintableWithLines (BlockContainer<HTML>) [0,0 800x128.8125] overflow: [0,0 800x136]
 
+    PaintableWithLines (BlockContainer<BODY>) [8,16 784x104.8125] overflow: [8,16 784x120]
 
+      PaintableWithLines (BlockContainer<DIV>.box) [8,16 220x120]
 
+      PaintableWithLines (BlockContainer<UL>) [8,16 784x104.8125]
 
+        PaintableWithLines (ListItemBox<LI>) [48,16 744x17.46875]
 
+          TextPaintable (TextNode<#text>)
 
+          MarkerPaintable (ListItemMarkerBox(anonymous)) [304,16.234375 12x17]
 
+        PaintableWithLines (ListItemBox<LI>) [48,33.46875 744x17.46875]
 
+          TextPaintable (TextNode<#text>)
 
+          MarkerPaintable (ListItemMarkerBox(anonymous)) [304,33.703125 12x17]
 
+        PaintableWithLines (ListItemBox<LI>) [48,50.9375 744x17.46875]
 
+          TextPaintable (TextNode<#text>)
 
+          MarkerPaintable (ListItemMarkerBox(anonymous)) [304,51.171875 12x17]
 
+        PaintableWithLines (ListItemBox<LI>) [48,68.40625 744x17.46875]
 
+          TextPaintable (TextNode<#text>)
 
+          MarkerPaintable (ListItemMarkerBox(anonymous)) [304,68.640625 12x17]
 
+        PaintableWithLines (ListItemBox<LI>) [48,85.875 744x17.46875]
 
+          TextPaintable (TextNode<#text>)
 
+          MarkerPaintable (ListItemMarkerBox(anonymous)) [304,86.109375 12x17]
 
+        PaintableWithLines (ListItemBox<LI>) [48,103.34375 744x17.46875]
 
+          TextPaintable (TextNode<#text>)
 
+          MarkerPaintable (ListItemMarkerBox(anonymous)) [304,103.578125 12x17]

+ 13 - 0
Tests/LibWeb/Layout/input/block-and-inline/list-markers-intruded-by-float.html
View File 

@@ -0,0 +1,13 @@
 
+<!DOCTYPE html><style>
 
+    .box {
 
+      border: 10px solid black;
 
+      width: 200px;
 
+      height: 100px;
 
+      float: left;
 
+      margin-right: 100px;
 
+    }
 
+  
+    li {
 
+      background-color: chartreuse;
 
+    }
 
+  </style><div class="box"></div><ul><li>a</li><li>a</li><li>a</li><li>a</li><li>a</li><li>a</li>

+ 3 - 1
Userland/Libraries/LibWeb/Layout/BlockFormattingContext.cpp
View File 

@@ -1084,7 +1084,9 @@ void BlockFormattingContext::layout_list_item_marker(ListItemBox const& list_ite
 
         list_item_state.set_content_width(list_item_state.content_width() - final_marker_width);
 
     }
 
 
-    marker_state.set_content_offset({ -final_marker_width, max(CSSPixels(0), (CSSPixels(marker.line_height()) - marker_state.content_height()) / 2) });
 
+    auto offset_y = max(CSSPixels(0), (CSSPixels(marker.line_height()) - marker_state.content_height()) / 2);
 
+    auto space_and_containing_margin = intrusion_by_floats_into_box(list_item_box, offset_y);
 
+    marker_state.set_content_offset({ space_and_containing_margin.left - final_marker_width, offset_y });
 
 
     if (marker_state.content_height() > list_item_state.content_height())
 
         list_item_state.set_content_height(marker_state.content_height());

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