Changeset 144104 in webkit


Ignore:
Timestamp:
Feb 26, 2013 1:58:36 PM (11 years ago)
Author:
tony@chromium.org
Message:

CSS Flexbox: dynamically applied align-items doesn't affect item alignment
https://bugs.webkit.org/show_bug.cgi?id=110341

Reviewed by Ojan Vafai.

Source/WebCore:

If flex items don't change width, we don't lay them out again. This causes problems
when an item goes from stretch to non-stretch since we need to relayout to get the
smaller height. Fix this by marking flex items that were stretch as needing layout.

Test: css3/flexbox/relayout-align-items.html

  • rendering/RenderFlexibleBox.cpp:

(WebCore::resolveAlignment): Pull out common code for computing flex item style.
(WebCore::RenderFlexibleBox::styleDidChange): Mark children as needing layout.
(WebCore::RenderFlexibleBox::alignmentForChild): Use resolveAlignment.

  • rendering/RenderFlexibleBox.h:

LayoutTests:

Also fix a typo causing align-self-* classes from not applying. There
was only one test that tried to use the align-self classes and it was
testing all values behaved the same.

  • css3/flexbox/relayout-align-items-expected.txt: Added.
  • css3/flexbox/relayout-align-items.html: Added.
  • css3/flexbox/resources/flexbox.css:

(.align-self-auto):
(.align-self-flex-start):
(.align-self-flex-end):
(.align-self-center):
(.align-self-baseline):
(.align-self-stretch):

Location:
trunk
Files:
2 added
5 edited

Legend:

Unmodified
Added
Removed
  • trunk/LayoutTests/ChangeLog

    r144096 r144104  
     12013-02-26  Tony Chang  <tony@chromium.org>
     2
     3        CSS Flexbox: dynamically applied align-items doesn't affect item alignment
     4        https://bugs.webkit.org/show_bug.cgi?id=110341
     5
     6        Reviewed by Ojan Vafai.
     7
     8        Also fix a typo causing align-self-* classes from not applying. There
     9        was only one test that tried to use the align-self classes and it was
     10        testing all values behaved the same.
     11
     12        * css3/flexbox/relayout-align-items-expected.txt: Added.
     13        * css3/flexbox/relayout-align-items.html: Added.
     14        * css3/flexbox/resources/flexbox.css:
     15        (.align-self-auto):
     16        (.align-self-flex-start):
     17        (.align-self-flex-end):
     18        (.align-self-center):
     19        (.align-self-baseline):
     20        (.align-self-stretch):
     21
    1222013-02-26  Christian Biesinger  <cbiesinger@chromium.org>
    223
  • trunk/LayoutTests/css3/flexbox/resources/flexbox.css

    r132104 r144104  
    9494
    9595.align-self-auto {
    96     -webkit-align-items: auto;
    97     -moz-align-items: auto;
     96    -webkit-align-self: auto;
     97    -moz-align-self: auto;
    9898}
    9999.align-self-flex-start {
    100     -webkit-align-items: flex-start;
    101     -moz-align-items: flex-start;
     100    -webkit-align-self: flex-start;
     101    -moz-align-self: flex-start;
    102102}
    103103.align-self-flex-end {
    104     -webkit-align-items: flex-end;
    105     -moz-align-items: flex-end;
     104    -webkit-align-self: flex-end;
     105    -moz-align-self: flex-end;
    106106}
    107107.align-self-center {
    108     -webkit-align-items: center;
    109     -moz-align-items: center;
     108    -webkit-align-self: center;
     109    -moz-align-self: center;
    110110}
    111111.align-self-baseline {
    112     -webkit-align-items: baseline;
    113     -moz-align-items: baseline;
     112    -webkit-align-self: baseline;
     113    -moz-align-self: baseline;
    114114}
    115115.align-self-stretch {
    116     -webkit-align-items: stretch;
    117     -moz-align-items: stretch;
     116    -webkit-align-self: stretch;
     117    -moz-align-self: stretch;
    118118}
    119119
  • trunk/Source/WebCore/ChangeLog

    r144103 r144104  
     12013-02-26  Tony Chang  <tony@chromium.org>
     2
     3        CSS Flexbox: dynamically applied align-items doesn't affect item alignment
     4        https://bugs.webkit.org/show_bug.cgi?id=110341
     5
     6        Reviewed by Ojan Vafai.
     7
     8        If flex items don't change width, we don't lay them out again. This causes problems
     9        when an item goes from stretch to non-stretch since we need to relayout to get the
     10        smaller height. Fix this by marking flex items that were stretch as needing layout.
     11
     12        Test: css3/flexbox/relayout-align-items.html
     13
     14        * rendering/RenderFlexibleBox.cpp:
     15        (WebCore::resolveAlignment): Pull out common code for computing flex item style.
     16        (WebCore::RenderFlexibleBox::styleDidChange): Mark children as needing layout.
     17        (WebCore::RenderFlexibleBox::alignmentForChild): Use resolveAlignment.
     18        * rendering/RenderFlexibleBox.h:
     19
    1202013-02-26  Anders Carlsson  <andersca@apple.com>
    221
  • trunk/Source/WebCore/rendering/RenderFlexibleBox.cpp

    r144096 r144104  
    296296}
    297297
     298static EAlignItems resolveAlignment(const RenderStyle* parentStyle, const RenderStyle* childStyle)
     299{
     300    EAlignItems align = childStyle->alignSelf();
     301    if (align == AlignAuto)
     302        align = parentStyle->alignItems();
     303    return align;
     304}
     305
     306void RenderFlexibleBox::styleDidChange(StyleDifference diff, const RenderStyle* oldStyle)
     307{
     308    RenderBlock::styleDidChange(diff, oldStyle);
     309
     310    if (oldStyle && oldStyle->alignItems() == AlignStretch && diff == StyleDifferenceLayout) {
     311        // Flex items that were previously stretching need to be relayed out so we can compute new available cross axis space.
     312        // This is only necessary for stretching since other alignment values don't change the size of the box.
     313        for (RenderBox* child = firstChildBox(); child; child = child->nextSiblingBox()) {
     314            EAlignItems previousAlignment = resolveAlignment(oldStyle, child->style());
     315            if (previousAlignment == AlignStretch && previousAlignment != resolveAlignment(style(), child->style()))
     316                child->setChildNeedsLayout(true, MarkOnlyThis);
     317        }
     318    }
     319}
     320
    298321void RenderFlexibleBox::layoutBlock(bool relayoutChildren, LayoutUnit)
    299322{
     
    10601083EAlignItems RenderFlexibleBox::alignmentForChild(RenderBox* child) const
    10611084{
    1062     EAlignItems align = child->style()->alignSelf();
    1063     if (align == AlignAuto)
    1064         align = style()->alignItems();
     1085    EAlignItems align = resolveAlignment(style(), child->style());
    10651086
    10661087    if (align == AlignBaseline && hasOrthogonalFlow(child))
  • trunk/Source/WebCore/rendering/RenderFlexibleBox.h

    r143643 r144104  
    6161    virtual void computeIntrinsicLogicalWidths(LayoutUnit& minLogicalWidth, LayoutUnit& maxLogicalWidth) const OVERRIDE;
    6262    virtual void computePreferredLogicalWidths() OVERRIDE;
     63
     64    virtual void styleDidChange(StyleDifference, const RenderStyle* oldStyle);
    6365
    6466private:
Note: See TracChangeset for help on using the changeset viewer.