We use cookies to ensure you get the best experience on our website
首頁 探索 說明
註冊 登入
0ct0pu5
/
ladybird
1
0
複刻 0
Files 問題管理 0 合併請求 0 Wiki
瀏覽代碼

LibWeb: Support flex-basis: calc(...)

1. Propagate calc() values from StyleProperties to ComputedValues.
2. Actually resolve calc() values when determining the used flex basis.

This makes the "support" section on https://shopify.com/ show up
correctly as a 2x2 grid (instead of 1x4). :^)
Andreas Kling 2 年之前
父節點
e81d4ca1ac
當前提交
2e13f65ff4
共有 4 個文件被更改，包括 59 次插入 和 4 次删除
統一視圖 顯示文件統計
  1. 24 0
      Tests/LibWeb/Layout/expected/flex/calc-flex-basis.txt
  2. 18 0
      Tests/LibWeb/Layout/input/flex/calc-flex-basis.html
  3. 3 0
      Userland/Libraries/LibWeb/CSS/StyleProperties.cpp
  4. 14 4
      Userland/Libraries/LibWeb/Layout/FlexFormattingContext.cpp

+ 24 - 0
Tests/LibWeb/Layout/expected/flex/calc-flex-basis.txt
查看文件 

@@ -0,0 +1,24 @@
 
+Viewport <#document> at (0,0) content-size 800x600 children: not-inline
 
+  BlockContainer <html> at (1,1) content-size 798x80 [BFC] children: not-inline
 
+    BlockContainer <body> at (10,10) content-size 780x62 children: not-inline
 
+      Box <div.flex-container> at (11,11) content-size 778x60 flex-container(row) [FFC] children: not-inline
 
+        BlockContainer <div.flex-item> at (12,12) content-size 386x28 flex-item [BFC] children: inline
 
+          line 0 width: 58.398437, height: 21.835937, bottom: 21.835937, baseline: 16.914062
 
+            frag 0 from TextNode start: 0, length: 6, rect: [12,12 58.398437x21.835937]
 
+              "Item 1"
 
+          TextNode <#text>
 
+        BlockContainer <div.flex-item> at (401,12) content-size 386x28 flex-item [BFC] children: inline
 
+          line 0 width: 61.484375, height: 21.835937, bottom: 21.835937, baseline: 16.914062
 
+            frag 0 from TextNode start: 0, length: 6, rect: [401,12 61.484375x21.835937]
 
+              "Item 2"
 
+          TextNode <#text>
 
+        BlockContainer <div.flex-item> at (12,42) content-size 386x28 flex-item [BFC] children: inline
 
+          line 0 width: 61.835937, height: 21.835937, bottom: 21.835937, baseline: 16.914062
 
+            frag 0 from TextNode start: 0, length: 6, rect: [12,42 61.835937x21.835937]
 
+              "Item 3"
 
+          TextNode <#text>
 
+        BlockContainer <div.flex-item> at (401,42) content-size 386x28 flex-item [BFC] children: inline
 
+          line 0 width: 60.15625, height: 21.835937, bottom: 21.835937, baseline: 16.914062
 
+            frag 0 from TextNode start: 0, length: 6, rect: [401,42 60.15625x21.835937]
 
+              "Item 4"
 
+          TextNode <#text>

+ 18 - 0
Tests/LibWeb/Layout/input/flex/calc-flex-basis.html
查看文件 

@@ -0,0 +1,18 @@
 
+<!doctype html><style>
 
+* {
 
+    border: 1px solid black;
 
+    box-sizing: border-box;
 
+    font: 20px SerenitySans;
 
+}
 
+.flex-container {
 
+    display: flex;
 
+    flex-wrap: wrap;
 
+    background: pink;
 
+    column-gap: 1px;
 
+}
 
+.flex-item {
 
+    flex-basis: calc(50% - 1px);
 
+    background: orange;
 
+    height: 30px;
 
+}
 
+</style><div class="flex-container"><div class="flex-item">Item 1</div><div class="flex-item">Item 2</div><div class="flex-item">Item 3</div><div class="flex-item">Item 4</div></div>

+ 3 - 0
Userland/Libraries/LibWeb/CSS/StyleProperties.cpp
查看文件 

@@ -294,6 +294,9 @@ Optional<CSS::FlexBasisData> StyleProperties::flex_basis() const
 
     if (value->has_length())
 
     if (value->has_length())
 
         return { { CSS::FlexBasis::LengthPercentage, value->to_length() } };
 
         return { { CSS::FlexBasis::LengthPercentage, value->to_length() } };
 
 
 
+    if (value->is_calculated())
 
+        return { { CSS::FlexBasis::LengthPercentage, CSS::LengthPercentage { value->as_calculated() } } };
 
+
 
     return {};
 
     return {};
 
 }
 
 }

+ 14 - 4
Userland/Libraries/LibWeb/Layout/FlexFormattingContext.cpp
查看文件 

@@ -34,6 +34,8 @@ static CSS::Size to_css_size(CSS::LengthPercentage const& length_percentage)
 
         return CSS::Size::make_auto();
 
         return CSS::Size::make_auto();
 
     if (length_percentage.is_length())
 
     if (length_percentage.is_length())
 
         return CSS::Size::make_length(length_percentage.length());
 
         return CSS::Size::make_length(length_percentage.length());
 
+    if (length_percentage.is_calculated())
 
+        return CSS::Size::make_calculated(length_percentage.calculated());
 
     return CSS::Size::make_percentage(length_percentage.percentage());
 
     return CSS::Size::make_percentage(length_percentage.percentage());
 
 }
 
 }
 
 
 
@@ -612,13 +614,21 @@ void FlexFormattingContext::determine_flex_base_size_and_hypothetical_main_size(
 
                 return false;
 
                 return false;
 
             if (flex_basis.length_percentage->is_length())
 
             if (flex_basis.length_percentage->is_length())
 
                 return true;
 
                 return true;
 
+
 
+            bool can_resolve_percentages = is_row_layout()
 
+                ? m_flex_container_state.has_definite_width()
 
+                : m_flex_container_state.has_definite_height();
 
+
 
             if (flex_basis.length_percentage->is_calculated()) {
 
             if (flex_basis.length_percentage->is_calculated()) {
 
-                // FIXME: Handle calc() in used flex basis.
 
+                auto const& calc_value = *flex_basis.length_percentage->calculated();
 
+                if (calc_value.resolves_to_length())
 
+                    return true;
 
+                if (calc_value.resolves_to_percentage() || (calc_value.resolves_to_length() && calc_value.contains_percentage()))
 
+                    return can_resolve_percentages;
 
                 return false;
 
                 return false;
 
             }
 
             }
 
-            if (is_row_layout())
 
-                return m_flex_container_state.has_definite_width();
 
-            return m_flex_container_state.has_definite_height();
 
+            VERIFY(flex_basis.length_percentage->is_percentage());
 
+            return can_resolve_percentages;
 
         }(item.used_flex_basis);
 
         }(item.used_flex_basis);
 
 
 
         // A. If the item has a definite used flex basis, that’s the flex base size.
 
         // A. If the item has a definite used flex basis, that’s the flex base size.

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