Changeset 282267 in webkit

Timestamp:

Sep 10, 2021 7:26:56 AM (10 months ago)

Author:

svillar@igalia.com

Message:

[css-flexbox] Add support for self-start & self-end css-align-3 positional alignment properties
​https://bugs.webkit.org/show_bug.cgi?id=229996

Reviewed by Manuel Rego Casasnovas.

Source/WebCore:

Added support for SelfStart and SelfEnd positional alignment properties from
​https://drafts.csswg.org/css-align-3/#positional-values. These two properties
align the alignment subject (flex item) to be flush with the edge of the alignment container (flex line)
corresponding to the alignment subject's start side in the appropriate axis. This allows authors to align
the flex items based on their writing modes instead of the writing mode of the container.

• rendering/RenderFlexibleBox.cpp:

(WebCore::alignmentOffset):
(WebCore::RenderFlexibleBox::alignmentForChild const):

LayoutTests:

• TestExpectations: Removed a couple of tests that are now passing.

Location:

trunk

Files:

• LayoutTests/ChangeLog (modified) (1 diff)
• LayoutTests/TestExpectations (modified) (1 diff)
• Source/WebCore/ChangeLog (modified) (1 diff)
• Source/WebCore/rendering/RenderFlexibleBox.cpp (modified) (4 diffs)

trunk/LayoutTests/ChangeLog

@@ +1 @@
+2021-09-07  Sergio Villar Senin  <svillar@igalia.com>
+
+        [css-flexbox] Add support for self-start & self-end css-align-3 positional alignment properties
+        https://bugs.webkit.org/show_bug.cgi?id=229996
+
+        Reviewed by Manuel Rego Casasnovas.
+
+        * TestExpectations: Removed a couple of tests that are now passing.
+
 2021-09-10  Alan Bujtas  <zalan@apple.com>
 

trunk/LayoutTests/TestExpectations

@@ -4168 +4168 @@
 webkit.org/b/221474 imported/w3c/web-platform-tests/css/css-flexbox/svg-root-as-flex-item-003.html [ ImageOnlyFailure ]
 
+# The test works fine but the expected result fails due to a missing layout.
 webkit.org/b/221468 imported/w3c/web-platform-tests/css/css-flexbox/flexbox-align-self-horiz-002.xhtml [ ImageOnlyFailure ]
-webkit.org/b/221468 imported/w3c/web-platform-tests/css/css-flexbox/flexbox-align-self-vert-002.xhtml [ ImageOnlyFailure ]
-webkit.org/b/221468 imported/w3c/web-platform-tests/css/css-flexbox/flexbox-align-self-vert-rtl-005.xhtml [ ImageOnlyFailure ]
 
 # align baseline in flexbox.

trunk/Source/WebCore/ChangeLog

@@ +1 @@
+2021-09-07  Sergio Villar Senin  <svillar@igalia.com>
+
+        [css-flexbox] Add support for self-start & self-end css-align-3 positional alignment properties
+        https://bugs.webkit.org/show_bug.cgi?id=229996
+
+        Reviewed by Manuel Rego Casasnovas.
+
+        Added support for SelfStart and SelfEnd positional alignment properties from
+        https://drafts.csswg.org/css-align-3/#positional-values. These two properties
+        align the alignment subject (flex item) to be flush with the edge of the alignment container (flex line)
+        corresponding to the alignment subject's start side in the appropriate axis. This allows authors to align
+        the flex items based on their writing modes instead of the writing mode of the container.
+
+        * rendering/RenderFlexibleBox.cpp:
+        (WebCore::alignmentOffset):
+        (WebCore::RenderFlexibleBox::alignmentForChild const):
+
 2021-09-10  Alan Bujtas  <zalan@apple.com>
 

trunk/Source/WebCore/rendering/RenderFlexibleBox.cpp

@@ -40 +40 @@
 #include "RenderStyleConstants.h"
 #include "RenderView.h"
+#include "WritingMode.h"
 #include <limits>
 #include <wtf/IsoMallocInlines.h>
@@ -1571 +1572 @@
     case ItemPosition::Start:
     case ItemPosition::End:
+    case ItemPosition::SelfStart:
+    case ItemPosition::SelfEnd:
     case ItemPosition::Left:
     case ItemPosition::Right:
@@ -1597 +1600 @@
         return maxAscent - ascent;
     case ItemPosition::LastBaseline:
-    case ItemPosition::SelfStart:
-    case ItemPosition::SelfEnd:
         // FIXME: Implement last baseline.
         break;
@@ -1722 +1723 @@
     if (align == ItemPosition::End)
         return ItemPosition::FlexEnd;
+
+    if (align == ItemPosition::SelfStart || align == ItemPosition::SelfEnd) {
+        // self-start corresponds to flex-start (and self-end to flex-end) in the majority of the cases
+        // for orthogonal layouts except when the container is flipped blocks writing mode (vrl/hbt) and
+        // the child is ltr or the other way around. For example:
+        // 1) htb ltr child inside a vrl container: self-start corresponds to flex-end
+        // 2) htb rtl child inside a vlr container: self-end corresponds to flex-start
+        bool isOrthogonal = style().isHorizontalWritingMode() != child.style().isHorizontalWritingMode();
+        if (isOrthogonal && (style().isFlippedBlocksWritingMode() == child.style().isLeftToRightDirection()))
+            return align == ItemPosition::SelfStart ? ItemPosition::FlexEnd : ItemPosition::FlexStart;
+
+        if (!isOrthogonal) {
+            if (style().isFlippedLinesWritingMode() != child.style().isFlippedLinesWritingMode())
+                return align == ItemPosition::SelfStart ? ItemPosition::FlexEnd : ItemPosition::FlexStart;
+            if (style().isLeftToRightDirection() != child.style().isLeftToRightDirection())
+                return align == ItemPosition::SelfStart ? ItemPosition::FlexEnd : ItemPosition::FlexStart;
+        }
+
+        return align == ItemPosition::SelfStart ? ItemPosition::FlexStart : ItemPosition::FlexEnd;
+    }
 
     if (style().flexWrap() == FlexWrap::Reverse) {