Changeset 294231 in webkit

Timestamp:

May 16, 2022 6:16:41 AM (2 years ago)

Author:

Alan Bujtas

Message:

[LFC][FFC] Add "flex-direction: column" basic visual/logical conversion
​https://bugs.webkit.org/show_bug.cgi?id=240430

Reviewed by Antti Koivisto.

With "flex-direction: column" the main axis progression is based on the margin box height.

• layout/formattingContexts/flex/FlexFormattingContext.cpp:

(WebCore::Layout::FlexFormattingContext::layoutInFlowContentForIntegration):

Location:

trunk/Source/WebCore

Files:

• ChangeLog (modified) (1 diff)
• layout/formattingContexts/flex/FlexFormattingContext.cpp (modified) (2 diffs)

trunk/Source/WebCore/ChangeLog

@@ +1 @@
+2022-05-16  Alan Bujtas  <zalan@apple.com>
+
+        [LFC][FFC] Add "flex-direction: column" basic visual/logical conversion
+        https://bugs.webkit.org/show_bug.cgi?id=240430
+
+        Reviewed by Antti Koivisto.
+
+        With "flex-direction: column" the main axis progression is based on the margin box height.
+
+        * layout/formattingContexts/flex/FlexFormattingContext.cpp:
+        (WebCore::Layout::FlexFormattingContext::layoutInFlowContentForIntegration):
+
 2022-05-15  Philippe Normand  <philn@igalia.com>
 

trunk/Source/WebCore/layout/formattingContexts/flex/FlexFormattingContext.cpp

@@ -135 +135 @@
     auto convertVisualToLogical = [&] {
         // FIXME: Convert visual (row/column) direction to logical.
+        auto direction = root().style().flexDirection();
+
         logicalLeft = constraints.horizontal().logicalLeft;
         logicalTop = constraints.logicalTop();
-    
+
         for (auto& flexItem : childrenOfType<ContainerBox>(root())) {
             auto& flexItemGeometry = formattingState.boxGeometry(flexItem);
-            logicalFlexItemList.append({ { LayoutSize { flexItemGeometry.marginBoxWidth(), flexItemGeometry.marginBoxHeight() } }, flexItem });
+            auto logicalSize = LayoutSize { };
+
+            switch (direction) {
+            case FlexDirection::Row:
+                logicalSize = { flexItemGeometry.marginBoxWidth(), flexItemGeometry.marginBoxHeight() };
+                break;
+            case FlexDirection::Column:
+                logicalSize = { flexItemGeometry.marginBoxHeight(), flexItemGeometry.marginBoxWidth() };
+                break;
+            case FlexDirection::RowReverse:
+            case FlexDirection::ColumnReverse:
+                ASSERT_NOT_IMPLEMENTED_YET();
+                break;
+            default:
+                ASSERT_NOT_REACHED();
+                break;
+            }
+            logicalFlexItemList.append({ { logicalSize }, flexItem });
         }
     };
@@ -152 +171 @@
     auto convertLogicalToVisual = [&] {
         // FIXME: Convert logical coordinates to visual.
+        auto direction = root().style().flexDirection();
         for (auto& logicalFlexItem : logicalFlexItemList) {
             auto& flexItemGeometry = formattingState.boxGeometry(logicalFlexItem.flexItem);
-            flexItemGeometry.setLogicalTopLeft(logicalFlexItem.rect.topLeft());
+            auto topLeft = LayoutPoint { };
+
+            switch (direction) {
+            case FlexDirection::Row:
+                topLeft = logicalFlexItem.rect.topLeft();
+                break;
+            case FlexDirection::Column:
+                topLeft = logicalFlexItem.rect.topLeft().transposedPoint();
+                break;
+            case FlexDirection::RowReverse:
+            case FlexDirection::ColumnReverse:
+                ASSERT_NOT_IMPLEMENTED_YET();
+                break;
+            default:
+                ASSERT_NOT_REACHED();
+                break;
+            }
+            flexItemGeometry.setLogicalTopLeft(topLeft);
         }
     };