Changeset 107624 in webkit

Timestamp:

Feb 13, 2012 3:37:55 PM (12 years ago)

Author:

ojan@chromium.org

Message:

nesting horizontal flexboxes is broken
​https://bugs.webkit.org/show_bug.cgi?id=76867

Reviewed by David Hyatt.

Source/WebCore:

This is copied from RenderDeprecatedFlexibleBox and updated
for RenderFlexibleBox and to handle vertical writing mode.

Tests: css3/flexbox/preferred-widths-orthogonal.html

css3/flexbox/preferred-widths.html

• rendering/RenderBlock.cpp:

(WebCore::RenderBlock::computePreferredLogicalWidths):

• rendering/RenderFlexibleBox.cpp:

(WebCore::marginWidthForChild):
(WebCore):
(WebCore::RenderFlexibleBox::computePreferredLogicalWidths):

• rendering/RenderFlexibleBox.h:

(RenderFlexibleBox):

LayoutTests:

• css3/flexbox/floated-flexbox-expected.txt:
• css3/flexbox/line-wrapping.html:

The old results here were wrong because they wrapped the contents of each flex item.

• css3/flexbox/preferred-widths-expected.txt: Added.
• css3/flexbox/preferred-widths-orthogonal-expected.txt: Added.
• css3/flexbox/preferred-widths-orthogonal.html: Added.
• css3/flexbox/preferred-widths.html: Added.

Location:

trunk

Files:

• LayoutTests/ChangeLog (modified) (1 diff)
• LayoutTests/css3/flexbox/floated-flexbox-expected.txt (modified) (1 diff)
• LayoutTests/css3/flexbox/line-wrapping.html (modified) (2 diffs)
• LayoutTests/css3/flexbox/preferred-widths-expected.txt (added)
• LayoutTests/css3/flexbox/preferred-widths-orthogonal-expected.txt (added)
• LayoutTests/css3/flexbox/preferred-widths-orthogonal.html (added)
• LayoutTests/css3/flexbox/preferred-widths.html (added)
• Source/WebCore/ChangeLog (modified) (1 diff)
• Source/WebCore/rendering/RenderBlock.cpp (modified) (1 diff)
• Source/WebCore/rendering/RenderFlexibleBox.cpp (modified) (1 diff)
• Source/WebCore/rendering/RenderFlexibleBox.h (modified) (1 diff)

trunk/LayoutTests/ChangeLog

@@ +1 @@
+2012-02-09  Ojan Vafai  <ojan@chromium.org>
+
+        nesting horizontal flexboxes is broken
+        https://bugs.webkit.org/show_bug.cgi?id=76867
+
+        Reviewed by David Hyatt.
+
+        * css3/flexbox/floated-flexbox-expected.txt:
+        * css3/flexbox/line-wrapping.html:
+        The old results here were wrong because they wrapped the contents of each flex item.
+
+        * css3/flexbox/preferred-widths-expected.txt: Added.
+        * css3/flexbox/preferred-widths-orthogonal-expected.txt: Added.
+        * css3/flexbox/preferred-widths-orthogonal.html: Added.
+        * css3/flexbox/preferred-widths.html: Added.
+
 2012-02-13  Mihnea Ovidenie  <mihnea@adobe.com>
 

trunk/LayoutTests/css3/flexbox/floated-flexbox-expected.txt

@@ -1 @@
-FAIL:
-Expected 130 for width, but got 110. 
-
-<div data-expected-width="130" data-expected-height="30" class="flexbox">
-    <div style="background-color:pink; width: 20px; height: 20px;"></div>
-    <div style="background-color:red; width: 100px; height: 20px;"></div>
-</div>
+PASS

trunk/LayoutTests/css3/flexbox/line-wrapping.html

@@ -188 +188 @@
 </div>
 
-<div class="flexbox auto row vertical-lr" data-expected-height=300>
-    <div data-expected-height=150 data-expected-width=100>
-        <div data-offset-x=4></div><div data-offset-x=24></div><div data-offset-x=44 data-offset-y=0></div>
-    </div>
-    <div data-expected-height=150 data-expected-width=60 style="-webkit-flex-item-align: start;">
-        <div data-offset-x=4></div><div data-offset-x=24></div><div data-offset-x=44 data-offset-y=150></div>
+<div class="flexbox auto row vertical-lr" data-expected-height=500>
+    <div data-expected-height=250 data-expected-width=100>
+        <div data-offset-x=4></div><div data-offset-x=4></div><div data-offset-x=24 data-offset-y=0></div>
+    </div>
+    <div data-expected-height=250 data-expected-width=40 style="-webkit-flex-item-align: start;">
+        <div data-offset-x=4></div><div data-offset-x=4></div><div data-offset-x=24 data-offset-y=250></div>
     </div>
 </div>
@@ -234 +234 @@
 </div>
 
-<div class="flexbox auto row vertical-rl" data-expected-height=300>
-    <div data-expected-height=150 data-expected-width=100>
-        <div data-offset-x=80></div><div data-offset-x=60></div><div data-offset-x=40 data-offset-y=0></div>
-    </div>
-    <div data-expected-height=150 data-expected-width=60 style="-webkit-flex-item-align: start;">
-        <div data-offset-x=80></div><div data-offset-x=60></div><div data-offset-x=40 data-offset-y=150></div>
+<div class="flexbox auto row vertical-rl" data-expected-height=500>
+    <div data-expected-height=250 data-expected-width=100>
+        <div data-offset-x=80></div><div data-offset-x=80></div><div data-offset-x=60 data-offset-y=0></div>
+    </div>
+    <div data-expected-height=250 data-expected-width=40 style="-webkit-flex-item-align: start;">
+        <div data-offset-x=80></div><div data-offset-x=80></div><div data-offset-x=60 data-offset-y=250></div>
     </div>
 </div>

trunk/Source/WebCore/ChangeLog

@@ +1 @@
+2012-02-09  Ojan Vafai  <ojan@chromium.org>
+
+        nesting horizontal flexboxes is broken
+        https://bugs.webkit.org/show_bug.cgi?id=76867
+
+        Reviewed by David Hyatt.
+
+        This is copied from RenderDeprecatedFlexibleBox and updated
+        for RenderFlexibleBox and to handle vertical writing mode.
+
+        Tests: css3/flexbox/preferred-widths-orthogonal.html
+               css3/flexbox/preferred-widths.html
+
+        * rendering/RenderBlock.cpp:
+        (WebCore::RenderBlock::computePreferredLogicalWidths):
+        * rendering/RenderFlexibleBox.cpp:
+        (WebCore::marginWidthForChild):
+        (WebCore):
+        (WebCore::RenderFlexibleBox::computePreferredLogicalWidths):
+        * rendering/RenderFlexibleBox.h:
+        (RenderFlexibleBox):
+
 2012-02-13  Mihnea Ovidenie  <mihnea@adobe.com>
 

trunk/Source/WebCore/rendering/RenderBlock.cpp

@@ -5024 +5024 @@
 
         int scrollbarWidth = 0;
+        // FIXME: This should only be done for horizontal writing mode.
+        // For vertical writing mode, this should check overflowX and use the horizontalScrollbarHeight.
         if (hasOverflowClip() && styleToUse->overflowY() == OSCROLL) {
             layer()->setHasVerticalScrollbar(true);

trunk/Source/WebCore/rendering/RenderFlexibleBox.cpp

@@ -115 +115 @@
 }
 
+static LayoutUnit marginLogicalWidthForChild(RenderBox* child, RenderStyle* parentStyle)
+{
+    // A margin has three types: fixed, percentage, and auto (variable).
+    // Auto and percentage margins become 0 when computing min/max width.
+    // Fixed margins can be added in as is.
+    Length marginLeft = child->style()->marginStartUsing(parentStyle);
+    Length marginRight = child->style()->marginEndUsing(parentStyle);
+    LayoutUnit margin = 0;
+    if (marginLeft.isFixed())
+        margin += marginLeft.value();
+    if (marginRight.isFixed())
+        margin += marginRight.value();
+    return margin;
+}
+
+void RenderFlexibleBox::computePreferredLogicalWidths()
+{
+    ASSERT(preferredLogicalWidthsDirty());
+
+    RenderStyle* styleToUse = style();
+    if (styleToUse->logicalWidth().isFixed() && styleToUse->logicalWidth().value() > 0)
+        m_minPreferredLogicalWidth = m_maxPreferredLogicalWidth = computeContentBoxLogicalWidth(styleToUse->logicalWidth().value());
+    else {
+        m_minPreferredLogicalWidth = m_maxPreferredLogicalWidth = 0;
+
+        for (RenderBox* child = firstChildBox(); child; child = child->nextSiblingBox()) {
+            if (child->isPositioned())
+                continue;
+
+            LayoutUnit margin = marginLogicalWidthForChild(child, style());
+            bool hasOrthogonalWritingMode = child->isHorizontalWritingMode() != isHorizontalWritingMode();
+            LayoutUnit minPreferredLogicalWidth = hasOrthogonalWritingMode ? child->logicalHeight() : child->minPreferredLogicalWidth();
+            LayoutUnit maxPreferredLogicalWidth = hasOrthogonalWritingMode ? child->logicalHeight() : child->maxPreferredLogicalWidth();
+            minPreferredLogicalWidth += margin;
+            maxPreferredLogicalWidth += margin;
+            if (!isColumnFlow()) {
+                m_minPreferredLogicalWidth += minPreferredLogicalWidth;
+                m_maxPreferredLogicalWidth += maxPreferredLogicalWidth;
+            } else {
+                m_minPreferredLogicalWidth = std::max(minPreferredLogicalWidth, m_minPreferredLogicalWidth);
+                m_maxPreferredLogicalWidth = std::max(maxPreferredLogicalWidth, m_maxPreferredLogicalWidth);
+            }
+        }
+
+        m_maxPreferredLogicalWidth = std::max(m_minPreferredLogicalWidth, m_maxPreferredLogicalWidth);
+    }
+
+    LayoutUnit scrollbarWidth = 0;
+    if (hasOverflowClip()) {
+        if (isHorizontalWritingMode() && styleToUse->overflowY() == OSCROLL) {
+            layer()->setHasVerticalScrollbar(true);
+            scrollbarWidth = verticalScrollbarWidth();
+        } else if (!isHorizontalWritingMode() && styleToUse->overflowX() == OSCROLL) {
+            layer()->setHasHorizontalScrollbar(true);
+            scrollbarWidth = horizontalScrollbarHeight();
+        }
+    }
+
+    m_maxPreferredLogicalWidth += scrollbarWidth;
+    m_minPreferredLogicalWidth += scrollbarWidth;
+
+    if (styleToUse->logicalMinWidth().isFixed() && styleToUse->logicalMinWidth().value() > 0) {
+        m_maxPreferredLogicalWidth = std::max(m_maxPreferredLogicalWidth, computeContentBoxLogicalWidth(styleToUse->logicalMinWidth().value()));
+        m_minPreferredLogicalWidth = std::max(m_minPreferredLogicalWidth, computeContentBoxLogicalWidth(styleToUse->logicalMinWidth().value()));
+    }
+
+    if (styleToUse->logicalMaxWidth().isFixed()) {
+        m_maxPreferredLogicalWidth = std::min(m_maxPreferredLogicalWidth, computeContentBoxLogicalWidth(styleToUse->logicalMaxWidth().value()));
+        m_minPreferredLogicalWidth = std::min(m_minPreferredLogicalWidth, computeContentBoxLogicalWidth(styleToUse->logicalMaxWidth().value()));
+    }
+
+    LayoutUnit borderAndPadding = borderAndPaddingLogicalWidth();
+    m_minPreferredLogicalWidth += borderAndPadding;
+    m_maxPreferredLogicalWidth += borderAndPadding;
+
+    setPreferredLogicalWidthsDirty(false);
+}
+
 void RenderFlexibleBox::layoutBlock(bool relayoutChildren, int, BlockLayoutPass)
 {

trunk/Source/WebCore/rendering/RenderFlexibleBox.h

@@ -44 +44 @@
 
     virtual bool isFlexibleBox() const { return true; }
-
+    virtual void computePreferredLogicalWidths();
     virtual void layoutBlock(bool relayoutChildren, int pageLogicalHeight = 0, BlockLayoutPass = NormalLayoutPass);