We use cookies to ensure you get the best experience on our website
Strona główna Odkrywaj Pomoc
Zarejestruj się Zaloguj się
0ct0pu5
/
ladybird
1
0
Forkuj 0
Pliki Problemy 0 Oczekujące zmiany 0 Wiki
Przeglądaj źródła

LibWeb: Make sure `float: left` boxes get pushed down if they can't fit

Andreas Kling 2 lat temu
rodzic
52e2095a3f
commit
db545b51ef
5 zmienionych plików z 110 dodań i 9 usunięć
Widok podzielony Pokaż statystyki zmian
  1. 10 0
      Tests/LibWeb/Layout/expected/bfc-float-left-break-vertically-2.txt
  2. 18 0
      Tests/LibWeb/Layout/expected/bfc-float-left-break-vertically.txt
  3. 32 0
      Tests/LibWeb/Layout/input/bfc-float-left-break-vertically-2.html
  4. 44 0
      Tests/LibWeb/Layout/input/bfc-float-left-break-vertically.html
  5. 6 9
      Userland/Libraries/LibWeb/Layout/BlockFormattingContext.cpp

+ 10 - 0
Tests/LibWeb/Layout/expected/bfc-float-left-break-vertically-2.txt
Wyświetl plik 

@@ -0,0 +1,10 @@
 
+Viewport <#document> at (0,0) content-size 800x600 children: not-inline
 
+  BlockContainer <html> at (0,0) content-size 800x150 children: not-inline
 
+    BlockContainer <body> at (0,0) content-size 200x0 children: not-inline
 
+      BlockContainer <ul> at (0,0) content-size 200x0 children: inline
 
+        BlockContainer <div.red> at (0,0) content-size 150x50 floating children: not-inline
 
+        BlockContainer <div.green> at (0,50) content-size 150x50 floating children: not-inline
 
+        TextNode <#text>
 
+      BlockContainer <div.orange> at (0,100) content-size 150x50 floating children: not-inline
 
+      BlockContainer <(anonymous)> at (0,0) content-size 200x0 children: inline
 
+        TextNode <#text>

+ 18 - 0
Tests/LibWeb/Layout/expected/bfc-float-left-break-vertically.txt
Wyświetl plik 

@@ -0,0 +1,18 @@
 
+Viewport <#document> at (0,0) content-size 800x600 children: not-inline
 
+  BlockContainer <html> at (1,1) content-size 798x107 children: not-inline
 
+    BlockContainer <(anonymous)> at (1,1) content-size 798x0 children: inline
 
+      TextNode <#text>
 
+    BlockContainer <body> at (2,2) content-size 400x2 children: not-inline
 
+      BlockContainer <(anonymous)> at (2,2) content-size 400x0 children: inline
 
+        TextNode <#text>
 
+      BlockContainer <div.ul> at (3,3) content-size 398x0 children: inline
 
+        TextNode <#text>
 
+        BlockContainer <div.yellow> at (4,4) content-size 60x50 floating children: not-inline
 
+        TextNode <#text>
 
+        BlockContainer <div.orange> at (66,4) content-size 250x50 floating children: not-inline
 
+        TextNode <#text>
 
+      BlockContainer <(anonymous)> at (2,4) content-size 400x0 children: inline
 
+        TextNode <#text>
 
+      BlockContainer <div.green> at (3,57) content-size 100x50 floating children: not-inline
 
+      BlockContainer <(anonymous)> at (2,4) content-size 400x0 children: inline
 
+        TextNode <#text>

+ 32 - 0
Tests/LibWeb/Layout/input/bfc-float-left-break-vertically-2.html
Wyświetl plik 

@@ -0,0 +1,32 @@
 
+<!DOCTYPE html><html><head><style>
 
+        * {
 
+            margin: 0;
 
+            padding: 0;
 
+        }
 
+
 
+            body {
 
+                width: 200px;
 
+            }
 
+
 
+            div {
 
+                float: left;
 
+                width: 150px;
 
+                height: 50px;
 
+            }
 
+
 
+            .red {
 
+                background: red;
 
+            }
 
+
 
+            .green {
 
+                background: green;
 
+            }
 
+
 
+            .blue {
 
+                background: blue;
 
+            }
 
+
 
+            .orange {
 
+                background: orange;
 
+            }
 
+</style></head><body><ul><div class="red"></div><div class="green"></div> </ul><div class="orange"></div>

+ 44 - 0
Tests/LibWeb/Layout/input/bfc-float-left-break-vertically.html
Wyświetl plik 

@@ -0,0 +1,44 @@
 
+<!DOCTYPE html>
 
+<html>
 
+    <head>
 
+        <style>
 
+            * {
 
+                border: 1px solid black !important;
 
+                margin: 0;
 
+                padding: 0;
 
+            }
 
+
 
+            body {
 
+                width: 400px;
 
+            }
 
+
 
+            .yellow {
 
+                width: 60px;
 
+                height: 50px;
 
+                float: left;
 
+                background: yellow;
 
+            }
 
+
 
+            .orange {
 
+                width: 250px;
 
+                height: 50px;
 
+                float: left;
 
+                background: orange;
 
+            }
 
+
 
+            .green {
 
+                background: lime;
 
+                width: 100px;
 
+                height: 50px;
 
+                float: left;
 
+            }
 
+        </style>
 
+    </head>
 
+    <body>
 
+        <div class="ul">
 
+            <div class="yellow"></div>
 
+            <div class="orange"></div>
 
+        </div>
 
+        <div class="green"></div>
 
+    </body>
 
+</html>

+ 6 - 9
Userland/Libraries/LibWeb/Layout/BlockFormattingContext.cpp
Wyświetl plik 

@@ -785,20 +785,17 @@ void BlockFormattingContext::layout_floating_box(Box const& box, BlockContainer
 
                 }
 
                 did_touch_preceding_float = true;
 
                 if (!fits_next_to_preceding_float)
 
-                    continue;
 
+                    break;
 
                 offset_from_edge = tentative_offset_from_edge;
 
                 did_place_next_to_preceding_float = true;
 
                 break;
 
             }
 
 
-            if (!did_touch_preceding_float) {
 
-                // This box does not touch another floating box, go all the way to the edge.
 
-                float_to_edge();
 
-
 
-                // Also, forget all previous boxes floated to this side while since they're no longer relevant.
 
-                side_data.clear();
 
-            } else if (!did_place_next_to_preceding_float) {
 
-                // We ran out of horizontal space on this "float line", and need to break.
 
+            if (!did_touch_preceding_float || !did_place_next_to_preceding_float) {
 
+                // One of two things happened:
 
+                // - This box does not touch another floating box.
 
+                // - We ran out of horizontal space on this "float line", and need to break.
 
+                // Either way, we float this box all the way to the edge.
 
                 float_to_edge();
 
                 CSSPixels lowest_margin_edge = 0;
 
                 for (auto const& box : side_data.current_boxes) {

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