We use cookies to ensure you get the best experience on our website
صفحهٔ اصلی گشت‌و‌گذار راهنما
ثبت نام ورود
0ct0pu5
/
ladybird
1
0
انشعاب 0
پرونده‌ها مشکلات 0 درخواست واکشی 0 ویکی
فهرست منبع

LibWeb: Only reverse each line of a reverse `flex-direction`

When a flex container with a reverse `flex-direction` is wrapped. Only
each line should be reversed, not all items.
BenJilks 11 ماه پیش
والد
0f9444fa06
کامیت
e2c1fe7255
5فایلهای تغییر یافته به همراه139 افزوده شده و 10 حذف شده
مشاهده تقسیم شده نمایش آمار تفاوت ها
  1. 38 0
      Tests/LibWeb/Layout/expected/flex/flex-column-reverse-constrained-wrap.txt
  2. 38 0
      Tests/LibWeb/Layout/expected/flex/flex-row-reverse-constrained-wrap.txt
  3. 25 0
      Tests/LibWeb/Layout/input/flex/flex-column-reverse-constrained-wrap.html
  4. 24 0
      Tests/LibWeb/Layout/input/flex/flex-row-reverse-constrained-wrap.html
  5. 14 10
      Userland/Libraries/LibWeb/Layout/FlexFormattingContext.cpp

+ 38 - 0
Tests/LibWeb/Layout/expected/flex/flex-column-reverse-constrained-wrap.txt
مشاهده فایل 

@@ -0,0 +1,38 @@
 
+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 784x252 children: not-inline
 
+      Box <div.container.column> at (9,9) content-size 250x250 flex-container(column-reverse) [FFC] children: not-inline
 
+        BlockContainer <(anonymous)> (not painted) [BFC] children: inline
 
+          TextNode <#text>
 
+        BlockContainer <div.box> at (10,158) content-size 100x100 flex-item [BFC] children: inline
 
+          frag 0 from TextNode start: 0, length: 1, rect: [10,158 6.34375x17] baseline: 13.296875
 
+              "1"
 
+          TextNode <#text>
 
+        BlockContainer <(anonymous)> (not painted) [BFC] children: inline
 
+          TextNode <#text>
 
+        BlockContainer <div.box> at (10,56) content-size 100x100 flex-item [BFC] children: inline
 
+          frag 0 from TextNode start: 0, length: 1, rect: [10,56 8.8125x17] baseline: 13.296875
 
+              "2"
 
+          TextNode <#text>
 
+        BlockContainer <(anonymous)> (not painted) [BFC] children: inline
 
+          TextNode <#text>
 
+        BlockContainer <div.box> at (135,158) content-size 100x100 flex-item [BFC] children: inline
 
+          frag 0 from TextNode start: 0, length: 1, rect: [135,158 9.09375x17] baseline: 13.296875
 
+              "3"
 
+          TextNode <#text>
 
+        BlockContainer <(anonymous)> (not painted) [BFC] children: inline
 
+          TextNode <#text>
 
+      BlockContainer <(anonymous)> at (8,260) content-size 784x0 children: inline
 
+        TextNode <#text>
 
+
 
+ViewportPaintable (Viewport<#document>) [0,0 800x600]
 
+  PaintableWithLines (BlockContainer<HTML>) [0,0 800x600]
 
+    PaintableWithLines (BlockContainer<BODY>) [8,8 784x252]
 
+      PaintableBox (Box<DIV>.container.column) [8,8 252x252]
 
+        PaintableWithLines (BlockContainer<DIV>.box) [9,157 102x102]
 
+          TextPaintable (TextNode<#text>)
 
+        PaintableWithLines (BlockContainer<DIV>.box) [9,55 102x102]
 
+          TextPaintable (TextNode<#text>)
 
+        PaintableWithLines (BlockContainer<DIV>.box) [134,157 102x102]
 
+          TextPaintable (TextNode<#text>)
 
+      PaintableWithLines (BlockContainer(anonymous)) [8,260 784x0]

+ 38 - 0
Tests/LibWeb/Layout/expected/flex/flex-row-reverse-constrained-wrap.txt
مشاهده فایل 

@@ -0,0 +1,38 @@
 
+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 784x206 children: not-inline
 
+      Box <div.container> at (9,9) content-size 250x204 flex-container(row-reverse) [FFC] children: not-inline
 
+        BlockContainer <(anonymous)> (not painted) [BFC] children: inline
 
+          TextNode <#text>
 
+        BlockContainer <div.box> at (158,10) content-size 100x100 flex-item [BFC] children: inline
 
+          frag 0 from TextNode start: 0, length: 1, rect: [158,10 6.34375x17] baseline: 13.296875
 
+              "1"
 
+          TextNode <#text>
 
+        BlockContainer <(anonymous)> (not painted) [BFC] children: inline
 
+          TextNode <#text>
 
+        BlockContainer <div.box> at (56,10) content-size 100x100 flex-item [BFC] children: inline
 
+          frag 0 from TextNode start: 0, length: 1, rect: [56,10 8.8125x17] baseline: 13.296875
 
+              "2"
 
+          TextNode <#text>
 
+        BlockContainer <(anonymous)> (not painted) [BFC] children: inline
 
+          TextNode <#text>
 
+        BlockContainer <div.box> at (158,112) content-size 100x100 flex-item [BFC] children: inline
 
+          frag 0 from TextNode start: 0, length: 1, rect: [158,112 9.09375x17] baseline: 13.296875
 
+              "3"
 
+          TextNode <#text>
 
+        BlockContainer <(anonymous)> (not painted) [BFC] children: inline
 
+          TextNode <#text>
 
+      BlockContainer <(anonymous)> at (8,214) content-size 784x0 children: inline
 
+        TextNode <#text>
 
+
 
+ViewportPaintable (Viewport<#document>) [0,0 800x600]
 
+  PaintableWithLines (BlockContainer<HTML>) [0,0 800x600]
 
+    PaintableWithLines (BlockContainer<BODY>) [8,8 784x206]
 
+      PaintableBox (Box<DIV>.container) [8,8 252x206]
 
+        PaintableWithLines (BlockContainer<DIV>.box) [157,9 102x102]
 
+          TextPaintable (TextNode<#text>)
 
+        PaintableWithLines (BlockContainer<DIV>.box) [55,9 102x102]
 
+          TextPaintable (TextNode<#text>)
 
+        PaintableWithLines (BlockContainer<DIV>.box) [157,111 102x102]
 
+          TextPaintable (TextNode<#text>)
 
+      PaintableWithLines (BlockContainer(anonymous)) [8,214 784x0]

+ 25 - 0
Tests/LibWeb/Layout/input/flex/flex-column-reverse-constrained-wrap.html
مشاهده فایل 

@@ -0,0 +1,25 @@
 
+<style>
 
+    body {
 
+        font-family: 'SerenitySans';
 
+    }
 
+
 
+    .container {
 
+        display: flex;
 
+        border: 1px solid salmon;
 
+        flex-direction: column-reverse;
 
+        height: 250px;
 
+        width: 250px;
 
+        flex-wrap: wrap;
 
+    }
 
+
 
+    .box {
 
+        width: 100px;
 
+        height: 100px;
 
+        border: 1px solid black;
 
+    }
 
+</style>
 
+<div class="container column">
 
+    <div class="box">1</div>
 
+    <div class="box">2</div>
 
+    <div class="box">3</div>
 
+</div>

+ 24 - 0
Tests/LibWeb/Layout/input/flex/flex-row-reverse-constrained-wrap.html
مشاهده فایل 

@@ -0,0 +1,24 @@
 
+<style>
 
+    body {
 
+        font-family: 'SerenitySans';
 
+    }
 
+
 
+    .container {
 
+        display: flex;
 
+        border: 1px solid salmon;
 
+        width: 250px;
 
+        flex-direction: row-reverse;
 
+        flex-wrap: wrap;
 
+    }
 
+
 
+    .box {
 
+        width: 100px;
 
+        height: 100px;
 
+        border: 1px solid black;
 
+    }
 
+</style>
 
+<div class="container">
 
+    <div class="box">1</div>
 
+    <div class="box">2</div>
 
+    <div class="box">3</div>
 
+</div>

+ 14 - 10
Userland/Libraries/LibWeb/Layout/FlexFormattingContext.cpp
مشاهده فایل 

@@ -295,14 +295,8 @@ void FlexFormattingContext::generate_anonymous_flex_items()
 
         auto order_bucket = order_item_bucket.get(key);
 
         if (order_bucket.has_value()) {
 
             auto& items = order_bucket.value();
 
-            if (is_direction_reverse()) {
 
-                for (auto item : items.in_reverse()) {
 
-                    m_flex_items.append(move(item));
 
-                }
 
-            } else {
 
-                for (auto item : items) {
 
-                    m_flex_items.append(move(item));
 
-                }
 
+            for (auto item : items) {
 
+                m_flex_items.append(move(item));
 
             }
 
         }
 
     }
 
@@ -776,7 +770,11 @@ void FlexFormattingContext::collect_flex_items_into_flex_lines()
 
     if (is_single_line()) {
 
         FlexLine line;
 
         for (auto& item : m_flex_items) {
 
-            line.items.append(item);
 
+            if (is_direction_reverse()) {
 
+                line.items.prepend(item);
 
+            } else {
 
+                line.items.append(item);
 
+            }
 
         }
 
         m_flex_lines.append(move(line));
 
         return;
 
@@ -800,7 +798,13 @@ void FlexFormattingContext::collect_flex_items_into_flex_lines()
 
             line = {};
 
             line_main_size = 0;
 
         }
 
-        line.items.append(item);
 
+
 
+        if (is_direction_reverse()) {
 
+            line.items.prepend(item);
 
+        } else {
 
+            line.items.append(item);
 
+        }
 
+
 
         line_main_size += outer_hypothetical_main_size;
 
         // CSS-FLEXBOX-2: Account for gap between flex items.
 
         line_main_size += main_gap();

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