Changeset 197503 in webkit


Ignore:
Timestamp:
Mar 3, 2016 3:05:32 AM (8 years ago)
Author:
jfernandez@igalia.com
Message:

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

Source/WebCore:

Reviewed by David Hyatt.

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 Content Alignment properties to the new
value.

The 'auto' value is no longer valid 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.

Computed value of both align-content and justify-content is the
specified value, we don't have to resolve any 'auto' value now.

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

No new tests, since we only need to rebaseline those test cases
affected by the new default computed value.

  • css/CSSComputedStyleDeclaration.cpp:

(WebCore::valueForContentPositionAndDistributionWithOverflowAlignment):
(WebCore::ComputedStyleExtractor::propertyValue):
(WebCore::CSSComputedStyleDeclaration::getPropertyCSSValue): Deleted.
(WebCore::CSSComputedStyleDeclaration::copyProperties): Deleted.
(WebCore::nodeOrItsAncestorNeedsStyleRecalc): Deleted.
(WebCore::isFlexOrGrid): Deleted.
(WebCore::ComputedStyleExtractor::customPropertyValue): Deleted.

  • css/CSSParser.cpp:

(WebCore::CSSParser::parseContentDistributionOverflowPosition):

  • css/CSSPrimitiveValueMappings.h:

(WebCore::CSSPrimitiveValue::CSSPrimitiveValue):
(WebCore::CSSPrimitiveValue::operator ContentPosition):

  • rendering/RenderFlexibleBox.cpp:

(WebCore::normalValueBehavior):
(WebCore::RenderFlexibleBox::layoutAndPlaceChildren):
(WebCore::RenderFlexibleBox::layoutColumnReverse):
(WebCore::RenderFlexibleBox::alignFlexLines):
(WebCore::alignContentSpaceBetweenChildren): Deleted.

  • rendering/RenderGrid.cpp:

(WebCore::normalValueBehavior):
(WebCore::RenderGrid::applyStretchAlignmentToTracksIfNeeded):
(WebCore::RenderGrid::columnAxisOffsetForChild):
(WebCore::RenderGrid::rowAxisOffsetForChild):
(WebCore::resolveContentDistributionFallback):
(WebCore::contentDistributionOffset):
(WebCore::RenderGrid::computeContentPositionAndDistributionOffset):

  • rendering/style/RenderStyle.cpp:

(WebCore::resolvedContentAlignmentPosition):
(WebCore::resolvedContentAlignmentDistribution):
(WebCore::RenderStyle::resolvedJustifyContentPosition):
(WebCore::RenderStyle::resolvedJustifyContentDistribution):
(WebCore::RenderStyle::resolvedAlignContentPosition):
(WebCore::RenderStyle::resolvedAlignContentDistribution):

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

LayoutTests:

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 Content Alignment properties to the new
value.

Since the 'normal' vlaue, initial/default for both justify-content
and align-content CSS properties, behaves now as 'stretch' instead
of o'start' we have to rebaseline those tests affected by the new
default value.

Reviewed by David Hyatt.

  • css3/flexbox/css-properties-expected.txt:
  • css3/flexbox/css-properties.html:
  • css3/parse-align-content-expected.txt:
  • css3/parse-align-content.html:
  • css3/parse-justify-content-expected.txt:
  • css3/parse-justify-content.html:
  • css3/resources/alignment-parsing-utils.js:

(checkBadValues):

  • fast/css-grid-layout/auto-content-resolution-columns.html:
  • fast/css-grid-layout/grid-auto-columns-rows-update.html:
  • fast/css-grid-layout/grid-auto-flow-resolution.html:
  • fast/css-grid-layout/grid-columns-rows-get-set-multiple.html:
  • fast/css-grid-layout/grid-columns-rows-get-set.html:
  • fast/css-grid-layout/grid-container-change-named-grid-lines-recompute-child.html:
  • fast/css-grid-layout/grid-content-sized-columns-resolution.html:
  • fast/css-grid-layout/grid-dynamic-updates-relayout.html:
  • fast/css-grid-layout/grid-element-min-max-width.html:
  • fast/css-grid-layout/grid-element-repeat-get-set.html:
  • fast/css-grid-layout/grid-initialize-span-one-items.html:
  • fast/css-grid-layout/grid-item-addition-auto-placement-update.html:
  • fast/css-grid-layout/grid-item-addition-track-breadth-update.html:
  • fast/css-grid-layout/grid-item-bad-named-area-auto-placement.html:
  • fast/css-grid-layout/grid-item-margin-auto-columns-rows-horizontal-ltr.html:
  • fast/css-grid-layout/grid-item-margin-auto-columns-rows-horizontal-rtl.html:
  • fast/css-grid-layout/grid-item-margin-auto-columns-rows-vertical-ltr.html:
  • fast/css-grid-layout/grid-item-margin-auto-columns-rows-vertical-rtl.html:
  • fast/css-grid-layout/grid-item-multiple-minmax-content-resolution.html:
  • fast/css-grid-layout/grid-item-named-grid-area-resolution.html:
  • fast/css-grid-layout/grid-item-negative-indexes.html:
  • fast/css-grid-layout/grid-item-order-in-content-sized-columns-resolution.html:
  • fast/css-grid-layout/grid-item-removal-auto-placement-update.html:
  • fast/css-grid-layout/grid-item-removal-track-breadth-update.html:
  • fast/css-grid-layout/grid-update-sizes-after-distributing-all.html:
  • fast/css-grid-layout/implicit-columns-auto-resolution.html:
  • fast/css-grid-layout/implicit-position-dynamic-change.html:
  • fast/css-grid-layout/mark-as-infinitely-growable.html:
  • fast/css-grid-layout/maximize-tracks-definite-indefinite-width.html:
  • fast/css-grid-layout/minmax-spanning-resolution-columns.html:
  • fast/css-grid-layout/named-grid-line-get-set.html:
  • fast/css-grid-layout/named-grid-lines-computed-style-implicit-tracks.html:
  • fast/css-grid-layout/named-grid-lines-with-named-grid-areas-resolution.html:
  • fast/css-grid-layout/percent-intrinsic-track-breadth.html:
  • fast/css-grid-layout/percent-track-breadths-regarding-container-size.html:
  • fast/css-grid-layout/resources/grid-definitions-parsing-utils.js:

(checkGridTemplatesSetJSValues):

  • fast/css-grid-layout/resources/grid-template-shorthand-parsing-utils.js:

(checkGridDefinitionsSetJSValues):
(testGridDefinitionsSetBadJSValues):

  • fast/css/getComputedStyle/computed-style-expected.txt:
  • fast/css/getComputedStyle/computed-style-without-renderer-expected.txt:
  • svg/css/getComputedStyle-basic-expected.txt:
Location:
trunk
Files:
57 edited

Legend:

Unmodified
Added
Removed

  • trunk/LayoutTests/ChangeLog

    r197497 r197503  
     12016-03-03  Javier Fernandez  <jfernandez@igalia.com>
     2
     3        [CSS Box Alignment] New CSS Value 'normal' for Content Alignment
     4        https://bugs.webkit.org/show_bug.cgi?id=154282
     5
     6        The Box Alignment specification defines a new value 'normal' to be used
     7        as default for the different layout models, which will define the
     8        specific behavior for each case. This patch adds a new CSS value in the
     9        parsing logic and adapts the Content Alignment properties to the new
     10        value.
     11
     12        Since the 'normal' vlaue, initial/default for both justify-content
     13        and align-content CSS properties, behaves now as 'stretch' instead
     14        of o'start' we have to rebaseline those tests affected by the new
     15        default value.
     16
     17        Reviewed by David Hyatt.
     18
     19        * css3/flexbox/css-properties-expected.txt:
     20        * css3/flexbox/css-properties.html:
     21        * css3/parse-align-content-expected.txt:
     22        * css3/parse-align-content.html:
     23        * css3/parse-justify-content-expected.txt:
     24        * css3/parse-justify-content.html:
     25        * css3/resources/alignment-parsing-utils.js:
     26        (checkBadValues):
     27        * fast/css-grid-layout/auto-content-resolution-columns.html:
     28        * fast/css-grid-layout/grid-auto-columns-rows-update.html:
     29        * fast/css-grid-layout/grid-auto-flow-resolution.html:
     30        * fast/css-grid-layout/grid-columns-rows-get-set-multiple.html:
     31        * fast/css-grid-layout/grid-columns-rows-get-set.html:
     32        * fast/css-grid-layout/grid-container-change-named-grid-lines-recompute-child.html:
     33        * fast/css-grid-layout/grid-content-sized-columns-resolution.html:
     34        * fast/css-grid-layout/grid-dynamic-updates-relayout.html:
     35        * fast/css-grid-layout/grid-element-min-max-width.html:
     36        * fast/css-grid-layout/grid-element-repeat-get-set.html:
     37        * fast/css-grid-layout/grid-initialize-span-one-items.html:
     38        * fast/css-grid-layout/grid-item-addition-auto-placement-update.html:
     39        * fast/css-grid-layout/grid-item-addition-track-breadth-update.html:
     40        * fast/css-grid-layout/grid-item-bad-named-area-auto-placement.html:
     41        * fast/css-grid-layout/grid-item-margin-auto-columns-rows-horizontal-ltr.html:
     42        * fast/css-grid-layout/grid-item-margin-auto-columns-rows-horizontal-rtl.html:
     43        * fast/css-grid-layout/grid-item-margin-auto-columns-rows-vertical-ltr.html:
     44        * fast/css-grid-layout/grid-item-margin-auto-columns-rows-vertical-rtl.html:
     45        * fast/css-grid-layout/grid-item-multiple-minmax-content-resolution.html:
     46        * fast/css-grid-layout/grid-item-named-grid-area-resolution.html:
     47        * fast/css-grid-layout/grid-item-negative-indexes.html:
     48        * fast/css-grid-layout/grid-item-order-in-content-sized-columns-resolution.html:
     49        * fast/css-grid-layout/grid-item-removal-auto-placement-update.html:
     50        * fast/css-grid-layout/grid-item-removal-track-breadth-update.html:
     51        * fast/css-grid-layout/grid-update-sizes-after-distributing-all.html:
     52        * fast/css-grid-layout/implicit-columns-auto-resolution.html:
     53        * fast/css-grid-layout/implicit-position-dynamic-change.html:
     54        * fast/css-grid-layout/mark-as-infinitely-growable.html:
     55        * fast/css-grid-layout/maximize-tracks-definite-indefinite-width.html:
     56        * fast/css-grid-layout/minmax-spanning-resolution-columns.html:
     57        * fast/css-grid-layout/named-grid-line-get-set.html:
     58        * fast/css-grid-layout/named-grid-lines-computed-style-implicit-tracks.html:
     59        * fast/css-grid-layout/named-grid-lines-with-named-grid-areas-resolution.html:
     60        * fast/css-grid-layout/percent-intrinsic-track-breadth.html:
     61        * fast/css-grid-layout/percent-track-breadths-regarding-container-size.html:
     62        * fast/css-grid-layout/resources/grid-definitions-parsing-utils.js:
     63        (checkGridTemplatesSetJSValues):
     64        * fast/css-grid-layout/resources/grid-template-shorthand-parsing-utils.js:
     65        (checkGridDefinitionsSetJSValues):
     66        (testGridDefinitionsSetBadJSValues):
     67        * fast/css/getComputedStyle/computed-style-expected.txt:
     68        * fast/css/getComputedStyle/computed-style-without-renderer-expected.txt:
     69        * svg/css/getComputedStyle-basic-expected.txt:
     70
    1712016-03-02  Chris Dumez  <cdumez@apple.com>
    272

  • trunk/LayoutTests/css3/flexbox/css-properties-expected.txt

    r183805 r197503  
    1717PASS flexitem.style.webkitOrder is ""
    1818PASS flexbox.style.webkitJustifyContent is ""
    19 PASS window.getComputedStyle(flexbox, null).webkitJustifyContent is "stretch"
     19PASS window.getComputedStyle(flexbox, null).webkitJustifyContent is "normal"
    2020PASS flexbox.style.webkitJustifyContent is ""
    2121PASS flexbox.style.webkitJustifyContent is "flex-start"
    … …  
    2828PASS window.getComputedStyle(flexbox, null).webkitJustifyContent is "space-between"
    2929PASS flexbox.style.webkitJustifyContent is ""
    30 PASS window.getComputedStyle(flexbox, null).webkitJustifyContent is "stretch"
     30PASS window.getComputedStyle(flexbox, null).webkitJustifyContent is "normal"
    3131PASS flexbox.style.webkitAlignSelf is ""
    3232PASS window.getComputedStyle(flexbox, null).webkitAlignSelf is "start"
    … …  
    200200PASS foundFlexFlow is false
    201201PASS flexbox.style.webkitAlignContent is ""
    202 PASS window.getComputedStyle(flexbox, null).webkitAlignContent is "stretch"
     202PASS window.getComputedStyle(flexbox, null).webkitAlignContent is "normal"
    203203PASS flexbox.style.webkitAlignContent is "flex-start"
    204204PASS window.getComputedStyle(flexbox, null).webkitAlignContent is "flex-start"
    … …  
    214214PASS window.getComputedStyle(flexbox, null).webkitAlignContent is "stretch"
    215215PASS flexbox.style.webkitAlignContent is ""
    216 PASS window.getComputedStyle(flexbox, null).webkitAlignContent is "stretch"
     216PASS window.getComputedStyle(flexbox, null).webkitAlignContent is "normal"
    217217PASS flexbox.style.webkitAlignContent is ""
    218 PASS window.getComputedStyle(flexbox, null).webkitAlignContent is "stretch"
     218PASS window.getComputedStyle(flexbox, null).webkitAlignContent is "normal"
    219219PASS successfullyParsed is true
    220220

  • trunk/LayoutTests/css3/flexbox/css-properties.html

    r183805 r197503  
    5555
    5656shouldBeEqualToString('flexbox.style.webkitJustifyContent', '');
    57 // The initial value is 'auto' which, will be resolve to 'stretch' for flexbox containes (behaving like 'flex-start' for the justify-content property).
    58 shouldBeEqualToString('window.getComputedStyle(flexbox, null).webkitJustifyContent', 'stretch');
     57// The initial value is 'normal'.
     58shouldBeEqualToString('window.getComputedStyle(flexbox, null).webkitJustifyContent', 'normal');
    5959
    6060flexbox.style.webkitJustifyContent = 'foo';
    … …  
    7979flexbox.style.webkitJustifyContent = '';
    8080shouldBeEqualToString('flexbox.style.webkitJustifyContent', '');
    81 shouldBeEqualToString('window.getComputedStyle(flexbox, null).webkitJustifyContent', 'stretch');
     81shouldBeEqualToString('window.getComputedStyle(flexbox, null).webkitJustifyContent', 'normal');
    8282
    8383shouldBeEqualToString('flexbox.style.webkitAlignSelf', '');
    … …  
    280280flexbox.style.display = '-webkit-flex';
    281281
    282 // The initial value is 'stretch'.
     282// The initial value is 'normal'.
    283283shouldBeEqualToString('flexbox.style.webkitAlignContent', '');
    284 shouldBeEqualToString('window.getComputedStyle(flexbox, null).webkitAlignContent', 'stretch');
     284shouldBeEqualToString('window.getComputedStyle(flexbox, null).webkitAlignContent', 'normal');
    285285
    286286flexbox.style.webkitAlignContent = 'flex-start';
    … …  
    310310flexbox.style.webkitAlignContent = '';
    311311shouldBeEqualToString('flexbox.style.webkitAlignContent', '');
    312 shouldBeEqualToString('window.getComputedStyle(flexbox, null).webkitAlignContent', 'stretch');
     312shouldBeEqualToString('window.getComputedStyle(flexbox, null).webkitAlignContent', 'normal');
    313313
    314314flexbox.style.webkitAlignContent = 'foo';
    315315shouldBeEqualToString('flexbox.style.webkitAlignContent', '');
    316 shouldBeEqualToString('window.getComputedStyle(flexbox, null).webkitAlignContent', 'stretch');
     316shouldBeEqualToString('window.getComputedStyle(flexbox, null).webkitAlignContent', 'normal');
    317317</script>
    318318<script src="../../resources/js-test-post.js"></script>

  • trunk/LayoutTests/css3/parse-align-content-expected.txt

    r194104 r197503  
    55
    66Test getting align-content set through CSS
    7 PASS getComputedStyle(alignContentAuto, '').getPropertyValue('align-content') is "start"
     7PASS getComputedStyle(alignContentAuto, '').getPropertyValue('align-content') is "normal"
    88PASS getComputedStyle(alignContentBaseline, '').getPropertyValue('align-content') is "baseline"
    99PASS getComputedStyle(alignContentLastBaseline, '').getPropertyValue('align-content') is "last-baseline"
    … …  
    3131PASS getComputedStyle(alignContentSpaceAroundEndUnsafe, '').getPropertyValue('align-content') is "space-around end unsafe"
    3232PASS getComputedStyle(alignContentSpaceEvenlyFlexStartSafe, '').getPropertyValue('align-content') is "space-evenly flex-start safe"
    33 PASS getComputedStyle(alignContentSpaceBetweenSafe, '').getPropertyValue('align-content') is "start"
    34 PASS getComputedStyle(alignContentSpaceBetweenStretch, '').getPropertyValue('align-content') is "start"
    35 PASS getComputedStyle(alignContentSafe, '').getPropertyValue('align-content') is "start"
    36 PASS getComputedStyle(alignContentRightSafeUnsafe, '').getPropertyValue('align-content') is "start"
    37 PASS getComputedStyle(alignContentCenterLeft, '').getPropertyValue('align-content') is "start"
     33PASS getComputedStyle(alignContentSpaceBetweenSafe, '').getPropertyValue('align-content') is "normal"
     34PASS getComputedStyle(alignContentSpaceBetweenStretch, '').getPropertyValue('align-content') is "normal"
     35PASS getComputedStyle(alignContentSafe, '').getPropertyValue('align-content') is "normal"
     36PASS getComputedStyle(alignContentRightSafeUnsafe, '').getPropertyValue('align-content') is "normal"
     37PASS getComputedStyle(alignContentCenterLeft, '').getPropertyValue('align-content') is "normal"
    3838
    3939Test initial value of align-content through JS
    40 PASS getComputedStyle(element, '').getPropertyValue('align-content') is "start"
     40PASS getComputedStyle(element, '').getPropertyValue('align-content') is "normal"
    4141
    4242Test getting and setting align-content through JS
    … …  
    5353PASS element.style.alignContent is "right unsafe"
    5454PASS window.getComputedStyle(element, '').getPropertyValue('align-content') is "right unsafe"
    55 PASS element.style.alignContent is "auto"
    56 PASS window.getComputedStyle(element, '').getPropertyValue('align-content') is "start"
    57 PASS element.style.alignContent is "auto"
    58 PASS window.getComputedStyle(element, '').getPropertyValue('align-content') is "stretch"
    59 PASS element.style.alignContent is "auto"
    60 PASS window.getComputedStyle(element, '').getPropertyValue('align-content') is "start"
     55PASS element.style.alignContent is "normal"
     56PASS window.getComputedStyle(element, '').getPropertyValue('align-content') is "normal"
     57PASS element.style.alignContent is "normal"
     58PASS window.getComputedStyle(element, '').getPropertyValue('align-content') is "normal"
     59PASS element.style.alignContent is "normal"
     60PASS window.getComputedStyle(element, '').getPropertyValue('align-content') is "normal"
    6161PASS element.style.alignContent is "flex-end"
    6262PASS window.getComputedStyle(element, '').getPropertyValue('align-content') is "flex-end"
    … …  
    6464Test bad combinations of align-content
    6565PASS element.style.alignContent is ""
    66 PASS window.getComputedStyle(element, '').getPropertyValue('align-content') is "start"
     66PASS window.getComputedStyle(element, '').getPropertyValue('align-content') is "normal"
    6767PASS element.style.alignContent is ""
    68 PASS window.getComputedStyle(element, '').getPropertyValue('align-content') is "start"
     68PASS window.getComputedStyle(element, '').getPropertyValue('align-content') is "normal"
    6969PASS element.style.alignContent is ""
    70 PASS window.getComputedStyle(element, '').getPropertyValue('align-content') is "start"
     70PASS window.getComputedStyle(element, '').getPropertyValue('align-content') is "normal"
    7171PASS element.style.alignContent is ""
    72 PASS window.getComputedStyle(element, '').getPropertyValue('align-content') is "start"
     72PASS window.getComputedStyle(element, '').getPropertyValue('align-content') is "normal"
    7373PASS element.style.alignContent is ""
    74 PASS window.getComputedStyle(element, '').getPropertyValue('align-content') is "start"
     74PASS window.getComputedStyle(element, '').getPropertyValue('align-content') is "normal"
    7575PASS element.style.alignContent is ""
    76 PASS window.getComputedStyle(element, '').getPropertyValue('align-content') is "start"
     76PASS window.getComputedStyle(element, '').getPropertyValue('align-content') is "normal"
    7777PASS element.style.alignContent is ""
    78 PASS window.getComputedStyle(element, '').getPropertyValue('align-content') is "start"
     78PASS window.getComputedStyle(element, '').getPropertyValue('align-content') is "normal"
    7979PASS element.style.alignContent is ""
    80 PASS window.getComputedStyle(element, '').getPropertyValue('align-content') is "start"
     80PASS window.getComputedStyle(element, '').getPropertyValue('align-content') is "normal"
    8181PASS element.style.alignContent is ""
    82 PASS window.getComputedStyle(element, '').getPropertyValue('align-content') is "start"
     82PASS window.getComputedStyle(element, '').getPropertyValue('align-content') is "normal"
    8383PASS element.style.alignContent is ""
    84 PASS window.getComputedStyle(element, '').getPropertyValue('align-content') is "start"
     84PASS window.getComputedStyle(element, '').getPropertyValue('align-content') is "normal"
    8585PASS element.style.alignContent is ""
    86 PASS window.getComputedStyle(element, '').getPropertyValue('align-content') is "start"
     86PASS window.getComputedStyle(element, '').getPropertyValue('align-content') is "normal"
    8787PASS element.style.alignContent is ""
    88 PASS window.getComputedStyle(element, '').getPropertyValue('align-content') is "start"
     88PASS window.getComputedStyle(element, '').getPropertyValue('align-content') is "normal"
    8989PASS element.style.alignContent is ""
    90 PASS window.getComputedStyle(element, '').getPropertyValue('align-content') is "start"
     90PASS window.getComputedStyle(element, '').getPropertyValue('align-content') is "normal"
    9191PASS element.style.alignContent is ""
    92 PASS window.getComputedStyle(element, '').getPropertyValue('align-content') is "start"
     92PASS window.getComputedStyle(element, '').getPropertyValue('align-content') is "normal"
    9393PASS element.style.alignContent is ""
    94 PASS window.getComputedStyle(element, '').getPropertyValue('align-content') is "start"
     94PASS window.getComputedStyle(element, '').getPropertyValue('align-content') is "normal"
    9595PASS element.style.alignContent is ""
    96 PASS window.getComputedStyle(element, '').getPropertyValue('align-content') is "start"
     96PASS window.getComputedStyle(element, '').getPropertyValue('align-content') is "normal"
    9797PASS element.style.alignContent is ""
    98 PASS window.getComputedStyle(element, '').getPropertyValue('align-content') is "start"
     98PASS window.getComputedStyle(element, '').getPropertyValue('align-content') is "normal"
    9999PASS element.style.alignContent is ""
    100 PASS window.getComputedStyle(element, '').getPropertyValue('align-content') is "start"
     100PASS window.getComputedStyle(element, '').getPropertyValue('align-content') is "normal"
    101101PASS element.style.alignContent is ""
    102 PASS window.getComputedStyle(element, '').getPropertyValue('align-content') is "start"
     102PASS window.getComputedStyle(element, '').getPropertyValue('align-content') is "normal"
    103103PASS element.style.alignContent is ""
    104 PASS window.getComputedStyle(element, '').getPropertyValue('align-content') is "start"
     104PASS window.getComputedStyle(element, '').getPropertyValue('align-content') is "normal"
    105105PASS element.style.alignContent is ""
    106 PASS window.getComputedStyle(element, '').getPropertyValue('align-content') is "start"
     106PASS window.getComputedStyle(element, '').getPropertyValue('align-content') is "normal"
     107PASS element.style.alignContent is ""
     108PASS window.getComputedStyle(element, '').getPropertyValue('align-content') is "normal"
    107109
    108110Test the value 'initial'
    … …  
    110112PASS window.getComputedStyle(element, '').getPropertyValue('align-content') is "stretch center"
    111113PASS element.style.alignContent is "initial"
    112 PASS window.getComputedStyle(element, '').getPropertyValue('align-content') is "start"
     114PASS window.getComputedStyle(element, '').getPropertyValue('align-content') is "normal"
    113115
    114116Test the value 'initial' for grid containers
    … …  
    116118PASS window.getComputedStyle(element, '').getPropertyValue('align-content') is "space-between left"
    117119PASS element.style.alignContent is "initial"
    118 PASS window.getComputedStyle(element, '').getPropertyValue('align-content') is "start"
     120PASS window.getComputedStyle(element, '').getPropertyValue('align-content') is "normal"
    119121
    120122Test the value 'initial' for flex containers
    … …  
    122124PASS window.getComputedStyle(element, '').getPropertyValue('align-content') is "right unsafe"
    123125PASS element.style.alignContent is "initial"
    124 PASS window.getComputedStyle(element, '').getPropertyValue('align-content') is "stretch"
     126PASS window.getComputedStyle(element, '').getPropertyValue('align-content') is "normal"
    125127
    126128Test the value 'inherit'

  • trunk/LayoutTests/css3/parse-align-content.html

    r194104 r197503  
    174174debug("Test getting align-content set through CSS");
    175175var alignContentAuto = document.getElementById("alignContentAuto");
    176 shouldBeEqualToString("getComputedStyle(alignContentAuto, '').getPropertyValue('align-content')", "start");
     176shouldBeEqualToString("getComputedStyle(alignContentAuto, '').getPropertyValue('align-content')", "normal");
    177177
    178178var alignContentBaseline = document.getElementById("alignContentBaseline");
    … …  
    252252
    253253var alignContentSpaceBetweenSafe = document.getElementById("alignContentSpaceBetweenSafe");
    254 shouldBeEqualToString("getComputedStyle(alignContentSpaceBetweenSafe, '').getPropertyValue('align-content')", "start");
     254shouldBeEqualToString("getComputedStyle(alignContentSpaceBetweenSafe, '').getPropertyValue('align-content')", "normal");
    255255
    256256var alignContentSpaceAroundUnsafe = document.getElementById("alignContentSpaceBetweenStretch");
    257 shouldBeEqualToString("getComputedStyle(alignContentSpaceBetweenStretch, '').getPropertyValue('align-content')", "start");
     257shouldBeEqualToString("getComputedStyle(alignContentSpaceBetweenStretch, '').getPropertyValue('align-content')", "normal");
    258258
    259259var alignContentSpaceAroundUnsafe = document.getElementById("alignContentSafe");
    260 shouldBeEqualToString("getComputedStyle(alignContentSafe, '').getPropertyValue('align-content')", "start");
     260shouldBeEqualToString("getComputedStyle(alignContentSafe, '').getPropertyValue('align-content')", "normal");
    261261
    262262var alignContentSpaceAroundUnsafe = document.getElementById("alignContentRightSafeUnsafe");
    263 shouldBeEqualToString("getComputedStyle(alignContentRightSafeUnsafe, '').getPropertyValue('align-content')", "start");
     263shouldBeEqualToString("getComputedStyle(alignContentRightSafeUnsafe, '').getPropertyValue('align-content')", "normal");
    264264
    265265var alignContentSpaceAroundUnsafe = document.getElementById("alignContentCenterLeft");
    266 shouldBeEqualToString("getComputedStyle(alignContentCenterLeft, '').getPropertyValue('align-content')", "start");
     266shouldBeEqualToString("getComputedStyle(alignContentCenterLeft, '').getPropertyValue('align-content')", "normal");
    267267
    268268debug("");
    … …  
    270270element = document.createElement("div");
    271271document.body.appendChild(element);
    272 shouldBeEqualToString("getComputedStyle(element, '').getPropertyValue('align-content')", "start");
     272shouldBeEqualToString("getComputedStyle(element, '').getPropertyValue('align-content')", "normal");
    273273
    274274debug("");
    … …  
    294294checkValues(element, "alignContent", "align-content",  "right unsafe", "right unsafe");
    295295
    296 element.style.alignContent = "auto";
    297 checkValues(element, "alignContent", "align-content",  "auto", "start");
     296element.style.alignContent = "normal";
     297checkValues(element, "alignContent", "align-content",  "normal", "normal");
    298298
    299299element.style.display = "-webkit-flex";
    300 element.style.alignContent = "auto";
    301 checkValues(element, "alignContent", "align-content",  "auto", "stretch");
     300element.style.alignContent = "normal";
     301checkValues(element, "alignContent", "align-content",  "normal", "normal");
    302302
    303303element.style.display = "-webkit-grid";
    304 element.style.alignContent = "auto";
    305 checkValues(element, "alignContent", "align-content",  "auto", "start");
     304element.style.alignContent = "normal";
     305checkValues(element, "alignContent", "align-content",  "normal", "normal");
    306306
    307307element.style.alignContent = "flex-end";
    … …  
    314314
    315315checkBadValues(element, "alignContent", "align-content",  "");
     316checkBadValues(element, "alignContent", "align-content",  "auto");
    316317checkBadValues(element, "alignContent", "align-content",  "unsafe auto");
    317318checkBadValues(element, "alignContent", "align-content",  "auto safe");
    … …  
    338339debug("Test the value 'initial'");
    339340element.style.display = "";
    340 checkInitialValues(element, "alignContent", "align-content", "stretch center", "start");
     341checkInitialValues(element, "alignContent", "align-content", "stretch center", "normal");
    341342
    342343debug("");
    343344debug("Test the value 'initial' for grid containers");
    344345element.style.display = "-webkit-grid";
    345 checkInitialValues(element, "alignContent", "align-content", "space-between left", "start");
     346checkInitialValues(element, "alignContent", "align-content", "space-between left", "normal");
    346347
    347348debug("");
    348349debug("Test the value 'initial' for flex containers");
    349350element.style.display = "-webkit-flex";
    350 checkInitialValues(element, "alignContent", "align-content", "right unsafe", "stretch");
     351checkInitialValues(element, "alignContent", "align-content", "right unsafe", "normal");
    351352
    352353debug("");

  • trunk/LayoutTests/css3/parse-justify-content-expected.txt

    r194104 r197503  
    55
    66Test getting justify-content set through CSS
    7 PASS getComputedStyle(justifyContentAuto, '').getPropertyValue('justify-content') is "start"
     7PASS getComputedStyle(justifyContentAuto, '').getPropertyValue('justify-content') is "normal"
    88PASS getComputedStyle(justifyContentBaseline, '').getPropertyValue('justify-content') is "baseline"
    99PASS getComputedStyle(justifyContentLastBaseline, '').getPropertyValue('justify-content') is "last-baseline"
    … …  
    3131PASS getComputedStyle(justifyContentSpaceAroundEndUnsafe, '').getPropertyValue('justify-content') is "space-around end unsafe"
    3232PASS getComputedStyle(justifyContentSpaceEvenlyFlexStartSafe, '').getPropertyValue('justify-content') is "space-evenly flex-start safe"
    33 PASS getComputedStyle(justifyContentSpaceBetweenSafe, '').getPropertyValue('justify-content') is "start"
    34 PASS getComputedStyle(justifyContentSpaceBetweenStretch, '').getPropertyValue('justify-content') is "start"
    35 PASS getComputedStyle(justifyContentSafe, '').getPropertyValue('justify-content') is "start"
    36 PASS getComputedStyle(justifyContentRightSafeUnsafe, '').getPropertyValue('justify-content') is "start"
    37 PASS getComputedStyle(justifyContentCenterLeft, '').getPropertyValue('justify-content') is "start"
     33PASS getComputedStyle(justifyContentSpaceBetweenSafe, '').getPropertyValue('justify-content') is "normal"
     34PASS getComputedStyle(justifyContentSpaceBetweenStretch, '').getPropertyValue('justify-content') is "normal"
     35PASS getComputedStyle(justifyContentSafe, '').getPropertyValue('justify-content') is "normal"
     36PASS getComputedStyle(justifyContentRightSafeUnsafe, '').getPropertyValue('justify-content') is "normal"
     37PASS getComputedStyle(justifyContentCenterLeft, '').getPropertyValue('justify-content') is "normal"
    3838
    3939Test initial value of justify-content through JS
    40 PASS getComputedStyle(element, '').getPropertyValue('justify-content') is "start"
     40PASS getComputedStyle(element, '').getPropertyValue('justify-content') is "normal"
    4141
    4242Test getting and setting justify-content through JS
    … …  
    5353PASS element.style.justifyContent is "right unsafe"
    5454PASS window.getComputedStyle(element, '').getPropertyValue('justify-content') is "right unsafe"
    55 PASS element.style.justifyContent is "auto"
    56 PASS window.getComputedStyle(element, '').getPropertyValue('justify-content') is "start"
    57 PASS element.style.justifyContent is "auto"
    58 PASS window.getComputedStyle(element, '').getPropertyValue('justify-content') is "stretch"
    59 PASS element.style.justifyContent is "auto"
    60 PASS window.getComputedStyle(element, '').getPropertyValue('justify-content') is "start"
     55PASS element.style.justifyContent is "normal"
     56PASS window.getComputedStyle(element, '').getPropertyValue('justify-content') is "normal"
     57PASS element.style.justifyContent is "normal"
     58PASS window.getComputedStyle(element, '').getPropertyValue('justify-content') is "normal"
     59PASS element.style.justifyContent is "normal"
     60PASS window.getComputedStyle(element, '').getPropertyValue('justify-content') is "normal"
    6161PASS element.style.justifyContent is "flex-end"
    6262PASS window.getComputedStyle(element, '').getPropertyValue('justify-content') is "flex-end"
    … …  
    6464Test bad combinations of justify-content
    6565PASS element.style.justifyContent is ""
    66 PASS window.getComputedStyle(element, '').getPropertyValue('justify-content') is "start"
     66PASS window.getComputedStyle(element, '').getPropertyValue('justify-content') is "normal"
    6767PASS element.style.justifyContent is ""
    68 PASS window.getComputedStyle(element, '').getPropertyValue('justify-content') is "start"
     68PASS window.getComputedStyle(element, '').getPropertyValue('justify-content') is "normal"
    6969PASS element.style.justifyContent is ""
    70 PASS window.getComputedStyle(element, '').getPropertyValue('justify-content') is "start"
     70PASS window.getComputedStyle(element, '').getPropertyValue('justify-content') is "normal"
    7171PASS element.style.justifyContent is ""
    72 PASS window.getComputedStyle(element, '').getPropertyValue('justify-content') is "start"
     72PASS window.getComputedStyle(element, '').getPropertyValue('justify-content') is "normal"
    7373PASS element.style.justifyContent is ""
    74 PASS window.getComputedStyle(element, '').getPropertyValue('justify-content') is "start"
     74PASS window.getComputedStyle(element, '').getPropertyValue('justify-content') is "normal"
    7575PASS element.style.justifyContent is ""
    76 PASS window.getComputedStyle(element, '').getPropertyValue('justify-content') is "start"
     76PASS window.getComputedStyle(element, '').getPropertyValue('justify-content') is "normal"
    7777PASS element.style.justifyContent is ""
    78 PASS window.getComputedStyle(element, '').getPropertyValue('justify-content') is "start"
     78PASS window.getComputedStyle(element, '').getPropertyValue('justify-content') is "normal"
    7979PASS element.style.justifyContent is ""
    80 PASS window.getComputedStyle(element, '').getPropertyValue('justify-content') is "start"
     80PASS window.getComputedStyle(element, '').getPropertyValue('justify-content') is "normal"
    8181PASS element.style.justifyContent is ""
    82 PASS window.getComputedStyle(element, '').getPropertyValue('justify-content') is "start"
     82PASS window.getComputedStyle(element, '').getPropertyValue('justify-content') is "normal"
    8383PASS element.style.justifyContent is ""
    84 PASS window.getComputedStyle(element, '').getPropertyValue('justify-content') is "start"
     84PASS window.getComputedStyle(element, '').getPropertyValue('justify-content') is "normal"
    8585PASS element.style.justifyContent is ""
    86 PASS window.getComputedStyle(element, '').getPropertyValue('justify-content') is "start"
     86PASS window.getComputedStyle(element, '').getPropertyValue('justify-content') is "normal"
    8787PASS element.style.justifyContent is ""
    88 PASS window.getComputedStyle(element, '').getPropertyValue('justify-content') is "start"
     88PASS window.getComputedStyle(element, '').getPropertyValue('justify-content') is "normal"
    8989PASS element.style.justifyContent is ""
    90 PASS window.getComputedStyle(element, '').getPropertyValue('justify-content') is "start"
     90PASS window.getComputedStyle(element, '').getPropertyValue('justify-content') is "normal"
    9191PASS element.style.justifyContent is ""
    92 PASS window.getComputedStyle(element, '').getPropertyValue('justify-content') is "start"
     92PASS window.getComputedStyle(element, '').getPropertyValue('justify-content') is "normal"
    9393PASS element.style.justifyContent is ""
    94 PASS window.getComputedStyle(element, '').getPropertyValue('justify-content') is "start"
     94PASS window.getComputedStyle(element, '').getPropertyValue('justify-content') is "normal"
    9595PASS element.style.justifyContent is ""
    96 PASS window.getComputedStyle(element, '').getPropertyValue('justify-content') is "start"
     96PASS window.getComputedStyle(element, '').getPropertyValue('justify-content') is "normal"
    9797PASS element.style.justifyContent is ""
    98 PASS window.getComputedStyle(element, '').getPropertyValue('justify-content') is "start"
     98PASS window.getComputedStyle(element, '').getPropertyValue('justify-content') is "normal"
    9999PASS element.style.justifyContent is ""
    100 PASS window.getComputedStyle(element, '').getPropertyValue('justify-content') is "start"
     100PASS window.getComputedStyle(element, '').getPropertyValue('justify-content') is "normal"
    101101PASS element.style.justifyContent is ""
    102 PASS window.getComputedStyle(element, '').getPropertyValue('justify-content') is "start"
     102PASS window.getComputedStyle(element, '').getPropertyValue('justify-content') is "normal"
    103103PASS element.style.justifyContent is ""
    104 PASS window.getComputedStyle(element, '').getPropertyValue('justify-content') is "start"
     104PASS window.getComputedStyle(element, '').getPropertyValue('justify-content') is "normal"
    105105PASS element.style.justifyContent is ""
    106 PASS window.getComputedStyle(element, '').getPropertyValue('justify-content') is "start"
     106PASS window.getComputedStyle(element, '').getPropertyValue('justify-content') is "normal"
     107PASS element.style.justifyContent is ""
     108PASS window.getComputedStyle(element, '').getPropertyValue('justify-content') is "normal"
    107109
    108110Test the value 'initial'
    … …  
    110112PASS window.getComputedStyle(element, '').getPropertyValue('justify-content') is "stretch center"
    111113PASS element.style.justifyContent is "initial"
    112 PASS window.getComputedStyle(element, '').getPropertyValue('justify-content') is "start"
     114PASS window.getComputedStyle(element, '').getPropertyValue('justify-content') is "normal"
    113115
    114116Test the value 'initial' for grid containers
    … …  
    116118PASS window.getComputedStyle(element, '').getPropertyValue('justify-content') is "space-between left"
    117119PASS element.style.justifyContent is "initial"
    118 PASS window.getComputedStyle(element, '').getPropertyValue('justify-content') is "start"
     120PASS window.getComputedStyle(element, '').getPropertyValue('justify-content') is "normal"
    119121
    120122Test the value 'initial' for flex containers
    … …  
    122124PASS window.getComputedStyle(element, '').getPropertyValue('justify-content') is "right unsafe"
    123125PASS element.style.justifyContent is "initial"
    124 PASS window.getComputedStyle(element, '').getPropertyValue('justify-content') is "stretch"
     126PASS window.getComputedStyle(element, '').getPropertyValue('justify-content') is "normal"
    125127
    126128Test the value 'inherit'

  • trunk/LayoutTests/css3/parse-justify-content.html

    r194104 r197503  
    170170debug("Test getting justify-content set through CSS");
    171171var justifyContentAuto = document.getElementById("justifyContentAuto");
    172 shouldBeEqualToString("getComputedStyle(justifyContentAuto, '').getPropertyValue('justify-content')", "start");
     172shouldBeEqualToString("getComputedStyle(justifyContentAuto, '').getPropertyValue('justify-content')", "normal");
    173173
    174174var justifyContentBaseline = document.getElementById("justifyContentBaseline");
    … …  
    248248
    249249var justifyContentSpaceBetweenSafe = document.getElementById("justifyContentSpaceBetweenSafe");
    250 shouldBeEqualToString("getComputedStyle(justifyContentSpaceBetweenSafe, '').getPropertyValue('justify-content')", "start");
     250shouldBeEqualToString("getComputedStyle(justifyContentSpaceBetweenSafe, '').getPropertyValue('justify-content')", "normal");
    251251
    252252var justifyContentSpaceAroundUnsafe = document.getElementById("justifyContentSpaceBetweenStretch");
    253 shouldBeEqualToString("getComputedStyle(justifyContentSpaceBetweenStretch, '').getPropertyValue('justify-content')", "start");
     253shouldBeEqualToString("getComputedStyle(justifyContentSpaceBetweenStretch, '').getPropertyValue('justify-content')", "normal");
    254254
    255255var justifyContentSpaceAroundUnsafe = document.getElementById("justifyContentSafe");
    256 shouldBeEqualToString("getComputedStyle(justifyContentSafe, '').getPropertyValue('justify-content')", "start");
     256shouldBeEqualToString("getComputedStyle(justifyContentSafe, '').getPropertyValue('justify-content')", "normal");
    257257
    258258var justifyContentSpaceAroundUnsafe = document.getElementById("justifyContentRightSafeUnsafe");
    259 shouldBeEqualToString("getComputedStyle(justifyContentRightSafeUnsafe, '').getPropertyValue('justify-content')", "start");
     259shouldBeEqualToString("getComputedStyle(justifyContentRightSafeUnsafe, '').getPropertyValue('justify-content')", "normal");
    260260
    261261var justifyContentSpaceAroundUnsafe = document.getElementById("justifyContentCenterLeft");
    262 shouldBeEqualToString("getComputedStyle(justifyContentCenterLeft, '').getPropertyValue('justify-content')", "start");
     262shouldBeEqualToString("getComputedStyle(justifyContentCenterLeft, '').getPropertyValue('justify-content')", "normal");
    263263
    264264debug("");
    … …  
    266266element = document.createElement("div");
    267267document.body.appendChild(element);
    268 shouldBeEqualToString("getComputedStyle(element, '').getPropertyValue('justify-content')", "start");
     268shouldBeEqualToString("getComputedStyle(element, '').getPropertyValue('justify-content')", "normal");
    269269
    270270debug("");
    … …  
    290290checkValues(element, "justifyContent", "justify-content",  "right unsafe", "right unsafe");
    291291
    292 element.style.justifyContent = "auto";
    293 checkValues(element, "justifyContent", "justify-content",  "auto", "start");
     292element.style.justifyContent = "normal";
     293checkValues(element, "justifyContent", "justify-content",  "normal", "normal");
    294294
    295295element.style.display = "-webkit-flex";
    296 element.style.justifyContent = "auto";
    297 checkValues(element, "justifyContent", "justify-content",  "auto", "stretch");
     296element.style.justifyContent = "normal";
     297checkValues(element, "justifyContent", "justify-content",  "normal", "normal");
    298298
    299299element.style.display = "-webkit-grid";
    300 element.style.justifyContent = "auto";
    301 checkValues(element, "justifyContent", "justify-content",  "auto", "start");
     300element.style.justifyContent = "normal";
     301checkValues(element, "justifyContent", "justify-content",  "normal", "normal");
    302302
    303303element.style.justifyContent = "flex-end";
    … …  
    310310
    311311checkBadValues(element, "justifyContent", "justify-content",  "");
     312checkBadValues(element, "justifyContent", "justify-content",  "auto");
    312313checkBadValues(element, "justifyContent", "justify-content",  "unsafe auto");
    313314checkBadValues(element, "justifyContent", "justify-content",  "auto safe");
    … …  
    334335debug("Test the value 'initial'");
    335336element.style.display = "";
    336 checkInitialValues(element, "justifyContent", "justify-content", "stretch center", "start");
     337checkInitialValues(element, "justifyContent", "justify-content", "stretch center", "normal");
    337338
    338339debug("");
    339340debug("Test the value 'initial' for grid containers");
    340341element.style.display = "-webkit-grid";
    341 checkInitialValues(element, "justifyContent", "justify-content", "space-between left", "start");
     342checkInitialValues(element, "justifyContent", "justify-content", "space-between left", "normal");
    342343
    343344debug("");
    344345debug("Test the value 'initial' for flex containers");
    345346element.style.display = "-webkit-flex";
    346 checkInitialValues(element, "justifyContent", "justify-content", "right unsafe", "stretch");
     347checkInitialValues(element, "justifyContent", "justify-content", "right unsafe", "normal");
    347348
    348349debug("");

  • trunk/LayoutTests/css3/resources/alignment-parsing-utils.js

    r182147 r197503  
    99function checkBadValues(element, property, propertyID, value)
    1010{
     11    var elementID = element.id || "element";
     12    var initialValue = eval("window.getComputedStyle(" + elementID + " , '').getPropertyValue('" + propertyID + "')");
    1113    element.style[property] = value;
    12     checkValues(element, property, propertyID, "", "start");
     14    checkValues(element, property, propertyID, "", initialValue);
    1315}
    1416

  • trunk/LayoutTests/fast/css-grid-layout/auto-content-resolution-columns.html

    r168416 r197503  
    22<html>
    33<link href="resources/grid.css" rel="stylesheet">
     4<link href="resources/grid-alignment.css" rel="stylesheet">
    45<style>
    56.gridAutoContent {
    … …  
    2122
    2223<div class="constrainedContainer">
    23     <div class="grid gridAutoContent">
     24    <div class="grid gridAutoContent justifyContentStart">
    2425        <div class="firstRowFirstColumn" data-expected-width="30" data-expected-height="50">XXX XXX XXX</div>
    2526    </div>
    … …  
    2829<!-- Allow the extra logical space distribution to occur. -->
    2930<div style="width: 40px; height: 10px">
    30     <div class="grid gridAutoContent">
     31    <div class="grid gridAutoContent justifyContentStart">
    3132        <div class="firstRowFirstColumn" data-expected-width="40" data-expected-height="50">XX XX XX XX XX XX</div>
    3233    </div>
    … …  
    3435
    3536<div style="width: 100px; height: 10px;">
    36     <div class="grid gridAutoContent">
     37    <div class="grid gridAutoContent justifyContentStart">
    3738        <div class="firstRowFirstColumn" data-expected-width="50" data-expected-height="50">XXXXX</div>
    3839    </div>

  • trunk/LayoutTests/fast/css-grid-layout/grid-auto-columns-rows-update.html

    r178642 r197503  
    33<head>
    44<link href="resources/grid.css" rel="stylesheet">
     5<link href="resources/grid-alignment.css" rel="stylesheet">
    56<style>
    67.grid {
    … …  
    7475
    7576<div class="unconstrainedContainer" style="position: relative">
    76     <div class="grid" id="unconstrainedGrid">
     77    <div class="grid justifyContentStart" id="unconstrainedGrid">
    7778        <div class="sizedToGridArea secondRowSecondColumn" data-offset-x="10" data-offset-y="20" data-expected-width="50" data-expected-height="30">XXXXX XXXXXX</div>
    7879    </div>

  • trunk/LayoutTests/fast/css-grid-layout/grid-auto-flow-resolution.html

    r180263 r197503  
    22<html>
    33<link href="resources/grid.css" rel="stylesheet">
     4<link href="resources/grid-alignment.css" rel="stylesheet">
    45<style>
    56.smallGrid {
    … …  
    4647
    4748<div class="unconstrainedContainer">
    48     <div class="grid smallGrid">
     49    <div class="grid smallGrid justifyContentStart">
    4950        <div class="sizedToGridArea autoRowAutoColumn" data-offset-x="0" data-offset-y="0" data-expected-width="50" data-expected-height="50">XXXXX XXXXX XXXXX</div>
    5051        <div class="sizedToGridArea secondRowAutoColumn" data-offset-x="0" data-offset-y="50" data-expected-width="50" data-expected-height="100">XXXXX XXXXX XXXXX</div>
    … …  
    5758
    5859<div class="unconstrainedContainer">
    59     <div class="grid bigGrid gridAutoFlowColumnSparse">
     60    <div class="grid bigGrid gridAutoFlowColumnSparse justifyContentStart">
    6061        <div class="sizedToGridArea secondRowSecondColumn" data-offset-x="50" data-offset-y="50" data-expected-width="100" data-expected-height="100">XXXXX XXXXX XXXXX</div>
    6162        <div class="sizedToGridArea firstRowSecondColumn" data-offset-x="50" data-offset-y="0" data-expected-width="100" data-expected-height="50">XXXXX XXXXX XXXXX</div>
    … …  
    6768
    6869<div class="unconstrainedContainer">
    69     <div class="grid bigGrid gridAutoFlowRowSparse">
     70    <div class="grid bigGrid gridAutoFlowRowSparse justifyContentStart">
    7071        <div class="sizedToGridArea firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="50" data-expected-height="50">XXXXX XXXXX XXXXX</div>
    7172        <div class="sizedToGridArea firstRowSecondColumn" data-offset-x="50" data-offset-y="0" data-expected-width="100" data-expected-height="50">XXXXX XXXXX XXXXX</div>
    … …  
    7778
    7879<div class="unconstrainedContainer">
    79     <div class="grid bigGrid gridAutoFlowColumnSparse">
     80    <div class="grid bigGrid gridAutoFlowColumnSparse justifyContentStart">
    8081        <div class="sizedToGridArea autoRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="50" data-expected-height="50">XXXXX XXXXX XXXXX</div>
    8182        <div class="sizedToGridArea autoRowSecondColumn" data-offset-x="50" data-offset-y="0" data-expected-width="100" data-expected-height="50">XXXXX XXXXX XXXXX</div>
    … …  
    8788
    8889<div class="unconstrainedContainer">
    89     <div class="grid bigGrid gridAutoFlowColumnDense">
     90    <div class="grid bigGrid gridAutoFlowColumnDense justifyContentStart">
    9091        <div class="sizedToGridArea autoRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="50" data-expected-height="50">XXXXX XXXXX XXXXX</div>
    9192        <div class="sizedToGridArea autoRowSecondColumn" data-offset-x="50" data-offset-y="0" data-expected-width="100" data-expected-height="50">XXXXX XXXXX XXXXX</div>
    … …  
    9798
    9899<div class="unconstrainedContainer">
    99     <div class="grid bigGrid gridAutoFlowRowSparse">
     100    <div class="grid bigGrid gridAutoFlowRowSparse justifyContentStart">
    100101        <div class="sizedToGridArea autoRowFirstColumn" data-offset-x="0" data-offset-y="150" data-expected-width="50" data-expected-height="150">XXXXX XXXXX XXXXX</div>
    101102        <div class="sizedToGridArea firstRowSecondColumn" data-offset-x="50" data-offset-y="0" data-expected-width="100" data-expected-height="50">XXXXX XXXXX XXXXX</div>
    … …  
    107108
    108109<div class="unconstrainedContainer">
    109     <div class="grid bigGrid gridAutoFlowRowDense">
     110    <div class="grid bigGrid gridAutoFlowRowDense justifyContentStart">
    110111        <div class="sizedToGridArea autoRowFirstColumn" data-offset-x="0" data-offset-y="150" data-expected-width="50" data-expected-height="150">XXXXX XXXXX XXXXX</div>
    111112        <div class="sizedToGridArea firstRowSecondColumn" data-offset-x="50" data-offset-y="0" data-expected-width="100" data-expected-height="50">XXXXX XXXXX XXXXX</div>
    … …  
    118119<!-- Using some 2 positions non-spanning fixed grid-{row|column} -->
    119120<div class="unconstrainedContainer">
    120     <div class="grid bigGrid gridAutoFlowColumnSparse">
     121    <div class="grid bigGrid gridAutoFlowColumnSparse justifyContentStart">
    121122        <div class="sizedToGridArea autoLastRowAutoLastColumn" data-offset-x="300" data-offset-y="300" data-expected-width="200" data-expected-height="200">XXXXX XXXXX XXXXX</div>
    122123        <div class="sizedToGridArea firstAutoRowSecondAutoColumn" data-offset-x="50" data-offset-y="0" data-expected-width="100" data-expected-height="50">XXXXX XXXXX XXXXX</div>
    … …  
    128129
    129130<div class="unconstrainedContainer">
    130     <div class="grid bigGrid gridAutoFlowRowSparse">
     131    <div class="grid bigGrid gridAutoFlowRowSparse justifyContentStart">
    131132        <div class="sizedToGridArea autoLastRowAutoLastColumn" data-offset-x="300" data-offset-y="300" data-expected-width="200" data-expected-height="200">XXXXX XXXXX XXXXX</div>
    132133        <div class="sizedToGridArea firstAutoRowSecondAutoColumn" data-offset-x="50" data-offset-y="0" data-expected-width="100" data-expected-height="50">XXXXX XXXXX XXXXX</div>
    … …  
    138139
    139140<div class="unconstrainedContainer">
    140     <div class="grid bigGrid gridAutoFlowColumnSparse">
     141    <div class="grid bigGrid gridAutoFlowColumnSparse justifyContentStart">
    141142        <div class="sizedToGridArea overflowingRowFirstColumn" data-offset-x="0" data-offset-y="500" data-expected-width="50" data-expected-height="30">XXXXX XXXXX XXXXX</div>
    142143        <div class="sizedToGridArea secondRowOverflowingColumn" data-offset-x="500" data-offset-y="50" data-expected-width="170" data-expected-height="100">XXXXX XXXXX XXXXX</div>
    … …  
    145146
    146147<div class="unconstrainedContainer">
    147     <div class="grid bigGrid gridAutoFlowRowSparse">
     148    <div class="grid bigGrid gridAutoFlowRowSparse justifyContentStart">
    148149        <div class="sizedToGridArea overflowingRowFirstColumn" data-offset-x="0" data-offset-y="500" data-expected-width="50" data-expected-height="30">XXXXX XXXXX XXXXX</div>
    149150        <div class="sizedToGridArea secondRowOverflowingColumn" data-offset-x="500" data-offset-y="50" data-expected-width="170" data-expected-height="100">XXXXX XXXXX XXXXX</div>
    … …  
    152153
    153154<div class="unconstrainedContainer">
    154     <div class="grid bigGrid gridAutoFlowColumnSparse">
     155    <div class="grid bigGrid gridAutoFlowColumnSparse justifyContentStart">
    155156        <div class="sizedToGridArea negativeOverflowingRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="50" data-expected-height="50">XXXXX XXXXX XXXXX</div>
    156157        <div class="sizedToGridArea secondRowNegativeOverflowingColumn" data-offset-x="0" data-offset-y="50" data-expected-width="50" data-expected-height="100">XXXXX XXXXX XXXXX</div>
    … …  
    159160
    160161<div class="unconstrainedContainer">
    161     <div class="grid bigGrid gridAutoFlowRowSparse">
     162    <div class="grid bigGrid gridAutoFlowRowSparse justifyContentStart">
    162163        <div class="sizedToGridArea negativeOverflowingRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="50" data-expected-height="50">XXXXX XXXXX XXXXX</div>
    163164        <div class="sizedToGridArea secondRowNegativeOverflowingColumn" data-offset-x="0" data-offset-y="50" data-expected-width="50" data-expected-height="100">XXXXX XXXXX XXXXX</div>

  • trunk/LayoutTests/fast/css-grid-layout/grid-columns-rows-get-set-multiple.html

    r196819 r197503  
    44<link href="../css-intrinsic-dimensions/resources/width-keyword-classes.css" rel="stylesheet">
    55<link href="resources/grid.css" rel="stylesheet">
     6<link href="resources/grid-alignment.css" rel="stylesheet">
    67<style>
    78.definite {
    … …  
    114115    <div class="gridItem"></div>
    115116</div>
    116 <div class="grid definite gridWithAuto" id="gridWithAutoElement">
     117<div class="grid definite gridWithAuto contentStart" id="gridWithAutoElement">
    117118  <div class="gridItem2"></div>
    118119</div>
    … …  
    120121<div class="grid definite gridWithNoneAndAuto" id="gridWithNoneAndAuto"></div>
    121122<div class="grid definite gridWithNoneAndFixed" id="gridWithNoneAndFixed"></div>
    122 <div class="grid definite gridWithThreeItems" id="gridWithThreeItems"></div>
     123<div class="grid definite gridWithThreeItems contentStart" id="gridWithThreeItems"></div>
    123124<div class="grid definite gridWithPercentAndViewportPercent" id="gridWithPercentAndViewportPercent"></div>
    124125<div class="grid definite gridWithFitContentAndFitAvailable" id="gridWithFitContentAndFitAvailable"></div>
    … …  
    136137<div class="grid definite gridWithCalcAndMinMax" id="gridWithCalcAndMinMax"></div>
    137138<div class="grid definite gridWithCalcInsideMinMax" id="gridWithCalcInsideMinMax"></div>
    138 <div class="grid definite gridWithAutoInsideMinMax" id="gridWithAutoInsideMinMax"></div>
     139<div class="grid definite gridWithAutoInsideMinMax contentStart" id="gridWithAutoInsideMinMax"></div>
    139140<script src="resources/grid-definitions-parsing-utils.js"></script>
    140141<script src="resources/grid-columns-rows-get-set-multiple.js"></script>

  • trunk/LayoutTests/fast/css-grid-layout/grid-columns-rows-get-set.html

    r196819 r197503  
    44<link href="../css-intrinsic-dimensions/resources/width-keyword-classes.css" rel="stylesheet">
    55<link href="resources/grid.css" rel="stylesheet">
     6<link href="resources/grid-alignment.css" rel="stylesheet">
    67<style>
    78.definite {
    … …  
    102103    <div class="gridItem"></div>
    103104</div>
    104 <div class="grid definite gridWithAuto" id="gridWithAutoElement"></div>
    105 <div class="grid definite gridWithAuto" id="gridWithAutoWithoutSizeElement"></div>
    106 <div class="grid definite gridWithAuto fontSpec" id="gridWithAutoWithChildrenElement">
     105<div class="grid definite gridWithAuto contentStart" id="gridWithAutoElement"></div>
     106<div class="grid definite gridWithAuto contentStart" id="gridWithAutoWithoutSizeElement"></div>
     107<div class="grid definite gridWithAuto contentStart fontSpec" id="gridWithAutoWithChildrenElement">
    107108  <div class="gridItem"></div>
    108109</div>
    … …  
    127128<div class="grid definite gridWithCalcInsideMinMax" id="gridWithCalcInsideMinMaxElement"></div>
    128129<div class="grid definite gridWithCalcComplexInsideMinMax" id="gridWithCalcComplexInsideMinMaxElement"></div>
    129 <div class="grid definite gridWithAutoInsideMinMax" id="gridWithAutoInsideMinMaxElement">
     130<div class="grid definite gridWithAutoInsideMinMax contentStart" id="gridWithAutoInsideMinMaxElement">
    130131    <div class="gridItem"></div>
    131132</div>

  • trunk/LayoutTests/fast/css-grid-layout/grid-container-change-named-grid-lines-recompute-child.html

    r185147 r197503  
    33<head>
    44<link href="resources/grid.css" rel="stylesheet">
     5<link href="resources/grid-alignment.css" rel="stylesheet">
    56<script src="../../resources/check-layout.js"></script>
    67<style type="text/css">
    … …  
    6768
    6869<div style="position: relative">
    69     <div class="grid">
     70    <div class="grid justifyContentStart">
    7071        <div class="sizedToGridArea" id="firstGridItem"></div>
    7172        <div class="sizedToGridArea" id="secondGridItem"></div>

  • trunk/LayoutTests/fast/css-grid-layout/grid-content-sized-columns-resolution.html

    r182472 r197503  
    22<head>
    33<link href="resources/grid.css" rel="stylesheet"/>
     4<link href="resources/grid-alignment.css" rel="stylesheet"/>
    45<style>
    56.grid {
    … …  
    5960</head>
    6061<body>
    61 <div class="grid gridMinContentFixedAndAuto" id="gridMinContentFixedAndAuto">
    62     <div class="firstRowBothColumn">XXXX XXXX</div>
    63 </div>
    64 
    65 <div class="grid gridAutoAndAuto" id="gridAutoAndAuto">
     62<div class="grid gridMinContentFixedAndAuto justifyContentStart" id="gridMinContentFixedAndAuto">
     63    <div class="firstRowBothColumn">XXXX XXXX</div>
     64</div>
     65
     66<div class="grid gridAutoAndAuto justifyContentStart" id="gridAutoAndAuto">
    6667    <div class="firstRowBothColumn">XXXX XXXX</div>
    6768</div>
    … …  
    9394</div>
    9495
    95 <div class="grid gridAutoMinContent" id="gridAutoMinContent">
    96     <div class="firstRowBothColumn">XXXX XXXX</div>
    97 </div>
    98 
    99 <div class="grid gridAutoMaxContent" id="gridAutoMaxContent">
     96<div class="grid gridAutoMinContent justifyContentStart" id="gridAutoMinContent">
     97    <div class="firstRowBothColumn">XXXX XXXX</div>
     98</div>
     99
     100<div class="grid gridAutoMaxContent justifyContentStart" id="gridAutoMaxContent">
    100101    <div class="firstRowBothColumn">XXXX XXXX</div>
    101102</div>
    … …  
    205206
    206207<!-- Check that items are processed by ascending span instead of going track by track allowing extra space distribution. -->
    207 <div class="grid gridMinContentFixedAndAuto" id="gridMinContentFixedAndAutoUnsorted">
     208<div class="grid gridMinContentFixedAndAuto justifyContentStart" id="gridMinContentFixedAndAutoUnsorted">
    208209    <div class="firstRowBothColumn">XXXX XXXX</div>
    209210    <div class="firstRowSecondColumn">XXXX XXXX</div>
    210211</div>
    211212
    212 <div class="grid gridAutoAndAuto" id="gridAutoAndAutoUnsorted">
     213<div class="grid gridAutoAndAuto justifyContentStart" id="gridAutoAndAutoUnsorted">
    213214    <div class="firstRowBothColumn">XXXX XXXX</div>
    214215    <div class="firstRowSecondColumn">XXX</div>
    … …  
    243244</div>
    244245
    245 <div class="grid gridMaxContentFixedAndAuto" id="gridMaxContentFixedAndAutoUnsorted">
     246<div class="grid gridMaxContentFixedAndAuto justifyContentStart" id="gridMaxContentFixedAndAutoUnsorted">
    246247    <div class="firstRowBothColumn">XX XX</div>
    247248    <div class="firstRowSecondColumn">XXXX</div>
    … …  
    249250</div>
    250251
    251 <div class="grid gridAutoMinContent" id="gridAutoMinContentUnsorted">
     252<div class="grid gridAutoMinContent justifyContentStart" id="gridAutoMinContentUnsorted">
    252253    <div class="firstRowBothColumn">XX XX XX XX</div>
    253254    <div class="firstRowSecondColumn">XXXXXX XXXXXX</div>
    254255</div>
    255256
    256 <div class="grid gridAutoMaxContent" id="gridAutoMaxContentUnsorted">
     257<div class="grid gridAutoMaxContent justifyContentStart" id="gridAutoMaxContentUnsorted">
    257258    <div class="firstRowBothColumn">XXXX XXXX</div>
    258259    <div class="firstRowBothColumn">XXX XXX</div>
    … …  
    275276<!-- The next four force the grid to grow only a particular subset of tracks above the limits -->
    276277<div class="constrainedContainer">
    277     <div class="grid gridMinContentFixedAndAuto" id="gridMinContentFixedAndAutoAboveLimits">
     278    <div class="grid gridMinContentFixedAndAuto justifyContentStart" id="gridMinContentFixedAndAutoAboveLimits">
    278279        <div class="firstRowBothColumn">XXXX XXXX</div>
    279280        <div class="firstRowBothColumn">XXXXXXXXXXX</div>
    … …  
    308309</div>
    309310
    310 <div class="grid gridAutoAndMinContentFixedAndMinContent" id="gridAutoAndMinContentFixedAndMinContent">
     311<div class="grid gridAutoAndMinContentFixedAndMinContent justifyContentStart" id="gridAutoAndMinContentFixedAndMinContent">
    311312    <div class="firstRowFirstColumn">XX</div>
    312313    <div class="firstRowBothColumn">XXXXXXXXXXXXXXX</div>

  • trunk/LayoutTests/fast/css-grid-layout/grid-dynamic-updates-relayout.html

    r168416 r197503  
    22<html>
    33<link href="resources/grid.css" rel="stylesheet">
     4<link href="resources/grid-alignment.css" rel="stylesheet">
    45<script src="../../resources/check-layout.js"></script>
    56<script>
    … …  
    6061
    6162<div class="unconstrainedContainer">
    62     <div class="grid" id="unconstrainedGrid">
     63    <div class="grid justifyContentStart" id="unconstrainedGrid">
    6364        <div class="sizedToGridArea">XXXXX XXXXXX</div>
    6465    </div>

  • trunk/LayoutTests/fast/css-grid-layout/grid-element-min-max-width.html

    r168416 r197503  
    22<html>
    33<link href="resources/grid.css" rel="stylesheet">
     4<link href="resources/grid-alignment.css" rel="stylesheet">
    45<link href="../css-intrinsic-dimensions/resources/width-keyword-classes.css" rel=stylesheet>
    56<style>
    … …  
    3031<div class="constrainedContainer">
    3132    <div class="grid minWidthGrid" data-expected-height="40" data-expected-width="100"></div>
    32     <div class="grid minWidthAutoGrid" data-expected-height="10" data-expected-width="100">
     33    <div class="grid minWidthAutoGrid justifyContentStart justfyContentStart" data-expected-height="10" data-expected-width="100">
    3334        <div class="sizedToGridArea firstRowFirstColumn" data-expected-height="10" data-expected-width="70">XXX XXX</div>
    3435    </div>
    … …  
    5960<div class="unconstrainedContainer">
    6061    <div class="grid minWidthGrid" data-expected-height="40" data-expected-width="1000"></div>
    61     <div class="grid minWidthAutoGrid" data-expected-height="10" data-expected-width="1000">
     62    <div class="grid minWidthAutoGrid justifyContentStart" data-expected-height="10" data-expected-width="1000">
    6263        <div class="sizedToGridArea firstRowFirstColumn" data-expected-height="10" data-expected-width="70">XXX XXX</div>
    6364    </div>

  • trunk/LayoutTests/fast/css-grid-layout/grid-element-repeat-get-set.html

    r196819 r197503  
    44<link href="../css-intrinsic-dimensions/resources/width-keyword-classes.css" rel="stylesheet">
    55<link href="resources/grid.css" rel="stylesheet">
     6<link href="resources/grid-alignment.css" rel="stylesheet">
    67<style>
    78.definite {
    … …  
    7475<div class="grid definite singleSingleTrackRepeat" id="singleSingleTrackRepeatWithSize"></div>
    7576<div class="grid min-content singleSingleTrackRepeat" id="singleSingleTrackRepeatWithoutSize"></div>
    76 <div class="grid definite twoSingleTrackRepeat" id="twoSingleTrackRepeat"></div>
    77 <div class="grid definite twoSingleTrackRepeat" id="twoSingleTrackRepeatWithChildren">
     77<div class="grid definite twoSingleTrackRepeat alignContentStart" id="twoSingleTrackRepeat"></div>
     78<div class="grid definite twoSingleTrackRepeat alignContentStart" id="twoSingleTrackRepeatWithChildren">
    7879    <div class="gridItem"></div>
    7980    <div class="gridItem2"></div>
    8081</div>
    81 <div class="grid definite twoDoubleTrackRepeat" id="twoDoubleTrackRepeat">
     82<div class="grid definite twoDoubleTrackRepeat contentStart" id="twoDoubleTrackRepeat">
    8283    <div class="gridItem"></div>
    8384    <div class="gridItem2"></div>
    8485</div>
    85 <div class="grid definite twoDoubleTrackWithNamedGridLineRepeat" id="twoDoubleTrackWithNamedGridLineRepeat">
     86<div class="grid definite twoDoubleTrackWithNamedGridLineRepeat contentStart" id="twoDoubleTrackWithNamedGridLineRepeat">
    8687    <div class="gridItem"></div>
    8788    <div class="gridItem2"></div>
    8889</div>
    89 <div class="grid definite twoDoubleTrackWithTrailingNamedGridLineRepeat" id="twoDoubleTrackWithTrailingNamedGridLineRepeat"></div>
     90<div class="grid definite twoDoubleTrackWithTrailingNamedGridLineRepeat justifyContentStart" id="twoDoubleTrackWithTrailingNamedGridLineRepeat"></div>
    9091<div class="grid definite trailingNamedGridLineRepeat" id="trailingNamedGridLineRepeat"></div>
    9192<div class="grid definite leadingNamedGridLineRepeat" id="leadingNamedGridLineRepeat"></div>
    92 <div class="grid definite mixRepeatAfterNonRepeat" id="mixRepeatAfterNonRepeat">
     93<div class="grid definite mixRepeatAfterNonRepeat alignContentStart" id="mixRepeatAfterNonRepeat">
    9394    <div class="gridItem"></div>
    9495</div>
    95 <div class="grid definite mixNonRepeatAfterRepeat" id="mixNonRepeatAfterRepeat"></div>
     96<div class="grid definite mixNonRepeatAfterRepeat alignContentStart" id="mixNonRepeatAfterRepeat"></div>
    9697
    9798<script src="resources/grid-definitions-parsing-utils.js"></script>

  • trunk/LayoutTests/fast/css-grid-layout/grid-initialize-span-one-items.html

    r180143 r197503  
    22<head>
    33<link href="resources/grid.css" rel="stylesheet"/>
     4<link href="resources/grid-alignment.css" rel="stylesheet"/>
    45<style>
    56 .grid {
    … …  
    2223</head>
    2324<body>
    24 <div class="grid gridAutoAndAuto" id="gridAutoAndAuto">
     25<div class="grid gridAutoAndAuto justifyContentStart" id="gridAutoAndAuto">
    2526    <div class="firstRowFirstColumn">X</div>
    2627    <div class="firstRowBothColumn">XXX XX XXX</div>
    2728</div>
    2829
    29 <div class="grid gridAutoAndAuto" id="gridAutoAndAutoReversed">
     30<div class="grid gridAutoAndAuto justifyContentStart" id="gridAutoAndAutoReversed">
    3031    <div class="firstRowSecondColumn">X</div>
    3132    <div class="firstRowBothColumn">XXX XX XXX</div>
    … …  
    4849</div>
    4950
    50 <div class="grid gridMaxContentAndAuto" id="gridMaxContentAndAuto">
     51<div class="grid gridMaxContentAndAuto justifyContentStart" id="gridMaxContentAndAuto">
    5152    <div class="firstRowFirstColumn">X</div>
    5253    <div class="firstRowBothColumn">XXX XX XXX</div>
    5354</div>
    5455
    55 <div class="grid gridMaxContentAndAuto" id="gridMaxContentAndAutoReversed">
     56<div class="grid gridMaxContentAndAuto justifyContentStart" id="gridMaxContentAndAutoReversed">
    5657    <div class="firstRowSecondColumn">X</div>
    5758    <div class="firstRowBothColumn">XXX XX XXX</div>
    5859</div>
    5960
    60 <div class="grid gridMinContentAndAuto" id="gridMinContentAndAuto">
     61<div class="grid gridMinContentAndAuto justifyContentStart" id="gridMinContentAndAuto">
    6162    <div class="firstRowFirstColumn">X</div>
    6263    <div class="firstRowBothColumn">XXX XX XXX</div>
    6364</div>
    6465
    65 <div class="grid gridMinContentAndAuto" id="gridMinContentAndAutoReversed">
     66<div class="grid gridMinContentAndAuto justifyContentStart" id="gridMinContentAndAutoReversed">
    6667    <div class="firstRowSecondColumn">X</div>
    6768    <div class="firstRowBothColumn">XXX XX XXX</div>

  • trunk/LayoutTests/fast/css-grid-layout/grid-item-addition-auto-placement-update.html

    r171293 r197503  
    22<html>
    33<link href="resources/grid.css" rel="stylesheet">
     4<link href="resources/grid-alignment.css" rel="stylesheet">
    45<style>
    56.grid {
    … …  
    5859
    5960<div class="unconstrainedContainer">
    60     <div class="grid gridAutoFlowColumnSparse" id="gridAutoFlowColumnSparse">
     61    <div class="grid gridAutoFlowColumnSparse contentStart" id="gridAutoFlowColumnSparse">
    6162        <div class="sizedToGridArea autoRowAutoColumn" id="autoFlowColumnElement" data-expected-width="50" data-expected-height="50">XXXXX XXXXX XXXXX</div>
    6263    </div>
    … …  
    7071
    7172<div class="unconstrainedContainer">
    72     <div class="grid gridAutoFlowColumnSparse" id="gridAutoFlowColumnWithAuto">
     73    <div class="grid gridAutoFlowColumnSparse contentStart" id="gridAutoFlowColumnWithAuto">
    7374        <div class="sizedToGridArea autoRowAutoColumn" id="autoFlowColumnElementWithAuto" data-expected-width="50" data-expected-height="50">XXXXX XXXXX XXXXX</div>
    7475    </div>

  • trunk/LayoutTests/fast/css-grid-layout/grid-item-addition-track-breadth-update.html

    r168416 r197503  
    22<html>
    33<link href="resources/grid.css" rel="stylesheet">
     4<link href="resources/grid-alignment.css" rel="stylesheet">
    45<style>
    56.gridFixedContent {
    … …  
    2728    gridItem.setAttribute("data-expected-height", size.height);
    2829    var gridElement = document.getElementById(gridElementID);
     30    gridElement.classList.add("contentStart");
    2931    gridElement.appendChild(gridItem);
    3032    checkLayout("#" + gridElementID);

  • trunk/LayoutTests/fast/css-grid-layout/grid-item-bad-named-area-auto-placement.html

    r168416 r197503  
    22<html>
    33<link href="resources/grid.css" rel="stylesheet"/>
     4<link href="resources/grid-alignment.css" rel="stylesheet"/>
    45<style>
    56.grid {
    … …  
    4243
    4344<div style="position: relative">
    44     <div class="grid">
     45    <div class="grid contentStart">
    4546        <div class="sizedToGridArea firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="30" data-expected-height="10"></div>
    4647        <div class="sizedToGridArea bothNamedGridLineColumn" data-offset-x="30" data-offset-y="0" data-expected-width="40" data-expected-height="10"></div>

  • trunk/LayoutTests/fast/css-grid-layout/grid-item-margin-auto-columns-rows-horizontal-ltr.html

    r177631 r197503  
    22<html>
    33<link href="resources/grid.css" rel="stylesheet">
     4<link href="resources/grid-alignment.css" rel="stylesheet">
    45<style>
    56.grid {
    … …  
    3334
    3435<div class="testContainer">
    35     <div class="grid">
     36    <div class="grid contentStart">
    3637        <div class="gridItem marginTop firstRowFirstColumn"></div>
    3738        <div class="gridItem firstRowSecondColumn"></div>
    … …  
    4243
    4344<div class="testContainer">
    44     <div class="grid">
     45    <div class="grid contentStart">
    4546        <div class="gridItem marginTop firstRowFirstColumn"></div>
    4647        <div class="gridItem marginBottom firstRowSecondColumn"></div>
    … …  
    5152
    5253<div class="testContainer">
    53     <div class="grid horizontalBT">
     54    <div class="grid contentStart horizontalBT">
    5455        <div class="gridItem marginTop firstRowFirstColumn"></div>
    5556        <div class="gridItem firstRowSecondColumn"></div>
    … …  
    6061
    6162<div class="testContainer">
    62     <div class="grid horizontalBT">
     63    <div class="grid contentStart horizontalBT">
    6364        <div class="gridItem marginTop firstRowFirstColumn"></div>
    6465        <div class="gridItem marginBottom firstRowSecondColumn"></div>

  • trunk/LayoutTests/fast/css-grid-layout/grid-item-margin-auto-columns-rows-horizontal-rtl.html

    r177631 r197503  
    22<html>
    33<link href="resources/grid.css" rel="stylesheet">
     4<link href="resources/grid-alignment.css" rel="stylesheet">
    45<style>
    56.grid {
    … …  
    3334<div>This test checks that the grid's rows and columns 'auto' sizes are updated accordingly to its grid-item's before and start margins.</div>
    3435<div class="testContainer">
    35     <div class="grid directionRTL">
     36    <div class="grid contentStart directionRTL">
    3637        <div class="gridItem marginTop firstRowFirstColumn"></div>
    3738        <div class="gridItem firstRowSecondColumn"></div>
    … …  
    4243
    4344<div class="testContainer">
    44     <div class="grid directionRTL">
     45    <div class="grid contentStart directionRTL">
    4546        <div class="gridItem marginTop firstRowFirstColumn"></div>
    4647        <div class="gridItem marginBottom firstRowSecondColumn"></div>
    … …  
    5152
    5253<div class="testContainer">
    53     <div class="grid horizontalBT directionRTL">
     54    <div class="grid contentStart horizontalBT directionRTL">
    5455        <div class="gridItem marginTop firstRowFirstColumn"></div>
    5556        <div class="gridItem firstRowSecondColumn"></div>
    … …  
    6061
    6162<div class="testContainer">
    62     <div class="grid horizontalBT directionRTL">
     63    <div class="grid contentStart horizontalBT directionRTL">
    6364        <div class="gridItem marginTop firstRowFirstColumn"></div>
    6465        <div class="gridItem marginBottom firstRowSecondColumn"></div>

  • trunk/LayoutTests/fast/css-grid-layout/grid-item-margin-auto-columns-rows-vertical-ltr.html

    r177631 r197503  
    22<html>
    33<link href="resources/grid.css" rel="stylesheet">
     4<link href="resources/grid-alignment.css" rel="stylesheet">
    45<style>
    56.grid {
    … …  
    3435
    3536<div class="testContainer">
    36     <div class="grid verticalRL">
     37    <div class="grid contentStart verticalRL">
    3738        <div class="gridItem marginTop firstRowFirstColumn"></div>
    3839        <div class="gridItem firstRowSecondColumn"></div>
    … …  
    4344
    4445<div class="testContainer">
    45     <div class="grid verticalRL">
     46    <div class="grid contentStart verticalRL">
    4647        <div class="gridItem marginTop firstRowFirstColumn"></div>
    4748        <div class="gridItem firstRowSecondColumn"></div>
    … …  
    5253
    5354<div class="testContainer">
    54     <div class="grid verticalLR">
     55    <div class="grid contentStart verticalLR">
    5556        <div class="gridItem marginTop firstRowFirstColumn"></div>
    5657        <div class="gridItem firstRowSecondColumn"></div>
    … …  
    6162
    6263<div class="testContainer">
    63     <div class="grid verticalLR">
     64    <div class="grid contentStart verticalLR">
    6465        <div class="gridItem marginTop firstRowFirstColumn"></div>
    6566        <div class="gridItem firstRowSecondColumn"></div>

  • trunk/LayoutTests/fast/css-grid-layout/grid-item-margin-auto-columns-rows-vertical-rtl.html

    r177631 r197503  
    22<html>
    33<link href="resources/grid.css" rel="stylesheet">
     4<link href="resources/grid-alignment.css" rel="stylesheet">
    45<style>
    56.grid {
    … …  
    3435
    3536<div class="testContainer">
    36     <div class="grid verticalRL directionRTL">
     37    <div class="grid contentStart verticalRL directionRTL">
    3738        <div class="gridItem marginTop firstRowFirstColumn"></div>
    3839        <div class="gridItem firstRowSecondColumn"></div>
    … …  
    4344
    4445<div class="testContainer">
    45     <div class="grid verticalRL directionRTL">
     46    <div class="grid contentStart verticalRL directionRTL">
    4647        <div class="gridItem marginTop firstRowFirstColumn"></div>
    4748        <div class="gridItem firstRowSecondColumn"></div>
    … …  
    5253
    5354<div class="testContainer">
    54     <div class="grid verticalLR directionRTL">
     55    <div class="grid contentStart verticalLR directionRTL">
    5556        <div class="gridItem marginTop firstRowFirstColumn"></div>
    5657        <div class="gridItem firstRowSecondColumn"></div>
    … …  
    6162
    6263<div class="testContainer">
    63     <div class="grid verticalLR directionRTL">
     64    <div class="grid contentStart verticalLR directionRTL">
    6465        <div class="gridItem marginTop firstRowFirstColumn"></div>
    6566        <div class="gridItem firstRowSecondColumn"></div>

  • trunk/LayoutTests/fast/css-grid-layout/grid-item-multiple-minmax-content-resolution.html

    r168416 r197503  
    22<html>
    33<link href="resources/grid.css" rel="stylesheet">
     4<link href="resources/grid-alignment.css" rel="stylesheet">
    45<style>
    56.gridMinMaxAutoWithColumnMinMaxAuto {
    … …  
    1415
    1516<div class="unconstrainedContainer" style="position: relative;">
    16 <div class="grid gridMinMaxAutoWithColumnMinMaxAuto">
     17<div class="grid gridMinMaxAutoWithColumnMinMaxAuto justifyContentStart">
    1718    <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="180" data-expected-height="10">XXXXX XXXXX</div>
    1819    <div class="sizedToGridArea firstRowSecondColumn" data-expected-width="170" data-expected-height="10">XXXXX XXXXX XXXXX</div>

  • trunk/LayoutTests/fast/css-grid-layout/grid-item-named-grid-area-resolution.html

    r185147 r197503  
    33<head>
    44<link href="resources/grid.css" rel="stylesheet"/>
     5<link href="resources/grid-alignment.css" rel="stylesheet">
    56<style>
    67.grid {
    … …  
    7475
    7576<div style="position: relative">
    76     <div class="grid gridWithRepeat">
     77    <div class="grid gridWithRepeat justifyContentStart">
    7778        <!-- fifth and sixth are invalid named grid areas. -->
    7879        <div class="sizedToGridArea gridItemSixthArea" data-offset-x="0" data-offset-y="150" data-expected-width="40" data-expected-height="150"></div>

  • trunk/LayoutTests/fast/css-grid-layout/grid-item-negative-indexes.html

    r168416 r197503  
    11<!DOCTYPE html>
    22<link href="resources/grid.css" rel="stylesheet">
     3<link href="resources/grid-alignment.css" rel="stylesheet">
    34<style>
    45.negativeStartBeforePositionIndexes {
    … …  
    2021
    2122<div class="unconstrainedContainer">
    22     <div class="grid">
     23    <div class="grid justifyContentStart">
    2324        <div class="sizedToGridArea negativeStartBeforePositionIndexes" data-expected-width="120" data-expected-height="10">XXXXX XXXXXX</div>
    2425    </div>
    … …  
    2627
    2728<div class="unconstrainedContainer">
    28     <div class="grid">
     29    <div class="grid justifyContentStart">
    2930        <div class="sizedToGridArea negativeEndAfterPositionIndexes" data-expected-width="120" data-expected-height="10">XXXXX XXXXXX</div>
    3031    </div>
    … …  
    3233
    3334<div class="unconstrainedContainer">
    34     <div class="grid">
     35    <div class="grid justifyContentStart">
    3536        <div class="sizedToGridArea negativePositionIndexes" data-expected-width="120" data-expected-height="10">XXXXX XXXXXX</div>
    3637    </div>

  • trunk/LayoutTests/fast/css-grid-layout/grid-item-order-in-content-sized-columns-resolution.html

    r180562 r197503  
    33<head>
    44<link href="resources/grid.css" rel="stylesheet"/>
     5<link href="resources/grid-alignment.css" rel="stylesheet"/>
    56<style>
    67.grid {
    … …  
    5354
    5455<div style="position: relative">
    55     <div id="gridFixedMinContentAndAuto" class="grid gridFixedMinContentAndAuto">
     56    <div id="gridFixedMinContentAndAuto" class="grid contentStart gridFixedMinContentAndAuto">
    5657        <div class="firstRowFirstColumn">XXXXX</div>
    5758        <div class="spanTwo secondRowFirstColumn">XXX XXX</div>
    … …  
    6061
    6162<div style="position: relative">
    62     <div id="gridFixedMaxContentAndAuto" class="grid gridFixedMaxContentAndAuto">
     63    <div id="gridFixedMaxContentAndAuto" class="grid contentStart gridFixedMaxContentAndAuto">
    6364        <div class="firstRowFirstColumn">XXXXX</div>
    6465        <div class="spanTwo secondRowFirstColumn">XXX XXX</div>
    … …  
    6768
    6869<div style="position: relative">
    69     <div id="gridMaxContentAndAuto" class="grid gridMaxContentAndAuto">
     70    <div id="gridMaxContentAndAuto" class="grid contentStart gridMaxContentAndAuto">
    7071        <div class="firstRowFirstColumn">XXXXX</div>
    7172        <div class="spanTwo secondRowFirstColumn">XXX XXX</div>
    … …  
    7475
    7576<div style="position: relative">
    76     <div id="gridAutoAndMaxContent" class="grid gridAutoAndMaxContent">
     77    <div id="gridAutoAndMaxContent" class="grid contentStart gridAutoAndMaxContent">
    7778        <div class="firstRowFirstColumn">XXXXX</div>
    7879        <div class="spanTwo secondRowFirstColumn">XXX XXX</div>
    … …  
    8182
    8283<div style="position: relative">
    83     <div id="gridMinContentAndAuto" class="grid gridMinContentAndAuto">
     84    <div id="gridMinContentAndAuto" class="grid contentStart gridMinContentAndAuto">
    8485        <div class="firstRowFirstColumn">XXXXX</div>
    8586        <div class="spanTwo secondRowFirstColumn">XXX XXX</div>
    … …  
    8889
    8990<div style="position: relative">
    90     <div id="gridAutoAndMinContent" class="grid gridAutoAndMinContent">
     91    <div id="gridAutoAndMinContent" class="grid contentStart gridAutoAndMinContent">
    9192        <div class="firstRowFirstColumn">XXXXX</div>
    9293        <div class="spanTwo secondRowFirstColumn">XXX XXX</div>

  • trunk/LayoutTests/fast/css-grid-layout/grid-item-removal-auto-placement-update.html

    r171293 r197503  
    22<html>
    33<link href="resources/grid.css" rel="stylesheet">
     4<link href="resources/grid-alignment.css" rel="stylesheet">
    45<style>
    56.grid {
    … …  
    5758
    5859<div class="unconstrainedContainer">
    59     <div class="grid gridAutoFlowColumnSparse" id="gridAutoFlowColumnSparse">
     60    <div class="grid gridAutoFlowColumnSparse justifyContentStart" id="gridAutoFlowColumnSparse">
    6061        <div class="sizedToGridArea secondRowSecondColumn">XXXXX XXXXX XXXXX</div>
    6162        <div class="sizedToGridArea firstRowSecondColumn">XXXXX XXXXX XXXXX</div>
    … …  
    7778
    7879<div class="unconstrainedContainer">
    79     <div class="grid gridAutoFlowColumnDense" id="gridAutoFlowColumnWithAutoItems">
     80    <div class="grid gridAutoFlowColumnDense justifyContentStart" id="gridAutoFlowColumnWithAutoItems">
    8081        <div class="sizedToGridArea autoRowFirstColumn">XXXXX XXXXX XXXXX</div>
    8182        <div class="sizedToGridArea autoRowSecondColumn">XXXXX XXXXX XXXXX</div>

  • trunk/LayoutTests/fast/css-grid-layout/grid-item-removal-track-breadth-update.html

    r178642 r197503  
    11<!DOCTYPE html>
    2 <html>
     2 <html>
    33<link href="resources/grid.css" rel="stylesheet">
     4<link href="resources/grid-alignment.css" rel="stylesheet">
    45<style>
    56.gridAutoContent {
    … …  
    160161<!-- The container is big enough to allow all the extra space distribution we want. -->
    161162<div class="unconstrainedContainer">
    162     <div class="grid gridAutoContent" id="unconstrainedAutoGrid">
     163    <div class="grid gridAutoContent justifyContentStart" id="unconstrainedAutoGrid">
    163164        <div class="firstRowFirstColumn">XXX XXX XXX XXX XXX XXX XXX XXX XXX XXX</div>
    164165        <div class="firstRowFirstColumn">XXXXX XXXXX XXXXX XXXXX XXXXX XXXXX</div>

  • trunk/LayoutTests/fast/css-grid-layout/grid-update-sizes-after-distributing-all.html

    r182472 r197503  
    22<head>
    33<link href="resources/grid.css" rel="stylesheet"/>
     4<link href="resources/grid-alignment.css" rel="stylesheet"/>
    45<style>
    56 .grid { font: 10px/1 Ahem; }
    … …  
    6364</div>
    6465
    65 <div class="grid gridMaxContentAndFixedAndAuto" id="gridMaxContentAndFixedAndAuto">
     66<div class="grid gridMaxContentAndFixedAndAuto justifyContentStart" id="gridMaxContentAndFixedAndAuto">
    6667    <div class="columns1To3">XXXX XXXX</div>
    6768    <div class="columns1To3">XXXXX XXX XXXX</div>
    … …  
    9091</div>
    9192
    92 <div class="grid gridRepeatTwoAutoAndMaxContent" id="gridRepeatTwoAutoAndMaxContentTwoOverlapping">
     93<div class="grid gridRepeatTwoAutoAndMaxContent justifyContentStart" id="gridRepeatTwoAutoAndMaxContentTwoOverlapping">
    9394    <div class="columns1And2">XXXX XXXX</div>
    9495    <div class="columns3And4">XX XX</div>
    … …  
    9798</div>
    9899
    99 <div class="grid gridRepeatTwoAutoAndMaxContent" id="gridRepeatTwoAutoAndMaxContentThreeOverlapping">
     100<div class="grid gridRepeatTwoAutoAndMaxContent justifyContentStart" id="gridRepeatTwoAutoAndMaxContentThreeOverlapping">
    100101    <div class="columns2And3">XXXXX XXX XXXX</div>
    101102    <div class="columns3And4">XXX XX XXX</div>
    … …  
    103104</div>
    104105
    105 <div class="grid gridRepeatTwoAutoAndMaxContent" id="gridRepeatTwoAutoAndMaxContentTwoAndFourOverlapping">
     106<div class="grid gridRepeatTwoAutoAndMaxContent justifyContentStart" id="gridRepeatTwoAutoAndMaxContentTwoAndFourOverlapping">
    106107    <div class="columns1To4">XXXX XXXX</div>
    107108    <div class="columns3And4">XX XX</div>

  • trunk/LayoutTests/fast/css-grid-layout/implicit-columns-auto-resolution.html

    r168416 r197503  
    22<html>
    33<link href="resources/grid.css" rel="stylesheet">
     4<link href="resources/grid-alignment.css" rel="stylesheet">
    45<style>
    56.gridAutoContent {
    … …  
    3435
    3536<div style="width: 100px; height: 10px;">
    36     <div class="grid gridAutoContent">
     37    <div class="grid gridAutoContent justifyContentStart">
    3738        <div class="firstRowFirstColumn" data-expected-width="50" data-expected-height="50">XXXXX</div>
    3839    </div>

  • trunk/LayoutTests/fast/css-grid-layout/implicit-position-dynamic-change.html

    r168416 r197503  
    22<html>
    33<link href="resources/grid.css" rel="stylesheet">
     4<link href="resources/grid-alignment.css" rel="stylesheet">
    45<style>
    56.gridFixedContent {
    … …  
    116117<!-- Allow the extra logical space distribution to occur. -->
    117118<div style="width: 1000px; height: 1000px">
    118     <div class="grid gridFixedContent" id="unconstrainedGrid"><div class="sizedToGridArea">XXXXXX XXXXXX</div></div>
     119    <div class="grid gridFixedContent justifyContentStart" id="unconstrainedGrid"><div class="sizedToGridArea">XXXXXX XXXXXX</div></div>
    119120</div>
    120121

  • trunk/LayoutTests/fast/css-grid-layout/mark-as-infinitely-growable.html

    r182704 r197503  
    22<head>
    33<link href="resources/grid.css" rel="stylesheet"/>
     4<link href="resources/grid-alignment.css" rel="stylesheet"/>
    45<style>
    56.grid {
    … …  
    1920<script src="resources/grid-definitions-parsing-utils.js"></script>
    2021
    21 <div class="grid gridAutoAndAuto" id="gridAutoAndAuto">
     22<div class="grid gridAutoAndAuto justifyContentStart" id="gridAutoAndAuto">
    2223    <div class="firstRowFirstColumn">X X</div>
    2324    <div class="firstRowBothColumn">XXXXXX XXX</div>

  • trunk/LayoutTests/fast/css-grid-layout/maximize-tracks-definite-indefinite-width.html

    r192154 r197503  
    22
    33<link href="resources/grid.css" rel="stylesheet">
     4<link href="resources/grid-alignment.css" rel="stylesheet">
    45<link href="../css-intrinsic-dimensions/resources/width-keyword-classes.css" rel="stylesheet">
    56
    … …  
    7475<h2>Check the behavior of grids under min-content contstraints.</h2>
    7576<div class="min-content min-width-50">
    76     <div class="grid" data-expected-width="50" data-expected-height="10">
     77    <div class="grid justifyContentStart" data-expected-width="50" data-expected-height="10">
    7778        <div data-expected-width="40" data-expected-height="10">XX X</div>
    7879    </div>
    … …  
    8990
    9091<div style="width: 200px;">
    91     <div class="grid min-content min-width-fill-available" data-expected-width="200" data-expected-height="10">
     92    <div class="grid justifyContentStart min-content min-width-fill-available" data-expected-width="200" data-expected-height="10">
    9293        <div data-expected-width="40" data-expected-height="10">XX X</div>
    9394    </div>
    … …  
    110111</div>
    111112
    112 <div class="grid min-content min-width-50" data-expected-width="50" data-expected-height="10">
     113<div class="grid justifyContentStart min-content min-width-50" data-expected-width="50" data-expected-height="10">
    113114    <div data-expected-width="40" data-expected-height="10">XX X</div>
    114115</div>
    … …  
    117118<h2>Check the behavior of grids with definite available space.</h2>
    118119<div style="width: 100px;">
    119     <div class="grid" data-expected-width="100" data-expected-height="10">
     120    <div class="grid justifyContentStart" data-expected-width="100" data-expected-height="10">
    120121        <div data-expected-width="40" data-expected-height="10">XX X</div>
    121122    </div>
    … …  
    134135</div>
    135136
    136 <div class="grid" style="width: 90px;" data-expected-width="90" data-expected-height="10">
    137     <div data-expected-width="40" data-expected-height="10">XX X</div>
    138 </div>
    139 
    140 <div class="grid min-width-50" style="width: 10px;" data-expected-width="50" data-expected-height="10">
     137<div class="grid justifyContentStart" style="width: 90px;" data-expected-width="90" data-expected-height="10">
     138    <div data-expected-width="40" data-expected-height="10">XX X</div>
     139</div>
     140
     141<div class="grid justifyContentStart min-width-50" style="width: 10px;" data-expected-width="50" data-expected-height="10">
    141142    <div data-expected-width="40" data-expected-height="10">XX X</div>
    142143</div>
    143144
    144145<div class="min-width-50" style="width: 20px;">
    145     <div class="grid" data-expected-width="50" data-expected-height="10">
     146    <div class="grid justifyContentStart" data-expected-width="50" data-expected-height="10">
    146147        <div data-expected-width="40" data-expected-height="10">XX X</div>
    147148    </div>
    … …  
    152153        <div data-expected-width="37" data-expected-height="20">XX X</div>
    153154    </div>
    154     <div class="grid min-width-50" style="width: 37%;" data-expected-width="50" data-expected-height="10">
     155    <div class="grid justifyContentStart min-width-50" style="width: 37%;" data-expected-width="50" data-expected-height="10">
    155156        <div data-expected-width="40" data-expected-height="10">XX X</div>
    156157    </div>
    … …  
    181182
    182183<div class="fit-content min-width-50">
    183     <div class="grid" data-expected-width="50" data-expected-height="10">
    184         <div data-expected-width="40" data-expected-height="10">XX X</div>
    185     </div>
    186     <div class="grid min-width-35" data-expected-width="50" data-expected-height="10">
     184    <div class="grid justifyContentStart" data-expected-width="50" data-expected-height="10">
     185        <div data-expected-width="40" data-expected-height="10">XX X</div>
     186    </div>
     187    <div class="grid justifyContentStart min-width-35" data-expected-width="50" data-expected-height="10">
    187188        <div data-expected-width="40" data-expected-height="10">XX X</div>
    188189    </div>
    … …  
    193194        <div data-expected-width="40" data-expected-height="10">XX X</div>
    194195    </div>
    195     <div class="grid fill-available" data-expected-width="50" data-expected-height="10">
     196    <div class="grid justifyContentStart fill-available" data-expected-width="50" data-expected-height="10">
    196197        <div data-expected-width="40" data-expected-height="10">XX X</div>
    197198    </div>

  • trunk/LayoutTests/fast/css-grid-layout/minmax-spanning-resolution-columns.html

    r168416 r197503  
    22<html>
    33<link href="resources/grid.css" rel="stylesheet">
     4<link href="resources/grid-alignment.css" rel="stylesheet">
    45<style>
    56.gridAutoAutoContent {
    … …  
    4748
    4849<div style="width: 100px; height: 10px;">
    49     <div class="grid gridAutoAutoContent">
     50    <div class="grid gridAutoAutoContent justifyContentStart">
    5051        <div class="sizedToGridArea firstRowBothColumn" data-expected-width="50" data-expected-height="50">XXXXX</div>
    5152        <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="25" data-expected-height="50"></div>
    … …  
    8283
    8384<div style="width: 100px; height: 10px;">
    84     <div class="grid gridFixedAutoContent">
     85    <div class="grid gridFixedAutoContent justifyContentStart">
    8586        <div class="sizedToGridArea firstRowBothColumn" data-expected-width="50" data-expected-height="50">XXXXX</div>
    8687        <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="10" data-expected-height="50"></div>
    … …  
    9091
    9192<div style="width: 100px; height: 100px">
    92     <div class="grid gridFixedAutoContent">
     93    <div class="grid gridFixedAutoContent justifyContentStart">
    9394        <div class="sizedToGridArea bothRowBothColumn" data-expected-width="50" data-expected-height="150">XXXXX</div>
    9495        <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="10" data-expected-height="50"></div>

  • trunk/LayoutTests/fast/css-grid-layout/named-grid-line-get-set.html

    r196819 r197503  
    44<link href="../css-intrinsic-dimensions/resources/width-keyword-classes.css" rel="stylesheet">
    55<link href="resources/grid.css" rel="stylesheet">
     6<link href="resources/grid-alignment.css" rel="stylesheet">
    67<style>
    78.definite {
    … …  
    7879    <div class="gridItem"></div>
    7980</div>
    80 <div class="grid definite gridWithAuto" id="gridWithAutoElement"></div>
    81 <div class="grid definite gridWithAuto" id="gridWithAutoWithChildrenElement">
     81<div class="grid definite gridWithAuto contentStart" id="gridWithAutoElement"></div>
     82<div class="grid definite gridWithAuto contentStart" id="gridWithAutoWithChildrenElement">
    8283    <div class="gridItem"></div>
    8384</div>

  • trunk/LayoutTests/fast/css-grid-layout/named-grid-lines-computed-style-implicit-tracks.html

    r185147 r197503  
    11<!DOCTYPE HTML>
    22<link href="resources/grid.css" rel="stylesheet">
     3<link href="resources/grid-alignment.css" rel="stylesheet">
    34<style>
    45.grid {
    … …  
    1819<script src="../../resources/js-test.js"></script>
    1920
    20 <div class="grid singleNamedGridLines" id="gridOneColumnSingle">
     21<div class="grid singleNamedGridLines justifyContentStart" id="gridOneColumnSingle">
    2122    <div>XXXX</div>
    2223    <div>XXX</div>
    … …  
    2526</div>
    2627
    27 <div class="grid singleNamedGridLines" id="gridTwoColumnsSingle">
     28<div class="grid singleNamedGridLines justifyContentStart" id="gridTwoColumnsSingle">
    2829    <div class="firstRowAutoColumn">XXXX</div>
    2930    <div class="firstRowAutoColumn">XXX</div>
    … …  
    3233</div>
    3334
    34 <div class="grid singleNamedGridLines" id="gridThreeColumnsSingle">
     35<div class="grid singleNamedGridLines justifyContentStart" id="gridThreeColumnsSingle">
    3536    <div class="firstRowAutoColumn">XXXX</div>
    3637    <div class="firstRowAutoColumn">XXX</div>
    … …  
    3940</div>
    4041
    41 <div class="grid singleNamedGridLines" id="gridFourColumnsSingle">
     42<div class="grid singleNamedGridLines justifyContentStart" id="gridFourColumnsSingle">
    4243    <div class="firstRowAutoColumn">XXXX</div>
    4344    <div class="firstRowAutoColumn">XXX</div>
    … …  
    4647</div>
    4748
    48 <div class="grid multipleNamedGridLines" id="gridOneColumnMultiple">
     49<div class="grid multipleNamedGridLines justifyContentStart" id="gridOneColumnMultiple">
    4950    <div>XXXX</div>
    5051    <div>XXX</div>
    … …  
    5354</div>
    5455
    55 <div class="grid multipleNamedGridLines" id="gridTwoColumnsMultiple">
     56<div class="grid multipleNamedGridLines justifyContentStart" id="gridTwoColumnsMultiple">
    5657    <div class="firstRowAutoColumn">XXXX</div>
    5758    <div class="firstRowAutoColumn">XXX</div>
    … …  
    6061</div>
    6162
    62 <div class="grid multipleNamedGridLines" id="gridThreeColumnsMultiple">
     63<div class="grid multipleNamedGridLines justifyContentStart" id="gridThreeColumnsMultiple">
    6364    <div class="firstRowAutoColumn">XXXX</div>
    6465    <div class="firstRowAutoColumn">XXX</div>
    … …  
    6768</div>
    6869
    69 <div class="grid multipleNamedGridLines" id="gridFourColumnsMultiple">
     70<div class="grid multipleNamedGridLines justifyContentStart" id="gridFourColumnsMultiple">
    7071    <div class="firstRowAutoColumn">XXXX</div>
    7172    <div class="firstRowAutoColumn">XXX</div>

  • trunk/LayoutTests/fast/css-grid-layout/named-grid-lines-with-named-grid-areas-resolution.html

    r185147 r197503  
    33<head>
    44<link href="resources/grid.css" rel="stylesheet">
     5<link href="resources/grid-alignment.css" rel="stylesheet">
    56<style type="text/css">
    67
    … …  
    8990<!-- Check that without named gridAreas there are no implicit grid-line names defined -->
    9091<div style="position: relative">
    91   <div class="grid gridUniqueNames">
     92  <div class="grid gridUniqueNames justifyContentStart">
    9293    <div class="sizedToGridArea" style="-webkit-grid-column: c-start;" data-offset-x="0" data-offset-y="0" data-expected-width="50" data-expected-height="50"></div>
    9394    <div class="sizedToGridArea" style="-webkit-grid-row: f-start;" data-offset-x="50" data-offset-y="0" data-expected-width="100" data-expected-height="50"></div>
    … …  
    160161
    161162<div style="position: relative">
    162   <div class="grid gridAreas gridWithNamedLineBeforeGridArea">
     163  <div class="grid gridAreas gridWithNamedLineBeforeGridArea justifyContentStart">
    163164    <div class="sizedToGridArea" style="-webkit-grid-column-start: d-start;" data-offset-x="50" data-offset-y="0" data-expected-width="100" data-expected-height="50"></div>
    164165    <div class="sizedToGridArea" style="-webkit-grid-row-start: d-start;" data-offset-x="0" data-offset-y="50" data-expected-width="50" data-expected-height="100"></div>
    … …  
    167168
    168169<div style="position: relative">
    169   <div class="grid gridAreas gridWithNamedLineBeforeGridArea">
     170  <div class="grid gridAreas gridWithNamedLineBeforeGridArea justifyContentStart">
    170171    <div class="sizedToGridArea" style="-webkit-grid-column: a;" data-offset-x="0" data-offset-y="0" data-expected-width="350" data-expected-height="50"></div>
    171172    <div class="sizedToGridArea" style="-webkit-grid-row: d;" data-offset-x="350" data-offset-y="50" data-expected-width="0" data-expected-height="300"></div>
    … …  
    205206<!-- Check behavior with areas named *-start or *-end -->
    206207<div style="position: relative">
    207   <div class="grid gridAreasSpecial gridNoLineNames">
     208  <div class="grid gridAreasSpecial gridNoLineNames justifyContentStart">
    208209    <div class="sizedToGridArea" style="-webkit-grid-column: a;" data-offset-x="0" data-offset-y="0" data-expected-width="50" data-expected-height="50"></div>
    209210    <div class="sizedToGridArea" style="-webkit-grid-row: a;" data-offset-x="50" data-offset-y="0" data-expected-width="100" data-expected-height="50"></div>

  • trunk/LayoutTests/fast/css-grid-layout/percent-intrinsic-track-breadth.html

    r182780 r197503  
    33<head>
    44<link href="resources/grid.css" rel="stylesheet">
     5<link href="resources/grid-alignment.css" rel="stylesheet">
    56<style>
    67.intrinsic {
    … …  
    2223<body onload="checkLayout('.percentage');">
    2324    <p>This test checks that percentage track breadths of intrinsic size are treated as auto.</p>
    24     <div class="grid intrinsic">
     25    <div class="grid intrinsic contentStart">
    2526        <div class="grid percentage">
    2627            <div class="sizedToGridArea" data-expected-width="50" data-expected-height="10">XXXXX</div>

  • trunk/LayoutTests/fast/css-grid-layout/percent-track-breadths-regarding-container-size.html

    r196819 r197503  
    55<link href="../css-intrinsic-dimensions/resources/height-keyword-classes.css" rel="stylesheet">
    66<link href="resources/grid.css" rel="stylesheet">
     7<link href="resources/grid-alignment.css" rel="stylesheet">
    78<style>
    89.grid {
    … …  
    8889
    8990    <div class="fit-content indefiniteHeight">
    90         <div class="grid calculatedSize">
     91        <div class="grid calculatedSize justifyContentStart">
    9192            <div class="firstRowFirstColumn sizedToGridArea" data-expected-width="20" data-expected-height="10">XX</div>
    9293            <div class="firstRowSecondColumn sizedToGridArea" data-expected-width="50" data-expected-height="10">XXXXX</div>

  • trunk/LayoutTests/fast/css-grid-layout/resources/grid-definitions-parsing-utils.js

    r190663 r197503  
    2525        element.style.width = "800px";
    2626        element.style.height = "600px";
     27        element.style.justifyContent = "start";
     28        element.style.alignContent = "start";
    2729    }
    2830    element.style.font = "10px Ahem"; // Used to resolve em font consistently.

  • trunk/LayoutTests/fast/css-grid-layout/resources/grid-template-shorthand-parsing-utils.js

    r167799 r197503  
    2626        element.style.width = "800px";
    2727        element.style.height = "600px";
     28        element.style.justifyContent = "start";
     29        element.style.alignContent = "start";
    2830    }
    2931

  • trunk/LayoutTests/fast/css/getComputedStyle/computed-style-expected.txt

    r191935 r197503  
    149149column-span: none;
    150150column-width: auto;
    151 align-content: start;
     151align-content: normal;
    152152align-items: start;
    153153align-self: start;
    … …  
    155155flex-direction: row;
    156156flex-wrap: nowrap;
    157 justify-content: start;
     157justify-content: normal;
    158158justify-self: start;
    159159justify-items: start;

  • trunk/LayoutTests/fast/css/getComputedStyle/computed-style-without-renderer-expected.txt

    r191935 r197503  
    148148column-span: none
    149149column-width: auto
    150 align-content: auto
     150align-content: normal
    151151align-items: auto
    152152align-self: auto
    … …  
    154154flex-direction: row
    155155flex-wrap: nowrap
    156 justify-content: auto
     156justify-content: normal
    157157justify-self: auto
    158158justify-items: auto

  • trunk/LayoutTests/svg/css/getComputedStyle-basic-expected.txt

    r191935 r197503  
    295295rect: style.getPropertyValue(column-width) : auto
    296296rect: style.getPropertyCSSValue(column-width) : [object CSSPrimitiveValue]
    297 rect: style.getPropertyValue(align-content) : start
     297rect: style.getPropertyValue(align-content) : normal
    298298rect: style.getPropertyCSSValue(align-content) : [object CSSValueList]
    299299rect: style.getPropertyValue(align-items) : start
    … …  
    307307rect: style.getPropertyValue(flex-wrap) : nowrap
    308308rect: style.getPropertyCSSValue(flex-wrap) : [object CSSPrimitiveValue]
    309 rect: style.getPropertyValue(justify-content) : start
     309rect: style.getPropertyValue(justify-content) : normal
    310310rect: style.getPropertyCSSValue(justify-content) : [object CSSValueList]
    311311rect: style.getPropertyValue(justify-self) : start
    … …  
    829829g: style.getPropertyValue(column-width) : auto
    830830g: style.getPropertyCSSValue(column-width) : [object CSSPrimitiveValue]
    831 g: style.getPropertyValue(align-content) : start
     831g: style.getPropertyValue(align-content) : normal
    832832g: style.getPropertyCSSValue(align-content) : [object CSSValueList]
    833833g: style.getPropertyValue(align-items) : start
    … …  
    841841g: style.getPropertyValue(flex-wrap) : nowrap
    842842g: style.getPropertyCSSValue(flex-wrap) : [object CSSPrimitiveValue]
    843 g: style.getPropertyValue(justify-content) : start
     843g: style.getPropertyValue(justify-content) : normal
    844844g: style.getPropertyCSSValue(justify-content) : [object CSSValueList]
    845845g: style.getPropertyValue(justify-self) : start

  • trunk/Source/WebCore/ChangeLog

    r197502 r197503  
     12016-03-03  Javier Fernandez  <jfernandez@igalia.com>
     2
     3        [CSS Box Alignment] New CSS Value 'normal' for Content Alignment
     4        https://bugs.webkit.org/show_bug.cgi?id=154282
     5
     6        Reviewed by David Hyatt.
     7
     8        The Box Alignment specification defines a new value 'normal' to be used
     9        as default for the different layout models, which will define the
     10        specific behavior for each case. This patch adds a new CSS value in the
     11        parsing logic and adapts the Content Alignment properties to the new
     12        value.
     13
     14        The 'auto' value is no longer valid and the Computed Value will be
     15        always the specified value. Hence, I removed the StyleResolver logic
     16        because is not required now; the specific behavior of the 'normal'
     17        value will be resolved at layout time.
     18
     19        Computed value of both align-content and justify-content is the
     20        specified value, we don't have to resolve any 'auto' value now.
     21
     22        Additionally, this patch updates the layout logic as well, for both
     23        Flexbox and Grid layout models.
     24
     25        No new tests, since we only need to rebaseline those test cases
     26        affected by the new default computed value.
     27
     28        * css/CSSComputedStyleDeclaration.cpp:
     29        (WebCore::valueForContentPositionAndDistributionWithOverflowAlignment):
     30        (WebCore::ComputedStyleExtractor::propertyValue):
     31        (WebCore::CSSComputedStyleDeclaration::getPropertyCSSValue): Deleted.
     32        (WebCore::CSSComputedStyleDeclaration::copyProperties): Deleted.
     33        (WebCore::nodeOrItsAncestorNeedsStyleRecalc): Deleted.
     34        (WebCore::isFlexOrGrid): Deleted.
     35        (WebCore::ComputedStyleExtractor::customPropertyValue): Deleted.
     36        * css/CSSParser.cpp:
     37        (WebCore::CSSParser::parseContentDistributionOverflowPosition):
     38        * css/CSSPrimitiveValueMappings.h:
     39        (WebCore::CSSPrimitiveValue::CSSPrimitiveValue):
     40        (WebCore::CSSPrimitiveValue::operator ContentPosition):
     41        * rendering/RenderFlexibleBox.cpp:
     42        (WebCore::normalValueBehavior):
     43        (WebCore::RenderFlexibleBox::layoutAndPlaceChildren):
     44        (WebCore::RenderFlexibleBox::layoutColumnReverse):
     45        (WebCore::RenderFlexibleBox::alignFlexLines):
     46        (WebCore::alignContentSpaceBetweenChildren): Deleted.
     47        * rendering/RenderGrid.cpp:
     48        (WebCore::normalValueBehavior):
     49        (WebCore::RenderGrid::applyStretchAlignmentToTracksIfNeeded):
     50        (WebCore::RenderGrid::columnAxisOffsetForChild):
     51        (WebCore::RenderGrid::rowAxisOffsetForChild):
     52        (WebCore::resolveContentDistributionFallback):
     53        (WebCore::contentDistributionOffset):
     54        (WebCore::RenderGrid::computeContentPositionAndDistributionOffset):
     55        * rendering/style/RenderStyle.cpp:
     56        (WebCore::resolvedContentAlignmentPosition):
     57        (WebCore::resolvedContentAlignmentDistribution):
     58        (WebCore::RenderStyle::resolvedJustifyContentPosition):
     59        (WebCore::RenderStyle::resolvedJustifyContentDistribution):
     60        (WebCore::RenderStyle::resolvedAlignContentPosition):
     61        (WebCore::RenderStyle::resolvedAlignContentDistribution):
     62        * rendering/style/RenderStyle.h:
     63        * rendering/style/RenderStyleConstants.h:
     64
    1652016-03-03  Antti Koivisto  <antti@apple.com>
    266

  • trunk/Source/WebCore/css/CSSComputedStyleDeclaration.cpp

    r197215 r197503  
    22272227}
    22282228
    2229 static void resolveContentAlignmentAuto(ContentPosition& position, ContentDistributionType& distribution, RenderObject* element)
    2230 {
    2231     if (position != ContentPositionAuto || distribution != ContentDistributionDefault || !element)
    2232         return;
    2233 
    2234     // Even that both align-content and justify-content 'auto' values are resolved to 'stretch'
    2235     // in case of flexbox containers, 'stretch' value in justify-content will behave like 'flex-start'.
    2236     if (element->style().isDisplayFlexibleBox())
    2237         distribution = ContentDistributionStretch;
    2238     else
    2239         position = ContentPositionStart;
    2240 }
    2241 
    22422229RefPtr<CSSValue> CSSComputedStyleDeclaration::getPropertyCSSValue(CSSPropertyID propertyID, EUpdateLayout updateLayout) const
    22432230{
    … …  
    23332320}
    23342321
    2335 static RefPtr<CSSValueList> valueForContentPositionAndDistributionWithOverflowAlignment(ContentPosition position, ContentDistributionType distribution, OverflowAlignment overflowAlignment)
     2322static RefPtr<CSSValueList> valueForContentPositionAndDistributionWithOverflowAlignment(const StyleContentAlignmentData& data)
    23362323{
    23372324    RefPtr<CSSValueList> result = CSSValueList::createSpaceSeparated();
    2338     if (distribution != ContentDistributionDefault)
    2339         result->append(CSSPrimitiveValue::create(distribution));
    2340     if (distribution == ContentDistributionDefault || position != ContentPositionAuto)
    2341         result->append(CSSPrimitiveValue::create(position));
    2342     if ((position >= ContentPositionCenter || distribution != ContentDistributionDefault) && overflowAlignment != OverflowAlignmentDefault)
    2343         result->append(CSSPrimitiveValue::create(overflowAlignment));
     2325    if (data.distribution() != ContentDistributionDefault)
     2326        result->append(CSSPrimitiveValue::create(data.distribution()));
     2327    if (data.distribution() == ContentDistributionDefault || data.position() != ContentPositionNormal)
     2328        result->append(CSSPrimitiveValue::create(data.position()));
     2329    if ((data.position() >= ContentPositionCenter || data.distribution() != ContentDistributionDefault) && data.overflow() != OverflowAlignmentDefault)
     2330        result->append(CSSPrimitiveValue::create(data.overflow()));
    23442331    ASSERT(result->length() > 0);
    23452332    ASSERT(result->length() <= 3);
    … …  
    27182705        case CSSPropertyEmptyCells:
    27192706            return cssValuePool.createValue(style->emptyCells());
    2720         case CSSPropertyAlignContent: {
    2721             ContentPosition position = style->alignContentPosition();
    2722             ContentDistributionType distribution = style->alignContentDistribution();
    2723             resolveContentAlignmentAuto(position, distribution, renderer);
    2724             return valueForContentPositionAndDistributionWithOverflowAlignment(position, distribution, style->alignContentOverflowAlignment());
    2725         }
     2707        case CSSPropertyAlignContent:
     2708            return valueForContentPositionAndDistributionWithOverflowAlignment(style->alignContent());
    27262709        case CSSPropertyAlignItems:
    27272710            return valueForItemPositionWithOverflowAlignment(resolveContainerAlignmentAuto(style->alignItemsPosition(), renderer), style->alignItemsOverflowAlignment(), NonLegacyPosition);
    … …  
    27452728        case CSSPropertyFlexWrap:
    27462729            return cssValuePool.createValue(style->flexWrap());
    2747         case CSSPropertyJustifyContent: {
    2748             ContentPosition position = style->justifyContentPosition();
    2749             ContentDistributionType distribution = style->justifyContentDistribution();
    2750             resolveContentAlignmentAuto(position, distribution, renderer);
    2751             return valueForContentPositionAndDistributionWithOverflowAlignment(position, distribution, style->justifyContentOverflowAlignment());
    2752         }
     2730        case CSSPropertyJustifyContent:
     2731            return valueForContentPositionAndDistributionWithOverflowAlignment(style->justifyContent());
    27532732        case CSSPropertyJustifyItems:
    27542733            return valueForItemPositionWithOverflowAlignment(resolveContainerAlignmentAuto(style->justifyItemsPosition(), renderer), style->justifyItemsOverflowAlignment(), style->justifyItemsPositionType());

  • trunk/Source/WebCore/css/CSSParser.cpp

    r197400 r197503  
    34063406RefPtr<CSSValue> CSSParser::parseContentDistributionOverflowPosition()
    34073407{
    3408     // auto | <baseline-position> | <content-distribution> || [ <overflow-position>? && <content-position> ]
     3408    // normal | <baseline-position> | <content-distribution> || [ <overflow-position>? && <content-position> ]
    34093409    // <baseline-position> = baseline | last-baseline;
    34103410    // <content-distribution> = space-between | space-around | space-evenly | stretch;
    34113411    // <content-position> = center | start | end | flex-start | flex-end | left | right;
    3412     // <overflow-position> = true | safe
     3412    // <overflow-position> = unsafe | safe
    34133413
    34143414    CSSParserValue* value = m_valueList->current();
    … …  
    34173417
    34183418    // auto | <baseline-position>
    3419     if (value->id == CSSValueAuto || isBaselinePositionKeyword(value->id)) {
     3419    if (value->id == CSSValueNormal || isBaselinePositionKeyword(value->id)) {
    34203420        m_valueList->next();
    34213421        return CSSContentDistributionValue::create(CSSValueInvalid, value->id, CSSValueInvalid);

  • trunk/Source/WebCore/css/CSSPrimitiveValueMappings.h

    r196960 r197503  
    52325232    m_primitiveUnitType = CSS_VALUE_ID;
    52335233    switch (contentPosition) {
    5234     case ContentPositionAuto:
    5235         m_value.valueID = CSSValueAuto;
     5234    case ContentPositionNormal:
     5235        m_value.valueID = CSSValueNormal;
    52365236        break;
    52375237    case ContentPositionBaseline:
    … …  
    52685268{
    52695269    switch (m_value.valueID) {
    5270     case CSSValueAuto:
    5271         return ContentPositionAuto;
     5270    case CSSValueNormal:
     5271        return ContentPositionNormal;
    52725272    case CSSValueBaseline:
    52735273        return ContentPositionBaseline;
    … …  
    52925292    }
    52935293    ASSERT_NOT_REACHED();
    5294     return ContentPositionAuto;
     5294    return ContentPositionNormal;
    52955295}
    52965296

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

    r194496 r197503  
    10931093}
    10941094
     1095static const StyleContentAlignmentData& normalValueBehavior()
     1096{
     1097    // The justify-content property applies along the main axis, but since flexing
     1098    // in the main axis is controlled by flex, stretch behaves as flex-start (ignoring
     1099    // the specified fallback alignment, if any).
     1100    // https://drafts.csswg.org/css-align/#distribution-flex
     1101    static const StyleContentAlignmentData normalBehavior = {ContentPositionNormal, ContentDistributionStretch};
     1102    return normalBehavior;
     1103}
     1104
    10951105void RenderFlexibleBox::layoutAndPlaceChildren(LayoutUnit& crossAxisOffset, const OrderedFlexItemList& children, const Vector<LayoutUnit>& childSizes, LayoutUnit availableFreeSpace, bool relayoutChildren, Vector<LineContext>& lineContexts)
    10961106{
    10971107    ASSERT(childSizes.size() == children.size());
    10981108
    1099     ContentPosition position = style().resolvedJustifyContentPosition();
    1100     ContentDistributionType distribution = style().resolvedJustifyContentDistribution();
     1109    ContentPosition position = style().resolvedJustifyContentPosition(normalValueBehavior());
     1110    ContentDistributionType distribution = style().resolvedJustifyContentDistribution(normalValueBehavior());
    11011111
    11021112    size_t numberOfChildrenForJustifyContent = numberOfInFlowPositionedChildren(children);
    … …  
    11811191void RenderFlexibleBox::layoutColumnReverse(const OrderedFlexItemList& children, LayoutUnit crossAxisOffset, LayoutUnit availableFreeSpace)
    11821192{
    1183     ContentPosition position = style().resolvedJustifyContentPosition();
    1184     ContentDistributionType distribution = style().resolvedJustifyContentDistribution();
     1193    ContentPosition position = style().resolvedJustifyContentPosition(normalValueBehavior());
     1194    ContentDistributionType distribution = style().resolvedJustifyContentDistribution(normalValueBehavior());
    11851195
    11861196    // This is similar to the logic in layoutAndPlaceChildren, except we place the children
    … …  
    12391249void RenderFlexibleBox::alignFlexLines(Vector<LineContext>& lineContexts)
    12401250{
    1241     ContentPosition position = style().resolvedAlignContentPosition();
    1242     ContentDistributionType distribution = style().resolvedAlignContentDistribution();
     1251    ContentPosition position = style().resolvedAlignContentPosition(normalValueBehavior());
     1252    ContentDistributionType distribution = style().resolvedAlignContentDistribution(normalValueBehavior());
    12431253
    12441254    if (!isMultiline() || position == ContentPositionFlexStart)

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

    r197501 r197503  
    13551355}
    13561356
     1357static const StyleContentAlignmentData& normalValueBehavior()
     1358{
     1359    static const StyleContentAlignmentData normalBehavior = {ContentPositionNormal, ContentDistributionStretch};
     1360    return normalBehavior;
     1361}
     1362
    13571363void RenderGrid::applyStretchAlignmentToTracksIfNeeded(GridTrackSizingDirection direction, GridSizingData& sizingData)
    13581364{
    … …  
    13601366    if (!freeSpace
    13611367        || freeSpace.value() <= 0
    1362         || (direction == ForColumns && style().resolvedJustifyContentDistribution() != ContentDistributionStretch)
    1363         || (direction == ForRows && style().resolvedAlignContentDistribution() != ContentDistributionStretch))
     1368        || (direction == ForColumns && style().resolvedJustifyContentDistribution(normalValueBehavior()) != ContentDistributionStretch)
     1369        || (direction == ForRows && style().resolvedAlignContentDistribution(normalValueBehavior()) != ContentDistributionStretch))
    13641370        return;
    13651371
    … …  
    18571863        // In order to properly adjust the Self Alignment values we need to consider the offset between tracks.
    18581864        if (childEndLine - childStartLine > 1 && childEndLine < m_rowPositions.size() - 1)
    1859             endOfRow -= offsetBetweenTracks(style().resolvedAlignContentDistribution(), m_rowPositions, childBreadth);
     1865            endOfRow -= offsetBetweenTracks(style().resolvedAlignContentDistribution(normalValueBehavior()), m_rowPositions, childBreadth);
    18601866        LayoutUnit offsetFromStartPosition = computeOverflowAlignmentOffset(RenderStyle::resolveAlignmentOverflow(style(), child.style()), endOfRow - startOfRow, childBreadth);
    18611867        return startPosition + (axisPosition == GridAxisEnd ? offsetFromStartPosition : offsetFromStartPosition / 2);
    … …  
    18911897        // In order to properly adjust the Self Alignment values we need to consider the offset between tracks.
    18921898        if (childEndLine - childStartLine > 1 && childEndLine < m_columnPositions.size() - 1)
    1893             endOfColumn -= offsetBetweenTracks(style().resolvedJustifyContentDistribution(), m_columnPositions, childBreadth);
     1899            endOfColumn -= offsetBetweenTracks(style().resolvedJustifyContentDistribution(normalValueBehavior()), m_columnPositions, childBreadth);
    18941900        LayoutUnit offsetFromStartPosition = computeOverflowAlignmentOffset(RenderStyle::resolveJustificationOverflow(style(), child.style()), endOfColumn - startOfColumn, childBreadth);
    18951901        return startPosition + (axisPosition == GridAxisEnd ? offsetFromStartPosition : offsetFromStartPosition / 2);
    … …  
    19131919        return ContentPositionStart;
    19141920    case ContentDistributionDefault:
    1915         return ContentPositionAuto;
     1921        return ContentPositionNormal;
    19161922    }
    19171923
    19181924    ASSERT_NOT_REACHED();
    1919     return ContentPositionAuto;
    1920 }
    1921 
    1922 static inline LayoutUnit offsetToStartEdge(bool isLeftToRight, LayoutUnit availableSpace)
    1923 {
    1924     return isLeftToRight ? LayoutUnit() : availableSpace;
    1925 }
    1926 
    1927 static inline LayoutUnit offsetToEndEdge(bool isLeftToRight, LayoutUnit availableSpace)
    1928 {
    1929     return !isLeftToRight ? LayoutUnit() : availableSpace;
     1925    return ContentPositionNormal;
    19301926}
    19311927
    19321928static ContentAlignmentData contentDistributionOffset(const LayoutUnit& availableFreeSpace, ContentPosition& fallbackPosition, ContentDistributionType distribution, unsigned numberOfGridTracks)
    19331929{
    1934     if (distribution != ContentDistributionDefault && fallbackPosition == ContentPositionAuto)
     1930    if (distribution != ContentDistributionDefault && fallbackPosition == ContentPositionNormal)
    19351931        fallbackPosition = resolveContentDistributionFallback(distribution);
    19361932
    … …  
    19531949        return {distributionOffset, distributionOffset};
    19541950    case ContentDistributionStretch:
    1955         return {0, 0};
    19561951    case ContentDistributionDefault:
    19571952        return ContentAlignmentData::defaultOffsets();
    … …  
    19651960{
    19661961    bool isRowAxis = direction == ForColumns;
    1967     ContentPosition position = isRowAxis ? style().resolvedJustifyContentPosition() : style().resolvedAlignContentPosition();
    1968     ContentDistributionType distribution = isRowAxis ? style().resolvedJustifyContentDistribution() : style().resolvedAlignContentDistribution();
     1962    ContentPosition position = isRowAxis ? style().resolvedJustifyContentPosition(normalValueBehavior()) : style().resolvedAlignContentPosition(normalValueBehavior());
     1963    ContentDistributionType distribution = isRowAxis ? style().resolvedJustifyContentDistribution(normalValueBehavior()) : style().resolvedAlignContentDistribution(normalValueBehavior());
    19691964    // If <content-distribution> value can't be applied, 'position' will become the associated
    19701965    // <content-position> fallback value.
    … …  
    19911986    case ContentPositionEnd:
    19921987        if (isRowAxis)
    1993             return {offsetToEndEdge(style().isLeftToRightDirection(), availableFreeSpace), 0};
     1988            return {style().isLeftToRightDirection() ? availableFreeSpace : LayoutUnit(), LayoutUnit()};
    19941989        return {availableFreeSpace, 0};
    19951990    case ContentPositionFlexStart: // Only used in flex layout, for other layout, it's equivalent to 'start'.
    19961991    case ContentPositionStart:
    19971992        if (isRowAxis)
    1998             return {offsetToStartEdge(style().isLeftToRightDirection(), availableFreeSpace), 0};
     1993            return {style().isLeftToRightDirection() ? LayoutUnit() : availableFreeSpace, LayoutUnit()};
    19991994        return {0, 0};
    20001995    case ContentPositionBaseline:
    … …  
    20031998        // http://webkit.org/b/145566
    20041999        if (isRowAxis)
    2005             return {offsetToStartEdge(style().isLeftToRightDirection(), availableFreeSpace), 0};
     2000            return {style().isLeftToRightDirection() ? LayoutUnit() : availableFreeSpace, LayoutUnit()};
    20062001        return {0, 0};
    2007     case ContentPositionAuto:
     2002    case ContentPositionNormal:
    20082003        break;
    20092004    }

  • trunk/Source/WebCore/rendering/style/RenderStyle.cpp

    r197450 r197503  
    211211}
    212212
    213 ContentPosition RenderStyle::resolvedAlignContentPosition() const
    214 {
    215     const StyleContentAlignmentData& align = alignContent();
    216     if (align.position() != ContentPositionAuto || align.distribution() != ContentDistributionDefault)
    217         return align.position();
    218     // 'auto' computes to 'stretch' for flexbox, hence it's managed by distribution().
    219     return isDisplayFlexibleBox() ? ContentPositionAuto : ContentPositionStart;
    220 }
    221 
    222 ContentDistributionType RenderStyle::resolvedAlignContentDistribution() const
    223 {
    224     const StyleContentAlignmentData& align = alignContent();
    225     if (align.position() != ContentPositionAuto || align.distribution() != ContentDistributionDefault)
    226         return align.distribution();
    227     return isDisplayFlexibleBox() ? ContentDistributionStretch : ContentDistributionDefault;
    228 }
    229 
    230 ContentPosition RenderStyle::resolvedJustifyContentPosition() const
    231 {
    232     const StyleContentAlignmentData& justify = justifyContent();
    233     if (justify.position() != ContentPositionAuto || justify.distribution() != ContentDistributionDefault)
    234         return justify.position();
    235     // 'auto' computes to 'stretch' for flexbox, but since flexing in the main axis is controlled by flex, it behaves as flex-start.
    236     return isDisplayFlexibleBox() ? ContentPositionFlexStart : ContentPositionStart;
    237 }
    238 
    239 ContentDistributionType RenderStyle::resolvedJustifyContentDistribution() const
    240 {
    241     // even that 'auto' computes to 'stretch' for flexbox it behaves as flex-start, hence it's managed by position().
    242     return justifyContentDistribution();
     213static inline ContentPosition resolvedContentAlignmentPosition(const StyleContentAlignmentData& value, const StyleContentAlignmentData& normalValueBehavior)
     214{
     215    return (value.position() == ContentPositionNormal && value.distribution() == ContentDistributionDefault) ? normalValueBehavior.position() : value.position();
     216}
     217
     218static inline ContentDistributionType resolvedContentAlignmentDistribution(const StyleContentAlignmentData& value, const StyleContentAlignmentData& normalValueBehavior)
     219{
     220    return (value.position() == ContentPositionNormal && value.distribution() == ContentDistributionDefault) ? normalValueBehavior.distribution() : value.distribution();
     221}
     222
     223ContentPosition RenderStyle::resolvedJustifyContentPosition(const StyleContentAlignmentData& normalValueBehavior) const
     224{
     225    return resolvedContentAlignmentPosition(justifyContent(), normalValueBehavior);
     226}
     227
     228ContentDistributionType RenderStyle::resolvedJustifyContentDistribution(const StyleContentAlignmentData& normalValueBehavior) const
     229{
     230    return resolvedContentAlignmentDistribution(justifyContent(), normalValueBehavior);
     231}
     232
     233ContentPosition RenderStyle::resolvedAlignContentPosition(const StyleContentAlignmentData& normalValueBehavior) const
     234{
     235    return resolvedContentAlignmentPosition(alignContent(), normalValueBehavior);
     236}
     237
     238ContentDistributionType RenderStyle::resolvedAlignContentDistribution(const StyleContentAlignmentData& normalValueBehavior) const
     239{
     240    return resolvedContentAlignmentDistribution(alignContent(), normalValueBehavior);
    243241}
    244242

  • trunk/Source/WebCore/rendering/style/RenderStyle.h

    r197450 r197503  
    482482    static Ref<RenderStyle> createStyleInheritingFromPseudoStyle(const RenderStyle& pseudoStyle);
    483483
    484     ContentPosition resolvedAlignContentPosition() const;
    485     ContentDistributionType resolvedAlignContentDistribution() const;
    486     ContentPosition resolvedJustifyContentPosition() const;
    487     ContentDistributionType resolvedJustifyContentDistribution() const;
     484    ContentPosition resolvedJustifyContentPosition(const StyleContentAlignmentData& normalValueBehavior) const;
     485    ContentDistributionType resolvedJustifyContentDistribution(const StyleContentAlignmentData& normalValueBehavior) const;
     486    ContentPosition resolvedAlignContentPosition(const StyleContentAlignmentData& normalValueBehavior) const;
     487    ContentDistributionType resolvedAlignContentDistribution(const StyleContentAlignmentData& normalValueBehavior) const;
    488488    static ItemPosition resolveAlignment(const RenderStyle& parentStyle, const RenderStyle& childStyle, ItemPosition resolvedAutoPositionForRenderer);
    489489    static OverflowAlignment resolveAlignmentOverflow(const RenderStyle& parentStyle, const RenderStyle& childStyle);
    … …  
    19591959    static int initialOrder() { return 0; }
    19601960    static StyleSelfAlignmentData initialSelfAlignment() { return StyleSelfAlignmentData(ItemPositionAuto, OverflowAlignmentDefault); }
    1961     static StyleContentAlignmentData initialContentAlignment() { return StyleContentAlignmentData(ContentPositionAuto, ContentDistributionDefault, OverflowAlignmentDefault); }
     1961    static StyleContentAlignmentData initialContentAlignment() { return StyleContentAlignmentData(ContentPositionNormal, ContentDistributionDefault, OverflowAlignmentDefault); }
    19621962    static EFlexDirection initialFlexDirection() { return FlowRow; }
    19631963    static EFlexWrap initialFlexWrap() { return FlexNoWrap; }

  • trunk/Source/WebCore/rendering/style/RenderStyleConstants.h

    r196960 r197503  
    258258enum OverflowAlignment {OverflowAlignmentDefault, OverflowAlignmentUnsafe, OverflowAlignmentSafe};
    259259enum ItemPositionType {NonLegacyPosition, LegacyPosition};
    260 enum ContentPosition {ContentPositionAuto, ContentPositionBaseline, ContentPositionLastBaseline, ContentPositionCenter, ContentPositionStart, ContentPositionEnd, ContentPositionFlexStart, ContentPositionFlexEnd, ContentPositionLeft, ContentPositionRight};
     260enum ContentPosition {ContentPositionNormal, ContentPositionBaseline, ContentPositionLastBaseline, ContentPositionCenter, ContentPositionStart, ContentPositionEnd, ContentPositionFlexStart, ContentPositionFlexEnd, ContentPositionLeft, ContentPositionRight};
    261261enum ContentDistributionType {ContentDistributionDefault, ContentDistributionSpaceBetween, ContentDistributionSpaceAround, ContentDistributionSpaceEvenly, ContentDistributionStretch};
    262262
Note: See TracChangeset for help on using the changeset viewer.