Changeset 97313 in webkit


Ignore:
Timestamp:
Oct 12, 2011 3:49:25 PM (13 years ago)
Author:
tony@chromium.org
Message:

Implement -webkit-flex-align for cross axis alignment in flex-flow: row
​https://bugs.webkit.org/show_bug.cgi?id=69808

Reviewed by David Hyatt.

Source/WebCore:

Tests: css3/flexbox/flex-align-percent-height.html

css3/flexbox/flex-align-vertical-writing-mode.html
css3/flexbox/flex-align.html

  • rendering/RenderFlexibleBox.cpp:

(WebCore::RenderFlexibleBox::isFlowAwareLogicalHeightAuto):
(WebCore::RenderFlexibleBox::flowAwareContentLogicalHeight):
(WebCore::RenderFlexibleBox::flowAwareBorderAndPaddingLogicalHeight):
(WebCore::RenderFlexibleBox::flowAwareMarginLogicalHeightForChild):
(WebCore::RenderFlexibleBox::flowAwareLogicalLocationForChild):
(WebCore::RenderFlexibleBox::layoutInlineDirection):
(WebCore::RenderFlexibleBox::availableLogicalHeightForChild):
(WebCore::RenderFlexibleBox::marginBoxAscent):
(WebCore::RenderFlexibleBox::layoutAndPlaceChildrenInlineDirection):
(WebCore::RenderFlexibleBox::adjustLocationLogicalTopForChild):
(WebCore::RenderFlexibleBox::alignChildrenBlockDirection):

  • rendering/RenderFlexibleBox.h:

LayoutTests:

  • css3/flexbox/flex-align-expected.txt: Added.
  • css3/flexbox/flex-align-percent-height-expected.txt: Added.
  • css3/flexbox/flex-align-percent-height.html: Added.
  • css3/flexbox/flex-align-vertical-writing-mode-expected.txt: Added.
  • css3/flexbox/flex-align-vertical-writing-mode.html: Added.
  • css3/flexbox/flex-align.html: Added.
Location:
trunk
Files:
6 added
4 edited

Legend:

Unmodified
Added
Removed

  • trunk/LayoutTests/ChangeLog

    r97312 r97313  
     12011-10-12  Tony Chang  <tony@chromium.org>
     2
     3        Implement -webkit-flex-align for cross axis alignment in flex-flow: row
     4        https://bugs.webkit.org/show_bug.cgi?id=69808
     5
     6        Reviewed by David Hyatt.
     7
     8        * css3/flexbox/flex-align-expected.txt: Added.
     9        * css3/flexbox/flex-align-percent-height-expected.txt: Added.
     10        * css3/flexbox/flex-align-percent-height.html: Added.
     11        * css3/flexbox/flex-align-vertical-writing-mode-expected.txt: Added.
     12        * css3/flexbox/flex-align-vertical-writing-mode.html: Added.
     13        * css3/flexbox/flex-align.html: Added.
     14
    1152011-10-12  Ojan Vafai  <ojan@chromium.org>
    216

  • trunk/Source/WebCore/ChangeLog

    r97308 r97313  
     12011-10-12  Tony Chang  <tony@chromium.org>
     2
     3        Implement -webkit-flex-align for cross axis alignment in flex-flow: row
     4        https://bugs.webkit.org/show_bug.cgi?id=69808
     5
     6        Reviewed by David Hyatt.
     7
     8        Tests: css3/flexbox/flex-align-percent-height.html
     9               css3/flexbox/flex-align-vertical-writing-mode.html
     10               css3/flexbox/flex-align.html
     11
     12        * rendering/RenderFlexibleBox.cpp:
     13        (WebCore::RenderFlexibleBox::isFlowAwareLogicalHeightAuto):
     14        (WebCore::RenderFlexibleBox::flowAwareContentLogicalHeight):
     15        (WebCore::RenderFlexibleBox::flowAwareBorderAndPaddingLogicalHeight):
     16        (WebCore::RenderFlexibleBox::flowAwareMarginLogicalHeightForChild):
     17        (WebCore::RenderFlexibleBox::flowAwareLogicalLocationForChild):
     18        (WebCore::RenderFlexibleBox::layoutInlineDirection):
     19        (WebCore::RenderFlexibleBox::availableLogicalHeightForChild):
     20        (WebCore::RenderFlexibleBox::marginBoxAscent):
     21        (WebCore::RenderFlexibleBox::layoutAndPlaceChildrenInlineDirection):
     22        (WebCore::RenderFlexibleBox::adjustLocationLogicalTopForChild):
     23        (WebCore::RenderFlexibleBox::alignChildrenBlockDirection):
     24        * rendering/RenderFlexibleBox.h:
     25
    1262011-10-12  Mihnea Ovidenie  <mihnea@adobe.com>
    227

  • trunk/Source/WebCore/rendering/RenderFlexibleBox.cpp

    r96776 r97313  
    210210// FIXME: Make all these flow aware methods actually be flow aware.
    211211
     212bool RenderFlexibleBox::isFlowAwareLogicalHeightAuto() const
     213{
     214    Length height = isHorizontalFlow() ? style()->height() : style()->width();
     215    return height.isAuto();
     216}
     217
    212218void RenderFlexibleBox::setFlowAwareLogicalHeight(LayoutUnit size)
    213219{
    … …  
    235241}
    236242
     243LayoutUnit RenderFlexibleBox::flowAwareContentLogicalHeight() const
     244{
     245    return contentLogicalHeight();
     246}
     247
    237248LayoutUnit RenderFlexibleBox::flowAwareContentLogicalWidth() const
    238249{
    … …  
    255266}
    256267
     268LayoutUnit RenderFlexibleBox::flowAwareBorderAndPaddingLogicalHeight() const
     269{
     270    // FIXME: Only do the flow check once.
     271    return flowAwareBorderBefore() + flowAwarePaddingBefore() + flowAwarePaddingAfter() + flowAwareBorderAfter();
     272}
     273
    257274LayoutUnit RenderFlexibleBox::flowAwarePaddingStart() const
    258275{
    … …  
    275292}
    276293
     294LayoutUnit RenderFlexibleBox::flowAwareMarginEndForChild(RenderBox* child) const
     295{
     296    return marginStartForChild(child);
     297}
     298
    277299LayoutUnit RenderFlexibleBox::flowAwareMarginBeforeForChild(RenderBox* child) const
    278300{
    … …  
    283305{
    284306    return marginAfterForChild(child);
     307}
     308
     309LayoutUnit RenderFlexibleBox::flowAwareMarginLogicalHeightForChild(RenderBox* child) const
     310{
     311    // FIXME: Only do the flow check once.
     312    return flowAwareMarginBeforeForChild(child) + flowAwareMarginAfterForChild(child);
     313}
     314
     315LayoutPoint RenderFlexibleBox::flowAwareLogicalLocationForChild(RenderBox* child) const
     316{
     317    return isHorizontalFlow() ? child->location() : child->location().transposedPoint();
    285318}
    286319
    … …  
    356389
    357390    layoutAndPlaceChildrenInlineDirection(flexIterator, childSizes, availableFreeSpace, totalPositiveFlexibility);
    358 
    359     // FIXME: Handle distribution of cross-axis space (third distribution round).
    360391}
    361392
    … …  
    368399{
    369400    return isHorizontalFlow() ? child->style()->flexboxWidthNegativeFlex() : child->style()->flexboxHeightNegativeFlex();
     401}
     402
     403LayoutUnit RenderFlexibleBox::availableLogicalHeightForChild(RenderBox* child)
     404{
     405    LayoutUnit contentLogicalHeight = flowAwareContentLogicalHeight();
     406    LayoutUnit currentChildHeight = flowAwareMarginLogicalHeightForChild(child) + flowAwareLogicalHeightForChild(child);
     407    return contentLogicalHeight - currentChildHeight;
     408}
     409
     410LayoutUnit RenderFlexibleBox::marginBoxAscent(RenderBox* child)
     411{
     412    LayoutUnit ascent = child->firstLineBoxBaseline();
     413    if (ascent == -1)
     414        ascent = flowAwareLogicalHeightForChild(child) + flowAwareMarginAfterForChild(child);
     415    return ascent + flowAwareMarginBeforeForChild(child);
    370416}
    371417
    … …  
    471517    LayoutUnit logicalTop = flowAwareBorderBefore() + flowAwarePaddingBefore();
    472518    LayoutUnit totalLogicalWidth = flowAwareLogicalWidth();
    473     setFlowAwareLogicalHeight(0);
     519    if (isFlowAwareLogicalHeightAuto())
     520        setFlowAwareLogicalHeight(0);
     521    LayoutUnit maxAscent = 0, maxDescent = 0; // Used when flex-align: baseline.
    474522    size_t i = 0;
    475523    for (RenderBox* child = iterator.first(); child; child = iterator.next(), ++i) {
    476         // FIXME: Does this need to take the scrollbar width into account?
    477524        LayoutUnit childPreferredSize = childSizes[i] + logicalBorderAndPaddingWidthForChild(child);
    478525        setLogicalOverrideSize(child, childPreferredSize);
    … …  
    480527        child->layoutIfNeeded();
    481528
    482         setFlowAwareLogicalHeight(std::max(flowAwareLogicalHeight(), flowAwareBorderBefore() + flowAwarePaddingBefore() + flowAwareMarginBeforeForChild(child) + flowAwareLogicalHeightForChild(child) + flowAwareMarginAfterForChild(child) + flowAwarePaddingAfter() + flowAwareBorderAfter() + scrollbarLogicalHeight()));
     529        if (child->style()->flexAlign() == AlignBaseline) {
     530            LayoutUnit ascent = marginBoxAscent(child);
     531            LayoutUnit descent = (flowAwareMarginLogicalHeightForChild(child) + flowAwareLogicalHeightForChild(child)) - ascent;
     532
     533            maxAscent = std::max(maxAscent, ascent);
     534            maxDescent = std::max(maxDescent, descent);
     535
     536            // FIXME: add flowAwareScrollbarLogicalHeight.
     537            if (isFlowAwareLogicalHeightAuto())
     538                setFlowAwareLogicalHeight(std::max(flowAwareLogicalHeight(), flowAwareBorderAndPaddingLogicalHeight() + flowAwareMarginLogicalHeightForChild(child) + maxAscent + maxDescent + scrollbarLogicalHeight()));
     539        } else if (isFlowAwareLogicalHeightAuto())
     540            setFlowAwareLogicalHeight(std::max(flowAwareLogicalHeight(), flowAwareBorderAndPaddingLogicalHeight() + flowAwareMarginLogicalHeightForChild(child) + flowAwareLogicalHeightForChild(child) + scrollbarLogicalHeight()));
    483541
    484542        if (marginStartStyleForChild(child).isAuto())
    … …  
    499557            startEdge += availableFreeSpace / (childSizes.size() - 1);
    500558    }
     559
     560    alignChildrenBlockDirection(iterator, maxAscent);
     561}
     562
     563void RenderFlexibleBox::adjustLocationLogicalTopForChild(RenderBox* child, LayoutUnit delta)
     564{
     565    setFlowAwareLogicalLocationForChild(child, flowAwareLogicalLocationForChild(child) + LayoutSize(0, delta));
     566}
     567
     568void RenderFlexibleBox::alignChildrenBlockDirection(FlexOrderIterator& iterator, LayoutUnit maxAscent)
     569{
     570    for (RenderBox* child = iterator.first(); child; child = iterator.next()) {
     571        switch (child->style()->flexAlign()) {
     572        case AlignStretch: {
     573            Length height = isHorizontalFlow() ? child->style()->height() : child->style()->width();
     574            if (height.isAuto()) {
     575                // FIXME: Clamp to max-height once it's spec'ed (should we align towards the start or center?).
     576                LayoutUnit stretchedHeight = logicalHeightForChild(child) + RenderFlexibleBox::availableLogicalHeightForChild(child);
     577                if (isHorizontalFlow())
     578                    child->setHeight(stretchedHeight);
     579                else
     580                    child->setWidth(stretchedHeight);
     581            }
     582            break;
     583        }
     584        case AlignStart:
     585            break;
     586        case AlignEnd:
     587            adjustLocationLogicalTopForChild(child, RenderFlexibleBox::availableLogicalHeightForChild(child));
     588            break;
     589        case AlignCenter:
     590            adjustLocationLogicalTopForChild(child, RenderFlexibleBox::availableLogicalHeightForChild(child) / 2);
     591            break;
     592        case AlignBaseline: {
     593            LayoutUnit ascent = marginBoxAscent(child);
     594            adjustLocationLogicalTopForChild(child, maxAscent - ascent);
     595            break;
     596        }
     597        }
     598    }
    501599}
    502600

  • trunk/Source/WebCore/rendering/RenderFlexibleBox.h

    r96159 r97313  
    5757    bool isHorizontalFlow() const;
    5858    bool isLeftToRightFlow() const;
     59    bool isFlowAwareLogicalHeightAuto() const;
    5960    void setFlowAwareLogicalHeight(LayoutUnit);
    6061    LayoutUnit flowAwareLogicalHeightForChild(RenderBox* child);
    … …  
    6263    LayoutUnit flowAwareLogicalHeight() const;
    6364    LayoutUnit flowAwareLogicalWidth() const;
     65    LayoutUnit flowAwareContentLogicalHeight() const;
    6466    LayoutUnit flowAwareContentLogicalWidth() const;
    6567    LayoutUnit flowAwareBorderStart() const;
    6668    LayoutUnit flowAwareBorderBefore() const;
    6769    LayoutUnit flowAwareBorderAfter() const;
     70    LayoutUnit flowAwareBorderAndPaddingLogicalHeight() const;
    6871    LayoutUnit flowAwarePaddingStart() const;
    6972    LayoutUnit flowAwarePaddingBefore() const;
    7073    LayoutUnit flowAwarePaddingAfter() const;
    7174    LayoutUnit flowAwareMarginStartForChild(RenderBox* child) const;
     75    LayoutUnit flowAwareMarginEndForChild(RenderBox* child) const;
    7276    LayoutUnit flowAwareMarginBeforeForChild(RenderBox* child) const;
    7377    LayoutUnit flowAwareMarginAfterForChild(RenderBox* child) const;
     78    LayoutUnit flowAwareMarginLogicalHeightForChild(RenderBox* child) const;
     79    LayoutPoint flowAwareLogicalLocationForChild(RenderBox* child) const;
    7480    void setFlowAwareMarginStartForChild(RenderBox* child, LayoutUnit);
    7581    void setFlowAwareMarginEndForChild(RenderBox* child, LayoutUnit);
    7682    // FIXME: Supporting layout deltas.
    7783    void setFlowAwareLogicalLocationForChild(RenderBox* child, const LayoutPoint&);
     84    void adjustLocationLogicalTopForChild(RenderBox* child, LayoutUnit);
    7885    LayoutUnit logicalBorderAndPaddingWidthForChild(RenderBox* child) const;
    7986    LayoutUnit logicalScrollbarHeightForChild(RenderBox* child) const;
    … …  
    8794    float logicalNegativeFlexForChild(RenderBox* child) const;
    8895
     96    LayoutUnit availableLogicalHeightForChild(RenderBox*);
     97    LayoutUnit marginBoxAscent(RenderBox*);
     98
    8999    void computePreferredLogicalWidth(bool relayoutChildren, TreeOrderIterator&, LayoutUnit&, float& totalPositiveFlexibility, float& totalNegativeFlexibility);
    90100    bool runFreeSpaceAllocationAlgorithmInlineDirection(FlexOrderIterator&, LayoutUnit& availableFreeSpace, float& totalPositiveFlexibility, float& totalNegativeFlexibility, InflexibleFlexItemSize&, WTF::Vector<LayoutUnit>& childSizes);
    91101    void setLogicalOverrideSize(RenderBox* child, LayoutUnit childPreferredSize);
    92102    void layoutAndPlaceChildrenInlineDirection(FlexOrderIterator&, const WTF::Vector<LayoutUnit>& childSizes, LayoutUnit availableFreeSpace, float totalPositiveFlexibility);
     103    void alignChildrenBlockDirection(FlexOrderIterator&, LayoutUnit maxAscent);
    93104};
    94105
Note: See TracChangeset for help on using the changeset viewer.