Ignore:
Timestamp:
May 30, 2016, 1:14:31 AM (10 years ago)
Author:
jfernandez@igalia.com
Message:

[CSS Box Alignment] New CSS Value 'normal' for Self Alignment
​https://bugs.webkit.org/show_bug.cgi?id=156254

Reviewed by Darin Adler.

Source/WebCore:

The Box Alignment specification defines a new value 'normal' to be used
as default for the different layout models, which will define the
specific behavior for each case. This patch adds a new CSS value in the
parsing logic and adapts the Self Alignment properties to the new
value.

The 'auto' value is no longer valid for the 'align-items' property and
the Computed Value will be always the specified value. Hence, I removed
the StyleResolver logic because is not required now; the specific
behavior of the 'normal' value will be resolved at layout time.

Additionally, this patch updates the layout logic as well, for both
Flexbox and Grid layout models.

Test: css3/parse-alignment-of-root-elements.html

  • css/CSSComputedStyleDeclaration.cpp:

(WebCore::resolveLegacyJustifyItems): Added.
(WebCore::resolveJustifyItemsAuto): Added.
(WebCore::resolveJustifySelfAuto): Added.
(WebCore::resolveAlignSelfAuto): Added.
(WebCore::valueForItemPositionWithOverflowAlignment): Using a StyleSelfAlignmentData argument.
(WebCore::ComputedStyleExtractor::propertyValue): Using the new resolving functions.

  • css/CSSParser.cpp:

(WebCore::CSSParser::parseItemPositionOverflowPosition): A new value 'normal' is now valid.

  • css/CSSPrimitiveValueMappings.h:

(WebCore::CSSPrimitiveValue::CSSPrimitiveValue): Mappings for the new value 'normal'.
(WebCore::CSSPrimitiveValue::operator ItemPosition): Mappings for the new value 'normal'.

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

(WebCore::StyleResolver::adjustRenderStyle): We don't need to resolve 'legacy" keyword.

  • rendering/RenderBox.cpp:

(WebCore::flexItemHasStretchAlignment):
(WebCore::RenderBox::hasStretchedLogicalWidth):

  • rendering/RenderFlexibleBox.cpp:

(WebCore::RenderFlexibleBox::styleDidChange):
(WebCore::RenderFlexibleBox::alignmentForChild):
(WebCore::contentAlignmentNormalBehaviorFlexibleBox):
(WebCore::RenderFlexibleBox::layoutAndPlaceChildren):
(WebCore::RenderFlexibleBox::layoutColumnReverse):
(WebCore::RenderFlexibleBox::alignFlexLines):
(WebCore::RenderFlexibleBox::alignChildren):

  • rendering/RenderGrid.cpp:

(WebCore::defaultAlignmentChangedToStretchInRowAxis):
(WebCore::defaultAlignmentChangedFromStretchInRowAxis):
(WebCore::defaultAlignmentChangedFromStretchInColumnAxis):
(WebCore::selfAlignmentChangedToStretchInRowAxis):
(WebCore::selfAlignmentChangedFromStretchInRowAxis):
(WebCore::selfAlignmentChangedFromStretchInColumnAxis):
(WebCore::contentAlignmentNormalBehaviorGrid):
(WebCore::RenderGrid::applyStretchAlignmentToTracksIfNeeded):
(WebCore::RenderGrid::needToStretchChildLogicalHeight):
(WebCore::RenderGrid::applyStretchAlignmentToChildIfNeeded):
(WebCore::RenderGrid::columnAxisPositionForChild):
(WebCore::RenderGrid::rowAxisPositionForChild):
(WebCore::RenderGrid::columnAxisOffsetForChild):
(WebCore::RenderGrid::rowAxisOffsetForChild):
(WebCore::RenderGrid::computeContentPositionAndDistributionOffset):

  • rendering/style/RenderStyle.cpp:

(WebCore::resolvedSelfAlignment):
(WebCore::RenderStyle::resolvedAlignItems):
(WebCore::RenderStyle::resolvedAlignSelf):
(WebCore::RenderStyle::resolvedJustifyItems):
(WebCore::RenderStyle::resolvedJustifySelf):

  • rendering/style/RenderStyle.h:
  • rendering/style/RenderStyleConstants.h:
  • rendering/style/StyleRareNonInheritedData.cpp:

(WebCore::StyleRareNonInheritedData::StyleRareNonInheritedData): align-items uses now a different initial function.

LayoutTests:

Changes in the already defined tests for the alignment properties to
consider the new CSS value 'normal', which is the default for align-items
and the value to resolve 'auto' when there is no parent.

Added a new test to verify the Self-Alignment properties work as expected
with root elements.

  • css3/flexbox/css-properties-expected.txt:
  • css3/flexbox/css-properties.html:
  • css3/parse-align-items-expected.txt:
  • css3/parse-align-items.html:
  • css3/parse-align-self-expected.txt:
  • css3/parse-align-self.html:
  • css3/parse-alignment-of-root-elements-expected.txt: Added.
  • css3/parse-alignment-of-root-elements.html: Added.
  • fast/css/getComputedStyle/computed-style-expected.txt:
  • fast/css/getComputedStyle/computed-style-without-renderer-expected.txt:
  • fast/css/parse-justify-items-expected.txt:
  • fast/css/parse-justify-items.html:
  • fast/css/parse-justify-self-expected.txt:
  • fast/css/parse-justify-self.html:
  • fast/css/resources/alignment-parsing-utils.js:
  • svg/css/getComputedStyle-basic-expected.txt:

(checkBadValues):

  • svg/css/getComputedStyle-basic-expected.txt:
File:
1 edited

Legend:

Unmodified
Added
Removed

  • trunk/LayoutTests/fast/css/parse-justify-self-expected.txt

    r194104 r201498  
    66Test getting justify-self set through CSS
    77PASS getComputedStyle(justifySelfBaseline, '').getPropertyValue('justify-self') is 'baseline'
     8PASS getComputedStyle(justifySelfLastBaseline, '').getPropertyValue('justify-self') is 'last-baseline'
    89PASS getComputedStyle(justifySelfStretch, '').getPropertyValue('justify-self') is 'stretch'
    910PASS getComputedStyle(justifySelfStart, '').getPropertyValue('justify-self') is 'start'
    … …  
    1415PASS getComputedStyle(justifySelfLeft, '').getPropertyValue('justify-self') is 'left'
    1516PASS getComputedStyle(justifySelfRight, '').getPropertyValue('justify-self') is 'right'
     17PASS getComputedStyle(justifySelfFlexStart, '').getPropertyValue('justify-self') is 'flex-start'
     18PASS getComputedStyle(justifySelfFlexEnd, '').getPropertyValue('justify-self') is 'flex-end'
    1619PASS getComputedStyle(justifySelfEndUnsafe, '').getPropertyValue('justify-self') is 'end unsafe'
    1720PASS getComputedStyle(justifySelfCenterUnsafe, '').getPropertyValue('justify-self') is 'center unsafe'
    … …  
    2023PASS getComputedStyle(justifySelfRightSafe, '').getPropertyValue('justify-self') is 'right safe'
    2124PASS getComputedStyle(justifySelfLeftUnsafe, '').getPropertyValue('justify-self') is 'left unsafe'
     25PASS getComputedStyle(justifySelfFlexStartUnsafe, '').getPropertyValue('justify-self') is 'flex-start unsafe'
     26PASS getComputedStyle(justifySelfFlexEndSafe, '').getPropertyValue('justify-self') is 'flex-end safe'
    2227
    2328Test initial value of justify-self through JS
    24 PASS getComputedStyle(element, '').getPropertyValue('justify-self') is 'start'
     29PASS getComputedStyle(element, '').getPropertyValue('justify-self') is 'normal'
    2530
    2631Test getting and setting justify-self through JS
    27 PASS getComputedStyle(element, '').getPropertyValue('justify-self') is 'center'
    28 PASS getComputedStyle(element, '').getPropertyValue('justify-self') is 'start unsafe'
    29 PASS getComputedStyle(element, '').getPropertyValue('justify-self') is 'start'
     32PASS element.style.justifySelf is "center"
     33PASS window.getComputedStyle(element, '').getPropertyValue('justify-self') is "center"
     34PASS element.style.justifySelf is "start unsafe"
     35PASS window.getComputedStyle(element, '').getPropertyValue('justify-self') is "start unsafe"
     36PASS element.style.justifySelf is "flex-end safe"
     37PASS window.getComputedStyle(element, '').getPropertyValue('justify-self') is "flex-end safe"
     38PASS element.style.justifySelf is "right"
     39PASS window.getComputedStyle(element, '').getPropertyValue('justify-self') is "right"
     40PASS element.style.justifySelf is "center"
     41PASS window.getComputedStyle(element, '').getPropertyValue('justify-self') is "center"
     42PASS element.style.justifySelf is "self-start"
     43PASS window.getComputedStyle(element, '').getPropertyValue('justify-self') is "self-start"
     44PASS element.style.justifySelf is "auto"
     45PASS window.getComputedStyle(element, '').getPropertyValue('justify-self') is "normal"
     46PASS element.style.justifySelf is "auto"
     47PASS window.getComputedStyle(element, '').getPropertyValue('justify-self') is "normal"
     48PASS element.style.justifySelf is "auto"
     49PASS window.getComputedStyle(element, '').getPropertyValue('justify-self') is "normal"
     50PASS element.style.justifySelf is "self-end"
     51PASS window.getComputedStyle(element, '').getPropertyValue('justify-self') is "self-end"
    3052
    3153Test bad combinations of justify-self
    32 PASS getComputedStyle(element, '').getPropertyValue('justify-self') is 'start'
    33 PASS getComputedStyle(element, '').getPropertyValue('justify-self') is 'start'
    34 PASS getComputedStyle(element, '').getPropertyValue('justify-self') is 'start'
    35 PASS getComputedStyle(element, '').getPropertyValue('justify-self') is 'start'
    36 PASS getComputedStyle(element, '').getPropertyValue('justify-self') is 'start'
    37 PASS getComputedStyle(element, '').getPropertyValue('justify-self') is 'start'
    38 PASS getComputedStyle(element, '').getPropertyValue('justify-self') is 'start'
    39 PASS getComputedStyle(element, '').getPropertyValue('justify-self') is 'start'
    40 PASS getComputedStyle(element, '').getPropertyValue('justify-self') is 'start'
    41 PASS getComputedStyle(element, '').getPropertyValue('justify-self') is 'start'
    42 PASS getComputedStyle(element, '').getPropertyValue('justify-self') is 'start'
    43 PASS getComputedStyle(element, '').getPropertyValue('justify-self') is 'start'
    44 PASS getComputedStyle(element, '').getPropertyValue('justify-self') is 'start'
    45 PASS getComputedStyle(element, '').getPropertyValue('justify-self') is 'start'
    46 PASS getComputedStyle(element, '').getPropertyValue('justify-self') is 'start'
    47 PASS getComputedStyle(element, '').getPropertyValue('justify-self') is 'start'
    48 PASS getComputedStyle(element, '').getPropertyValue('justify-self') is 'start'
     54PASS element.style.justifySelf is ""
     55PASS window.getComputedStyle(element, '').getPropertyValue('justify-self') is "normal"
     56PASS element.style.justifySelf is ""
     57PASS window.getComputedStyle(element, '').getPropertyValue('justify-self') is "normal"
     58PASS element.style.justifySelf is ""
     59PASS window.getComputedStyle(element, '').getPropertyValue('justify-self') is "normal"
     60PASS element.style.justifySelf is ""
     61PASS window.getComputedStyle(element, '').getPropertyValue('justify-self') is "normal"
     62PASS element.style.justifySelf is ""
     63PASS window.getComputedStyle(element, '').getPropertyValue('justify-self') is "normal"
     64PASS element.style.justifySelf is ""
     65PASS window.getComputedStyle(element, '').getPropertyValue('justify-self') is "normal"
     66PASS element.style.justifySelf is ""
     67PASS window.getComputedStyle(element, '').getPropertyValue('justify-self') is "normal"
     68PASS element.style.justifySelf is ""
     69PASS window.getComputedStyle(element, '').getPropertyValue('justify-self') is "normal"
     70PASS element.style.justifySelf is ""
     71PASS window.getComputedStyle(element, '').getPropertyValue('justify-self') is "normal"
     72PASS element.style.justifySelf is ""
     73PASS window.getComputedStyle(element, '').getPropertyValue('justify-self') is "normal"
     74PASS element.style.justifySelf is ""
     75PASS window.getComputedStyle(element, '').getPropertyValue('justify-self') is "normal"
     76PASS element.style.justifySelf is ""
     77PASS window.getComputedStyle(element, '').getPropertyValue('justify-self') is "normal"
     78PASS element.style.justifySelf is ""
     79PASS window.getComputedStyle(element, '').getPropertyValue('justify-self') is "normal"
     80PASS element.style.justifySelf is ""
     81PASS window.getComputedStyle(element, '').getPropertyValue('justify-self') is "normal"
     82PASS element.style.justifySelf is ""
     83PASS window.getComputedStyle(element, '').getPropertyValue('justify-self') is "normal"
     84PASS element.style.justifySelf is ""
     85PASS window.getComputedStyle(element, '').getPropertyValue('justify-self') is "normal"
     86PASS element.style.justifySelf is ""
     87PASS window.getComputedStyle(element, '').getPropertyValue('justify-self') is "normal"
     88PASS element.style.justifySelf is ""
     89PASS window.getComputedStyle(element, '').getPropertyValue('justify-self') is "normal"
     90PASS element.style.justifySelf is ""
     91PASS window.getComputedStyle(element, '').getPropertyValue('justify-self') is "normal"
     92PASS element.style.justifySelf is ""
     93PASS window.getComputedStyle(element, '').getPropertyValue('justify-self') is "normal"
     94PASS element.style.justifySelf is ""
     95PASS window.getComputedStyle(element, '').getPropertyValue('justify-self') is "normal"
     96PASS element.style.justifySelf is ""
     97PASS window.getComputedStyle(element, '').getPropertyValue('justify-self') is "normal"
     98PASS element.style.justifySelf is ""
     99PASS window.getComputedStyle(element, '').getPropertyValue('justify-self') is "normal"
     100PASS element.style.justifySelf is ""
     101PASS window.getComputedStyle(element, '').getPropertyValue('justify-self') is "normal"
    49102
    50103Test the value 'initial'
    51 PASS getComputedStyle(element, '').getPropertyValue('justify-self') is 'center'
    52 PASS getComputedStyle(element, '').getPropertyValue('justify-self') is 'start'
     104PASS element.style.justifySelf is "center"
     105PASS window.getComputedStyle(element, '').getPropertyValue('justify-self') is "center"
     106PASS element.style.justifySelf is "initial"
     107PASS window.getComputedStyle(element, '').getPropertyValue('justify-self') is "normal"
     108
     109Test the value 'initial' for grid containers
     110PASS element.style.justifySelf is "left safe"
     111PASS window.getComputedStyle(element, '').getPropertyValue('justify-self') is "left safe"
     112PASS element.style.justifySelf is "initial"
     113PASS window.getComputedStyle(element, '').getPropertyValue('justify-self') is "normal"
     114
     115Test the value 'initial' for flex containers
     116PASS element.style.justifySelf is "right unsafe"
     117PASS window.getComputedStyle(element, '').getPropertyValue('justify-self') is "right unsafe"
     118PASS element.style.justifySelf is "initial"
     119PASS window.getComputedStyle(element, '').getPropertyValue('justify-self') is "normal"
     120
     121Test the value 'initial' for positioned elements
     122PASS element.style.justifySelf is "left"
     123PASS window.getComputedStyle(element, '').getPropertyValue('justify-self') is "left"
     124PASS element.style.justifySelf is "initial"
     125PASS window.getComputedStyle(element, '').getPropertyValue('justify-self') is "normal"
     126
     127Test the value 'initial' for positioned elements in grid containers
     128PASS element.style.justifySelf is "right"
     129PASS window.getComputedStyle(element, '').getPropertyValue('justify-self') is "right"
     130PASS element.style.justifySelf is "initial"
     131PASS window.getComputedStyle(element, '').getPropertyValue('justify-self') is "normal"
     132
     133Test the value 'initial' for positioned elements in grid containers
     134PASS element.style.justifySelf is "end"
     135PASS window.getComputedStyle(element, '').getPropertyValue('justify-self') is "end"
     136PASS element.style.justifySelf is "initial"
     137PASS window.getComputedStyle(element, '').getPropertyValue('justify-self') is "normal"
    53138
    54139Test the value 'inherit'
    55 PASS getComputedStyle(parentElement, '').getPropertyValue('justify-self') is 'end'
    56 PASS getComputedStyle(element, '').getPropertyValue('justify-self') is 'end'
     140PASS element.style.justifySelf is "end"
     141PASS window.getComputedStyle(element, '').getPropertyValue('justify-self') is "end"
     142PASS element.style.justifySelf is "inherit"
     143PASS window.getComputedStyle(element, '').getPropertyValue('justify-self') is "end"
     144PASS element.style.justifySelf is "left safe"
     145PASS window.getComputedStyle(element, '').getPropertyValue('justify-self') is "left safe"
     146PASS element.style.justifySelf is "inherit"
     147PASS window.getComputedStyle(element, '').getPropertyValue('justify-self') is "left safe"
     148PASS element.style.justifySelf is "center unsafe"
     149PASS window.getComputedStyle(element, '').getPropertyValue('justify-self') is "center unsafe"
     150PASS element.style.justifySelf is "inherit"
     151PASS window.getComputedStyle(element, '').getPropertyValue('justify-self') is "center unsafe"
    57152PASS successfullyParsed is true
    58153
Note: See TracChangeset for help on using the changeset viewer.