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/css3/parse-align-items-expected.txt

    r194104 r201498  
    2727
    2828Test initial value of align-items through JS
    29 PASS getComputedStyle(element, '').getPropertyValue('-webkit-align-items') is 'start'
     29PASS getComputedStyle(element, '').getPropertyValue('-webkit-align-items') is 'normal'
    3030
    3131Test getting and setting align-items through JS
    … …  
    4242PASS element.style.webkitAlignItems is "self-start"
    4343PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-align-items') is "self-start"
    44 PASS element.style.webkitAlignItems is "auto"
    45 PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-align-items') is "start"
    46 PASS element.style.webkitAlignItems is "auto"
    47 PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-align-items') is "stretch"
    48 PASS element.style.webkitAlignItems is "auto"
    49 PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-align-items') is "stretch"
     44PASS element.style.webkitAlignItems is ""
     45PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-align-items') is "normal"
     46PASS element.style.webkitAlignItems is ""
     47PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-align-items') is "normal"
     48PASS element.style.webkitAlignItems is ""
     49PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-align-items') is "normal"
    5050PASS element.style.webkitAlignItems is "self-end"
    5151PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-align-items') is "self-end"
    … …  
    5353Test bad combinations of align-items
    5454PASS element.style.webkitAlignItems is ""
    55 PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-align-items') is "start"
     55PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-align-items') is "normal"
    5656PASS element.style.webkitAlignItems is ""
    57 PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-align-items') is "start"
     57PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-align-items') is "normal"
    5858PASS element.style.webkitAlignItems is ""
    59 PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-align-items') is "start"
     59PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-align-items') is "normal"
    6060PASS element.style.webkitAlignItems is ""
    61 PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-align-items') is "start"
     61PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-align-items') is "normal"
    6262PASS element.style.webkitAlignItems is ""
    63 PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-align-items') is "start"
     63PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-align-items') is "normal"
    6464PASS element.style.webkitAlignItems is ""
    65 PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-align-items') is "start"
     65PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-align-items') is "normal"
    6666PASS element.style.webkitAlignItems is ""
    67 PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-align-items') is "start"
     67PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-align-items') is "normal"
    6868PASS element.style.webkitAlignItems is ""
    69 PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-align-items') is "start"
     69PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-align-items') is "normal"
    7070PASS element.style.webkitAlignItems is ""
    71 PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-align-items') is "start"
     71PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-align-items') is "normal"
    7272PASS element.style.webkitAlignItems is ""
    73 PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-align-items') is "start"
     73PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-align-items') is "normal"
    7474PASS element.style.webkitAlignItems is ""
    75 PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-align-items') is "start"
     75PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-align-items') is "normal"
    7676PASS element.style.webkitAlignItems is ""
    77 PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-align-items') is "start"
     77PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-align-items') is "normal"
    7878PASS element.style.webkitAlignItems is ""
    79 PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-align-items') is "start"
     79PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-align-items') is "normal"
    8080PASS element.style.webkitAlignItems is ""
    81 PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-align-items') is "start"
     81PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-align-items') is "normal"
    8282PASS element.style.webkitAlignItems is ""
    83 PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-align-items') is "start"
     83PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-align-items') is "normal"
    8484PASS element.style.webkitAlignItems is ""
    85 PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-align-items') is "start"
     85PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-align-items') is "normal"
    8686PASS element.style.webkitAlignItems is ""
    87 PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-align-items') is "start"
     87PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-align-items') is "normal"
    8888PASS element.style.webkitAlignItems is ""
    89 PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-align-items') is "start"
     89PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-align-items') is "normal"
    9090PASS element.style.webkitAlignItems is ""
    91 PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-align-items') is "start"
     91PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-align-items') is "normal"
    9292PASS element.style.webkitAlignItems is ""
    93 PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-align-items') is "start"
     93PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-align-items') is "normal"
    9494PASS element.style.webkitAlignItems is ""
    95 PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-align-items') is "start"
     95PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-align-items') is "normal"
    9696PASS element.style.webkitAlignItems is ""
    97 PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-align-items') is "start"
     97PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-align-items') is "normal"
    9898PASS element.style.webkitAlignItems is ""
    99 PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-align-items') is "start"
     99PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-align-items') is "normal"
    100100PASS element.style.webkitAlignItems is ""
    101 PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-align-items') is "start"
     101PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-align-items') is "normal"
     102PASS element.style.webkitAlignItems is ""
     103PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-align-items') is "normal"
    102104
    103105Test the value 'initial'
    … …  
    105107PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-align-items') is "center"
    106108PASS element.style.webkitAlignItems is "initial"
    107 PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-align-items') is "start"
     109PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-align-items') is "normal"
    108110
    109111Test the value 'initial' for grid containers
    … …  
    111113PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-align-items') is "left safe"
    112114PASS element.style.webkitAlignItems is "initial"
    113 PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-align-items') is "stretch"
     115PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-align-items') is "normal"
    114116
    115117Test the value 'initial' for flex containers
    … …  
    117119PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-align-items') is "right unsafe"
    118120PASS element.style.webkitAlignItems is "initial"
    119 PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-align-items') is "stretch"
     121PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-align-items') is "normal"
    120122
    121123Test the value 'inherit'
Note: See TracChangeset for help on using the changeset viewer.