Changeset 105015 in webkit


Ignore:
Timestamp:
Jan 13, 2012 7:03:08 PM (12 years ago)
Author:
ojan@chromium.org
Message:

Implement flex-align
https://bugs.webkit.org/show_bug.cgi?id=75782

Reviewed by Tony Chang.

Source/WebCore:

  • css/CSSComputedStyleDeclaration.cpp:

(WebCore::CSSComputedStyleDeclaration::getPropertyCSSValue):
Intentially gets computed style for flex-item-align:auto wrong.
Will fix this in a followup patch.

  • css/CSSParser.cpp:

(WebCore::CSSParser::parseValue):

  • css/CSSProperty.cpp:

(WebCore::CSSProperty::isInheritedProperty):

  • css/CSSPropertyNames.in:
  • css/CSSStyleApplyProperty.cpp:

(WebCore::CSSStyleApplyProperty::CSSStyleApplyProperty):

  • css/CSSStyleSelector.cpp:

(WebCore::CSSStyleSelector::applyProperty):

  • rendering/RenderBox.cpp:

(WebCore::RenderBox::sizesToIntrinsicLogicalWidth):

  • rendering/RenderFlexibleBox.cpp:

(WebCore::flexAlignForChild):
(WebCore::RenderFlexibleBox::layoutAndPlaceChildren):
(WebCore::RenderFlexibleBox::alignChildren):

  • rendering/style/RenderStyle.h:

(WebCore::RenderStyleBitfields::flexAlign):
(WebCore::RenderStyleBitfields::setFlexAlign):
(WebCore::RenderStyleBitfields::initialFlexAlign):
(WebCore::RenderStyleBitfields::initialFlexItemAlign):

  • rendering/style/StyleFlexibleBoxData.cpp:

(WebCore::StyleFlexibleBoxData::StyleFlexibleBoxData):
(WebCore::StyleFlexibleBoxData::operator==):

  • rendering/style/StyleFlexibleBoxData.h:

LayoutTests:

  • css3/flexbox/css-properties-expected.txt:
  • css3/flexbox/flex-align-expected.txt:
  • css3/flexbox/flex-align.html:
  • css3/flexbox/script-tests/css-properties.js:
  • fast/css/getComputedStyle/computed-style-expected.txt:
  • platform/chromium-mac-snowleopard/svg/css/getComputedStyle-basic-expected.txt:
  • platform/chromium-win/fast/css/getComputedStyle/computed-style-expected.txt:
  • platform/chromium-win/fast/css/getComputedStyle/computed-style-without-renderer-expected.txt:
  • platform/chromium-win/svg/css/getComputedStyle-basic-expected.txt:
  • platform/gtk/fast/css/getComputedStyle/computed-style-without-renderer-expected.txt:
  • platform/mac/fast/css/getComputedStyle/computed-style-without-renderer-expected.txt:
  • platform/qt/fast/css/getComputedStyle/computed-style-without-renderer-expected.txt:
  • svg/css/getComputedStyle-basic-expected.txt:
Location:
trunk
Files:
26 edited

Legend:

Unmodified
Added
Removed
  • trunk/LayoutTests/ChangeLog

    r105011 r105015  
     12012-01-13  Ojan Vafai  <ojan@chromium.org>
     2
     3        Implement flex-align
     4        https://bugs.webkit.org/show_bug.cgi?id=75782
     5
     6        Reviewed by Tony Chang.
     7
     8        * css3/flexbox/css-properties-expected.txt:
     9        * css3/flexbox/flex-align-expected.txt:
     10        * css3/flexbox/flex-align.html:
     11        * css3/flexbox/script-tests/css-properties.js:
     12        * fast/css/getComputedStyle/computed-style-expected.txt:
     13        * platform/chromium-mac-snowleopard/svg/css/getComputedStyle-basic-expected.txt:
     14        * platform/chromium-win/fast/css/getComputedStyle/computed-style-expected.txt:
     15        * platform/chromium-win/fast/css/getComputedStyle/computed-style-without-renderer-expected.txt:
     16        * platform/chromium-win/svg/css/getComputedStyle-basic-expected.txt:
     17        * platform/gtk/fast/css/getComputedStyle/computed-style-without-renderer-expected.txt:
     18        * platform/mac/fast/css/getComputedStyle/computed-style-without-renderer-expected.txt:
     19        * platform/qt/fast/css/getComputedStyle/computed-style-without-renderer-expected.txt:
     20        * svg/css/getComputedStyle-basic-expected.txt:
     21
    1222012-01-13  Vincent Scheib  <scheib@chromium.org>
    223
  • trunk/LayoutTests/css3/flexbox/css-properties-expected.txt

    r104985 r105015  
    3030PASS window.getComputedStyle(flexbox, null).webkitFlexPack is "start"
    3131PASS flexbox.style.webkitFlexItemAlign is ""
    32 PASS window.getComputedStyle(flexbox, null).webkitFlexItemAlign is "stretch"
     32FAIL window.getComputedStyle(flexbox, null).webkitFlexItemAlign should be stretch. Was auto.
    3333PASS flexbox.style.webkitFlexItemAlign is ""
     34PASS flexbox.style.webkitFlexItemAlign is "auto"
     35FAIL window.getComputedStyle(flexbox, null).webkitFlexItemAlign should be stretch. Was auto.
    3436PASS flexbox.style.webkitFlexItemAlign is "start"
    3537PASS window.getComputedStyle(flexbox, null).webkitFlexItemAlign is "start"
     
    4345PASS window.getComputedStyle(flexbox, null).webkitFlexItemAlign is "baseline"
    4446PASS flexbox.style.webkitFlexItemAlign is ""
    45 PASS window.getComputedStyle(flexbox, null).webkitFlexItemAlign is "stretch"
     47FAIL window.getComputedStyle(flexbox, null).webkitFlexItemAlign should be stretch. Was auto.
     48PASS flexbox.style.webkitFlexAlign is ""
     49PASS window.getComputedStyle(flexbox, null).webkitFlexAlign is "stretch"
     50FAIL window.getComputedStyle(flexitem, null).webkitFlexItemAlign should be stretch. Was auto.
     51PASS flexbox.style.webkitFlexAlign is ""
     52PASS flexbox.style.webkitFlexAlign is ""
     53PASS window.getComputedStyle(flexbox, null).webkitFlexAlign is "stretch"
     54FAIL window.getComputedStyle(flexitem, null).webkitFlexItemAlign should be stretch. Was auto.
     55PASS flexbox.style.webkitFlexAlign is "start"
     56PASS window.getComputedStyle(flexbox, null).webkitFlexAlign is "start"
     57FAIL window.getComputedStyle(flexitem, null).webkitFlexItemAlign should be start. Was auto.
     58PASS flexbox.style.webkitFlexAlign is "end"
     59PASS window.getComputedStyle(flexbox, null).webkitFlexAlign is "end"
     60FAIL window.getComputedStyle(flexitem, null).webkitFlexItemAlign should be end. Was auto.
     61PASS flexbox.style.webkitFlexAlign is "center"
     62PASS window.getComputedStyle(flexbox, null).webkitFlexAlign is "center"
     63FAIL window.getComputedStyle(flexitem, null).webkitFlexItemAlign should be center. Was auto.
     64PASS flexbox.style.webkitFlexAlign is "stretch"
     65PASS window.getComputedStyle(flexbox, null).webkitFlexAlign is "stretch"
     66FAIL window.getComputedStyle(flexitem, null).webkitFlexItemAlign should be stretch. Was auto.
     67PASS flexbox.style.webkitFlexAlign is "baseline"
     68PASS window.getComputedStyle(flexbox, null).webkitFlexAlign is "baseline"
     69FAIL window.getComputedStyle(flexitem, null).webkitFlexItemAlign should be baseline. Was auto.
     70PASS flexbox.style.webkitFlexAlign is ""
     71PASS window.getComputedStyle(flexbox, null).webkitFlexAlign is "stretch"
     72FAIL window.getComputedStyle(flexitem, null).webkitFlexItemAlign should be stretch. Was auto.
     73PASS flexbox.style.webkitFlexAlign is ""
     74PASS window.getComputedStyle(flexbox, null).webkitFlexAlign is "stretch"
     75FAIL window.getComputedStyle(flexitem, null).webkitFlexItemAlign should be stretch. Was auto.
     76PASS window.getComputedStyle(detachedFlexbox, null).webkitFlexItemAlign is ""
     77PASS window.getComputedStyle(detachedFlexItem, null).webkitFlexItemAlign is ""
    4678PASS flexbox.style.webkitFlexDirection is ""
    4779PASS window.getComputedStyle(flexbox, null).webkitFlexDirection is "row"
  • trunk/LayoutTests/css3/flexbox/flex-align-expected.txt

    r104985 r105015  
     1PASS
     2PASS
     3PASS
     4PASS
     5PASS
     6PASS
     7PASS
     8PASS
     9PASS
     10PASS
    111PASS
    212PASS
  • trunk/LayoutTests/css3/flexbox/flex-align.html

    r104985 r105015  
    1111    position: relative;
    1212}
    13 .flexbox div {
     13.flexbox > div {
    1414    border: 0;
    1515}
     
    6868</div>
    6969
     70<div class="flexbox" style="-webkit-flex-align: start">
     71    <div data-expected-height="0" data-offset-y="0" style="width: -webkit-flex(1 0 0);"></div>
     72    <div data-expected-height="100" data-offset-y="0" style="width: -webkit-flex(1 0 0); height: 100px;"></div>
     73</div>
     74
     75<div class="flexbox" style="-webkit-flex-align: end">
     76    <div data-expected-height="0" data-offset-y="100" style="width: -webkit-flex(1 0 0);"></div>
     77    <div data-expected-height="100" data-offset-y="0" style="width: -webkit-flex(1 0 0); height: 100px;"></div>
     78</div>
     79
     80<div class="flexbox" style="-webkit-flex-align: center">
     81    <div data-expected-height="0" data-offset-y="50" style="width: -webkit-flex(1 0 0);"></div>
     82    <div data-expected-height="100" data-offset-y="0" style="width: -webkit-flex(1 0 0); height: 100px;"></div>
     83</div>
     84
     85<div class="flexbox" style="-webkit-flex-align: baseline">
     86    <div style="width: -webkit-flex(1 0 0);"><div style="display:inline-block;"></div></div>
     87    <div data-expected-height="100" data-offset-y="0" style="width: -webkit-flex(1 0 0); height: 100px;"></div>
     88</div>
     89
     90<div class="flexbox" style="-webkit-flex-align: stretch">
     91    <div data-expected-height="100" data-offset-y="0" style="width: -webkit-flex(1 0 0);"></div>
     92    <div data-expected-height="100" data-offset-y="0" style="width: -webkit-flex(1 0 0); height: 100px;"></div>
     93</div>
     94
     95<div class="flexbox" style="-webkit-flex-align: start">
     96    <div data-expected-height="100" data-offset-y="0" style="-webkit-flex-item-align: auto; width: -webkit-flex(1 0 0); height: 100px;"></div>
     97    <div data-expected-height="0" data-offset-y="0" style="-webkit-flex-item-align: auto; width: -webkit-flex(1 0 0);"></div>
     98    <div data-expected-height="0" data-offset-y="0" style="-webkit-flex-item-align: start; width: -webkit-flex(1 0 0);"></div>
     99    <div data-expected-height="0" data-offset-y="100" style="-webkit-flex-item-align: end; width: -webkit-flex(1 0 0);"></div>
     100    <div data-expected-height="0" data-offset-y="50" style="-webkit-flex-item-align: center; width: -webkit-flex(1 0 0);"></div>
     101    <div data-offset-y="20" style="-webkit-flex-item-align: baseline; width: -webkit-flex(1 0 0);"><div style="display:inline-block;"></div></div>
     102    <div data-offset-y="20" style="-webkit-flex-item-align: baseline; width: -webkit-flex(1 0 0); margin: 20px;"><div style="display:inline-block;"></div></div>
     103    <div data-expected-height="100" data-offset-y="0" style="-webkit-flex-item-align: stretch; width: -webkit-flex(1 0 0);"></div>
     104</div>
     105
     106<div class="flexbox" style="-webkit-flex-align: end">
     107    <div data-expected-height="100" data-offset-y="0" style="-webkit-flex-item-align: auto; width: -webkit-flex(1 0 0); height: 100px;"></div>
     108    <div data-expected-height="0" data-offset-y="100" style="-webkit-flex-item-align: auto; width: -webkit-flex(1 0 0);"></div>
     109    <div data-expected-height="0" data-offset-y="0" style="-webkit-flex-item-align: start; width: -webkit-flex(1 0 0);"></div>
     110    <div data-expected-height="0" data-offset-y="100" style="-webkit-flex-item-align: end; width: -webkit-flex(1 0 0);"></div>
     111    <div data-expected-height="0" data-offset-y="50" style="-webkit-flex-item-align: center; width: -webkit-flex(1 0 0);"></div>
     112    <div data-offset-y="20" style="-webkit-flex-item-align: baseline; width: -webkit-flex(1 0 0);"><div style="display:inline-block;"></div></div>
     113    <div data-offset-y="20" style="-webkit-flex-item-align: baseline; width: -webkit-flex(1 0 0); margin: 20px;"><div style="display:inline-block;"></div></div>
     114    <div data-expected-height="100" data-offset-y="0" style="-webkit-flex-item-align: stretch; width: -webkit-flex(1 0 0);"></div>
     115</div>
     116
     117<div class="flexbox" style="-webkit-flex-align: center">
     118    <div data-expected-height="100" data-offset-y="0" style="-webkit-flex-item-align: auto; width: -webkit-flex(1 0 0); height: 100px;"></div>
     119    <div data-expected-height="0" data-offset-y="50" style="-webkit-flex-item-align: auto; width: -webkit-flex(1 0 0);"></div>
     120    <div data-expected-height="0" data-offset-y="0" style="-webkit-flex-item-align: start; width: -webkit-flex(1 0 0);"></div>
     121    <div data-expected-height="0" data-offset-y="100" style="-webkit-flex-item-align: end; width: -webkit-flex(1 0 0);"></div>
     122    <div data-expected-height="0" data-offset-y="50" style="-webkit-flex-item-align: center; width: -webkit-flex(1 0 0);"></div>
     123    <div data-offset-y="20" style="-webkit-flex-item-align: baseline; width: -webkit-flex(1 0 0);"><div style="display:inline-block;"></div></div>
     124    <div data-offset-y="20" style="-webkit-flex-item-align: baseline; width: -webkit-flex(1 0 0); margin: 20px;"><div style="display:inline-block;"></div></div>
     125    <div data-expected-height="100" data-offset-y="0" style="-webkit-flex-item-align: stretch; width: -webkit-flex(1 0 0);"></div>
     126</div>
     127
     128<div class="flexbox" style="-webkit-flex-align: baseline">
     129    <div data-expected-height="100" data-offset-y="0" style="-webkit-flex-item-align: start; width: -webkit-flex(1 0 0); height: 100px;"></div>
     130    <div data-offset-y="20" style="-webkit-flex-item-align: auto; width: -webkit-flex(1 0 0);"><div style="display:inline-block;"></div></div>
     131    <div data-expected-height="0" data-offset-y="0" style="-webkit-flex-item-align: start; width: -webkit-flex(1 0 0);"></div>
     132    <div data-expected-height="0" data-offset-y="100" style="-webkit-flex-item-align: end; width: -webkit-flex(1 0 0);"></div>
     133    <div data-expected-height="0" data-offset-y="50" style="-webkit-flex-item-align: center; width: -webkit-flex(1 0 0);"></div>
     134    <div data-offset-y="20" style="-webkit-flex-item-align: baseline; width: -webkit-flex(1 0 0);"><div style="display:inline-block;"></div></div>
     135    <div data-offset-y="20" style="-webkit-flex-item-align: baseline; width: -webkit-flex(1 0 0); margin: 20px;"><div style="display:inline-block;"></div></div>
     136    <div data-expected-height="100" data-offset-y="0" style="-webkit-flex-item-align: stretch; width: -webkit-flex(1 0 0);"></div>
     137</div>
     138
     139<div class="flexbox" style="-webkit-flex-align: stretch">
     140    <div data-expected-height="100" data-offset-y="0" style="-webkit-flex-item-align: auto; width: -webkit-flex(1 0 0); height: 100px;"></div>
     141    <div data-expected-height="100" data-offset-y="0" style="-webkit-flex-item-align: auto; width: -webkit-flex(1 0 0);"></div>
     142    <div data-expected-height="0" data-offset-y="0" style="-webkit-flex-item-align: start; width: -webkit-flex(1 0 0);"></div>
     143    <div data-expected-height="0" data-offset-y="100" style="-webkit-flex-item-align: end; width: -webkit-flex(1 0 0);"></div>
     144    <div data-expected-height="0" data-offset-y="50" style="-webkit-flex-item-align: center; width: -webkit-flex(1 0 0);"></div>
     145    <div data-offset-y="20" style="-webkit-flex-item-align: baseline; width: -webkit-flex(1 0 0);"><div style="display:inline-block;"></div></div>
     146    <div data-offset-y="20" style="-webkit-flex-item-align: baseline; width: -webkit-flex(1 0 0); margin: 20px;"><div style="display:inline-block;"></div></div>
     147    <div data-expected-height="100" data-offset-y="0" style="-webkit-flex-item-align: stretch; width: -webkit-flex(1 0 0);"></div>
     148</div>
     149
    70150<div class="flexbox" style="height: 100px;">
    71151  <div data-expected-height="50"  data-offset-y="0" style="width: -webkit-flex(1 0 0); height: 50px;"></div>
     
    137217<div class="flexbox">
    138218  <div data-expected-height="20" data-offset-y="20" style="width: -webkit-flex(1 0 0); -webkit-flex-item-align: baseline; height: 20px;"></div>
     219  <!-- FIXME: This looks like it might be positioned 10 pixels too high due the margin-bottom. All the boxes should have their bottoms aligned I think. -->
    139220  <div data-expected-height="10" data-offset-y="20" style="width: -webkit-flex(1 0 0); -webkit-flex-item-align: baseline; height: 10px; margin: 20px 0 10px;"></div>
    140221  <div data-expected-height="10" data-offset-y="30" style="width: -webkit-flex(1 0 0); -webkit-flex-item-align: baseline; height: 10px; margin: 20px 0 0;"></div>
  • trunk/LayoutTests/css3/flexbox/script-tests/css-properties.js

    r104985 r105015  
    7777shouldBeEqualToString('flexbox.style.webkitFlexItemAlign', '');
    7878
     79flexbox.style.webkitFlexItemAlign = 'auto';
     80shouldBeEqualToString('flexbox.style.webkitFlexItemAlign', 'auto');
     81shouldBeEqualToString('window.getComputedStyle(flexbox, null).webkitFlexItemAlign', 'stretch');
     82
    7983flexbox.style.webkitFlexItemAlign = 'start';
    8084shouldBeEqualToString('flexbox.style.webkitFlexItemAlign', 'start');
     
    100104shouldBeEqualToString('flexbox.style.webkitFlexItemAlign', '');
    101105shouldBeEqualToString('window.getComputedStyle(flexbox, null).webkitFlexItemAlign', 'stretch');
     106
     107shouldBeEqualToString('flexbox.style.webkitFlexAlign', '');
     108// The initial value is 'stretch'.
     109shouldBeEqualToString('window.getComputedStyle(flexbox, null).webkitFlexAlign', 'stretch');
     110shouldBeEqualToString('window.getComputedStyle(flexitem, null).webkitFlexItemAlign', 'stretch');
     111
     112flexbox.style.webkitFlexAlign = 'foo';
     113shouldBeEqualToString('flexbox.style.webkitFlexAlign', '');
     114
     115flexbox.style.webkitFlexAlign = 'auto';
     116shouldBeEqualToString('flexbox.style.webkitFlexAlign', '');
     117shouldBeEqualToString('window.getComputedStyle(flexbox, null).webkitFlexAlign', 'stretch');
     118shouldBeEqualToString('window.getComputedStyle(flexitem, null).webkitFlexItemAlign', 'stretch');
     119
     120flexbox.style.webkitFlexAlign = 'start';
     121shouldBeEqualToString('flexbox.style.webkitFlexAlign', 'start');
     122shouldBeEqualToString('window.getComputedStyle(flexbox, null).webkitFlexAlign', 'start');
     123shouldBeEqualToString('window.getComputedStyle(flexitem, null).webkitFlexItemAlign', 'start');
     124
     125flexbox.style.webkitFlexAlign = 'end';
     126shouldBeEqualToString('flexbox.style.webkitFlexAlign', 'end');
     127shouldBeEqualToString('window.getComputedStyle(flexbox, null).webkitFlexAlign', 'end');
     128shouldBeEqualToString('window.getComputedStyle(flexitem, null).webkitFlexItemAlign', 'end');
     129
     130flexbox.style.webkitFlexAlign = 'center';
     131shouldBeEqualToString('flexbox.style.webkitFlexAlign', 'center');
     132shouldBeEqualToString('window.getComputedStyle(flexbox, null).webkitFlexAlign', 'center');
     133shouldBeEqualToString('window.getComputedStyle(flexitem, null).webkitFlexItemAlign', 'center');
     134
     135flexbox.style.webkitFlexAlign = 'stretch';
     136shouldBeEqualToString('flexbox.style.webkitFlexAlign', 'stretch');
     137shouldBeEqualToString('window.getComputedStyle(flexbox, null).webkitFlexAlign', 'stretch');
     138shouldBeEqualToString('window.getComputedStyle(flexitem, null).webkitFlexItemAlign', 'stretch');
     139
     140flexbox.style.webkitFlexAlign = 'baseline';
     141shouldBeEqualToString('flexbox.style.webkitFlexAlign', 'baseline');
     142shouldBeEqualToString('window.getComputedStyle(flexbox, null).webkitFlexAlign', 'baseline');
     143shouldBeEqualToString('window.getComputedStyle(flexitem, null).webkitFlexItemAlign', 'baseline');
     144
     145flexbox.style.webkitFlexAlign = '';
     146shouldBeEqualToString('flexbox.style.webkitFlexAlign', '');
     147shouldBeEqualToString('window.getComputedStyle(flexbox, null).webkitFlexAlign', 'stretch');
     148shouldBeEqualToString('window.getComputedStyle(flexitem, null).webkitFlexItemAlign', 'stretch');
     149
     150flexbox.style.display = 'none';
     151shouldBeEqualToString('flexbox.style.webkitFlexAlign', '');
     152shouldBeEqualToString('window.getComputedStyle(flexbox, null).webkitFlexAlign', 'stretch');
     153shouldBeEqualToString('window.getComputedStyle(flexitem, null).webkitFlexItemAlign', 'stretch');
     154flexbox.style.display = '';
     155
     156
     157// FIXME: This should probably return stretch. See https://bugs.webkit.org/show_bug.cgi?id=14563.
     158var detachedFlexbox = document.createElement('div');
     159var detachedFlexItem = document.createElement('div');
     160detachedFlexbox.appendChild(detachedFlexItem);
     161shouldBeEqualToString('window.getComputedStyle(detachedFlexbox, null).webkitFlexItemAlign', '');
     162shouldBeEqualToString('window.getComputedStyle(detachedFlexItem, null).webkitFlexItemAlign', '');
     163
    102164
    103165shouldBeEqualToString('flexbox.style.webkitFlexDirection', '');
  • trunk/LayoutTests/fast/css/getComputedStyle/computed-style-expected.txt

    r104985 r105015  
    145145-webkit-flex-order: 0;
    146146-webkit-flex-pack: start;
    147 -webkit-flex-item-align: stretch;
     147-webkit-flex-align: stretch;
     148-webkit-flex-item-align: auto;
    148149-webkit-flex-direction: row;
    149150-webkit-flex-flow: row nowrap;
  • trunk/LayoutTests/platform/chromium-mac-snowleopard/svg/css/getComputedStyle-basic-expected.txt

    r104985 r105015  
    287287rect: style.getPropertyValue(-webkit-flex-pack) : start
    288288rect: style.getPropertyCSSValue(-webkit-flex-pack) : [object CSSPrimitiveValue]
    289 rect: style.getPropertyValue(-webkit-flex-item-align) : stretch
     289rect: style.getPropertyValue(-webkit-flex-align) : stretch
     290rect: style.getPropertyCSSValue(-webkit-flex-align) : [object CSSPrimitiveValue]
     291rect: style.getPropertyValue(-webkit-flex-item-align) : auto
    290292rect: style.getPropertyCSSValue(-webkit-flex-item-align) : [object CSSPrimitiveValue]
    291293rect: style.getPropertyValue(-webkit-flex-direction) : row
     
    799801g: style.getPropertyValue(-webkit-flex-pack) : start
    800802g: style.getPropertyCSSValue(-webkit-flex-pack) : [object CSSPrimitiveValue]
    801 g: style.getPropertyValue(-webkit-flex-item-align) : stretch
     803g: style.getPropertyValue(-webkit-flex-align) : stretch
     804g: style.getPropertyCSSValue(-webkit-flex-align) : [object CSSPrimitiveValue]
     805g: style.getPropertyValue(-webkit-flex-item-align) : auto
    802806g: style.getPropertyCSSValue(-webkit-flex-item-align) : [object CSSPrimitiveValue]
    803807g: style.getPropertyValue(-webkit-flex-direction) : row
  • trunk/LayoutTests/platform/chromium-win/fast/css/getComputedStyle/computed-style-expected.txt

    r104985 r105015  
    145145-webkit-flex-order: 0;
    146146-webkit-flex-pack: start;
    147 -webkit-flex-item-align: stretch;
     147-webkit-flex-align: stretch;
     148-webkit-flex-item-align: auto;
    148149-webkit-flex-direction: row;
    149150-webkit-flex-flow: row nowrap;
  • trunk/LayoutTests/platform/chromium-win/fast/css/getComputedStyle/computed-style-without-renderer-expected.txt

    r104985 r105015  
    144144    -webkit-flex-order: 0
    145145    -webkit-flex-pack: start
    146     -webkit-flex-item-align: stretch
     146    -webkit-flex-align: stretch
     147    -webkit-flex-item-align: auto
    147148    -webkit-flex-direction: row
    148149    -webkit-flex-flow: row nowrap
  • trunk/LayoutTests/platform/chromium-win/svg/css/getComputedStyle-basic-expected.txt

    r104985 r105015  
    287287rect: style.getPropertyValue(-webkit-flex-pack) : start
    288288rect: style.getPropertyCSSValue(-webkit-flex-pack) : [object CSSPrimitiveValue]
    289 rect: style.getPropertyValue(-webkit-flex-item-align) : stretch
     289rect: style.getPropertyValue(-webkit-flex-align) : stretch
     290rect: style.getPropertyCSSValue(-webkit-flex-align) : [object CSSPrimitiveValue]
     291rect: style.getPropertyValue(-webkit-flex-item-align) : auto
    290292rect: style.getPropertyCSSValue(-webkit-flex-item-align) : [object CSSPrimitiveValue]
    291293rect: style.getPropertyValue(-webkit-flex-direction) : row
     
    799801g: style.getPropertyValue(-webkit-flex-pack) : start
    800802g: style.getPropertyCSSValue(-webkit-flex-pack) : [object CSSPrimitiveValue]
    801 g: style.getPropertyValue(-webkit-flex-item-align) : stretch
     803g: style.getPropertyValue(-webkit-flex-align) : stretch
     804g: style.getPropertyCSSValue(-webkit-flex-align) : [object CSSPrimitiveValue]
     805g: style.getPropertyValue(-webkit-flex-item-align) : auto
    802806g: style.getPropertyCSSValue(-webkit-flex-item-align) : [object CSSPrimitiveValue]
    803807g: style.getPropertyValue(-webkit-flex-direction) : row
  • trunk/LayoutTests/platform/gtk/fast/css/getComputedStyle/computed-style-without-renderer-expected.txt

    r104985 r105015  
    144144    -webkit-flex-order: 0
    145145    -webkit-flex-pack: start
    146     -webkit-flex-item-align: stretch
     146    -webkit-flex-align: stretch
     147    -webkit-flex-item-align: auto
    147148    -webkit-flex-direction: row
    148149    -webkit-flex-flow: row nowrap
  • trunk/LayoutTests/platform/mac/fast/css/getComputedStyle/computed-style-without-renderer-expected.txt

    r104985 r105015  
    144144    -webkit-flex-order: 0
    145145    -webkit-flex-pack: start
    146     -webkit-flex-item-align: stretch
     146    -webkit-flex-align: stretch
     147    -webkit-flex-item-align: auto
    147148    -webkit-flex-direction: row
    148149    -webkit-flex-flow: row nowrap
  • trunk/LayoutTests/platform/qt/fast/css/getComputedStyle/computed-style-without-renderer-expected.txt

    r104985 r105015  
    144144    -webkit-flex-order: 0
    145145    -webkit-flex-pack: start
    146     -webkit-flex-item-align: stretch
     146    -webkit-flex-align: stretch
     147    -webkit-flex-item-align: auto
    147148    -webkit-flex-direction: row
    148149    -webkit-flex-flow: row nowrap
  • trunk/LayoutTests/svg/css/getComputedStyle-basic-expected.txt

    r104985 r105015  
    287287rect: style.getPropertyValue(-webkit-flex-pack) : start
    288288rect: style.getPropertyCSSValue(-webkit-flex-pack) : [object CSSPrimitiveValue]
    289 rect: style.getPropertyValue(-webkit-flex-item-align) : stretch
     289rect: style.getPropertyValue(-webkit-flex-align) : stretch
     290rect: style.getPropertyCSSValue(-webkit-flex-align) : [object CSSPrimitiveValue]
     291rect: style.getPropertyValue(-webkit-flex-item-align) : auto
    290292rect: style.getPropertyCSSValue(-webkit-flex-item-align) : [object CSSPrimitiveValue]
    291293rect: style.getPropertyValue(-webkit-flex-direction) : row
     
    799801g: style.getPropertyValue(-webkit-flex-pack) : start
    800802g: style.getPropertyCSSValue(-webkit-flex-pack) : [object CSSPrimitiveValue]
    801 g: style.getPropertyValue(-webkit-flex-item-align) : stretch
     803g: style.getPropertyValue(-webkit-flex-align) : stretch
     804g: style.getPropertyCSSValue(-webkit-flex-align) : [object CSSPrimitiveValue]
     805g: style.getPropertyValue(-webkit-flex-item-align) : auto
    802806g: style.getPropertyCSSValue(-webkit-flex-item-align) : [object CSSPrimitiveValue]
    803807g: style.getPropertyValue(-webkit-flex-direction) : row
  • trunk/Source/WebCore/ChangeLog

    r105013 r105015  
     12012-01-13  Ojan Vafai  <ojan@chromium.org>
     2
     3        Implement flex-align
     4        https://bugs.webkit.org/show_bug.cgi?id=75782
     5
     6        Reviewed by Tony Chang.
     7
     8        * css/CSSComputedStyleDeclaration.cpp:
     9        (WebCore::CSSComputedStyleDeclaration::getPropertyCSSValue):
     10        Intentially gets computed style for flex-item-align:auto wrong.
     11        Will fix this in a followup patch.
     12        * css/CSSParser.cpp:
     13        (WebCore::CSSParser::parseValue):
     14        * css/CSSProperty.cpp:
     15        (WebCore::CSSProperty::isInheritedProperty):
     16        * css/CSSPropertyNames.in:
     17        * css/CSSStyleApplyProperty.cpp:
     18        (WebCore::CSSStyleApplyProperty::CSSStyleApplyProperty):
     19        * css/CSSStyleSelector.cpp:
     20        (WebCore::CSSStyleSelector::applyProperty):
     21        * rendering/RenderBox.cpp:
     22        (WebCore::RenderBox::sizesToIntrinsicLogicalWidth):
     23        * rendering/RenderFlexibleBox.cpp:
     24        (WebCore::flexAlignForChild):
     25        (WebCore::RenderFlexibleBox::layoutAndPlaceChildren):
     26        (WebCore::RenderFlexibleBox::alignChildren):
     27        * rendering/style/RenderStyle.h:
     28        (WebCore::RenderStyleBitfields::flexAlign):
     29        (WebCore::RenderStyleBitfields::setFlexAlign):
     30        (WebCore::RenderStyleBitfields::initialFlexAlign):
     31        (WebCore::RenderStyleBitfields::initialFlexItemAlign):
     32        * rendering/style/StyleFlexibleBoxData.cpp:
     33        (WebCore::StyleFlexibleBoxData::StyleFlexibleBoxData):
     34        (WebCore::StyleFlexibleBoxData::operator==):
     35        * rendering/style/StyleFlexibleBoxData.h:
     36
    1372012-01-13  Brent Fulgham  <bfulgham@webkit.org>
    238
  • trunk/Source/WebCore/css/CSSComputedStyleDeclaration.cpp

    r104985 r105015  
    219219    CSSPropertyWebkitFlexOrder,
    220220    CSSPropertyWebkitFlexPack,
     221    CSSPropertyWebkitFlexAlign,
    221222    CSSPropertyWebkitFlexItemAlign,
    222223    CSSPropertyWebkitFlexDirection,
     
    15271528        case CSSPropertyWebkitFlexPack:
    15281529            return cssValuePool->createValue(style->flexPack());
     1530        case CSSPropertyWebkitFlexAlign:
     1531            return cssValuePool->createValue(style->flexAlign());
    15291532        case CSSPropertyWebkitFlexItemAlign:
     1533            // FIXME: If flex-item-align:auto, then we should return the parent's flex-align.
     1534            // http://webkit.org/b/76326
    15301535            return cssValuePool->createValue(style->flexItemAlign());
    15311536        case CSSPropertyWebkitFlexDirection:
  • trunk/Source/WebCore/css/CSSParser.cpp

    r104985 r105015  
    16371637    case CSSPropertyWebkitFlexPack:
    16381638        validPrimitive = id == CSSValueStart || id == CSSValueEnd || id == CSSValueCenter || id == CSSValueJustify;
     1639        break;
     1640    case CSSPropertyWebkitFlexAlign:
     1641        validPrimitive = id == CSSValueStart || id == CSSValueEnd || id == CSSValueCenter || id == CSSValueBaseline || id == CSSValueStretch;
    16391642        break;
    16401643    case CSSPropertyWebkitFlexItemAlign:
  • trunk/Source/WebCore/css/CSSProperty.cpp

    r104985 r105015  
    561561    case CSSPropertyWebkitFlexOrder:
    562562    case CSSPropertyWebkitFlexPack:
     563    case CSSPropertyWebkitFlexAlign:
    563564    case CSSPropertyWebkitFlexItemAlign:
    564565    case CSSPropertyWebkitFlexDirection:
  • trunk/Source/WebCore/css/CSSPropertyNames.in

    r104985 r105015  
    256256-webkit-filter
    257257#endif
     258-webkit-flex-align
    258259-webkit-flex-direction
    259260-webkit-flex-flow
  • trunk/Source/WebCore/css/CSSStyleApplyProperty.cpp

    r104985 r105015  
    17571757    setPropertyHandler(CSSPropertyWebkitFlexOrder, ApplyPropertyDefault<int, &RenderStyle::flexOrder, int, &RenderStyle::setFlexOrder, int, &RenderStyle::initialFlexOrder>::createHandler());
    17581758    setPropertyHandler(CSSPropertyWebkitFlexPack, ApplyPropertyDefault<EFlexPack, &RenderStyle::flexPack, EFlexPack, &RenderStyle::setFlexPack, EFlexPack, &RenderStyle::initialFlexPack>::createHandler());
     1759    setPropertyHandler(CSSPropertyWebkitFlexAlign, ApplyPropertyDefault<EFlexAlign, &RenderStyle::flexAlign, EFlexAlign, &RenderStyle::setFlexAlign, EFlexAlign, &RenderStyle::initialFlexAlign>::createHandler());
    17591760    setPropertyHandler(CSSPropertyWebkitFlexItemAlign, ApplyPropertyDefault<EFlexAlign, &RenderStyle::flexItemAlign, EFlexAlign, &RenderStyle::setFlexItemAlign, EFlexAlign, &RenderStyle::initialFlexItemAlign>::createHandler());
    17601761    setPropertyHandler(CSSPropertyWebkitFlexDirection, ApplyPropertyDefault<EFlexDirection, &RenderStyle::flexDirection, EFlexDirection, &RenderStyle::setFlexDirection, EFlexDirection, &RenderStyle::initialFlexDirection>::createHandler());
  • trunk/Source/WebCore/css/CSSStyleSelector.cpp

    r104985 r105015  
    37873787    case CSSPropertyWebkitFlexOrder:
    37883788    case CSSPropertyWebkitFlexPack:
     3789    case CSSPropertyWebkitFlexAlign:
    37893790    case CSSPropertyWebkitFlexItemAlign:
    37903791    case CSSPropertyWebkitFlexDirection:
  • trunk/Source/WebCore/rendering/RenderBox.cpp

    r104985 r105015  
    17941794    // In the case of columns that have a stretch alignment, we go ahead and layout at the
    17951795    // stretched size to avoid an extra layout when applying alignment.
    1796     if (parent()->isFlexibleBox() && (!parent()->style()->isColumnFlexDirection() || style()->flexItemAlign() != AlignStretch))
    1797         return true;
     1796    if (parent()->isFlexibleBox()) {
     1797        if (!parent()->style()->isColumnFlexDirection())
     1798            return true;
     1799        EFlexAlign itemAlign = style()->flexItemAlign();
     1800        if (itemAlign != AlignStretch && (itemAlign != AlignAuto || parent()->style()->flexAlign() != AlignStretch))
     1801            return true;
     1802    }
    17981803
    17991804    // Flexible horizontal boxes lay out children at their intrinsic widths.  Also vertical boxes
  • trunk/Source/WebCore/rendering/RenderFlexibleBox.cpp

    r104985 r105015  
    619619}
    620620
     621static EFlexAlign flexAlignForChild(RenderBox* child)
     622{
     623    EFlexAlign align = child->style()->flexItemAlign();
     624    if (align == AlignAuto)
     625        return child->parent()->style()->flexAlign();
     626    return align;
     627}
     628
    621629void RenderFlexibleBox::layoutAndPlaceChildren(FlexOrderIterator& iterator, const WTF::Vector<LayoutUnit>& childSizes, LayoutUnit availableFreeSpace, float totalPositiveFlexibility)
    622630{
     
    640648        child->layoutIfNeeded();
    641649
    642         if (child->style()->flexItemAlign() == AlignBaseline) {
     650        if (flexAlignForChild(child) == AlignBaseline) {
    643651            LayoutUnit ascent = marginBoxAscent(child);
    644652            LayoutUnit descent = (crossAxisMarginExtentForChild(child) + crossAxisExtentForChild(child)) - ascent;
     
    733741
    734742        // FIXME: Make sure this does the right thing with column flows.
    735         switch (child->style()->flexItemAlign()) {
     743        switch (flexAlignForChild(child)) {
    736744        case AlignAuto:
    737             // FIXME: Handle this once we add flex-align.
     745            ASSERT_NOT_REACHED();
    738746            break;
    739747        case AlignStretch: {
  • trunk/Source/WebCore/rendering/style/RenderStyle.h

    r104985 r105015  
    802802    int flexOrder() const { return rareNonInheritedData->m_flexibleBox->m_flexOrder; }
    803803    EFlexPack flexPack() const { return static_cast<EFlexPack>(rareNonInheritedData->m_flexibleBox->m_flexPack); }
     804    EFlexAlign flexAlign() const { return static_cast<EFlexAlign>(rareNonInheritedData->m_flexibleBox->m_flexAlign); }
    804805    EFlexAlign flexItemAlign() const { return static_cast<EFlexAlign>(rareNonInheritedData->m_flexibleBox->m_flexItemAlign); }
    805806    EFlexDirection flexDirection() const { return static_cast<EFlexDirection>(rareNonInheritedData->m_flexibleBox->m_flexDirection); }
     
    12221223    void setFlexOrder(int o) { SET_VAR(rareNonInheritedData.access()->m_flexibleBox, m_flexOrder, o); }
    12231224    void setFlexPack(EFlexPack p) { SET_VAR(rareNonInheritedData.access()->m_flexibleBox, m_flexPack, p); }
     1225    void setFlexAlign(EFlexAlign a) { SET_VAR(rareNonInheritedData.access()->m_flexibleBox, m_flexAlign, a); }
    12241226    void setFlexItemAlign(EFlexAlign a) { SET_VAR(rareNonInheritedData.access()->m_flexibleBox, m_flexItemAlign, a); }
    12251227    void setFlexDirection(EFlexDirection direction) { SET_VAR(rareNonInheritedData.access()->m_flexibleBox, m_flexDirection, direction); }
     
    15461548    static int initialFlexOrder() { return 0; }
    15471549    static EFlexPack initialFlexPack() { return PackStart; }
    1548     // FIXME: When we add in flex-align, default flex-item-align to AlignAuto.
    1549     static EFlexAlign initialFlexItemAlign() { return AlignStretch; }
     1550    static EFlexAlign initialFlexAlign() { return AlignStretch; }
     1551    static EFlexAlign initialFlexItemAlign() { return AlignAuto; }
    15501552    static EFlexDirection initialFlexDirection() { return FlowRow; }
    15511553    static EFlexWrap initialFlexWrap() { return FlexNoWrap; }
  • trunk/Source/WebCore/rendering/style/StyleFlexibleBoxData.cpp

    r104985 r105015  
    3838    , m_flexOrder(RenderStyle::initialFlexOrder())
    3939    , m_flexPack(RenderStyle::initialFlexPack())
     40    , m_flexAlign(RenderStyle::initialFlexAlign())
    4041    , m_flexItemAlign(RenderStyle::initialFlexItemAlign())
    4142    , m_flexDirection(RenderStyle::initialFlexDirection())
     
    5253    , m_flexOrder(o.m_flexOrder)
    5354    , m_flexPack(o.m_flexPack)
     55    , m_flexAlign(o.m_flexAlign)
    5456    , m_flexItemAlign(o.m_flexItemAlign)
    5557    , m_flexDirection(o.m_flexDirection)
     
    6264    return m_widthPositiveFlex == o.m_widthPositiveFlex && m_widthNegativeFlex == o.m_widthNegativeFlex
    6365        && m_heightPositiveFlex == o.m_heightPositiveFlex && m_heightNegativeFlex == o.m_heightNegativeFlex
    64         && m_flexOrder == o.m_flexOrder && m_flexPack == o.m_flexPack && m_flexItemAlign == o.m_flexItemAlign
    65         && m_flexDirection == o.m_flexDirection && m_flexWrap == o.m_flexWrap;
     66        && m_flexOrder == o.m_flexOrder && m_flexPack == o.m_flexPack && m_flexAlign == o.m_flexAlign
     67        && m_flexItemAlign == o.m_flexItemAlign && m_flexDirection == o.m_flexDirection && m_flexWrap == o.m_flexWrap;
    6668}
    6769
  • trunk/Source/WebCore/rendering/style/StyleFlexibleBoxData.h

    r104985 r105015  
    5151
    5252    unsigned m_flexPack : 2; // EFlexPack
     53    unsigned m_flexAlign : 3; // EFlexAlign
    5354    unsigned m_flexItemAlign : 3; // EFlexAlign
    5455    unsigned m_flexDirection : 2; // EFlexDirection
Note: See TracChangeset for help on using the changeset viewer.