Changeset 210792 in webkit

Timestamp:

Jan 16, 2017 3:15:26 PM (7 years ago)

Author:

jfernandez@igalia.com

Message:

[css-grid] Implementing baseline positioning for grid containers
​https://bugs.webkit.org/show_bug.cgi?id=165063

Reviewed by Darin Adler and Sergio Villar Senin.

Source/WebCore:

Implementation of the 'first-line' baseline for Grid containers,
according to the CSS Grid Layout spec.
​https://drafts.csswg.org/css-grid/#grid-baselines

The self-baseline and content-baseline alignment logic is still
not implemented, hence some cases will be implemented in
future patches.

Tests: fast/css-grid-layout/grid-baseline-margins.html

fast/css-grid-layout/grid-baseline-must-respect-grid-order.html
fast/css-grid-layout/grid-baseline.html

• rendering/RenderGrid.cpp:

(WebCore::synthesizedBaselineFromBorderBox):
(WebCore::RenderGrid::isInlineBaselineAlignedChild):
(WebCore::RenderGrid::baselinePosition):
(WebCore::RenderGrid::firstLineBaseline):
(WebCore::RenderGrid::inlineBlockBaseline):

• rendering/RenderGrid.h:

LayoutTests:

Tests to verify the baseline positioning of grid and inline-grid blocks.
Note that two of these new tests are expected to fail because of a Flexbox
bug, since we use Flexbox as reference test.

• TestExpectations:
• fast/css-grid-layout/grid-baseline-expected.html: Added.
• fast/css-grid-layout/grid-baseline-margins-expected.html: Added.
• fast/css-grid-layout/grid-baseline-margins.html: Added.
• fast/css-grid-layout/grid-baseline-must-respect-grid-order-expected.txt: Added.
• fast/css-grid-layout/grid-baseline-must-respect-grid-order.html: Added.
• fast/css-grid-layout/grid-baseline.html: Added.
• fast/css-grid-layout/resources/grid-alignment.css:

(.alignSelfBaseline):
(.selfBaseline):

Location:

trunk

Files:

• LayoutTests/ChangeLog (modified) (1 diff)
• LayoutTests/TestExpectations (modified) (1 diff)
• LayoutTests/fast/css-grid-layout/grid-baseline-expected.html (added)
• LayoutTests/fast/css-grid-layout/grid-baseline-margins-expected.html (added)
• LayoutTests/fast/css-grid-layout/grid-baseline-margins.html (added)
• LayoutTests/fast/css-grid-layout/grid-baseline-must-respect-grid-order-expected.txt (added)
• LayoutTests/fast/css-grid-layout/grid-baseline-must-respect-grid-order.html (added)
• LayoutTests/fast/css-grid-layout/grid-baseline.html (added)
• LayoutTests/fast/css-grid-layout/resources/grid-alignment.css (modified) (2 diffs)
• Source/WebCore/ChangeLog (modified) (1 diff)
• Source/WebCore/rendering/RenderGrid.cpp (modified) (1 diff)
• Source/WebCore/rendering/RenderGrid.h (modified) (1 diff)

trunk/LayoutTests/ChangeLog

@@ +1 @@
+2017-01-16  Javier Fernandez  <jfernandez@igalia.com>
+
+        [css-grid] Implementing baseline positioning for grid containers
+        https://bugs.webkit.org/show_bug.cgi?id=165063
+
+        Reviewed by Darin Adler and Sergio Villar Senin.
+
+        Tests to verify the baseline positioning of grid and inline-grid blocks.
+        Note that two of these new tests are expected to fail because of a Flexbox
+        bug, since we use Flexbox as reference test.
+
+        * TestExpectations:
+        * fast/css-grid-layout/grid-baseline-expected.html: Added.
+        * fast/css-grid-layout/grid-baseline-margins-expected.html: Added.
+        * fast/css-grid-layout/grid-baseline-margins.html: Added.
+        * fast/css-grid-layout/grid-baseline-must-respect-grid-order-expected.txt: Added.
+        * fast/css-grid-layout/grid-baseline-must-respect-grid-order.html: Added.
+        * fast/css-grid-layout/grid-baseline.html: Added.
+        * fast/css-grid-layout/resources/grid-alignment.css:
+        (.alignSelfBaseline):
+        (.selfBaseline):
+
 2017-01-15  Sam Weinig  <sam@webkit.org>
 

trunk/LayoutTests/TestExpectations

@@ -262 +262 @@
 webkit.org/b/136754 css3/flexbox/csswg/ttwf-reftest-flex-wrap-reverse.html [ ImageOnlyFailure ]
 webkit.org/b/136754 css3/flexbox/csswg/ttwf-reftest-flex-wrap.html [ ImageOnlyFailure ]
+
+# grid layout tests
+webkit.org/b/165062 fast/css-grid-layout/grid-baseline.html [ ImageOnlyFailure ]
+webkit.org/b/165062 fast/css-grid-layout/grid-baseline-margins.html [ ImageOnlyFailure ]
 
 # nth-child tests takes long time and Debug build sometimes timeouts because there are many test cases.

trunk/LayoutTests/fast/css-grid-layout/resources/grid-alignment.css

@@ -18 +18 @@
 .alignSelfEndSafe { align-self: end safe; }
 .alignSelfEndUnsafe { align-self: end unsafe; }
+
+.alignSelfBaseline { align-self: baseline; }
 
 /* align-items */
@@ -127 +129 @@
 }
 
+.selfBaseline {
+    align-self: baseline;
+    justify-self: baseline;
+}
+
 /* Both align-self and justify-self */
 .selfStretch {

trunk/Source/WebCore/ChangeLog

@@ +1 @@
+2017-01-16  Javier Fernandez  <jfernandez@igalia.com>
+
+        [css-grid] Implementing baseline positioning for grid containers
+        https://bugs.webkit.org/show_bug.cgi?id=165063
+
+        Reviewed by Darin Adler and Sergio Villar Senin.
+
+        Implementation of the 'first-line' baseline for Grid containers,
+        according to the CSS Grid Layout spec.
+        https://drafts.csswg.org/css-grid/#grid-baselines
+
+        The self-baseline and content-baseline alignment logic is still
+        not implemented, hence some cases will be implemented in
+        future patches.
+
+        Tests: fast/css-grid-layout/grid-baseline-margins.html
+               fast/css-grid-layout/grid-baseline-must-respect-grid-order.html
+               fast/css-grid-layout/grid-baseline.html
+
+        * rendering/RenderGrid.cpp:
+        (WebCore::synthesizedBaselineFromBorderBox):
+        (WebCore::RenderGrid::isInlineBaselineAlignedChild):
+        (WebCore::RenderGrid::baselinePosition):
+        (WebCore::RenderGrid::firstLineBaseline):
+        (WebCore::RenderGrid::inlineBlockBaseline):
+        * rendering/RenderGrid.h:
+
 2017-01-16  Andy Estes  <aestes@apple.com>
 

trunk/Source/WebCore/rendering/RenderGrid.cpp

@@ -2498 +2498 @@
         child.setMarginAfter(availableAlignmentSpace, &parentStyle);
     }
+}
+
+// FIXME: This logic could be refactored somehow and defined in RenderBox.
+static int synthesizedBaselineFromBorderBox(const RenderBox& box, LineDirectionMode direction)
+{
+    return (direction == HorizontalLine ? box.size().height() : box.size().width()).toInt();
+}
+
+bool RenderGrid::isInlineBaselineAlignedChild(const RenderBox& child) const
+{
+    return alignSelfForChild(child).position() == ItemPositionBaseline && !isOrthogonalChild(child) && !hasAutoMarginsInColumnAxis(child);
+}
+
+// FIXME: This logic is shared by RenderFlexibleBox, so it might be refactored somehow.
+int RenderGrid::baselinePosition(FontBaseline, bool, LineDirectionMode direction, LinePositionMode mode) const
+{
+#if ENABLE(ASSERT)
+    ASSERT(mode == PositionOnContainingLine);
+#else
+    UNUSED_PARAM(mode);
+#endif
+    int baseline = firstLineBaseline().value_or(synthesizedBaselineFromBorderBox(*this, direction));
+
+    int marginSize = direction == HorizontalLine ? verticalMarginExtent() : horizontalMarginExtent();
+    return baseline + marginSize;
+}
+
+std::optional<int> RenderGrid::firstLineBaseline() const
+{
+    if (isWritingModeRoot() || !m_grid.hasGridItems())
+        return std::nullopt;
+
+    const RenderBox* baselineChild = nullptr;
+    // Finding the first grid item in grid order.
+    unsigned numColumns = m_grid.numTracks(ForColumns);
+    for (size_t column = 0; column < numColumns; column++) {
+        for (const auto* child : m_grid.cell(0, column)) {
+            // If an item participates in baseline alignment, we select such item.
+            if (isInlineBaselineAlignedChild(*child)) {
+                // FIXME: self-baseline and content-baseline alignment not implemented yet.
+                baselineChild = child;
+                break;
+            }
+            if (!baselineChild)
+                baselineChild = child;
+        }
+    }
+
+    if (!baselineChild)
+        return std::nullopt;
+
+    auto baseline = isOrthogonalChild(*baselineChild) ? std::nullopt : baselineChild->firstLineBaseline();
+    // We take border-box's bottom if no valid baseline.
+    if (!baseline) {
+        // FIXME: We should pass |direction| into firstLineBaseline and stop bailing out if we're a writing
+        // mode root. This would also fix some cases where the grid is orthogonal to its container.
+        LineDirectionMode direction = isHorizontalWritingMode() ? HorizontalLine : VerticalLine;
+        return synthesizedBaselineFromBorderBox(*baselineChild, direction) + baselineChild->logicalTop().toInt();
+    }
+    return baseline.value() + baselineChild->logicalTop().toInt();
+}
+
+std::optional<int> RenderGrid::inlineBlockBaseline(LineDirectionMode direction) const
+{
+    if (std::optional<int> baseline = firstLineBaseline())
+        return baseline;
+
+    int marginAscent = direction == HorizontalLine ? marginTop() : marginRight();
+    return synthesizedBaselineFromBorderBox(*this, direction) + marginAscent;
 }
 

trunk/Source/WebCore/rendering/RenderGrid.h

@@ -183 +183 @@
     void updateAutoMarginsInRowAxisIfNeeded(RenderBox&);
 
+    int baselinePosition(FontBaseline, bool firstLine, LineDirectionMode, LinePositionMode = PositionOnContainingLine) const final;
+    std::optional<int> firstLineBaseline() const final;
+    std::optional<int> inlineBlockBaseline(LineDirectionMode) const final;
+    bool isInlineBaselineAlignedChild(const RenderBox&) const;
+
 #ifndef NDEBUG
     bool tracksAreWiderThanMinTrackBreadth(GridTrackSizingDirection, GridSizingData&);