[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):

git-svn-id: https://svn.webkit.org/repository/webkit/trunk@294231 268f45cc-cd09-0410-ab3c-d52691b4dbfc

diff --git a/Source/WebCore/ChangeLog b/Source/WebCore/ChangeLog
index d372708c60e78d4dce6044155c6330147934ef15..24a48ac966c971ba4a23f3988d20842bdf8a0a12 100644 (file)
--- a/Source/WebCore/ChangeLog
+++ b/Source/WebCore/ChangeLog
@@ -1,3 +1,15 @@
+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>
 
         REGRESSION(r294104): [GStreamer] getUserMedia broken

diff --git a/Source/WebCore/layout/formattingContexts/flex/FlexFormattingContext.cpp b/Source/WebCore/layout/formattingContexts/flex/FlexFormattingContext.cpp
index 9cb0683f863e50ff1b2ac8cb8027b81a529fd0da..d23fa0d18943832b60dbec4161d7ecac9c765b66 100644 (file)
--- a/Source/WebCore/layout/formattingContexts/flex/FlexFormattingContext.cpp
+++ b/Source/WebCore/layout/formattingContexts/flex/FlexFormattingContext.cpp
@@ -134,12 +134,31 @@ void FlexFormattingContext::layoutInFlowContentForIntegration(const ConstraintsF
 
     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 });
         }
     };
     convertVisualToLogical();
@@ -151,9 +170,27 @@ void FlexFormattingContext::layoutInFlowContentForIntegration(const ConstraintsF
 
     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);
         }
     };
     convertLogicalToVisual();