[CSS Box Alignment] New CSS Value 'normal' for Content Alignment
authorjfernandez@igalia.com <jfernandez@igalia.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Thu, 3 Mar 2016 11:05:32 +0000 (11:05 +0000)
committerjfernandez@igalia.com <jfernandez@igalia.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Thu, 3 Mar 2016 11:05:32 +0000 (11:05 +0000)
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:

git-svn-id: https://svn.webkit.org/repository/webkit/trunk@197503 268f45cc-cd09-0410-ab3c-d52691b4dbfc

57 files changed:
LayoutTests/ChangeLog
LayoutTests/css3/flexbox/css-properties-expected.txt
LayoutTests/css3/flexbox/css-properties.html
LayoutTests/css3/parse-align-content-expected.txt
LayoutTests/css3/parse-align-content.html
LayoutTests/css3/parse-justify-content-expected.txt
LayoutTests/css3/parse-justify-content.html
LayoutTests/css3/resources/alignment-parsing-utils.js
LayoutTests/fast/css-grid-layout/auto-content-resolution-columns.html
LayoutTests/fast/css-grid-layout/grid-auto-columns-rows-update.html
LayoutTests/fast/css-grid-layout/grid-auto-flow-resolution.html
LayoutTests/fast/css-grid-layout/grid-columns-rows-get-set-multiple.html
LayoutTests/fast/css-grid-layout/grid-columns-rows-get-set.html
LayoutTests/fast/css-grid-layout/grid-container-change-named-grid-lines-recompute-child.html
LayoutTests/fast/css-grid-layout/grid-content-sized-columns-resolution.html
LayoutTests/fast/css-grid-layout/grid-dynamic-updates-relayout.html
LayoutTests/fast/css-grid-layout/grid-element-min-max-width.html
LayoutTests/fast/css-grid-layout/grid-element-repeat-get-set.html
LayoutTests/fast/css-grid-layout/grid-initialize-span-one-items.html
LayoutTests/fast/css-grid-layout/grid-item-addition-auto-placement-update.html
LayoutTests/fast/css-grid-layout/grid-item-addition-track-breadth-update.html
LayoutTests/fast/css-grid-layout/grid-item-bad-named-area-auto-placement.html
LayoutTests/fast/css-grid-layout/grid-item-margin-auto-columns-rows-horizontal-ltr.html
LayoutTests/fast/css-grid-layout/grid-item-margin-auto-columns-rows-horizontal-rtl.html
LayoutTests/fast/css-grid-layout/grid-item-margin-auto-columns-rows-vertical-ltr.html
LayoutTests/fast/css-grid-layout/grid-item-margin-auto-columns-rows-vertical-rtl.html
LayoutTests/fast/css-grid-layout/grid-item-multiple-minmax-content-resolution.html
LayoutTests/fast/css-grid-layout/grid-item-named-grid-area-resolution.html
LayoutTests/fast/css-grid-layout/grid-item-negative-indexes.html
LayoutTests/fast/css-grid-layout/grid-item-order-in-content-sized-columns-resolution.html
LayoutTests/fast/css-grid-layout/grid-item-removal-auto-placement-update.html
LayoutTests/fast/css-grid-layout/grid-item-removal-track-breadth-update.html
LayoutTests/fast/css-grid-layout/grid-update-sizes-after-distributing-all.html
LayoutTests/fast/css-grid-layout/implicit-columns-auto-resolution.html
LayoutTests/fast/css-grid-layout/implicit-position-dynamic-change.html
LayoutTests/fast/css-grid-layout/mark-as-infinitely-growable.html
LayoutTests/fast/css-grid-layout/maximize-tracks-definite-indefinite-width.html
LayoutTests/fast/css-grid-layout/minmax-spanning-resolution-columns.html
LayoutTests/fast/css-grid-layout/named-grid-line-get-set.html
LayoutTests/fast/css-grid-layout/named-grid-lines-computed-style-implicit-tracks.html
LayoutTests/fast/css-grid-layout/named-grid-lines-with-named-grid-areas-resolution.html
LayoutTests/fast/css-grid-layout/percent-intrinsic-track-breadth.html
LayoutTests/fast/css-grid-layout/percent-track-breadths-regarding-container-size.html
LayoutTests/fast/css-grid-layout/resources/grid-definitions-parsing-utils.js
LayoutTests/fast/css-grid-layout/resources/grid-template-shorthand-parsing-utils.js
LayoutTests/fast/css/getComputedStyle/computed-style-expected.txt
LayoutTests/fast/css/getComputedStyle/computed-style-without-renderer-expected.txt
LayoutTests/svg/css/getComputedStyle-basic-expected.txt
Source/WebCore/ChangeLog
Source/WebCore/css/CSSComputedStyleDeclaration.cpp
Source/WebCore/css/CSSParser.cpp
Source/WebCore/css/CSSPrimitiveValueMappings.h
Source/WebCore/rendering/RenderFlexibleBox.cpp
Source/WebCore/rendering/RenderGrid.cpp
Source/WebCore/rendering/style/RenderStyle.cpp
Source/WebCore/rendering/style/RenderStyle.h
Source/WebCore/rendering/style/RenderStyleConstants.h

index b5fd387..8678ced 100644 (file)
@@ -1,3 +1,73 @@
+2016-03-03  Javier Fernandez  <jfernandez@igalia.com>
+
+        [CSS Box Alignment] New CSS Value 'normal' for Content Alignment
+        https://bugs.webkit.org/show_bug.cgi?id=154282
+
+        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:
+
 2016-03-02  Chris Dumez  <cdumez@apple.com>
 
         HTMLFormElement's named property getter does not return a RadioNodelist
index 6fab098..4cecf63 100644 (file)
@@ -16,7 +16,7 @@ PASS flexitem.style.webkitOrder is "0"
 PASS flexitem.style.webkitOrder is "0"
 PASS flexitem.style.webkitOrder is ""
 PASS flexbox.style.webkitJustifyContent is ""
-PASS window.getComputedStyle(flexbox, null).webkitJustifyContent is "stretch"
+PASS window.getComputedStyle(flexbox, null).webkitJustifyContent is "normal"
 PASS flexbox.style.webkitJustifyContent is ""
 PASS flexbox.style.webkitJustifyContent is "flex-start"
 PASS window.getComputedStyle(flexbox, null).webkitJustifyContent is "flex-start"
@@ -27,7 +27,7 @@ PASS window.getComputedStyle(flexbox, null).webkitJustifyContent is "center"
 PASS flexbox.style.webkitJustifyContent is "space-between"
 PASS window.getComputedStyle(flexbox, null).webkitJustifyContent is "space-between"
 PASS flexbox.style.webkitJustifyContent is ""
-PASS window.getComputedStyle(flexbox, null).webkitJustifyContent is "stretch"
+PASS window.getComputedStyle(flexbox, null).webkitJustifyContent is "normal"
 PASS flexbox.style.webkitAlignSelf is ""
 PASS window.getComputedStyle(flexbox, null).webkitAlignSelf is "start"
 PASS window.getComputedStyle(document.documentElement, null).webkitAlignSelf is "start"
@@ -199,7 +199,7 @@ PASS flexbox.style.webkitFlexFlow is "row-reverse wrap-reverse"
 PASS window.getComputedStyle(flexbox, null).webkitFlexFlow is "row-reverse wrap-reverse"
 PASS foundFlexFlow is false
 PASS flexbox.style.webkitAlignContent is ""
-PASS window.getComputedStyle(flexbox, null).webkitAlignContent is "stretch"
+PASS window.getComputedStyle(flexbox, null).webkitAlignContent is "normal"
 PASS flexbox.style.webkitAlignContent is "flex-start"
 PASS window.getComputedStyle(flexbox, null).webkitAlignContent is "flex-start"
 PASS flexbox.style.webkitAlignContent is "flex-end"
@@ -213,9 +213,9 @@ PASS window.getComputedStyle(flexbox, null).webkitAlignContent is "space-around"
 PASS flexbox.style.webkitAlignContent is "stretch"
 PASS window.getComputedStyle(flexbox, null).webkitAlignContent is "stretch"
 PASS flexbox.style.webkitAlignContent is ""
-PASS window.getComputedStyle(flexbox, null).webkitAlignContent is "stretch"
+PASS window.getComputedStyle(flexbox, null).webkitAlignContent is "normal"
 PASS flexbox.style.webkitAlignContent is ""
-PASS window.getComputedStyle(flexbox, null).webkitAlignContent is "stretch"
+PASS window.getComputedStyle(flexbox, null).webkitAlignContent is "normal"
 PASS successfullyParsed is true
 
 TEST COMPLETE
index 90f6489..316e109 100644 (file)
@@ -54,8 +54,8 @@ shouldBeEqualToString('flexitem.style.webkitOrder', '');
 flexbox.style.display = '-webkit-flex';
 
 shouldBeEqualToString('flexbox.style.webkitJustifyContent', '');
-// The initial value is 'auto' which, will be resolve to 'stretch' for flexbox containes (behaving like 'flex-start' for the justify-content property).
-shouldBeEqualToString('window.getComputedStyle(flexbox, null).webkitJustifyContent', 'stretch');
+// The initial value is 'normal'.
+shouldBeEqualToString('window.getComputedStyle(flexbox, null).webkitJustifyContent', 'normal');
 
 flexbox.style.webkitJustifyContent = 'foo';
 shouldBeEqualToString('flexbox.style.webkitJustifyContent', '');
@@ -78,7 +78,7 @@ shouldBeEqualToString('window.getComputedStyle(flexbox, null).webkitJustifyConte
 
 flexbox.style.webkitJustifyContent = '';
 shouldBeEqualToString('flexbox.style.webkitJustifyContent', '');
-shouldBeEqualToString('window.getComputedStyle(flexbox, null).webkitJustifyContent', 'stretch');
+shouldBeEqualToString('window.getComputedStyle(flexbox, null).webkitJustifyContent', 'normal');
 
 shouldBeEqualToString('flexbox.style.webkitAlignSelf', '');
 // The initial value is 'auto', which will be resolved depending on parent's style (except for the 'document' element).
@@ -279,9 +279,9 @@ shouldBeFalse('foundFlexFlow');
 
 flexbox.style.display = '-webkit-flex';
 
-// The initial value is 'stretch'.
+// The initial value is 'normal'.
 shouldBeEqualToString('flexbox.style.webkitAlignContent', '');
-shouldBeEqualToString('window.getComputedStyle(flexbox, null).webkitAlignContent', 'stretch');
+shouldBeEqualToString('window.getComputedStyle(flexbox, null).webkitAlignContent', 'normal');
 
 flexbox.style.webkitAlignContent = 'flex-start';
 shouldBeEqualToString('flexbox.style.webkitAlignContent', 'flex-start');
@@ -309,11 +309,11 @@ shouldBeEqualToString('window.getComputedStyle(flexbox, null).webkitAlignContent
 
 flexbox.style.webkitAlignContent = '';
 shouldBeEqualToString('flexbox.style.webkitAlignContent', '');
-shouldBeEqualToString('window.getComputedStyle(flexbox, null).webkitAlignContent', 'stretch');
+shouldBeEqualToString('window.getComputedStyle(flexbox, null).webkitAlignContent', 'normal');
 
 flexbox.style.webkitAlignContent = 'foo';
 shouldBeEqualToString('flexbox.style.webkitAlignContent', '');
-shouldBeEqualToString('window.getComputedStyle(flexbox, null).webkitAlignContent', 'stretch');
+shouldBeEqualToString('window.getComputedStyle(flexbox, null).webkitAlignContent', 'normal');
 </script>
 <script src="../../resources/js-test-post.js"></script>
 </body>
index f33935b..23dc0cd 100644 (file)
@@ -4,7 +4,7 @@ On success, you will see a series of "PASS" messages, followed by "TEST COMPLETE
 
 
 Test getting align-content set through CSS
-PASS getComputedStyle(alignContentAuto, '').getPropertyValue('align-content') is "start"
+PASS getComputedStyle(alignContentAuto, '').getPropertyValue('align-content') is "normal"
 PASS getComputedStyle(alignContentBaseline, '').getPropertyValue('align-content') is "baseline"
 PASS getComputedStyle(alignContentLastBaseline, '').getPropertyValue('align-content') is "last-baseline"
 PASS getComputedStyle(alignContentSpaceBetween, '').getPropertyValue('align-content') is "space-between"
@@ -30,14 +30,14 @@ PASS getComputedStyle(alignContentSpaceEvenlyRight, '').getPropertyValue('align-
 PASS getComputedStyle(alignContentStretchStartSafe, '').getPropertyValue('align-content') is "stretch start safe"
 PASS getComputedStyle(alignContentSpaceAroundEndUnsafe, '').getPropertyValue('align-content') is "space-around end unsafe"
 PASS getComputedStyle(alignContentSpaceEvenlyFlexStartSafe, '').getPropertyValue('align-content') is "space-evenly flex-start safe"
-PASS getComputedStyle(alignContentSpaceBetweenSafe, '').getPropertyValue('align-content') is "start"
-PASS getComputedStyle(alignContentSpaceBetweenStretch, '').getPropertyValue('align-content') is "start"
-PASS getComputedStyle(alignContentSafe, '').getPropertyValue('align-content') is "start"
-PASS getComputedStyle(alignContentRightSafeUnsafe, '').getPropertyValue('align-content') is "start"
-PASS getComputedStyle(alignContentCenterLeft, '').getPropertyValue('align-content') is "start"
+PASS getComputedStyle(alignContentSpaceBetweenSafe, '').getPropertyValue('align-content') is "normal"
+PASS getComputedStyle(alignContentSpaceBetweenStretch, '').getPropertyValue('align-content') is "normal"
+PASS getComputedStyle(alignContentSafe, '').getPropertyValue('align-content') is "normal"
+PASS getComputedStyle(alignContentRightSafeUnsafe, '').getPropertyValue('align-content') is "normal"
+PASS getComputedStyle(alignContentCenterLeft, '').getPropertyValue('align-content') is "normal"
 
 Test initial value of align-content through JS
-PASS getComputedStyle(element, '').getPropertyValue('align-content') is "start"
+PASS getComputedStyle(element, '').getPropertyValue('align-content') is "normal"
 
 Test getting and setting align-content through JS
 PASS element.style.alignContent is "center"
@@ -52,76 +52,78 @@ PASS element.style.alignContent is "stretch center"
 PASS window.getComputedStyle(element, '').getPropertyValue('align-content') is "stretch center"
 PASS element.style.alignContent is "right unsafe"
 PASS window.getComputedStyle(element, '').getPropertyValue('align-content') is "right unsafe"
-PASS element.style.alignContent is "auto"
-PASS window.getComputedStyle(element, '').getPropertyValue('align-content') is "start"
-PASS element.style.alignContent is "auto"
-PASS window.getComputedStyle(element, '').getPropertyValue('align-content') is "stretch"
-PASS element.style.alignContent is "auto"
-PASS window.getComputedStyle(element, '').getPropertyValue('align-content') is "start"
+PASS element.style.alignContent is "normal"
+PASS window.getComputedStyle(element, '').getPropertyValue('align-content') is "normal"
+PASS element.style.alignContent is "normal"
+PASS window.getComputedStyle(element, '').getPropertyValue('align-content') is "normal"
+PASS element.style.alignContent is "normal"
+PASS window.getComputedStyle(element, '').getPropertyValue('align-content') is "normal"
 PASS element.style.alignContent is "flex-end"
 PASS window.getComputedStyle(element, '').getPropertyValue('align-content') is "flex-end"
 
 Test bad combinations of align-content
 PASS element.style.alignContent is ""
-PASS window.getComputedStyle(element, '').getPropertyValue('align-content') is "start"
+PASS window.getComputedStyle(element, '').getPropertyValue('align-content') is "normal"
 PASS element.style.alignContent is ""
-PASS window.getComputedStyle(element, '').getPropertyValue('align-content') is "start"
+PASS window.getComputedStyle(element, '').getPropertyValue('align-content') is "normal"
 PASS element.style.alignContent is ""
-PASS window.getComputedStyle(element, '').getPropertyValue('align-content') is "start"
+PASS window.getComputedStyle(element, '').getPropertyValue('align-content') is "normal"
 PASS element.style.alignContent is ""
-PASS window.getComputedStyle(element, '').getPropertyValue('align-content') is "start"
+PASS window.getComputedStyle(element, '').getPropertyValue('align-content') is "normal"
 PASS element.style.alignContent is ""
-PASS window.getComputedStyle(element, '').getPropertyValue('align-content') is "start"
+PASS window.getComputedStyle(element, '').getPropertyValue('align-content') is "normal"
 PASS element.style.alignContent is ""
-PASS window.getComputedStyle(element, '').getPropertyValue('align-content') is "start"
+PASS window.getComputedStyle(element, '').getPropertyValue('align-content') is "normal"
 PASS element.style.alignContent is ""
-PASS window.getComputedStyle(element, '').getPropertyValue('align-content') is "start"
+PASS window.getComputedStyle(element, '').getPropertyValue('align-content') is "normal"
 PASS element.style.alignContent is ""
-PASS window.getComputedStyle(element, '').getPropertyValue('align-content') is "start"
+PASS window.getComputedStyle(element, '').getPropertyValue('align-content') is "normal"
 PASS element.style.alignContent is ""
-PASS window.getComputedStyle(element, '').getPropertyValue('align-content') is "start"
+PASS window.getComputedStyle(element, '').getPropertyValue('align-content') is "normal"
 PASS element.style.alignContent is ""
-PASS window.getComputedStyle(element, '').getPropertyValue('align-content') is "start"
+PASS window.getComputedStyle(element, '').getPropertyValue('align-content') is "normal"
 PASS element.style.alignContent is ""
-PASS window.getComputedStyle(element, '').getPropertyValue('align-content') is "start"
+PASS window.getComputedStyle(element, '').getPropertyValue('align-content') is "normal"
 PASS element.style.alignContent is ""
-PASS window.getComputedStyle(element, '').getPropertyValue('align-content') is "start"
+PASS window.getComputedStyle(element, '').getPropertyValue('align-content') is "normal"
 PASS element.style.alignContent is ""
-PASS window.getComputedStyle(element, '').getPropertyValue('align-content') is "start"
+PASS window.getComputedStyle(element, '').getPropertyValue('align-content') is "normal"
 PASS element.style.alignContent is ""
-PASS window.getComputedStyle(element, '').getPropertyValue('align-content') is "start"
+PASS window.getComputedStyle(element, '').getPropertyValue('align-content') is "normal"
 PASS element.style.alignContent is ""
-PASS window.getComputedStyle(element, '').getPropertyValue('align-content') is "start"
+PASS window.getComputedStyle(element, '').getPropertyValue('align-content') is "normal"
 PASS element.style.alignContent is ""
-PASS window.getComputedStyle(element, '').getPropertyValue('align-content') is "start"
+PASS window.getComputedStyle(element, '').getPropertyValue('align-content') is "normal"
 PASS element.style.alignContent is ""
-PASS window.getComputedStyle(element, '').getPropertyValue('align-content') is "start"
+PASS window.getComputedStyle(element, '').getPropertyValue('align-content') is "normal"
 PASS element.style.alignContent is ""
-PASS window.getComputedStyle(element, '').getPropertyValue('align-content') is "start"
+PASS window.getComputedStyle(element, '').getPropertyValue('align-content') is "normal"
 PASS element.style.alignContent is ""
-PASS window.getComputedStyle(element, '').getPropertyValue('align-content') is "start"
+PASS window.getComputedStyle(element, '').getPropertyValue('align-content') is "normal"
 PASS element.style.alignContent is ""
-PASS window.getComputedStyle(element, '').getPropertyValue('align-content') is "start"
+PASS window.getComputedStyle(element, '').getPropertyValue('align-content') is "normal"
 PASS element.style.alignContent is ""
-PASS window.getComputedStyle(element, '').getPropertyValue('align-content') is "start"
+PASS window.getComputedStyle(element, '').getPropertyValue('align-content') is "normal"
+PASS element.style.alignContent is ""
+PASS window.getComputedStyle(element, '').getPropertyValue('align-content') is "normal"
 
 Test the value 'initial'
 PASS element.style.alignContent is "stretch center"
 PASS window.getComputedStyle(element, '').getPropertyValue('align-content') is "stretch center"
 PASS element.style.alignContent is "initial"
-PASS window.getComputedStyle(element, '').getPropertyValue('align-content') is "start"
+PASS window.getComputedStyle(element, '').getPropertyValue('align-content') is "normal"
 
 Test the value 'initial' for grid containers
 PASS element.style.alignContent is "space-between left"
 PASS window.getComputedStyle(element, '').getPropertyValue('align-content') is "space-between left"
 PASS element.style.alignContent is "initial"
-PASS window.getComputedStyle(element, '').getPropertyValue('align-content') is "start"
+PASS window.getComputedStyle(element, '').getPropertyValue('align-content') is "normal"
 
 Test the value 'initial' for flex containers
 PASS element.style.alignContent is "right unsafe"
 PASS window.getComputedStyle(element, '').getPropertyValue('align-content') is "right unsafe"
 PASS element.style.alignContent is "initial"
-PASS window.getComputedStyle(element, '').getPropertyValue('align-content') is "stretch"
+PASS window.getComputedStyle(element, '').getPropertyValue('align-content') is "normal"
 
 Test the value 'inherit'
 PASS element.style.alignContent is "end"
index ea7d24d..7ea1643 100644 (file)
@@ -173,7 +173,7 @@ description('Test that setting and getting align-content works as expected');
 
 debug("Test getting align-content set through CSS");
 var alignContentAuto = document.getElementById("alignContentAuto");
-shouldBeEqualToString("getComputedStyle(alignContentAuto, '').getPropertyValue('align-content')", "start");
+shouldBeEqualToString("getComputedStyle(alignContentAuto, '').getPropertyValue('align-content')", "normal");
 
 var alignContentBaseline = document.getElementById("alignContentBaseline");
 shouldBeEqualToString("getComputedStyle(alignContentBaseline, '').getPropertyValue('align-content')", "baseline");
@@ -251,25 +251,25 @@ var alignContentSpaceEvenlyFlexStartSafe = document.getElementById("alignContent
 shouldBeEqualToString("getComputedStyle(alignContentSpaceEvenlyFlexStartSafe, '').getPropertyValue('align-content')", "space-evenly flex-start safe");
 
 var alignContentSpaceBetweenSafe = document.getElementById("alignContentSpaceBetweenSafe");
-shouldBeEqualToString("getComputedStyle(alignContentSpaceBetweenSafe, '').getPropertyValue('align-content')", "start");
+shouldBeEqualToString("getComputedStyle(alignContentSpaceBetweenSafe, '').getPropertyValue('align-content')", "normal");
 
 var alignContentSpaceAroundUnsafe = document.getElementById("alignContentSpaceBetweenStretch");
-shouldBeEqualToString("getComputedStyle(alignContentSpaceBetweenStretch, '').getPropertyValue('align-content')", "start");
+shouldBeEqualToString("getComputedStyle(alignContentSpaceBetweenStretch, '').getPropertyValue('align-content')", "normal");
 
 var alignContentSpaceAroundUnsafe = document.getElementById("alignContentSafe");
-shouldBeEqualToString("getComputedStyle(alignContentSafe, '').getPropertyValue('align-content')", "start");
+shouldBeEqualToString("getComputedStyle(alignContentSafe, '').getPropertyValue('align-content')", "normal");
 
 var alignContentSpaceAroundUnsafe = document.getElementById("alignContentRightSafeUnsafe");
-shouldBeEqualToString("getComputedStyle(alignContentRightSafeUnsafe, '').getPropertyValue('align-content')", "start");
+shouldBeEqualToString("getComputedStyle(alignContentRightSafeUnsafe, '').getPropertyValue('align-content')", "normal");
 
 var alignContentSpaceAroundUnsafe = document.getElementById("alignContentCenterLeft");
-shouldBeEqualToString("getComputedStyle(alignContentCenterLeft, '').getPropertyValue('align-content')", "start");
+shouldBeEqualToString("getComputedStyle(alignContentCenterLeft, '').getPropertyValue('align-content')", "normal");
 
 debug("");
 debug("Test initial value of align-content through JS");
 element = document.createElement("div");
 document.body.appendChild(element);
-shouldBeEqualToString("getComputedStyle(element, '').getPropertyValue('align-content')", "start");
+shouldBeEqualToString("getComputedStyle(element, '').getPropertyValue('align-content')", "normal");
 
 debug("");
 debug("Test getting and setting align-content through JS");
@@ -293,16 +293,16 @@ checkValues(element, "alignContent", "align-content",  "stretch center", "stretc
 element.style.alignContent = "right unsafe";
 checkValues(element, "alignContent", "align-content",  "right unsafe", "right unsafe");
 
-element.style.alignContent = "auto";
-checkValues(element, "alignContent", "align-content",  "auto", "start");
+element.style.alignContent = "normal";
+checkValues(element, "alignContent", "align-content",  "normal", "normal");
 
 element.style.display = "-webkit-flex";
-element.style.alignContent = "auto";
-checkValues(element, "alignContent", "align-content",  "auto", "stretch");
+element.style.alignContent = "normal";
+checkValues(element, "alignContent", "align-content",  "normal", "normal");
 
 element.style.display = "-webkit-grid";
-element.style.alignContent = "auto";
-checkValues(element, "alignContent", "align-content",  "auto", "start");
+element.style.alignContent = "normal";
+checkValues(element, "alignContent", "align-content",  "normal", "normal");
 
 element.style.alignContent = "flex-end";
 checkValues(element, "alignContent", "align-content",  "flex-end", "flex-end");
@@ -313,6 +313,7 @@ element = document.createElement("div");
 document.body.appendChild(element);
 
 checkBadValues(element, "alignContent", "align-content",  "");
+checkBadValues(element, "alignContent", "align-content",  "auto");
 checkBadValues(element, "alignContent", "align-content",  "unsafe auto");
 checkBadValues(element, "alignContent", "align-content",  "auto safe");
 checkBadValues(element, "alignContent", "align-content",  "auto left");
@@ -337,17 +338,17 @@ checkBadValues(element, "alignContent", "align-content",  "safe");
 debug("");
 debug("Test the value 'initial'");
 element.style.display = "";
-checkInitialValues(element, "alignContent", "align-content", "stretch center", "start");
+checkInitialValues(element, "alignContent", "align-content", "stretch center", "normal");
 
 debug("");
 debug("Test the value 'initial' for grid containers");
 element.style.display = "-webkit-grid";
-checkInitialValues(element, "alignContent", "align-content", "space-between left", "start");
+checkInitialValues(element, "alignContent", "align-content", "space-between left", "normal");
 
 debug("");
 debug("Test the value 'initial' for flex containers");
 element.style.display = "-webkit-flex";
-checkInitialValues(element, "alignContent", "align-content", "right unsafe", "stretch");
+checkInitialValues(element, "alignContent", "align-content", "right unsafe", "normal");
 
 debug("");
 debug("Test the value 'inherit'");
index da849fc..eeaa69b 100644 (file)
@@ -4,7 +4,7 @@ On success, you will see a series of "PASS" messages, followed by "TEST COMPLETE
 
 
 Test getting justify-content set through CSS
-PASS getComputedStyle(justifyContentAuto, '').getPropertyValue('justify-content') is "start"
+PASS getComputedStyle(justifyContentAuto, '').getPropertyValue('justify-content') is "normal"
 PASS getComputedStyle(justifyContentBaseline, '').getPropertyValue('justify-content') is "baseline"
 PASS getComputedStyle(justifyContentLastBaseline, '').getPropertyValue('justify-content') is "last-baseline"
 PASS getComputedStyle(justifyContentSpaceBetween, '').getPropertyValue('justify-content') is "space-between"
@@ -30,14 +30,14 @@ PASS getComputedStyle(justifyContentSpaceEvenlyRight, '').getPropertyValue('just
 PASS getComputedStyle(justifyContentStretchStartSafe, '').getPropertyValue('justify-content') is "stretch start safe"
 PASS getComputedStyle(justifyContentSpaceAroundEndUnsafe, '').getPropertyValue('justify-content') is "space-around end unsafe"
 PASS getComputedStyle(justifyContentSpaceEvenlyFlexStartSafe, '').getPropertyValue('justify-content') is "space-evenly flex-start safe"
-PASS getComputedStyle(justifyContentSpaceBetweenSafe, '').getPropertyValue('justify-content') is "start"
-PASS getComputedStyle(justifyContentSpaceBetweenStretch, '').getPropertyValue('justify-content') is "start"
-PASS getComputedStyle(justifyContentSafe, '').getPropertyValue('justify-content') is "start"
-PASS getComputedStyle(justifyContentRightSafeUnsafe, '').getPropertyValue('justify-content') is "start"
-PASS getComputedStyle(justifyContentCenterLeft, '').getPropertyValue('justify-content') is "start"
+PASS getComputedStyle(justifyContentSpaceBetweenSafe, '').getPropertyValue('justify-content') is "normal"
+PASS getComputedStyle(justifyContentSpaceBetweenStretch, '').getPropertyValue('justify-content') is "normal"
+PASS getComputedStyle(justifyContentSafe, '').getPropertyValue('justify-content') is "normal"
+PASS getComputedStyle(justifyContentRightSafeUnsafe, '').getPropertyValue('justify-content') is "normal"
+PASS getComputedStyle(justifyContentCenterLeft, '').getPropertyValue('justify-content') is "normal"
 
 Test initial value of justify-content through JS
-PASS getComputedStyle(element, '').getPropertyValue('justify-content') is "start"
+PASS getComputedStyle(element, '').getPropertyValue('justify-content') is "normal"
 
 Test getting and setting justify-content through JS
 PASS element.style.justifyContent is "center"
@@ -52,76 +52,78 @@ PASS element.style.justifyContent is "stretch center"
 PASS window.getComputedStyle(element, '').getPropertyValue('justify-content') is "stretch center"
 PASS element.style.justifyContent is "right unsafe"
 PASS window.getComputedStyle(element, '').getPropertyValue('justify-content') is "right unsafe"
-PASS element.style.justifyContent is "auto"
-PASS window.getComputedStyle(element, '').getPropertyValue('justify-content') is "start"
-PASS element.style.justifyContent is "auto"
-PASS window.getComputedStyle(element, '').getPropertyValue('justify-content') is "stretch"
-PASS element.style.justifyContent is "auto"
-PASS window.getComputedStyle(element, '').getPropertyValue('justify-content') is "start"
+PASS element.style.justifyContent is "normal"
+PASS window.getComputedStyle(element, '').getPropertyValue('justify-content') is "normal"
+PASS element.style.justifyContent is "normal"
+PASS window.getComputedStyle(element, '').getPropertyValue('justify-content') is "normal"
+PASS element.style.justifyContent is "normal"
+PASS window.getComputedStyle(element, '').getPropertyValue('justify-content') is "normal"
 PASS element.style.justifyContent is "flex-end"
 PASS window.getComputedStyle(element, '').getPropertyValue('justify-content') is "flex-end"
 
 Test bad combinations of justify-content
 PASS element.style.justifyContent is ""
-PASS window.getComputedStyle(element, '').getPropertyValue('justify-content') is "start"
+PASS window.getComputedStyle(element, '').getPropertyValue('justify-content') is "normal"
 PASS element.style.justifyContent is ""
-PASS window.getComputedStyle(element, '').getPropertyValue('justify-content') is "start"
+PASS window.getComputedStyle(element, '').getPropertyValue('justify-content') is "normal"
 PASS element.style.justifyContent is ""
-PASS window.getComputedStyle(element, '').getPropertyValue('justify-content') is "start"
+PASS window.getComputedStyle(element, '').getPropertyValue('justify-content') is "normal"
 PASS element.style.justifyContent is ""
-PASS window.getComputedStyle(element, '').getPropertyValue('justify-content') is "start"
+PASS window.getComputedStyle(element, '').getPropertyValue('justify-content') is "normal"
 PASS element.style.justifyContent is ""
-PASS window.getComputedStyle(element, '').getPropertyValue('justify-content') is "start"
+PASS window.getComputedStyle(element, '').getPropertyValue('justify-content') is "normal"
 PASS element.style.justifyContent is ""
-PASS window.getComputedStyle(element, '').getPropertyValue('justify-content') is "start"
+PASS window.getComputedStyle(element, '').getPropertyValue('justify-content') is "normal"
 PASS element.style.justifyContent is ""
-PASS window.getComputedStyle(element, '').getPropertyValue('justify-content') is "start"
+PASS window.getComputedStyle(element, '').getPropertyValue('justify-content') is "normal"
 PASS element.style.justifyContent is ""
-PASS window.getComputedStyle(element, '').getPropertyValue('justify-content') is "start"
+PASS window.getComputedStyle(element, '').getPropertyValue('justify-content') is "normal"
 PASS element.style.justifyContent is ""
-PASS window.getComputedStyle(element, '').getPropertyValue('justify-content') is "start"
+PASS window.getComputedStyle(element, '').getPropertyValue('justify-content') is "normal"
 PASS element.style.justifyContent is ""
-PASS window.getComputedStyle(element, '').getPropertyValue('justify-content') is "start"
+PASS window.getComputedStyle(element, '').getPropertyValue('justify-content') is "normal"
 PASS element.style.justifyContent is ""
-PASS window.getComputedStyle(element, '').getPropertyValue('justify-content') is "start"
+PASS window.getComputedStyle(element, '').getPropertyValue('justify-content') is "normal"
 PASS element.style.justifyContent is ""
-PASS window.getComputedStyle(element, '').getPropertyValue('justify-content') is "start"
+PASS window.getComputedStyle(element, '').getPropertyValue('justify-content') is "normal"
 PASS element.style.justifyContent is ""
-PASS window.getComputedStyle(element, '').getPropertyValue('justify-content') is "start"
+PASS window.getComputedStyle(element, '').getPropertyValue('justify-content') is "normal"
 PASS element.style.justifyContent is ""
-PASS window.getComputedStyle(element, '').getPropertyValue('justify-content') is "start"
+PASS window.getComputedStyle(element, '').getPropertyValue('justify-content') is "normal"
 PASS element.style.justifyContent is ""
-PASS window.getComputedStyle(element, '').getPropertyValue('justify-content') is "start"
+PASS window.getComputedStyle(element, '').getPropertyValue('justify-content') is "normal"
 PASS element.style.justifyContent is ""
-PASS window.getComputedStyle(element, '').getPropertyValue('justify-content') is "start"
+PASS window.getComputedStyle(element, '').getPropertyValue('justify-content') is "normal"
 PASS element.style.justifyContent is ""
-PASS window.getComputedStyle(element, '').getPropertyValue('justify-content') is "start"
+PASS window.getComputedStyle(element, '').getPropertyValue('justify-content') is "normal"
 PASS element.style.justifyContent is ""
-PASS window.getComputedStyle(element, '').getPropertyValue('justify-content') is "start"
+PASS window.getComputedStyle(element, '').getPropertyValue('justify-content') is "normal"
 PASS element.style.justifyContent is ""
-PASS window.getComputedStyle(element, '').getPropertyValue('justify-content') is "start"
+PASS window.getComputedStyle(element, '').getPropertyValue('justify-content') is "normal"
 PASS element.style.justifyContent is ""
-PASS window.getComputedStyle(element, '').getPropertyValue('justify-content') is "start"
+PASS window.getComputedStyle(element, '').getPropertyValue('justify-content') is "normal"
 PASS element.style.justifyContent is ""
-PASS window.getComputedStyle(element, '').getPropertyValue('justify-content') is "start"
+PASS window.getComputedStyle(element, '').getPropertyValue('justify-content') is "normal"
+PASS element.style.justifyContent is ""
+PASS window.getComputedStyle(element, '').getPropertyValue('justify-content') is "normal"
 
 Test the value 'initial'
 PASS element.style.justifyContent is "stretch center"
 PASS window.getComputedStyle(element, '').getPropertyValue('justify-content') is "stretch center"
 PASS element.style.justifyContent is "initial"
-PASS window.getComputedStyle(element, '').getPropertyValue('justify-content') is "start"
+PASS window.getComputedStyle(element, '').getPropertyValue('justify-content') is "normal"
 
 Test the value 'initial' for grid containers
 PASS element.style.justifyContent is "space-between left"
 PASS window.getComputedStyle(element, '').getPropertyValue('justify-content') is "space-between left"
 PASS element.style.justifyContent is "initial"
-PASS window.getComputedStyle(element, '').getPropertyValue('justify-content') is "start"
+PASS window.getComputedStyle(element, '').getPropertyValue('justify-content') is "normal"
 
 Test the value 'initial' for flex containers
 PASS element.style.justifyContent is "right unsafe"
 PASS window.getComputedStyle(element, '').getPropertyValue('justify-content') is "right unsafe"
 PASS element.style.justifyContent is "initial"
-PASS window.getComputedStyle(element, '').getPropertyValue('justify-content') is "stretch"
+PASS window.getComputedStyle(element, '').getPropertyValue('justify-content') is "normal"
 
 Test the value 'inherit'
 PASS element.style.justifyContent is "end"
index 1ba5a2b..0900484 100644 (file)
@@ -169,7 +169,7 @@ description('Test that setting and getting justify-content works as expected');
 
 debug("Test getting justify-content set through CSS");
 var justifyContentAuto = document.getElementById("justifyContentAuto");
-shouldBeEqualToString("getComputedStyle(justifyContentAuto, '').getPropertyValue('justify-content')", "start");
+shouldBeEqualToString("getComputedStyle(justifyContentAuto, '').getPropertyValue('justify-content')", "normal");
 
 var justifyContentBaseline = document.getElementById("justifyContentBaseline");
 shouldBeEqualToString("getComputedStyle(justifyContentBaseline, '').getPropertyValue('justify-content')", "baseline");
@@ -247,25 +247,25 @@ var justifyContentSpaceEvenlyFlexStartSafe = document.getElementById("justifyCon
 shouldBeEqualToString("getComputedStyle(justifyContentSpaceEvenlyFlexStartSafe, '').getPropertyValue('justify-content')", "space-evenly flex-start safe");
 
 var justifyContentSpaceBetweenSafe = document.getElementById("justifyContentSpaceBetweenSafe");
-shouldBeEqualToString("getComputedStyle(justifyContentSpaceBetweenSafe, '').getPropertyValue('justify-content')", "start");
+shouldBeEqualToString("getComputedStyle(justifyContentSpaceBetweenSafe, '').getPropertyValue('justify-content')", "normal");
 
 var justifyContentSpaceAroundUnsafe = document.getElementById("justifyContentSpaceBetweenStretch");
-shouldBeEqualToString("getComputedStyle(justifyContentSpaceBetweenStretch, '').getPropertyValue('justify-content')", "start");
+shouldBeEqualToString("getComputedStyle(justifyContentSpaceBetweenStretch, '').getPropertyValue('justify-content')", "normal");
 
 var justifyContentSpaceAroundUnsafe = document.getElementById("justifyContentSafe");
-shouldBeEqualToString("getComputedStyle(justifyContentSafe, '').getPropertyValue('justify-content')", "start");
+shouldBeEqualToString("getComputedStyle(justifyContentSafe, '').getPropertyValue('justify-content')", "normal");
 
 var justifyContentSpaceAroundUnsafe = document.getElementById("justifyContentRightSafeUnsafe");
-shouldBeEqualToString("getComputedStyle(justifyContentRightSafeUnsafe, '').getPropertyValue('justify-content')", "start");
+shouldBeEqualToString("getComputedStyle(justifyContentRightSafeUnsafe, '').getPropertyValue('justify-content')", "normal");
 
 var justifyContentSpaceAroundUnsafe = document.getElementById("justifyContentCenterLeft");
-shouldBeEqualToString("getComputedStyle(justifyContentCenterLeft, '').getPropertyValue('justify-content')", "start");
+shouldBeEqualToString("getComputedStyle(justifyContentCenterLeft, '').getPropertyValue('justify-content')", "normal");
 
 debug("");
 debug("Test initial value of justify-content through JS");
 element = document.createElement("div");
 document.body.appendChild(element);
-shouldBeEqualToString("getComputedStyle(element, '').getPropertyValue('justify-content')", "start");
+shouldBeEqualToString("getComputedStyle(element, '').getPropertyValue('justify-content')", "normal");
 
 debug("");
 debug("Test getting and setting justify-content through JS");
@@ -289,16 +289,16 @@ checkValues(element, "justifyContent", "justify-content",  "stretch center", "st
 element.style.justifyContent = "right unsafe";
 checkValues(element, "justifyContent", "justify-content",  "right unsafe", "right unsafe");
 
-element.style.justifyContent = "auto";
-checkValues(element, "justifyContent", "justify-content",  "auto", "start");
+element.style.justifyContent = "normal";
+checkValues(element, "justifyContent", "justify-content",  "normal", "normal");
 
 element.style.display = "-webkit-flex";
-element.style.justifyContent = "auto";
-checkValues(element, "justifyContent", "justify-content",  "auto", "stretch");
+element.style.justifyContent = "normal";
+checkValues(element, "justifyContent", "justify-content",  "normal", "normal");
 
 element.style.display = "-webkit-grid";
-element.style.justifyContent = "auto";
-checkValues(element, "justifyContent", "justify-content",  "auto", "start");
+element.style.justifyContent = "normal";
+checkValues(element, "justifyContent", "justify-content",  "normal", "normal");
 
 element.style.justifyContent = "flex-end";
 checkValues(element, "justifyContent", "justify-content",  "flex-end", "flex-end");
@@ -309,6 +309,7 @@ element = document.createElement("div");
 document.body.appendChild(element);
 
 checkBadValues(element, "justifyContent", "justify-content",  "");
+checkBadValues(element, "justifyContent", "justify-content",  "auto");
 checkBadValues(element, "justifyContent", "justify-content",  "unsafe auto");
 checkBadValues(element, "justifyContent", "justify-content",  "auto safe");
 checkBadValues(element, "justifyContent", "justify-content",  "auto left");
@@ -333,17 +334,17 @@ checkBadValues(element, "justifyContent", "justify-content",  "safe");
 debug("");
 debug("Test the value 'initial'");
 element.style.display = "";
-checkInitialValues(element, "justifyContent", "justify-content", "stretch center", "start");
+checkInitialValues(element, "justifyContent", "justify-content", "stretch center", "normal");
 
 debug("");
 debug("Test the value 'initial' for grid containers");
 element.style.display = "-webkit-grid";
-checkInitialValues(element, "justifyContent", "justify-content", "space-between left", "start");
+checkInitialValues(element, "justifyContent", "justify-content", "space-between left", "normal");
 
 debug("");
 debug("Test the value 'initial' for flex containers");
 element.style.display = "-webkit-flex";
-checkInitialValues(element, "justifyContent", "justify-content", "right unsafe", "stretch");
+checkInitialValues(element, "justifyContent", "justify-content", "right unsafe", "normal");
 
 debug("");
 debug("Test the value 'inherit'");
index b97022a..c8d6b27 100644 (file)
@@ -8,8 +8,10 @@ function checkValues(element, property, propertyID, value, computedValue)
 
 function checkBadValues(element, property, propertyID, value)
 {
+    var elementID = element.id || "element";
+    var initialValue = eval("window.getComputedStyle(" + elementID + " , '').getPropertyValue('" + propertyID + "')");
     element.style[property] = value;
-    checkValues(element, property, propertyID, "", "start");
+    checkValues(element, property, propertyID, "", initialValue);
 }
 
 function checkInitialValues(element, property, propertyID, value, initial)
index d48c948..dcf4a67 100644 (file)
@@ -1,6 +1,7 @@
 <!DOCTYPE html>
 <html>
 <link href="resources/grid.css" rel="stylesheet">
+<link href="resources/grid-alignment.css" rel="stylesheet">
 <style>
 .gridAutoContent {
     -webkit-grid-template-columns: auto;
 <p>Test that resolving auto tracks on grid items works properly.</p>
 
 <div class="constrainedContainer">
-    <div class="grid gridAutoContent">
+    <div class="grid gridAutoContent justifyContentStart">
         <div class="firstRowFirstColumn" data-expected-width="30" data-expected-height="50">XXX XXX XXX</div>
     </div>
 </div>
 
 <!-- Allow the extra logical space distribution to occur. -->
 <div style="width: 40px; height: 10px">
-    <div class="grid gridAutoContent">
+    <div class="grid gridAutoContent justifyContentStart">
         <div class="firstRowFirstColumn" data-expected-width="40" data-expected-height="50">XX XX XX XX XX XX</div>
     </div>
 </div>
 
 <div style="width: 100px; height: 10px;">
-    <div class="grid gridAutoContent">
+    <div class="grid gridAutoContent justifyContentStart">
         <div class="firstRowFirstColumn" data-expected-width="50" data-expected-height="50">XXXXX</div>
     </div>
 </div>
index 64c695b..055e19e 100644 (file)
@@ -2,6 +2,7 @@
 <html>
 <head>
 <link href="resources/grid.css" rel="stylesheet">
+<link href="resources/grid-alignment.css" rel="stylesheet">
 <style>
 .grid {
     -webkit-grid-template-rows: 20px;
@@ -73,7 +74,7 @@ window.addEventListener("load", updateGridAutoRowsColumns, false);
 </div>
 
 <div class="unconstrainedContainer" style="position: relative">
-    <div class="grid" id="unconstrainedGrid">
+    <div class="grid justifyContentStart" id="unconstrainedGrid">
         <div class="sizedToGridArea secondRowSecondColumn" data-offset-x="10" data-offset-y="20" data-expected-width="50" data-expected-height="30">XXXXX XXXXXX</div>
     </div>
 </div>
index 4320ba3..193e9dd 100644 (file)
@@ -1,6 +1,7 @@
 <!DOCTYPE html>
 <html>
 <link href="resources/grid.css" rel="stylesheet">
+<link href="resources/grid-alignment.css" rel="stylesheet">
 <style>
 .smallGrid {
     -webkit-grid-template-columns: 50px 100px;
@@ -45,7 +46,7 @@
 <p>This test checks that the tracks' auto positions are properly resolved on a static grid.</p>
 
 <div class="unconstrainedContainer">
-    <div class="grid smallGrid">
+    <div class="grid smallGrid justifyContentStart">
         <div class="sizedToGridArea autoRowAutoColumn" data-offset-x="0" data-offset-y="0" data-expected-width="50" data-expected-height="50">XXXXX XXXXX XXXXX</div>
         <div class="sizedToGridArea secondRowAutoColumn" data-offset-x="0" data-offset-y="50" data-expected-width="50" data-expected-height="100">XXXXX XXXXX XXXXX</div>
         <div class="sizedToGridArea autoRowSecondColumn" data-offset-x="50" data-offset-y="0" data-expected-width="100" data-expected-height="50">XXXXX XXXXX XXXXX</div>
@@ -56,7 +57,7 @@
 </div>
 
 <div class="unconstrainedContainer">
-    <div class="grid bigGrid gridAutoFlowColumnSparse">
+    <div class="grid bigGrid gridAutoFlowColumnSparse justifyContentStart">
         <div class="sizedToGridArea secondRowSecondColumn" data-offset-x="50" data-offset-y="50" data-expected-width="100" data-expected-height="100">XXXXX XXXXX XXXXX</div>
         <div class="sizedToGridArea firstRowSecondColumn" data-offset-x="50" data-offset-y="0" data-expected-width="100" data-expected-height="50">XXXXX XXXXX XXXXX</div>
         <div class="sizedToGridArea secondRowFirstColumn" data-offset-x="0" data-offset-y="50" data-expected-width="50" data-expected-height="100">XXXXX XXXXX XXXXX</div>
@@ -66,7 +67,7 @@
 </div>
 
 <div class="unconstrainedContainer">
-    <div class="grid bigGrid gridAutoFlowRowSparse">
+    <div class="grid bigGrid gridAutoFlowRowSparse justifyContentStart">
         <div class="sizedToGridArea firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="50" data-expected-height="50">XXXXX XXXXX XXXXX</div>
         <div class="sizedToGridArea firstRowSecondColumn" data-offset-x="50" data-offset-y="0" data-expected-width="100" data-expected-height="50">XXXXX XXXXX XXXXX</div>
         <div class="sizedToGridArea secondRowSecondColumn" data-offset-x="50" data-offset-y="50" data-expected-width="100" data-expected-height="100">XXXXX XXXXX XXXXX</div>
@@ -76,7 +77,7 @@
 </div>
 
 <div class="unconstrainedContainer">
-    <div class="grid bigGrid gridAutoFlowColumnSparse">
+    <div class="grid bigGrid gridAutoFlowColumnSparse justifyContentStart">
         <div class="sizedToGridArea autoRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="50" data-expected-height="50">XXXXX XXXXX XXXXX</div>
         <div class="sizedToGridArea autoRowSecondColumn" data-offset-x="50" data-offset-y="0" data-expected-width="100" data-expected-height="50">XXXXX XXXXX XXXXX</div>
         <div class="sizedToGridArea secondRowAutoColumn" data-offset-x="0" data-offset-y="50" data-expected-width="50" data-expected-height="100">XXXXX XXXXX XXXXX</div>
@@ -86,7 +87,7 @@
 </div>
 
 <div class="unconstrainedContainer">
-    <div class="grid bigGrid gridAutoFlowColumnDense">
+    <div class="grid bigGrid gridAutoFlowColumnDense justifyContentStart">
         <div class="sizedToGridArea autoRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="50" data-expected-height="50">XXXXX XXXXX XXXXX</div>
         <div class="sizedToGridArea autoRowSecondColumn" data-offset-x="50" data-offset-y="0" data-expected-width="100" data-expected-height="50">XXXXX XXXXX XXXXX</div>
         <div class="sizedToGridArea secondRowAutoColumn" data-offset-x="0" data-offset-y="50" data-expected-width="50" data-expected-height="100">XXXXX XXXXX XXXXX</div>
@@ -96,7 +97,7 @@
 </div>
 
 <div class="unconstrainedContainer">
-    <div class="grid bigGrid gridAutoFlowRowSparse">
+    <div class="grid bigGrid gridAutoFlowRowSparse justifyContentStart">
         <div class="sizedToGridArea autoRowFirstColumn" data-offset-x="0" data-offset-y="150" data-expected-width="50" data-expected-height="150">XXXXX XXXXX XXXXX</div>
         <div class="sizedToGridArea firstRowSecondColumn" data-offset-x="50" data-offset-y="0" data-expected-width="100" data-expected-height="50">XXXXX XXXXX XXXXX</div>
         <div class="sizedToGridArea secondRowAutoColumn" data-offset-x="0" data-offset-y="50" data-expected-width="50" data-expected-height="100">XXXXX XXXXX XXXXX</div>
 </div>
 
 <div class="unconstrainedContainer">
-    <div class="grid bigGrid gridAutoFlowRowDense">
+    <div class="grid bigGrid gridAutoFlowRowDense justifyContentStart">
         <div class="sizedToGridArea autoRowFirstColumn" data-offset-x="0" data-offset-y="150" data-expected-width="50" data-expected-height="150">XXXXX XXXXX XXXXX</div>
         <div class="sizedToGridArea firstRowSecondColumn" data-offset-x="50" data-offset-y="0" data-expected-width="100" data-expected-height="50">XXXXX XXXXX XXXXX</div>
         <div class="sizedToGridArea secondRowAutoColumn" data-offset-x="0" data-offset-y="50" data-expected-width="50" data-expected-height="100">XXXXX XXXXX XXXXX</div>
 
 <!-- Using some 2 positions non-spanning fixed grid-{row|column} -->
 <div class="unconstrainedContainer">
-    <div class="grid bigGrid gridAutoFlowColumnSparse">
+    <div class="grid bigGrid gridAutoFlowColumnSparse justifyContentStart">
         <div class="sizedToGridArea autoLastRowAutoLastColumn" data-offset-x="300" data-offset-y="300" data-expected-width="200" data-expected-height="200">XXXXX XXXXX XXXXX</div>
         <div class="sizedToGridArea firstAutoRowSecondAutoColumn" data-offset-x="50" data-offset-y="0" data-expected-width="100" data-expected-height="50">XXXXX XXXXX XXXXX</div>
         <div class="sizedToGridArea secondRowAutoColumn" data-offset-x="0" data-offset-y="50" data-expected-width="50" data-expected-height="100">XXXXX XXXXX XXXXX</div>
 </div>
 
 <div class="unconstrainedContainer">
-    <div class="grid bigGrid gridAutoFlowRowSparse">
+    <div class="grid bigGrid gridAutoFlowRowSparse justifyContentStart">
         <div class="sizedToGridArea autoLastRowAutoLastColumn" data-offset-x="300" data-offset-y="300" data-expected-width="200" data-expected-height="200">XXXXX XXXXX XXXXX</div>
         <div class="sizedToGridArea firstAutoRowSecondAutoColumn" data-offset-x="50" data-offset-y="0" data-expected-width="100" data-expected-height="50">XXXXX XXXXX XXXXX</div>
         <div class="sizedToGridArea secondRowAutoColumn" data-offset-x="0" data-offset-y="50" data-expected-width="50" data-expected-height="100">XXXXX XXXXX XXXXX</div>
 </div>
 
 <div class="unconstrainedContainer">
-    <div class="grid bigGrid gridAutoFlowColumnSparse">
+    <div class="grid bigGrid gridAutoFlowColumnSparse justifyContentStart">
         <div class="sizedToGridArea overflowingRowFirstColumn" data-offset-x="0" data-offset-y="500" data-expected-width="50" data-expected-height="30">XXXXX XXXXX XXXXX</div>
         <div class="sizedToGridArea secondRowOverflowingColumn" data-offset-x="500" data-offset-y="50" data-expected-width="170" data-expected-height="100">XXXXX XXXXX XXXXX</div>
     </div>
 </div>
 
 <div class="unconstrainedContainer">
-    <div class="grid bigGrid gridAutoFlowRowSparse">
+    <div class="grid bigGrid gridAutoFlowRowSparse justifyContentStart">
         <div class="sizedToGridArea overflowingRowFirstColumn" data-offset-x="0" data-offset-y="500" data-expected-width="50" data-expected-height="30">XXXXX XXXXX XXXXX</div>
         <div class="sizedToGridArea secondRowOverflowingColumn" data-offset-x="500" data-offset-y="50" data-expected-width="170" data-expected-height="100">XXXXX XXXXX XXXXX</div>
     </div>
 </div>
 
 <div class="unconstrainedContainer">
-    <div class="grid bigGrid gridAutoFlowColumnSparse">
+    <div class="grid bigGrid gridAutoFlowColumnSparse justifyContentStart">
         <div class="sizedToGridArea negativeOverflowingRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="50" data-expected-height="50">XXXXX XXXXX XXXXX</div>
         <div class="sizedToGridArea secondRowNegativeOverflowingColumn" data-offset-x="0" data-offset-y="50" data-expected-width="50" data-expected-height="100">XXXXX XXXXX XXXXX</div>
     </div>
 </div>
 
 <div class="unconstrainedContainer">
-    <div class="grid bigGrid gridAutoFlowRowSparse">
+    <div class="grid bigGrid gridAutoFlowRowSparse justifyContentStart">
         <div class="sizedToGridArea negativeOverflowingRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="50" data-expected-height="50">XXXXX XXXXX XXXXX</div>
         <div class="sizedToGridArea secondRowNegativeOverflowingColumn" data-offset-x="0" data-offset-y="50" data-expected-width="50" data-expected-height="100">XXXXX XXXXX XXXXX</div>
     </div>
index 065bcd2..7803507 100644 (file)
@@ -3,6 +3,7 @@
 <head>
 <link href="../css-intrinsic-dimensions/resources/width-keyword-classes.css" rel="stylesheet">
 <link href="resources/grid.css" rel="stylesheet">
+<link href="resources/grid-alignment.css" rel="stylesheet">
 <style>
 .definite {
     /* Give an explicit size to the grid so that percentage grid tracks have a consistent resolution */
 <div class="grid min-content gridWithPercent" id="gridWithPercentWithoutSize">
     <div class="gridItem"></div>
 </div>
-<div class="grid definite gridWithAuto" id="gridWithAutoElement">
+<div class="grid definite gridWithAuto contentStart" id="gridWithAutoElement">
   <div class="gridItem2"></div>
 </div>
 <div class="grid definite gridWithEM" id="gridWithEMElement"></div>
 <div class="grid definite gridWithNoneAndAuto" id="gridWithNoneAndAuto"></div>
 <div class="grid definite gridWithNoneAndFixed" id="gridWithNoneAndFixed"></div>
-<div class="grid definite gridWithThreeItems" id="gridWithThreeItems"></div>
+<div class="grid definite gridWithThreeItems contentStart" id="gridWithThreeItems"></div>
 <div class="grid definite gridWithPercentAndViewportPercent" id="gridWithPercentAndViewportPercent"></div>
 <div class="grid definite gridWithFitContentAndFitAvailable" id="gridWithFitContentAndFitAvailable"></div>
 <div class="grid definite gridWithMinMaxContent" id="gridWithMinMaxContent"></div>
 <div class="grid definite gridWithCalcAndFixed" id="gridWithCalcAndFixed"></div>
 <div class="grid definite gridWithCalcAndMinMax" id="gridWithCalcAndMinMax"></div>
 <div class="grid definite gridWithCalcInsideMinMax" id="gridWithCalcInsideMinMax"></div>
-<div class="grid definite gridWithAutoInsideMinMax" id="gridWithAutoInsideMinMax"></div>
+<div class="grid definite gridWithAutoInsideMinMax contentStart" id="gridWithAutoInsideMinMax"></div>
 <script src="resources/grid-definitions-parsing-utils.js"></script>
 <script src="resources/grid-columns-rows-get-set-multiple.js"></script>
 <script src="../../resources/js-test-post.js"></script>
index 679c47c..1f67187 100644 (file)
@@ -3,6 +3,7 @@
 <head>
 <link href="../css-intrinsic-dimensions/resources/width-keyword-classes.css" rel="stylesheet">
 <link href="resources/grid.css" rel="stylesheet">
+<link href="resources/grid-alignment.css" rel="stylesheet">
 <style>
 .definite {
     /* Give an explicit size to the grid so that percentage grid tracks have a consistent resolution */
 <div class="grid min-content gridWithPercent" id="gridWithPercentWithoutSizeWithChildren">
     <div class="gridItem"></div>
 </div>
-<div class="grid definite gridWithAuto" id="gridWithAutoElement"></div>
-<div class="grid definite gridWithAuto" id="gridWithAutoWithoutSizeElement"></div>
-<div class="grid definite gridWithAuto fontSpec" id="gridWithAutoWithChildrenElement">
+<div class="grid definite gridWithAuto contentStart" id="gridWithAutoElement"></div>
+<div class="grid definite gridWithAuto contentStart" id="gridWithAutoWithoutSizeElement"></div>
+<div class="grid definite gridWithAuto contentStart fontSpec" id="gridWithAutoWithChildrenElement">
   <div class="gridItem"></div>
 </div>
 <div class="grid definite gridWithEM" id="gridWithEMElement"></div>
 <div class="grid definite gridWithCalcComplex" id="gridWithCalcComplexElement"></div>
 <div class="grid definite gridWithCalcInsideMinMax" id="gridWithCalcInsideMinMaxElement"></div>
 <div class="grid definite gridWithCalcComplexInsideMinMax" id="gridWithCalcComplexInsideMinMaxElement"></div>
-<div class="grid definite gridWithAutoInsideMinMax" id="gridWithAutoInsideMinMaxElement">
+<div class="grid definite gridWithAutoInsideMinMax contentStart" id="gridWithAutoInsideMinMaxElement">
     <div class="gridItem"></div>
 </div>
 <script src="resources/grid-definitions-parsing-utils.js"></script>
index 62e38f9..44f1dd7 100644 (file)
@@ -2,6 +2,7 @@
 <html>
 <head>
 <link href="resources/grid.css" rel="stylesheet">
+<link href="resources/grid-alignment.css" rel="stylesheet">
 <script src="../../resources/check-layout.js"></script>
 <style type="text/css">
     .grid {
@@ -66,7 +67,7 @@ window.addEventListener("load", testChangingGridDefinitions, false);
 <div>This test checks that updating the named grid lines definitions in grid-template-{rows|columns} recomputes the positions of automatically placed grid items.</div>
 
 <div style="position: relative">
-    <div class="grid">
+    <div class="grid justifyContentStart">
         <div class="sizedToGridArea" id="firstGridItem"></div>
         <div class="sizedToGridArea" id="secondGridItem"></div>
         <div class="sizedToGridArea" id="thirdGridItem"></div>
index f976ae5..62b62ea 100644 (file)
@@ -1,6 +1,7 @@
 <!DOCTYPE html>
 <head>
 <link href="resources/grid.css" rel="stylesheet"/>
+<link href="resources/grid-alignment.css" rel="stylesheet"/>
 <style>
 .grid {
     font: 10px/1 Ahem;
 <script src="../../resources/js-test.js"></script>
 </head>
 <body>
-<div class="grid gridMinContentFixedAndAuto" id="gridMinContentFixedAndAuto">
+<div class="grid gridMinContentFixedAndAuto justifyContentStart" id="gridMinContentFixedAndAuto">
     <div class="firstRowBothColumn">XXXX XXXX</div>
 </div>
 
-<div class="grid gridAutoAndAuto" id="gridAutoAndAuto">
+<div class="grid gridAutoAndAuto justifyContentStart" id="gridAutoAndAuto">
     <div class="firstRowBothColumn">XXXX XXXX</div>
 </div>
 
     </div>
 </div>
 
-<div class="grid gridAutoMinContent" id="gridAutoMinContent">
+<div class="grid gridAutoMinContent justifyContentStart" id="gridAutoMinContent">
     <div class="firstRowBothColumn">XXXX XXXX</div>
 </div>
 
-<div class="grid gridAutoMaxContent" id="gridAutoMaxContent">
+<div class="grid gridAutoMaxContent justifyContentStart" id="gridAutoMaxContent">
     <div class="firstRowBothColumn">XXXX XXXX</div>
 </div>
 
 </div>
 
 <!-- Check that items are processed by ascending span instead of going track by track allowing extra space distribution. -->
-<div class="grid gridMinContentFixedAndAuto" id="gridMinContentFixedAndAutoUnsorted">
+<div class="grid gridMinContentFixedAndAuto justifyContentStart" id="gridMinContentFixedAndAutoUnsorted">
     <div class="firstRowBothColumn">XXXX XXXX</div>
     <div class="firstRowSecondColumn">XXXX XXXX</div>
 </div>
 
-<div class="grid gridAutoAndAuto" id="gridAutoAndAutoUnsorted">
+<div class="grid gridAutoAndAuto justifyContentStart" id="gridAutoAndAutoUnsorted">
     <div class="firstRowBothColumn">XXXX XXXX</div>
     <div class="firstRowSecondColumn">XXX</div>
 </div>
     <div class="firstRowSecondColumn">XXXX XXXX</div>
 </div>
 
-<div class="grid gridMaxContentFixedAndAuto" id="gridMaxContentFixedAndAutoUnsorted">
+<div class="grid gridMaxContentFixedAndAuto justifyContentStart" id="gridMaxContentFixedAndAutoUnsorted">
     <div class="firstRowBothColumn">XX XX</div>
     <div class="firstRowSecondColumn">XXXX</div>
     <div class="firstRowSecondColumn">XXX XXX</div>
 </div>
 
-<div class="grid gridAutoMinContent" id="gridAutoMinContentUnsorted">
+<div class="grid gridAutoMinContent justifyContentStart" id="gridAutoMinContentUnsorted">
     <div class="firstRowBothColumn">XX XX XX XX</div>
     <div class="firstRowSecondColumn">XXXXXX XXXXXX</div>
 </div>
 
-<div class="grid gridAutoMaxContent" id="gridAutoMaxContentUnsorted">
+<div class="grid gridAutoMaxContent justifyContentStart" id="gridAutoMaxContentUnsorted">
     <div class="firstRowBothColumn">XXXX XXXX</div>
     <div class="firstRowBothColumn">XXX XXX</div>
     <div class="firstRowSecondColumn">XXXXX</div>
 
 <!-- The next four force the grid to grow only a particular subset of tracks above the limits -->
 <div class="constrainedContainer">
-    <div class="grid gridMinContentFixedAndAuto" id="gridMinContentFixedAndAutoAboveLimits">
+    <div class="grid gridMinContentFixedAndAuto justifyContentStart" id="gridMinContentFixedAndAutoAboveLimits">
        <div class="firstRowBothColumn">XXXX XXXX</div>
        <div class="firstRowBothColumn">XXXXXXXXXXX</div>
     </div>
     <div class="firstRowBothColumn">XX XX XX XX XX</div>
 </div>
 
-<div class="grid gridAutoAndMinContentFixedAndMinContent" id="gridAutoAndMinContentFixedAndMinContent">
+<div class="grid gridAutoAndMinContentFixedAndMinContent justifyContentStart" id="gridAutoAndMinContentFixedAndMinContent">
     <div class="firstRowFirstColumn">XX</div>
     <div class="firstRowBothColumn">XXXXXXXXXXXXXXX</div>
     <div style="-webkit-grid-row: 1; -webkit-grid-column: 3;">XXX XXX</div>
index 4ad30a4..65950dc 100644 (file)
@@ -1,6 +1,7 @@
 <!DOCTYPE html>
 <html>
 <link href="resources/grid.css" rel="stylesheet">
+<link href="resources/grid-alignment.css" rel="stylesheet">
 <script src="../../resources/check-layout.js"></script>
 <script>
 function testLayout(gridElementID, gridTracks, size)
@@ -59,7 +60,7 @@ window.addEventListener("load", updateRowsColumns, false);
 </div>
 
 <div class="unconstrainedContainer">
-    <div class="grid" id="unconstrainedGrid">
+    <div class="grid justifyContentStart" id="unconstrainedGrid">
         <div class="sizedToGridArea">XXXXX XXXXXX</div>
     </div>
 </div>
index b60bc52..3f3288a 100644 (file)
@@ -1,6 +1,7 @@
 <!DOCTYPE html>
 <html>
 <link href="resources/grid.css" rel="stylesheet">
+<link href="resources/grid-alignment.css" rel="stylesheet">
 <link href="../css-intrinsic-dimensions/resources/width-keyword-classes.css" rel=stylesheet>
 <style>
 .minWidthGrid {
@@ -29,7 +30,7 @@
 
 <div class="constrainedContainer">
     <div class="grid minWidthGrid" data-expected-height="40" data-expected-width="100"></div>
-    <div class="grid minWidthAutoGrid" data-expected-height="10" data-expected-width="100">
+    <div class="grid minWidthAutoGrid justifyContentStart justfyContentStart" data-expected-height="10" data-expected-width="100">
         <div class="sizedToGridArea firstRowFirstColumn" data-expected-height="10" data-expected-width="70">XXX XXX</div>
     </div>
     <!-- These 2 grids are sized after their containing block as width is 'auto'. We end up having the content overflow which is weird but the grid shouldn't shrink to fit by default. -->
@@ -58,7 +59,7 @@
 
 <div class="unconstrainedContainer">
     <div class="grid minWidthGrid" data-expected-height="40" data-expected-width="1000"></div>
-    <div class="grid minWidthAutoGrid" data-expected-height="10" data-expected-width="1000">
+    <div class="grid minWidthAutoGrid justifyContentStart" data-expected-height="10" data-expected-width="1000">
         <div class="sizedToGridArea firstRowFirstColumn" data-expected-height="10" data-expected-width="70">XXX XXX</div>
     </div>
     <div class="grid maxWidthGrid" data-expected-height="40" data-expected-width="100"></div>
index 72df2a0..9fbe010 100644 (file)
@@ -3,6 +3,7 @@
 <head>
 <link href="../css-intrinsic-dimensions/resources/width-keyword-classes.css" rel="stylesheet">
 <link href="resources/grid.css" rel="stylesheet">
+<link href="resources/grid-alignment.css" rel="stylesheet">
 <style>
 .definite {
     /* Give an explicit size to the grid so that percentage grid tracks have a consistent resolution */
 <body>
 <div class="grid definite singleSingleTrackRepeat" id="singleSingleTrackRepeatWithSize"></div>
 <div class="grid min-content singleSingleTrackRepeat" id="singleSingleTrackRepeatWithoutSize"></div>
-<div class="grid definite twoSingleTrackRepeat" id="twoSingleTrackRepeat"></div>
-<div class="grid definite twoSingleTrackRepeat" id="twoSingleTrackRepeatWithChildren">
+<div class="grid definite twoSingleTrackRepeat alignContentStart" id="twoSingleTrackRepeat"></div>
+<div class="grid definite twoSingleTrackRepeat alignContentStart" id="twoSingleTrackRepeatWithChildren">
     <div class="gridItem"></div>
     <div class="gridItem2"></div>
 </div>
-<div class="grid definite twoDoubleTrackRepeat" id="twoDoubleTrackRepeat">
+<div class="grid definite twoDoubleTrackRepeat contentStart" id="twoDoubleTrackRepeat">
     <div class="gridItem"></div>
     <div class="gridItem2"></div>
 </div>
-<div class="grid definite twoDoubleTrackWithNamedGridLineRepeat" id="twoDoubleTrackWithNamedGridLineRepeat">
+<div class="grid definite twoDoubleTrackWithNamedGridLineRepeat contentStart" id="twoDoubleTrackWithNamedGridLineRepeat">
     <div class="gridItem"></div>
     <div class="gridItem2"></div>
 </div>
-<div class="grid definite twoDoubleTrackWithTrailingNamedGridLineRepeat" id="twoDoubleTrackWithTrailingNamedGridLineRepeat"></div>
+<div class="grid definite twoDoubleTrackWithTrailingNamedGridLineRepeat justifyContentStart" id="twoDoubleTrackWithTrailingNamedGridLineRepeat"></div>
 <div class="grid definite trailingNamedGridLineRepeat" id="trailingNamedGridLineRepeat"></div>
 <div class="grid definite leadingNamedGridLineRepeat" id="leadingNamedGridLineRepeat"></div>
-<div class="grid definite mixRepeatAfterNonRepeat" id="mixRepeatAfterNonRepeat">
+<div class="grid definite mixRepeatAfterNonRepeat alignContentStart" id="mixRepeatAfterNonRepeat">
     <div class="gridItem"></div>
 </div>
-<div class="grid definite mixNonRepeatAfterRepeat" id="mixNonRepeatAfterRepeat"></div>
+<div class="grid definite mixNonRepeatAfterRepeat alignContentStart" id="mixNonRepeatAfterRepeat"></div>
 
 <script src="resources/grid-definitions-parsing-utils.js"></script>
 <script>
index 02b40d6..4febafd 100644 (file)
@@ -1,6 +1,7 @@
 <!DOCTYPE html>
 <head>
 <link href="resources/grid.css" rel="stylesheet"/>
+<link href="resources/grid-alignment.css" rel="stylesheet"/>
 <style>
  .grid {
      font: 10px/1 Ahem;
 <script src="../../resources/js-test.js"></script>
 </head>
 <body>
-<div class="grid gridAutoAndAuto" id="gridAutoAndAuto">
+<div class="grid gridAutoAndAuto justifyContentStart" id="gridAutoAndAuto">
     <div class="firstRowFirstColumn">X</div>
     <div class="firstRowBothColumn">XXX XX XXX</div>
 </div>
 
-<div class="grid gridAutoAndAuto" id="gridAutoAndAutoReversed">
+<div class="grid gridAutoAndAuto justifyContentStart" id="gridAutoAndAutoReversed">
     <div class="firstRowSecondColumn">X</div>
     <div class="firstRowBothColumn">XXX XX XXX</div>
 </div>
     <div class="firstRowBothColumn">XXX XX XXX</div>
 </div>
 
-<div class="grid gridMaxContentAndAuto" id="gridMaxContentAndAuto">
+<div class="grid gridMaxContentAndAuto justifyContentStart" id="gridMaxContentAndAuto">
     <div class="firstRowFirstColumn">X</div>
     <div class="firstRowBothColumn">XXX XX XXX</div>
 </div>
 
-<div class="grid gridMaxContentAndAuto" id="gridMaxContentAndAutoReversed">
+<div class="grid gridMaxContentAndAuto justifyContentStart" id="gridMaxContentAndAutoReversed">
     <div class="firstRowSecondColumn">X</div>
     <div class="firstRowBothColumn">XXX XX XXX</div>
 </div>
 
-<div class="grid gridMinContentAndAuto" id="gridMinContentAndAuto">
+<div class="grid gridMinContentAndAuto justifyContentStart" id="gridMinContentAndAuto">
     <div class="firstRowFirstColumn">X</div>
     <div class="firstRowBothColumn">XXX XX XXX</div>
 </div>
 
-<div class="grid gridMinContentAndAuto" id="gridMinContentAndAutoReversed">
+<div class="grid gridMinContentAndAuto justifyContentStart" id="gridMinContentAndAutoReversed">
     <div class="firstRowSecondColumn">X</div>
     <div class="firstRowBothColumn">XXX XX XXX</div>
 </div>
index d57478d..2ab22d2 100644 (file)
@@ -1,6 +1,7 @@
 <!DOCTYPE html>
 <html>
 <link href="resources/grid.css" rel="stylesheet">
+<link href="resources/grid-alignment.css" rel="stylesheet">
 <style>
 .grid {
     -webkit-grid-template-columns: 50px 100px;
@@ -57,7 +58,7 @@ window.addEventListener("load", testAdditions, false);
 <p>This test checks that the tracks' auto positions are recomputed after adding a grid item.</p>
 
 <div class="unconstrainedContainer">
-    <div class="grid gridAutoFlowColumnSparse" id="gridAutoFlowColumnSparse">
+    <div class="grid gridAutoFlowColumnSparse contentStart" id="gridAutoFlowColumnSparse">
         <div class="sizedToGridArea autoRowAutoColumn" id="autoFlowColumnElement" data-expected-width="50" data-expected-height="50">XXXXX XXXXX XXXXX</div>
     </div>
 </div>
@@ -69,7 +70,7 @@ window.addEventListener("load", testAdditions, false);
 </div>
 
 <div class="unconstrainedContainer">
-    <div class="grid gridAutoFlowColumnSparse" id="gridAutoFlowColumnWithAuto">
+    <div class="grid gridAutoFlowColumnSparse contentStart" id="gridAutoFlowColumnWithAuto">
         <div class="sizedToGridArea autoRowAutoColumn" id="autoFlowColumnElementWithAuto" data-expected-width="50" data-expected-height="50">XXXXX XXXXX XXXXX</div>
     </div>
 </div>
index 7a41327..1475ae0 100644 (file)
@@ -1,6 +1,7 @@
 <!DOCTYPE html>
 <html>
 <link href="resources/grid.css" rel="stylesheet">
+<link href="resources/grid-alignment.css" rel="stylesheet">
 <style>
 .gridFixedContent {
     -webkit-grid-template-columns: 50px minmax(-webkit-min-content, 50px) minmax(-webkit-max-content, 50px) minmax(50px, -webkit-min-content);
@@ -26,6 +27,7 @@ function testPosition(gridElementID, content, position, size)
     gridItem.setAttribute("data-expected-width", size.width);
     gridItem.setAttribute("data-expected-height", size.height);
     var gridElement = document.getElementById(gridElementID);
+    gridElement.classList.add("contentStart");
     gridElement.appendChild(gridItem);
     checkLayout("#" + gridElementID);
 }
index 45e9ca7..c36a068 100644 (file)
@@ -1,6 +1,7 @@
 <!DOCTYPE html>
 <html>
 <link href="resources/grid.css" rel="stylesheet"/>
+<link href="resources/grid-alignment.css" rel="stylesheet"/>
 <style>
 .grid {
     -webkit-grid-template-rows: 10px 20px;
@@ -41,7 +42,7 @@
 </div>
 
 <div style="position: relative">
-    <div class="grid">
+    <div class="grid contentStart">
         <div class="sizedToGridArea firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="30" data-expected-height="10"></div>
         <div class="sizedToGridArea bothNamedGridLineColumn" data-offset-x="30" data-offset-y="0" data-expected-width="40" data-expected-height="10"></div>
     </div>
index d125738..1e56e08 100644 (file)
@@ -1,6 +1,7 @@
 <!DOCTYPE html>
 <html>
 <link href="resources/grid.css" rel="stylesheet">
+<link href="resources/grid-alignment.css" rel="stylesheet">
 <style>
 .grid {
     -webkit-grid-template-rows: auto auto;
@@ -32,7 +33,7 @@
 <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>
 
 <div class="testContainer">
-    <div class="grid">
+    <div class="grid contentStart">
         <div class="gridItem marginTop firstRowFirstColumn"></div>
         <div class="gridItem firstRowSecondColumn"></div>
         <div class="gridItem marginBottom secondRowFirstColumn"></div>
@@ -41,7 +42,7 @@
 </div>
 
 <div class="testContainer">
-    <div class="grid">
+    <div class="grid contentStart">
         <div class="gridItem marginTop firstRowFirstColumn"></div>
         <div class="gridItem marginBottom firstRowSecondColumn"></div>
         <div class="gridItem secondRowFirstColumn"></div>
@@ -50,7 +51,7 @@
 </div>
 
 <div class="testContainer">
-    <div class="grid horizontalBT">
+    <div class="grid contentStart horizontalBT">
         <div class="gridItem marginTop firstRowFirstColumn"></div>
         <div class="gridItem firstRowSecondColumn"></div>
         <div class="gridItem marginBottom secondRowFirstColumn"></div>
@@ -59,7 +60,7 @@
 </div>
 
 <div class="testContainer">
-    <div class="grid horizontalBT">
+    <div class="grid contentStart horizontalBT">
         <div class="gridItem marginTop firstRowFirstColumn"></div>
         <div class="gridItem marginBottom firstRowSecondColumn"></div>
         <div class="gridItem secondRowFirstColumn"></div>
index c229f43..e20d583 100644 (file)
@@ -1,6 +1,7 @@
 <!DOCTYPE html>
 <html>
 <link href="resources/grid.css" rel="stylesheet">
+<link href="resources/grid-alignment.css" rel="stylesheet">
 <style>
 .grid {
     -webkit-grid-template-rows: auto auto;
@@ -32,7 +33,7 @@
 
 <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>
 <div class="testContainer">
-    <div class="grid directionRTL">
+    <div class="grid contentStart directionRTL">
         <div class="gridItem marginTop firstRowFirstColumn"></div>
         <div class="gridItem firstRowSecondColumn"></div>
         <div class="gridItem marginBottom secondRowFirstColumn"></div>
@@ -41,7 +42,7 @@
 </div>
 
 <div class="testContainer">
-    <div class="grid directionRTL">
+    <div class="grid contentStart directionRTL">
         <div class="gridItem marginTop firstRowFirstColumn"></div>
         <div class="gridItem marginBottom firstRowSecondColumn"></div>
         <div class="gridItem secondRowFirstColumn"></div>
@@ -50,7 +51,7 @@
 </div>
 
 <div class="testContainer">
-    <div class="grid horizontalBT directionRTL">
+    <div class="grid contentStart horizontalBT directionRTL">
         <div class="gridItem marginTop firstRowFirstColumn"></div>
         <div class="gridItem firstRowSecondColumn"></div>
         <div class="gridItem marginBottom secondRowFirstColumn"></div>
@@ -59,7 +60,7 @@
 </div>
 
 <div class="testContainer">
-    <div class="grid horizontalBT directionRTL">
+    <div class="grid contentStart horizontalBT directionRTL">
         <div class="gridItem marginTop firstRowFirstColumn"></div>
         <div class="gridItem marginBottom firstRowSecondColumn"></div>
         <div class="gridItem secondRowFirstColumn"></div>
index 64aca3f..44f561c 100644 (file)
@@ -1,6 +1,7 @@
 <!DOCTYPE html>
 <html>
 <link href="resources/grid.css" rel="stylesheet">
+<link href="resources/grid-alignment.css" rel="stylesheet">
 <style>
 .grid {
     -webkit-grid-template-rows: auto auto;
@@ -33,7 +34,7 @@
 <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>
 
 <div class="testContainer">
-    <div class="grid verticalRL">
+    <div class="grid contentStart verticalRL">
         <div class="gridItem marginTop firstRowFirstColumn"></div>
         <div class="gridItem firstRowSecondColumn"></div>
         <div class="gridItem secondRowFirstColumn"></div>
@@ -42,7 +43,7 @@
 </div>
 
 <div class="testContainer">
-    <div class="grid verticalRL">
+    <div class="grid contentStart verticalRL">
         <div class="gridItem marginTop firstRowFirstColumn"></div>
         <div class="gridItem firstRowSecondColumn"></div>
         <div class="gridItem marginBottom secondRowFirstColumn"></div>
@@ -51,7 +52,7 @@
 </div>
 
 <div class="testContainer">
-    <div class="grid verticalLR">
+    <div class="grid contentStart verticalLR">
         <div class="gridItem marginTop firstRowFirstColumn"></div>
         <div class="gridItem firstRowSecondColumn"></div>
         <div class="gridItem secondRowFirstColumn"></div>
@@ -60,7 +61,7 @@
 </div>
 
 <div class="testContainer">
-    <div class="grid verticalLR">
+    <div class="grid contentStart verticalLR">
         <div class="gridItem marginTop firstRowFirstColumn"></div>
         <div class="gridItem firstRowSecondColumn"></div>
         <div class="gridItem marginBottom secondRowFirstColumn"></div>
index 38a4988..d40d072 100644 (file)
@@ -1,6 +1,7 @@
 <!DOCTYPE html>
 <html>
 <link href="resources/grid.css" rel="stylesheet">
+<link href="resources/grid-alignment.css" rel="stylesheet">
 <style>
 .grid {
     -webkit-grid-template-rows: auto auto;
@@ -33,7 +34,7 @@
 <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>
 
 <div class="testContainer">
-    <div class="grid verticalRL directionRTL">
+    <div class="grid contentStart verticalRL directionRTL">
         <div class="gridItem marginTop firstRowFirstColumn"></div>
         <div class="gridItem firstRowSecondColumn"></div>
         <div class="gridItem secondRowFirstColumn"></div>
@@ -42,7 +43,7 @@
 </div>
 
 <div class="testContainer">
-    <div class="grid verticalRL directionRTL">
+    <div class="grid contentStart verticalRL directionRTL">
         <div class="gridItem marginTop firstRowFirstColumn"></div>
         <div class="gridItem firstRowSecondColumn"></div>
         <div class="gridItem marginBottom secondRowFirstColumn"></div>
@@ -51,7 +52,7 @@
 </div>
 
 <div class="testContainer">
-    <div class="grid verticalLR directionRTL">
+    <div class="grid contentStart verticalLR directionRTL">
         <div class="gridItem marginTop firstRowFirstColumn"></div>
         <div class="gridItem firstRowSecondColumn"></div>
         <div class="gridItem secondRowFirstColumn"></div>
@@ -60,7 +61,7 @@
 </div>
 
 <div class="testContainer">
-    <div class="grid verticalLR directionRTL">
+    <div class="grid contentStart verticalLR directionRTL">
         <div class="gridItem marginTop firstRowFirstColumn"></div>
         <div class="gridItem firstRowSecondColumn"></div>
         <div class="gridItem marginBottom secondRowFirstColumn"></div>
index 7efd2a8..5abb534 100644 (file)
@@ -1,6 +1,7 @@
 <!DOCTYPE html>
 <html>
 <link href="resources/grid.css" rel="stylesheet">
+<link href="resources/grid-alignment.css" rel="stylesheet">
 <style>
 .gridMinMaxAutoWithColumnMinMaxAuto {
     -webkit-grid-template-columns: minmax(50px, 180px) auto;
@@ -13,7 +14,7 @@
 <p>Test that several different grid items along with several minmax tracks are properly sized.</p>
 
 <div class="unconstrainedContainer" style="position: relative;">
-<div class="grid gridMinMaxAutoWithColumnMinMaxAuto">
+<div class="grid gridMinMaxAutoWithColumnMinMaxAuto justifyContentStart">
     <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="180" data-expected-height="10">XXXXX XXXXX</div>
     <div class="sizedToGridArea firstRowSecondColumn" data-expected-width="170" data-expected-height="10">XXXXX XXXXX XXXXX</div>
     <div class="sizedToGridArea secondRowFirstColumn" data-expected-width="180" data-expected-height="100">XXXXX XXXXX XXXXX XXXXX</div>
index 08fd04c..f5a6696 100644 (file)
@@ -2,6 +2,7 @@
 <html>
 <head>
 <link href="resources/grid.css" rel="stylesheet"/>
+<link href="resources/grid-alignment.css" rel="stylesheet">
 <style>
 .grid {
     -webkit-grid-template-rows: [before] 50px [middle] 100px [after] 150px;
@@ -73,7 +74,7 @@
 </div>
 
 <div style="position: relative">
-    <div class="grid gridWithRepeat">
+    <div class="grid gridWithRepeat justifyContentStart">
         <!-- fifth and sixth are invalid named grid areas. -->
         <div class="sizedToGridArea gridItemSixthArea" data-offset-x="0" data-offset-y="150" data-expected-width="40" data-expected-height="150"></div>
         <div class="sizedToGridArea gridItemFifthArea" data-offset-x="40" data-offset-y="150" data-expected-width="80" data-expected-height="150"></div>
index 2beb8e1..a8ab0c9 100644 (file)
@@ -1,5 +1,6 @@
 <!DOCTYPE html>
 <link href="resources/grid.css" rel="stylesheet">
+<link href="resources/grid-alignment.css" rel="stylesheet">
 <style>
 .negativeStartBeforePositionIndexes {
     -webkit-grid-row: -10 / 1;
 <div>This test checks that negative grid position indexes don't make us crash.</div>
 
 <div class="unconstrainedContainer">
-    <div class="grid">
+    <div class="grid justifyContentStart">
         <div class="sizedToGridArea negativeStartBeforePositionIndexes" data-expected-width="120" data-expected-height="10">XXXXX XXXXXX</div>
     </div>
 </div>
 
 <div class="unconstrainedContainer">
-    <div class="grid">
+    <div class="grid justifyContentStart">
         <div class="sizedToGridArea negativeEndAfterPositionIndexes" data-expected-width="120" data-expected-height="10">XXXXX XXXXXX</div>
     </div>
 </div>
 
 <div class="unconstrainedContainer">
-    <div class="grid">
+    <div class="grid justifyContentStart">
         <div class="sizedToGridArea negativePositionIndexes" data-expected-width="120" data-expected-height="10">XXXXX XXXXXX</div>
     </div>
 </div>
index 0fd11c7..0eef081 100644 (file)
@@ -2,6 +2,7 @@
 <html>
 <head>
 <link href="resources/grid.css" rel="stylesheet"/>
+<link href="resources/grid-alignment.css" rel="stylesheet"/>
 <style>
 .grid {
     font: 10px/1 Ahem;
 </div>
 
 <div style="position: relative">
-    <div id="gridFixedMinContentAndAuto" class="grid gridFixedMinContentAndAuto">
+    <div id="gridFixedMinContentAndAuto" class="grid contentStart gridFixedMinContentAndAuto">
        <div class="firstRowFirstColumn">XXXXX</div>
        <div class="spanTwo secondRowFirstColumn">XXX XXX</div>
     </div>
 </div>
 
 <div style="position: relative">
-    <div id="gridFixedMaxContentAndAuto" class="grid gridFixedMaxContentAndAuto">
+    <div id="gridFixedMaxContentAndAuto" class="grid contentStart gridFixedMaxContentAndAuto">
        <div class="firstRowFirstColumn">XXXXX</div>
        <div class="spanTwo secondRowFirstColumn">XXX XXX</div>
     </div>
 </div>
 
 <div style="position: relative">
-    <div id="gridMaxContentAndAuto" class="grid gridMaxContentAndAuto">
+    <div id="gridMaxContentAndAuto" class="grid contentStart gridMaxContentAndAuto">
        <div class="firstRowFirstColumn">XXXXX</div>
        <div class="spanTwo secondRowFirstColumn">XXX XXX</div>
     </div>
 </div>
 
 <div style="position: relative">
-    <div id="gridAutoAndMaxContent" class="grid gridAutoAndMaxContent">
+    <div id="gridAutoAndMaxContent" class="grid contentStart gridAutoAndMaxContent">
        <div class="firstRowFirstColumn">XXXXX</div>
        <div class="spanTwo secondRowFirstColumn">XXX XXX</div>
     </div>
 </div>
 
 <div style="position: relative">
-    <div id="gridMinContentAndAuto" class="grid gridMinContentAndAuto">
+    <div id="gridMinContentAndAuto" class="grid contentStart gridMinContentAndAuto">
        <div class="firstRowFirstColumn">XXXXX</div>
        <div class="spanTwo secondRowFirstColumn">XXX XXX</div>
     </div>
 </div>
 
 <div style="position: relative">
-    <div id="gridAutoAndMinContent" class="grid gridAutoAndMinContent">
+    <div id="gridAutoAndMinContent" class="grid contentStart gridAutoAndMinContent">
        <div class="firstRowFirstColumn">XXXXX</div>
        <div class="spanTwo secondRowFirstColumn">XXX XXX</div>
     </div>
index 249ac68..cf167d6 100644 (file)
@@ -1,6 +1,7 @@
 <!DOCTYPE html>
 <html>
 <link href="resources/grid.css" rel="stylesheet">
+<link href="resources/grid-alignment.css" rel="stylesheet">
 <style>
 .grid {
     -webkit-grid-template-columns: 50px 100px;
@@ -56,7 +57,7 @@ window.addEventListener("load", testRemovals, false);
 <p>This test checks that the tracks' auto positions are recomputed after removing a grid item.</p>
 
 <div class="unconstrainedContainer">
-    <div class="grid gridAutoFlowColumnSparse" id="gridAutoFlowColumnSparse">
+    <div class="grid gridAutoFlowColumnSparse justifyContentStart" id="gridAutoFlowColumnSparse">
         <div class="sizedToGridArea secondRowSecondColumn">XXXXX XXXXX XXXXX</div>
         <div class="sizedToGridArea firstRowSecondColumn">XXXXX XXXXX XXXXX</div>
         <div class="sizedToGridArea secondRowFirstColumn">XXXXX XXXXX XXXXX</div>
@@ -76,7 +77,7 @@ window.addEventListener("load", testRemovals, false);
 </div>
 
 <div class="unconstrainedContainer">
-    <div class="grid gridAutoFlowColumnDense" id="gridAutoFlowColumnWithAutoItems">
+    <div class="grid gridAutoFlowColumnDense justifyContentStart" id="gridAutoFlowColumnWithAutoItems">
         <div class="sizedToGridArea autoRowFirstColumn">XXXXX XXXXX XXXXX</div>
         <div class="sizedToGridArea autoRowSecondColumn">XXXXX XXXXX XXXXX</div>
         <div class="sizedToGridArea secondRowAutoColumn">XXXXX XXXXX XXXXX</div>
index 7c82547..b8a6771 100644 (file)
@@ -1,6 +1,7 @@
 <!DOCTYPE html>
-<html>
+ <html>
 <link href="resources/grid.css" rel="stylesheet">
+<link href="resources/grid-alignment.css" rel="stylesheet">
 <style>
 .gridAutoContent {
     -webkit-grid-template-columns: auto;
@@ -159,7 +160,7 @@ window.addEventListener("load", testRemovals, false);
 
 <!-- The container is big enough to allow all the extra space distribution we want. -->
 <div class="unconstrainedContainer">
-    <div class="grid gridAutoContent" id="unconstrainedAutoGrid">
+    <div class="grid gridAutoContent justifyContentStart" id="unconstrainedAutoGrid">
         <div class="firstRowFirstColumn">XXX XXX XXX XXX XXX XXX XXX XXX XXX XXX</div>
         <div class="firstRowFirstColumn">XXXXX XXXXX XXXXX XXXXX XXXXX XXXXX</div>
         <div class="firstRowFirstColumn">XX XX XX XX XX XX</div>
index 985c5fe..5d3d7b4 100644 (file)
@@ -1,6 +1,7 @@
 <!DOCTYPE html>
 <head>
 <link href="resources/grid.css" rel="stylesheet"/>
+<link href="resources/grid-alignment.css" rel="stylesheet"/>
 <style>
  .grid { font: 10px/1 Ahem; }
 
@@ -62,7 +63,7 @@
     <div class="columns1To3">XXXXX XXX XXXX</div>
 </div>
 
-<div class="grid gridMaxContentAndFixedAndAuto" id="gridMaxContentAndFixedAndAuto">
+<div class="grid gridMaxContentAndFixedAndAuto justifyContentStart" id="gridMaxContentAndFixedAndAuto">
     <div class="columns1To3">XXXX XXXX</div>
     <div class="columns1To3">XXXXX XXX XXXX</div>
 </div>
     <div class="columns1And2">XXXXXX</div>
 </div>
 
-<div class="grid gridRepeatTwoAutoAndMaxContent" id="gridRepeatTwoAutoAndMaxContentTwoOverlapping">
+<div class="grid gridRepeatTwoAutoAndMaxContent justifyContentStart" id="gridRepeatTwoAutoAndMaxContentTwoOverlapping">
     <div class="columns1And2">XXXX XXXX</div>
     <div class="columns3And4">XX XX</div>
     <div class="columns1And2">XXXXX XXX XXXX</div>
     <div class="columns3And4">XXX XX XXX</div>
 </div>
 
-<div class="grid gridRepeatTwoAutoAndMaxContent" id="gridRepeatTwoAutoAndMaxContentThreeOverlapping">
+<div class="grid gridRepeatTwoAutoAndMaxContent justifyContentStart" id="gridRepeatTwoAutoAndMaxContentThreeOverlapping">
     <div class="columns2And3">XXXXX XXX XXXX</div>
     <div class="columns3And4">XXX XX XXX</div>
     <div class="columns1And2">XXXX XXXX</div>
 </div>
 
-<div class="grid gridRepeatTwoAutoAndMaxContent" id="gridRepeatTwoAutoAndMaxContentTwoAndFourOverlapping">
+<div class="grid gridRepeatTwoAutoAndMaxContent justifyContentStart" id="gridRepeatTwoAutoAndMaxContentTwoAndFourOverlapping">
     <div class="columns1To4">XXXX XXXX</div>
     <div class="columns3And4">XX XX</div>
     <div class="columns1To4">XXXXX XXX XXXX</div>
index 43a8eae..ec7ccf0 100644 (file)
@@ -1,6 +1,7 @@
 <!DOCTYPE html>
 <html>
 <link href="resources/grid.css" rel="stylesheet">
+<link href="resources/grid-alignment.css" rel="stylesheet">
 <style>
 .gridAutoContent {
     /* -webkit-grid-template-columns is left unset so that the grid item's column is implicit. */
@@ -33,7 +34,7 @@
 </div>
 
 <div style="width: 100px; height: 10px;">
-    <div class="grid gridAutoContent">
+    <div class="grid gridAutoContent justifyContentStart">
         <div class="firstRowFirstColumn" data-expected-width="50" data-expected-height="50">XXXXX</div>
     </div>
 </div>
index 6bc74bf..96950bd 100644 (file)
@@ -1,6 +1,7 @@
 <!DOCTYPE html>
 <html>
 <link href="resources/grid.css" rel="stylesheet">
+<link href="resources/grid-alignment.css" rel="stylesheet">
 <style>
 .gridFixedContent {
     -webkit-grid-template-columns: 50px minmax(-webkit-min-content, 50px) minmax(-webkit-max-content, 50px) minmax(50px, -webkit-min-content);
@@ -115,7 +116,7 @@ window.addEventListener("load", updateImplicitGridColumn, false);
 
 <!-- Allow the extra logical space distribution to occur. -->
 <div style="width: 1000px; height: 1000px">
-    <div class="grid gridFixedContent" id="unconstrainedGrid"><div class="sizedToGridArea">XXXXXX XXXXXX</div></div>
+    <div class="grid gridFixedContent justifyContentStart" id="unconstrainedGrid"><div class="sizedToGridArea">XXXXXX XXXXXX</div></div>
 </div>
 
 </body>
index 69536fe..d18dcba 100644 (file)
@@ -1,6 +1,7 @@
 <!DOCTYPE html>
 <head>
 <link href="resources/grid.css" rel="stylesheet"/>
+<link href="resources/grid-alignment.css" rel="stylesheet"/>
 <style>
 .grid {
     font: 10px/1 Ahem;
@@ -18,7 +19,7 @@
 <body>
 <script src="resources/grid-definitions-parsing-utils.js"></script>
 
-<div class="grid gridAutoAndAuto" id="gridAutoAndAuto">
+<div class="grid gridAutoAndAuto justifyContentStart" id="gridAutoAndAuto">
     <div class="firstRowFirstColumn">X X</div>
     <div class="firstRowBothColumn">XXXXXX XXX</div>
 </div>
index 281f690..14a705c 100644 (file)
@@ -1,6 +1,7 @@
 <!DOCTYPE html>
 
 <link href="resources/grid.css" rel="stylesheet">
+<link href="resources/grid-alignment.css" rel="stylesheet">
 <link href="../css-intrinsic-dimensions/resources/width-keyword-classes.css" rel="stylesheet">
 
 <style>
@@ -73,7 +74,7 @@ div.grid > div { font: 10px/1 Ahem; }
 <br>
 <h2>Check the behavior of grids under min-content contstraints.</h2>
 <div class="min-content min-width-50">
-    <div class="grid" data-expected-width="50" data-expected-height="10">
+    <div class="grid justifyContentStart" data-expected-width="50" data-expected-height="10">
        <div data-expected-width="40" data-expected-height="10">XX X</div>
     </div>
     <div class="grid min-content" data-expected-width="20" data-expected-height="20">
@@ -88,7 +89,7 @@ div.grid > div { font: 10px/1 Ahem; }
 </div>
 
 <div style="width: 200px;">
-    <div class="grid min-content min-width-fill-available" data-expected-width="200" data-expected-height="10">
+    <div class="grid justifyContentStart min-content min-width-fill-available" data-expected-width="200" data-expected-height="10">
        <div data-expected-width="40" data-expected-height="10">XX X</div>
     </div>
 </div>
@@ -109,14 +110,14 @@ div.grid > div { font: 10px/1 Ahem; }
     <div data-expected-width="40" data-expected-height="10">XX X</div>
 </div>
 
-<div class="grid min-content min-width-50" data-expected-width="50" data-expected-height="10">
+<div class="grid justifyContentStart min-content min-width-50" data-expected-width="50" data-expected-height="10">
     <div data-expected-width="40" data-expected-height="10">XX X</div>
 </div>
 
 <br>
 <h2>Check the behavior of grids with definite available space.</h2>
 <div style="width: 100px;">
-    <div class="grid" data-expected-width="100" data-expected-height="10">
+    <div class="grid justifyContentStart" data-expected-width="100" data-expected-height="10">
        <div data-expected-width="40" data-expected-height="10">XX X</div>
     </div>
 </div>
@@ -133,16 +134,16 @@ div.grid > div { font: 10px/1 Ahem; }
     </div>
 </div>
 
-<div class="grid" style="width: 90px;" data-expected-width="90" data-expected-height="10">
+<div class="grid justifyContentStart" style="width: 90px;" data-expected-width="90" data-expected-height="10">
     <div data-expected-width="40" data-expected-height="10">XX X</div>
 </div>
 
-<div class="grid min-width-50" style="width: 10px;" data-expected-width="50" data-expected-height="10">
+<div class="grid justifyContentStart min-width-50" style="width: 10px;" data-expected-width="50" data-expected-height="10">
     <div data-expected-width="40" data-expected-height="10">XX X</div>
 </div>
 
 <div class="min-width-50" style="width: 20px;">
-    <div class="grid" data-expected-width="50" data-expected-height="10">
+    <div class="grid justifyContentStart" data-expected-width="50" data-expected-height="10">
        <div data-expected-width="40" data-expected-height="10">XX X</div>
     </div>
 </div>
@@ -151,7 +152,7 @@ div.grid > div { font: 10px/1 Ahem; }
     <div class="grid" style="width: 37%;" data-expected-width="37" data-expected-height="20">
        <div data-expected-width="37" data-expected-height="20">XX X</div>
     </div>
-    <div class="grid min-width-50" style="width: 37%;" data-expected-width="50" data-expected-height="10">
+    <div class="grid justifyContentStart min-width-50" style="width: 37%;" data-expected-width="50" data-expected-height="10">
        <div data-expected-width="40" data-expected-height="10">XX X</div>
     </div>
     <div class="grid min-width-35" style="width: 37%;" data-expected-width="37" data-expected-height="20">
@@ -180,10 +181,10 @@ div.grid > div { font: 10px/1 Ahem; }
 </div>
 
 <div class="fit-content min-width-50">
-    <div class="grid" data-expected-width="50" data-expected-height="10">
+    <div class="grid justifyContentStart" data-expected-width="50" data-expected-height="10">
        <div data-expected-width="40" data-expected-height="10">XX X</div>
     </div>
-    <div class="grid min-width-35" data-expected-width="50" data-expected-height="10">
+    <div class="grid justifyContentStart min-width-35" data-expected-width="50" data-expected-height="10">
        <div data-expected-width="40" data-expected-height="10">XX X</div>
     </div>
     <div class="grid max-width-min-content" data-expected-width="20" data-expected-height="20">
@@ -192,7 +193,7 @@ div.grid > div { font: 10px/1 Ahem; }
     <div class="grid fit-content" data-expected-width="40" data-expected-height="10">
        <div data-expected-width="40" data-expected-height="10">XX X</div>
     </div>
-    <div class="grid fill-available" data-expected-width="50" data-expected-height="10">
+    <div class="grid justifyContentStart fill-available" data-expected-width="50" data-expected-height="10">
        <div data-expected-width="40" data-expected-height="10">XX X</div>
     </div>
 </div>
index a04ebbf..55d0dbd 100644 (file)
@@ -1,6 +1,7 @@
 <!DOCTYPE html>
 <html>
 <link href="resources/grid.css" rel="stylesheet">
+<link href="resources/grid-alignment.css" rel="stylesheet">
 <style>
 .gridAutoAutoContent {
     -webkit-grid-template-columns: auto auto;
@@ -46,7 +47,7 @@
 </div>
 
 <div style="width: 100px; height: 10px;">
-    <div class="grid gridAutoAutoContent">
+    <div class="grid gridAutoAutoContent justifyContentStart">
         <div class="sizedToGridArea firstRowBothColumn" data-expected-width="50" data-expected-height="50">XXXXX</div>
         <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="25" data-expected-height="50"></div>
         <div class="sizedToGridArea firstRowSecondColumn" data-expected-width="25" data-expected-height="50"></div>
@@ -81,7 +82,7 @@
 </div>
 
 <div style="width: 100px; height: 10px;">
-    <div class="grid gridFixedAutoContent">
+    <div class="grid gridFixedAutoContent justifyContentStart">
         <div class="sizedToGridArea firstRowBothColumn" data-expected-width="50" data-expected-height="50">XXXXX</div>
         <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="10" data-expected-height="50"></div>
         <div class="sizedToGridArea firstRowSecondColumn" data-expected-width="40" data-expected-height="50"></div>
@@ -89,7 +90,7 @@
 </div>
 
 <div style="width: 100px; height: 100px">
-    <div class="grid gridFixedAutoContent">
+    <div class="grid gridFixedAutoContent justifyContentStart">
         <div class="sizedToGridArea bothRowBothColumn" data-expected-width="50" data-expected-height="150">XXXXX</div>
         <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="10" data-expected-height="50"></div>
         <div class="sizedToGridArea firstRowSecondColumn" data-expected-width="40" data-expected-height="50"></div>
index 4303611..2d1bc88 100644 (file)
@@ -3,6 +3,7 @@
 <head>
 <link href="../css-intrinsic-dimensions/resources/width-keyword-classes.css" rel="stylesheet">
 <link href="resources/grid.css" rel="stylesheet">
+<link href="resources/grid-alignment.css" rel="stylesheet">
 <style>
 .definite {
     /* Give an explicit size to the grid so that percentage grid tracks have a consistent resolution */
@@ -77,8 +78,8 @@
 <div class="grid min-content gridWithPercent" id="gridWithPercentWithoutSizeWithChildren">
     <div class="gridItem"></div>
 </div>
-<div class="grid definite gridWithAuto" id="gridWithAutoElement"></div>
-<div class="grid definite gridWithAuto" id="gridWithAutoWithChildrenElement">
+<div class="grid definite gridWithAuto contentStart" id="gridWithAutoElement"></div>
+<div class="grid definite gridWithAuto contentStart" id="gridWithAutoWithChildrenElement">
     <div class="gridItem"></div>
 </div>
 <div class="grid definite gridWithMinMax" id="gridWithMinMax"></div>
index 57d4d82..bc9d96c 100644 (file)
@@ -1,5 +1,6 @@
 <!DOCTYPE HTML>
 <link href="resources/grid.css" rel="stylesheet">
+<link href="resources/grid-alignment.css" rel="stylesheet">
 <style>
 .grid {
     font: 50px/1 Ahem;
 </style>
 <script src="../../resources/js-test.js"></script>
 
-<div class="grid singleNamedGridLines" id="gridOneColumnSingle">
+<div class="grid singleNamedGridLines justifyContentStart" id="gridOneColumnSingle">
     <div>XXXX</div>
     <div>XXX</div>
     <div>XX</div>
     <div>X</div>
 </div>
 
-<div class="grid singleNamedGridLines" id="gridTwoColumnsSingle">
+<div class="grid singleNamedGridLines justifyContentStart" id="gridTwoColumnsSingle">
     <div class="firstRowAutoColumn">XXXX</div>
     <div class="firstRowAutoColumn">XXX</div>
     <div>XX</div>
     <div>X</div>
 </div>
 
-<div class="grid singleNamedGridLines" id="gridThreeColumnsSingle">
+<div class="grid singleNamedGridLines justifyContentStart" id="gridThreeColumnsSingle">
     <div class="firstRowAutoColumn">XXXX</div>
     <div class="firstRowAutoColumn">XXX</div>
     <div class="firstRowAutoColumn">XX</div>
     <div>X</div>
 </div>
 
-<div class="grid singleNamedGridLines" id="gridFourColumnsSingle">
+<div class="grid singleNamedGridLines justifyContentStart" id="gridFourColumnsSingle">
     <div class="firstRowAutoColumn">XXXX</div>
     <div class="firstRowAutoColumn">XXX</div>
     <div class="firstRowAutoColumn">XX</div>
     <div class="firstRowAutoColumn">X</div>
 </div>
 
-<div class="grid multipleNamedGridLines" id="gridOneColumnMultiple">
+<div class="grid multipleNamedGridLines justifyContentStart" id="gridOneColumnMultiple">
     <div>XXXX</div>
     <div>XXX</div>
     <div>XX</div>
     <div>X</div>
 </div>
 
-<div class="grid multipleNamedGridLines" id="gridTwoColumnsMultiple">
+<div class="grid multipleNamedGridLines justifyContentStart" id="gridTwoColumnsMultiple">
     <div class="firstRowAutoColumn">XXXX</div>
     <div class="firstRowAutoColumn">XXX</div>
     <div>XX</div>
     <div>X</div>
 </div>
 
-<div class="grid multipleNamedGridLines" id="gridThreeColumnsMultiple">
+<div class="grid multipleNamedGridLines justifyContentStart" id="gridThreeColumnsMultiple">
     <div class="firstRowAutoColumn">XXXX</div>
     <div class="firstRowAutoColumn">XXX</div>
     <div class="firstRowAutoColumn">XX</div>
     <div>X</div>
 </div>
 
-<div class="grid multipleNamedGridLines" id="gridFourColumnsMultiple">
+<div class="grid multipleNamedGridLines justifyContentStart" id="gridFourColumnsMultiple">
     <div class="firstRowAutoColumn">XXXX</div>
     <div class="firstRowAutoColumn">XXX</div>
     <div class="firstRowAutoColumn">XX</div>
index 3a8f10f..b47bd44 100644 (file)
@@ -2,6 +2,7 @@
 <html>
 <head>
 <link href="resources/grid.css" rel="stylesheet">
+<link href="resources/grid-alignment.css" rel="stylesheet">
 <style type="text/css">
 
   .gridAreas {
@@ -88,7 +89,7 @@
 
 <!-- Check that without named gridAreas there are no implicit grid-line names defined -->
 <div style="position: relative">
-  <div class="grid gridUniqueNames">
+  <div class="grid gridUniqueNames justifyContentStart">
     <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>
     <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>
     <div class="sizedToGridArea" style="-webkit-grid-column: c-start; -webkit-grid-row: f-end" data-offset-x="150" data-offset-y="0" data-expected-width="200" data-expected-height="50"></div>
 </div>
 
 <div style="position: relative">
-  <div class="grid gridAreas gridWithNamedLineBeforeGridArea">
+  <div class="grid gridAreas gridWithNamedLineBeforeGridArea justifyContentStart">
     <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>
     <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>
   </div>
 </div>
 
 <div style="position: relative">
-  <div class="grid gridAreas gridWithNamedLineBeforeGridArea">
+  <div class="grid gridAreas gridWithNamedLineBeforeGridArea justifyContentStart">
     <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>
     <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>
     <div class="sizedToGridArea" style="-webkit-grid-column: a; -webkit-grid-row: d;" data-offset-x="0" data-offset-y="50" data-expected-width="350" data-expected-height="300"></div>
 
 <!-- Check behavior with areas named *-start or *-end -->
 <div style="position: relative">
-  <div class="grid gridAreasSpecial gridNoLineNames">
+  <div class="grid gridAreasSpecial gridNoLineNames justifyContentStart">
     <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>
     <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>
     <div class="sizedToGridArea" style="-webkit-grid-column: a; -webkit-grid-row: a;" data-offset-x="150" data-offset-y="0" data-expected-width="200" data-expected-height="50"></div>
index c38895e..2c69492 100644 (file)
@@ -2,6 +2,7 @@
 <html>
 <head>
 <link href="resources/grid.css" rel="stylesheet">
+<link href="resources/grid-alignment.css" rel="stylesheet">
 <style>
 .intrinsic {
     -webkit-grid-template-rows: max-content;
@@ -21,7 +22,7 @@
 <script src="../../resources/check-layout.js"></script>
 <body onload="checkLayout('.percentage');">
     <p>This test checks that percentage track breadths of intrinsic size are treated as auto.</p>
-    <div class="grid intrinsic">
+    <div class="grid intrinsic contentStart">
         <div class="grid percentage">
             <div class="sizedToGridArea" data-expected-width="50" data-expected-height="10">XXXXX</div>
         </div>
index fd65ef7..7213916 100644 (file)
@@ -4,6 +4,7 @@
 <link href="../css-intrinsic-dimensions/resources/width-keyword-classes.css" rel="stylesheet">
 <link href="../css-intrinsic-dimensions/resources/height-keyword-classes.css" rel="stylesheet">
 <link href="resources/grid.css" rel="stylesheet">
+<link href="resources/grid-alignment.css" rel="stylesheet">
 <style>
 .grid {
     -webkit-grid-template-columns: 20% 50% 30%;
@@ -87,7 +88,7 @@
     </div>
 
     <div class="fit-content indefiniteHeight">
-        <div class="grid calculatedSize">
+        <div class="grid calculatedSize justifyContentStart">
             <div class="firstRowFirstColumn sizedToGridArea" data-expected-width="20" data-expected-height="10">XX</div>
             <div class="firstRowSecondColumn sizedToGridArea" data-expected-width="50" data-expected-height="10">XXXXX</div>
             <div class="firstRowThirdColumn sizedToGridArea" data-expected-width="30" data-expected-height="10">XXX</div>
index 05d8253..796c549 100644 (file)
@@ -24,6 +24,8 @@ function checkGridTemplatesSetJSValues(useGrid, columnValue, rowValue, computedC
         element.style.display = "-webkit-grid";
         element.style.width = "800px";
         element.style.height = "600px";
+        element.style.justifyContent = "start";
+        element.style.alignContent = "start";
     }
     element.style.font = "10px Ahem"; // Used to resolve em font consistently.
     element.style.webkitGridTemplateColumns = columnValue;
index ef6b4b6..28afc3b 100644 (file)
@@ -25,6 +25,8 @@ function checkGridDefinitionsSetJSValues(useGrid, shorthandValue, computedColumn
         element.style.display = "-webkit-grid";
         element.style.width = "800px";
         element.style.height = "600px";
+        element.style.justifyContent = "start";
+        element.style.alignContent = "start";
     }
 
     element.style.font = "10px Ahem"; // Used to resolve em font consistently.
@@ -48,4 +50,4 @@ function testGridDefinitionsSetBadJSValues(shorthandValue)
     // We can't use testSetJSValues as element.style.webkitGridTemplateRows returns "".
     testGridDefinitionsValues(element, "none", "none", "none");
     document.body.removeChild(element);
-}
\ No newline at end of file
+}
index f99784e..c1c6229 100644 (file)
@@ -148,13 +148,13 @@ column-rule-style: none;
 column-rule-width: 0px;
 column-span: none;
 column-width: auto;
-align-content: start;
+align-content: normal;
 align-items: start;
 align-self: start;
 filter: none;
 flex-direction: row;
 flex-wrap: nowrap;
-justify-content: start;
+justify-content: normal;
 justify-self: start;
 justify-items: start;
 -webkit-font-kerning: auto;
index 1742169..b324843 100644 (file)
@@ -147,13 +147,13 @@ column-rule-style: none
 column-rule-width: 0px
 column-span: none
 column-width: auto
-align-content: auto
+align-content: normal
 align-items: auto
 align-self: auto
 filter: none
 flex-direction: row
 flex-wrap: nowrap
-justify-content: auto
+justify-content: normal
 justify-self: auto
 justify-items: auto
 -webkit-font-kerning: auto
index a13ef29..e7344fd 100644 (file)
@@ -294,7 +294,7 @@ rect: style.getPropertyValue(column-span) : none
 rect: style.getPropertyCSSValue(column-span) : [object CSSPrimitiveValue]
 rect: style.getPropertyValue(column-width) : auto
 rect: style.getPropertyCSSValue(column-width) : [object CSSPrimitiveValue]
-rect: style.getPropertyValue(align-content) : start
+rect: style.getPropertyValue(align-content) : normal
 rect: style.getPropertyCSSValue(align-content) : [object CSSValueList]
 rect: style.getPropertyValue(align-items) : start
 rect: style.getPropertyCSSValue(align-items) : [object CSSValueList]
@@ -306,7 +306,7 @@ rect: style.getPropertyValue(flex-direction) : row
 rect: style.getPropertyCSSValue(flex-direction) : [object CSSPrimitiveValue]
 rect: style.getPropertyValue(flex-wrap) : nowrap
 rect: style.getPropertyCSSValue(flex-wrap) : [object CSSPrimitiveValue]
-rect: style.getPropertyValue(justify-content) : start
+rect: style.getPropertyValue(justify-content) : normal
 rect: style.getPropertyCSSValue(justify-content) : [object CSSValueList]
 rect: style.getPropertyValue(justify-self) : start
 rect: style.getPropertyCSSValue(justify-self) : [object CSSValueList]
@@ -828,7 +828,7 @@ g: style.getPropertyValue(column-span) : none
 g: style.getPropertyCSSValue(column-span) : [object CSSPrimitiveValue]
 g: style.getPropertyValue(column-width) : auto
 g: style.getPropertyCSSValue(column-width) : [object CSSPrimitiveValue]
-g: style.getPropertyValue(align-content) : start
+g: style.getPropertyValue(align-content) : normal
 g: style.getPropertyCSSValue(align-content) : [object CSSValueList]
 g: style.getPropertyValue(align-items) : start
 g: style.getPropertyCSSValue(align-items) : [object CSSValueList]
@@ -840,7 +840,7 @@ g: style.getPropertyValue(flex-direction) : row
 g: style.getPropertyCSSValue(flex-direction) : [object CSSPrimitiveValue]
 g: style.getPropertyValue(flex-wrap) : nowrap
 g: style.getPropertyCSSValue(flex-wrap) : [object CSSPrimitiveValue]
-g: style.getPropertyValue(justify-content) : start
+g: style.getPropertyValue(justify-content) : normal
 g: style.getPropertyCSSValue(justify-content) : [object CSSValueList]
 g: style.getPropertyValue(justify-self) : start
 g: style.getPropertyCSSValue(justify-self) : [object CSSValueList]
index 38ff878..c990f95 100644 (file)
@@ -1,3 +1,67 @@
+2016-03-03  Javier Fernandez  <jfernandez@igalia.com>
+
+        [CSS Box Alignment] New CSS Value 'normal' for Content Alignment
+        https://bugs.webkit.org/show_bug.cgi?id=154282
+
+        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:
+
 2016-03-03  Antti Koivisto  <antti@apple.com>
 
         Slider thumb style should not depend on renderers
index 7aea6af..132e769 100644 (file)
@@ -2226,19 +2226,6 @@ static ItemPosition resolveSelfAlignmentAuto(ItemPosition position, OverflowAlig
     return resolveContainerAlignmentAuto(parent->style().alignItemsPosition(), parent);
 }
 
-static void resolveContentAlignmentAuto(ContentPosition& position, ContentDistributionType& distribution, RenderObject* element)
-{
-    if (position != ContentPositionAuto || distribution != ContentDistributionDefault || !element)
-        return;
-
-    // Even that both align-content and justify-content 'auto' values are resolved to 'stretch'
-    // in case of flexbox containers, 'stretch' value in justify-content will behave like 'flex-start'. 
-    if (element->style().isDisplayFlexibleBox())
-        distribution = ContentDistributionStretch;
-    else
-        position = ContentPositionStart;
-}
-
 RefPtr<CSSValue> CSSComputedStyleDeclaration::getPropertyCSSValue(CSSPropertyID propertyID, EUpdateLayout updateLayout) const
 {
     return ComputedStyleExtractor(m_node, m_allowVisitedStyle, m_pseudoElementSpecifier).propertyValue(propertyID, updateLayout);
@@ -2332,15 +2319,15 @@ static RefPtr<CSSValueList> valueForItemPositionWithOverflowAlignment(ItemPositi
     return result;
 }
 
-static RefPtr<CSSValueList> valueForContentPositionAndDistributionWithOverflowAlignment(ContentPosition position, ContentDistributionType distribution, OverflowAlignment overflowAlignment)
+static RefPtr<CSSValueList> valueForContentPositionAndDistributionWithOverflowAlignment(const StyleContentAlignmentData& data)
 {
     RefPtr<CSSValueList> result = CSSValueList::createSpaceSeparated();
-    if (distribution != ContentDistributionDefault)
-        result->append(CSSPrimitiveValue::create(distribution));
-    if (distribution == ContentDistributionDefault || position != ContentPositionAuto)
-        result->append(CSSPrimitiveValue::create(position));
-    if ((position >= ContentPositionCenter || distribution != ContentDistributionDefault) && overflowAlignment != OverflowAlignmentDefault)
-        result->append(CSSPrimitiveValue::create(overflowAlignment));
+    if (data.distribution() != ContentDistributionDefault)
+        result->append(CSSPrimitiveValue::create(data.distribution()));
+    if (data.distribution() == ContentDistributionDefault || data.position() != ContentPositionNormal)
+        result->append(CSSPrimitiveValue::create(data.position()));
+    if ((data.position() >= ContentPositionCenter || data.distribution() != ContentDistributionDefault) && data.overflow() != OverflowAlignmentDefault)
+        result->append(CSSPrimitiveValue::create(data.overflow()));
     ASSERT(result->length() > 0);
     ASSERT(result->length() <= 3);
     return result;
@@ -2717,12 +2704,8 @@ RefPtr<CSSValue> ComputedStyleExtractor::propertyValue(CSSPropertyID propertyID,
             return cssValuePool.createValue(style->display());
         case CSSPropertyEmptyCells:
             return cssValuePool.createValue(style->emptyCells());
-        case CSSPropertyAlignContent: {
-            ContentPosition position = style->alignContentPosition();
-            ContentDistributionType distribution = style->alignContentDistribution();
-            resolveContentAlignmentAuto(position, distribution, renderer);
-            return valueForContentPositionAndDistributionWithOverflowAlignment(position, distribution, style->alignContentOverflowAlignment());
-        }
+        case CSSPropertyAlignContent:
+            return valueForContentPositionAndDistributionWithOverflowAlignment(style->alignContent());
         case CSSPropertyAlignItems:
             return valueForItemPositionWithOverflowAlignment(resolveContainerAlignmentAuto(style->alignItemsPosition(), renderer), style->alignItemsOverflowAlignment(), NonLegacyPosition);
         case CSSPropertyAlignSelf: {
@@ -2744,12 +2727,8 @@ RefPtr<CSSValue> ComputedStyleExtractor::propertyValue(CSSPropertyID propertyID,
             return cssValuePool.createValue(style->flexShrink());
         case CSSPropertyFlexWrap:
             return cssValuePool.createValue(style->flexWrap());
-        case CSSPropertyJustifyContent: {
-            ContentPosition position = style->justifyContentPosition();
-            ContentDistributionType distribution = style->justifyContentDistribution();
-            resolveContentAlignmentAuto(position, distribution, renderer);
-            return valueForContentPositionAndDistributionWithOverflowAlignment(position, distribution, style->justifyContentOverflowAlignment());
-        }
+        case CSSPropertyJustifyContent:
+            return valueForContentPositionAndDistributionWithOverflowAlignment(style->justifyContent());
         case CSSPropertyJustifyItems:
             return valueForItemPositionWithOverflowAlignment(resolveContainerAlignmentAuto(style->justifyItemsPosition(), renderer), style->justifyItemsOverflowAlignment(), style->justifyItemsPositionType());
         case CSSPropertyJustifySelf: {
index 21cb43d..e01de56 100644 (file)
@@ -3405,18 +3405,18 @@ bool CSSParser::parseLegacyPosition(CSSPropertyID propId, bool important)
 
 RefPtr<CSSValue> CSSParser::parseContentDistributionOverflowPosition()
 {
-    // auto | <baseline-position> | <content-distribution> || [ <overflow-position>? && <content-position> ]
+    // normal | <baseline-position> | <content-distribution> || [ <overflow-position>? && <content-position> ]
     // <baseline-position> = baseline | last-baseline;
     // <content-distribution> = space-between | space-around | space-evenly | stretch;
     // <content-position> = center | start | end | flex-start | flex-end | left | right;
-    // <overflow-position> = true | safe
+    // <overflow-position> = unsafe | safe
 
     CSSParserValue* value = m_valueList->current();
     if (!value)
         return nullptr;
 
     // auto | <baseline-position>
-    if (value->id == CSSValueAuto || isBaselinePositionKeyword(value->id)) {
+    if (value->id == CSSValueNormal || isBaselinePositionKeyword(value->id)) {
         m_valueList->next();
         return CSSContentDistributionValue::create(CSSValueInvalid, value->id, CSSValueInvalid);
     }
index f7ebbcd..a9b4893 100644 (file)
@@ -5231,8 +5231,8 @@ template<> inline CSSPrimitiveValue::CSSPrimitiveValue(ContentPosition contentPo
 {
     m_primitiveUnitType = CSS_VALUE_ID;
     switch (contentPosition) {
-    case ContentPositionAuto:
-        m_value.valueID = CSSValueAuto;
+    case ContentPositionNormal:
+        m_value.valueID = CSSValueNormal;
         break;
     case ContentPositionBaseline:
         m_value.valueID = CSSValueBaseline;
@@ -5267,8 +5267,8 @@ template<> inline CSSPrimitiveValue::CSSPrimitiveValue(ContentPosition contentPo
 template<> inline CSSPrimitiveValue::operator ContentPosition() const
 {
     switch (m_value.valueID) {
-    case CSSValueAuto:
-        return ContentPositionAuto;
+    case CSSValueNormal:
+        return ContentPositionNormal;
     case CSSValueBaseline:
         return ContentPositionBaseline;
     case CSSValueLastBaseline:
@@ -5291,7 +5291,7 @@ template<> inline CSSPrimitiveValue::operator ContentPosition() const
         break;
     }
     ASSERT_NOT_REACHED();
-    return ContentPositionAuto;
+    return ContentPositionNormal;
 }
 
 template<> inline CSSPrimitiveValue::CSSPrimitiveValue(ContentDistributionType contentDistribution)
index 98e9f2d..7b44a4f 100644 (file)
@@ -1092,12 +1092,22 @@ EOverflow RenderFlexibleBox::mainAxisOverflowForChild(RenderBox& child) const
     return child.style().overflowY();
 }
 
+static const StyleContentAlignmentData& normalValueBehavior()
+{
+    // The justify-content property applies along the main axis, but since flexing
+    // in the main axis is controlled by flex, stretch behaves as flex-start (ignoring
+    // the specified fallback alignment, if any).
+    // https://drafts.csswg.org/css-align/#distribution-flex
+    static const StyleContentAlignmentData normalBehavior = {ContentPositionNormal, ContentDistributionStretch};
+    return normalBehavior;
+}
+
 void RenderFlexibleBox::layoutAndPlaceChildren(LayoutUnit& crossAxisOffset, const OrderedFlexItemList& children, const Vector<LayoutUnit>& childSizes, LayoutUnit availableFreeSpace, bool relayoutChildren, Vector<LineContext>& lineContexts)
 {
     ASSERT(childSizes.size() == children.size());
 
-    ContentPosition position = style().resolvedJustifyContentPosition();
-    ContentDistributionType distribution = style().resolvedJustifyContentDistribution();
+    ContentPosition position = style().resolvedJustifyContentPosition(normalValueBehavior());
+    ContentDistributionType distribution = style().resolvedJustifyContentDistribution(normalValueBehavior());
 
     size_t numberOfChildrenForJustifyContent = numberOfInFlowPositionedChildren(children);
     LayoutUnit autoMarginOffset = autoMarginOffsetInMainAxis(children, availableFreeSpace);
@@ -1180,8 +1190,8 @@ void RenderFlexibleBox::layoutAndPlaceChildren(LayoutUnit& crossAxisOffset, cons
 
 void RenderFlexibleBox::layoutColumnReverse(const OrderedFlexItemList& children, LayoutUnit crossAxisOffset, LayoutUnit availableFreeSpace)
 {
-    ContentPosition position = style().resolvedJustifyContentPosition();
-    ContentDistributionType distribution = style().resolvedJustifyContentDistribution();
+    ContentPosition position = style().resolvedJustifyContentPosition(normalValueBehavior());
+    ContentDistributionType distribution = style().resolvedJustifyContentDistribution(normalValueBehavior());
 
     // This is similar to the logic in layoutAndPlaceChildren, except we place the children
     // starting from the end of the flexbox. We also don't need to layout anything since we're
@@ -1238,8 +1248,8 @@ static LayoutUnit alignContentSpaceBetweenChildren(LayoutUnit availableFreeSpace
 
 void RenderFlexibleBox::alignFlexLines(Vector<LineContext>& lineContexts)
 {
-    ContentPosition position = style().resolvedAlignContentPosition();
-    ContentDistributionType distribution = style().resolvedAlignContentDistribution();
+    ContentPosition position = style().resolvedAlignContentPosition(normalValueBehavior());
+    ContentDistributionType distribution = style().resolvedAlignContentDistribution(normalValueBehavior());
 
     if (!isMultiline() || position == ContentPositionFlexStart)
         return;
index f4b7659..5f524c2 100644 (file)
@@ -1354,13 +1354,19 @@ void RenderGrid::clearGrid()
     m_gridItemCoordinate.clear();
 }
 
+static const StyleContentAlignmentData& normalValueBehavior()
+{
+    static const StyleContentAlignmentData normalBehavior = {ContentPositionNormal, ContentDistributionStretch};
+    return normalBehavior;
+}
+
 void RenderGrid::applyStretchAlignmentToTracksIfNeeded(GridTrackSizingDirection direction, GridSizingData& sizingData)
 {
     Optional<LayoutUnit> freeSpace = sizingData.freeSpaceForDirection(direction);
     if (!freeSpace
         || freeSpace.value() <= 0
-        || (direction == ForColumns && style().resolvedJustifyContentDistribution() != ContentDistributionStretch)
-        || (direction == ForRows && style().resolvedAlignContentDistribution() != ContentDistributionStretch))
+        || (direction == ForColumns && style().resolvedJustifyContentDistribution(normalValueBehavior()) != ContentDistributionStretch)
+        || (direction == ForRows && style().resolvedAlignContentDistribution(normalValueBehavior()) != ContentDistributionStretch))
         return;
 
     // Spec defines auto-sized tracks as the ones with an 'auto' max-sizing function.
@@ -1856,7 +1862,7 @@ LayoutUnit RenderGrid::columnAxisOffsetForChild(const RenderBox& child) const
         LayoutUnit childBreadth = child.logicalHeight() + child.marginLogicalHeight();
         // In order to properly adjust the Self Alignment values we need to consider the offset between tracks.
         if (childEndLine - childStartLine > 1 && childEndLine < m_rowPositions.size() - 1)
-            endOfRow -= offsetBetweenTracks(style().resolvedAlignContentDistribution(), m_rowPositions, childBreadth);
+            endOfRow -= offsetBetweenTracks(style().resolvedAlignContentDistribution(normalValueBehavior()), m_rowPositions, childBreadth);
         LayoutUnit offsetFromStartPosition = computeOverflowAlignmentOffset(RenderStyle::resolveAlignmentOverflow(style(), child.style()), endOfRow - startOfRow, childBreadth);
         return startPosition + (axisPosition == GridAxisEnd ? offsetFromStartPosition : offsetFromStartPosition / 2);
     }
@@ -1890,7 +1896,7 @@ LayoutUnit RenderGrid::rowAxisOffsetForChild(const RenderBox& child) const
         LayoutUnit childBreadth = child.logicalWidth() + child.marginLogicalWidth();
         // In order to properly adjust the Self Alignment values we need to consider the offset between tracks.
         if (childEndLine - childStartLine > 1 && childEndLine < m_columnPositions.size() - 1)
-            endOfColumn -= offsetBetweenTracks(style().resolvedJustifyContentDistribution(), m_columnPositions, childBreadth);
+            endOfColumn -= offsetBetweenTracks(style().resolvedJustifyContentDistribution(normalValueBehavior()), m_columnPositions, childBreadth);
         LayoutUnit offsetFromStartPosition = computeOverflowAlignmentOffset(RenderStyle::resolveJustificationOverflow(style(), child.style()), endOfColumn - startOfColumn, childBreadth);
         return startPosition + (axisPosition == GridAxisEnd ? offsetFromStartPosition : offsetFromStartPosition / 2);
     }
@@ -1912,26 +1918,16 @@ ContentPosition static resolveContentDistributionFallback(ContentDistributionTyp
     case ContentDistributionStretch:
         return ContentPositionStart;
     case ContentDistributionDefault:
-        return ContentPositionAuto;
+        return ContentPositionNormal;
     }
 
     ASSERT_NOT_REACHED();
-    return ContentPositionAuto;
-}
-
-static inline LayoutUnit offsetToStartEdge(bool isLeftToRight, LayoutUnit availableSpace)
-{
-    return isLeftToRight ? LayoutUnit() : availableSpace;
-}
-
-static inline LayoutUnit offsetToEndEdge(bool isLeftToRight, LayoutUnit availableSpace)
-{
-    return !isLeftToRight ? LayoutUnit() : availableSpace;
+    return ContentPositionNormal;
 }
 
 static ContentAlignmentData contentDistributionOffset(const LayoutUnit& availableFreeSpace, ContentPosition& fallbackPosition, ContentDistributionType distribution, unsigned numberOfGridTracks)
 {
-    if (distribution != ContentDistributionDefault && fallbackPosition == ContentPositionAuto)
+    if (distribution != ContentDistributionDefault && fallbackPosition == ContentPositionNormal)
         fallbackPosition = resolveContentDistributionFallback(distribution);
 
     if (availableFreeSpace <= 0)
@@ -1952,7 +1948,6 @@ static ContentAlignmentData contentDistributionOffset(const LayoutUnit& availabl
         distributionOffset = availableFreeSpace / (numberOfGridTracks + 1);
         return {distributionOffset, distributionOffset};
     case ContentDistributionStretch:
-        return {0, 0};
     case ContentDistributionDefault:
         return ContentAlignmentData::defaultOffsets();
     }
@@ -1964,8 +1959,8 @@ static ContentAlignmentData contentDistributionOffset(const LayoutUnit& availabl
 ContentAlignmentData RenderGrid::computeContentPositionAndDistributionOffset(GridTrackSizingDirection direction, const LayoutUnit& availableFreeSpace, unsigned numberOfGridTracks) const
 {
     bool isRowAxis = direction == ForColumns;
-    ContentPosition position = isRowAxis ? style().resolvedJustifyContentPosition() : style().resolvedAlignContentPosition();
-    ContentDistributionType distribution = isRowAxis ? style().resolvedJustifyContentDistribution() : style().resolvedAlignContentDistribution();
+    ContentPosition position = isRowAxis ? style().resolvedJustifyContentPosition(normalValueBehavior()) : style().resolvedAlignContentPosition(normalValueBehavior());
+    ContentDistributionType distribution = isRowAxis ? style().resolvedJustifyContentDistribution(normalValueBehavior()) : style().resolvedAlignContentDistribution(normalValueBehavior());
     // If <content-distribution> value can't be applied, 'position' will become the associated
     // <content-position> fallback value.
     ContentAlignmentData contentAlignment = contentDistributionOffset(availableFreeSpace, position, distribution, numberOfGridTracks);
@@ -1990,21 +1985,21 @@ ContentAlignmentData RenderGrid::computeContentPositionAndDistributionOffset(Gri
     case ContentPositionFlexEnd: // Only used in flex layout, for other layout, it's equivalent to 'end'.
     case ContentPositionEnd:
         if (isRowAxis)
-            return {offsetToEndEdge(style().isLeftToRightDirection(), availableFreeSpace), 0};
+            return {style().isLeftToRightDirection() ? availableFreeSpace : LayoutUnit(), LayoutUnit()};
         return {availableFreeSpace, 0};
     case ContentPositionFlexStart: // Only used in flex layout, for other layout, it's equivalent to 'start'.
     case ContentPositionStart:
         if (isRowAxis)
-            return {offsetToStartEdge(style().isLeftToRightDirection(), availableFreeSpace), 0};
+            return {style().isLeftToRightDirection() ? LayoutUnit() : availableFreeSpace, LayoutUnit()};
         return {0, 0};
     case ContentPositionBaseline:
     case ContentPositionLastBaseline:
         // FIXME: Implement the previous values. For now, we always 'start' align.
         // http://webkit.org/b/145566
         if (isRowAxis)
-            return {offsetToStartEdge(style().isLeftToRightDirection(), availableFreeSpace), 0};
+            return {style().isLeftToRightDirection() ? LayoutUnit() : availableFreeSpace, LayoutUnit()};
         return {0, 0};
-    case ContentPositionAuto:
+    case ContentPositionNormal:
         break;
     }
 
index 8255ec7..978fe61 100644 (file)
@@ -210,36 +210,34 @@ OverflowAlignment RenderStyle::resolveJustificationOverflow(const RenderStyle& p
     return resolveJustificationData(parentStyle, childStyle, ItemPositionStretch).overflow();
 }
 
-ContentPosition RenderStyle::resolvedAlignContentPosition() const
+static inline ContentPosition resolvedContentAlignmentPosition(const StyleContentAlignmentData& value, const StyleContentAlignmentData& normalValueBehavior)
 {
-    const StyleContentAlignmentData& align = alignContent();
-    if (align.position() != ContentPositionAuto || align.distribution() != ContentDistributionDefault)
-        return align.position();
-    // 'auto' computes to 'stretch' for flexbox, hence it's managed by distribution().
-    return isDisplayFlexibleBox() ? ContentPositionAuto : ContentPositionStart;
+    return (value.position() == ContentPositionNormal && value.distribution() == ContentDistributionDefault) ? normalValueBehavior.position() : value.position();
 }
 
-ContentDistributionType RenderStyle::resolvedAlignContentDistribution() const
+static inline ContentDistributionType resolvedContentAlignmentDistribution(const StyleContentAlignmentData& value, const StyleContentAlignmentData& normalValueBehavior)
 {
-    const StyleContentAlignmentData& align = alignContent();
-    if (align.position() != ContentPositionAuto || align.distribution() != ContentDistributionDefault)
-        return align.distribution();
-    return isDisplayFlexibleBox() ? ContentDistributionStretch : ContentDistributionDefault;
+    return (value.position() == ContentPositionNormal && value.distribution() == ContentDistributionDefault) ? normalValueBehavior.distribution() : value.distribution();
 }
 
-ContentPosition RenderStyle::resolvedJustifyContentPosition() const
+ContentPosition RenderStyle::resolvedJustifyContentPosition(const StyleContentAlignmentData& normalValueBehavior) const
 {
-    const StyleContentAlignmentData& justify = justifyContent();
-    if (justify.position() != ContentPositionAuto || justify.distribution() != ContentDistributionDefault)
-        return justify.position();
-    // 'auto' computes to 'stretch' for flexbox, but since flexing in the main axis is controlled by flex, it behaves as flex-start.
-    return isDisplayFlexibleBox() ? ContentPositionFlexStart : ContentPositionStart;
+    return resolvedContentAlignmentPosition(justifyContent(), normalValueBehavior);
 }
 
-ContentDistributionType RenderStyle::resolvedJustifyContentDistribution() const
+ContentDistributionType RenderStyle::resolvedJustifyContentDistribution(const StyleContentAlignmentData& normalValueBehavior) const
 {
-    // even that 'auto' computes to 'stretch' for flexbox it behaves as flex-start, hence it's managed by position().
-    return justifyContentDistribution();
+    return resolvedContentAlignmentDistribution(justifyContent(), normalValueBehavior);
+}
+
+ContentPosition RenderStyle::resolvedAlignContentPosition(const StyleContentAlignmentData& normalValueBehavior) const
+{
+    return resolvedContentAlignmentPosition(alignContent(), normalValueBehavior);
+}
+
+ContentDistributionType RenderStyle::resolvedAlignContentDistribution(const StyleContentAlignmentData& normalValueBehavior) const
+{
+    return resolvedContentAlignmentDistribution(alignContent(), normalValueBehavior);
 }
 
 void RenderStyle::inheritFrom(const RenderStyle* inheritParent, IsAtShadowBoundary isAtShadowBoundary)
index f542608..465e780 100644 (file)
@@ -481,10 +481,10 @@ public:
     // Create a RenderStyle for generated content by inheriting from a pseudo style.
     static Ref<RenderStyle> createStyleInheritingFromPseudoStyle(const RenderStyle& pseudoStyle);
 
-    ContentPosition resolvedAlignContentPosition() const;
-    ContentDistributionType resolvedAlignContentDistribution() const;
-    ContentPosition resolvedJustifyContentPosition() const;
-    ContentDistributionType resolvedJustifyContentDistribution() const;
+    ContentPosition resolvedJustifyContentPosition(const StyleContentAlignmentData& normalValueBehavior) const;
+    ContentDistributionType resolvedJustifyContentDistribution(const StyleContentAlignmentData& normalValueBehavior) const;
+    ContentPosition resolvedAlignContentPosition(const StyleContentAlignmentData& normalValueBehavior) const;
+    ContentDistributionType resolvedAlignContentDistribution(const StyleContentAlignmentData& normalValueBehavior) const;
     static ItemPosition resolveAlignment(const RenderStyle& parentStyle, const RenderStyle& childStyle, ItemPosition resolvedAutoPositionForRenderer);
     static OverflowAlignment resolveAlignmentOverflow(const RenderStyle& parentStyle, const RenderStyle& childStyle);
     static ItemPosition resolveJustification(const RenderStyle& parentStyle, const RenderStyle& childStyle, ItemPosition resolvedAutoPositionForRenderer);
@@ -1958,7 +1958,7 @@ public:
     static Length initialFlexBasis() { return Length(Auto); }
     static int initialOrder() { return 0; }
     static StyleSelfAlignmentData initialSelfAlignment() { return StyleSelfAlignmentData(ItemPositionAuto, OverflowAlignmentDefault); }
-    static StyleContentAlignmentData initialContentAlignment() { return StyleContentAlignmentData(ContentPositionAuto, ContentDistributionDefault, OverflowAlignmentDefault); }
+    static StyleContentAlignmentData initialContentAlignment() { return StyleContentAlignmentData(ContentPositionNormal, ContentDistributionDefault, OverflowAlignmentDefault); }
     static EFlexDirection initialFlexDirection() { return FlowRow; }
     static EFlexWrap initialFlexWrap() { return FlexNoWrap; }
     static int initialMarqueeLoopCount() { return -1; }
index 492f78c..85de7bd 100644 (file)
@@ -257,7 +257,7 @@ enum EFlexWrap { FlexNoWrap, FlexWrap, FlexWrapReverse };
 enum ItemPosition {ItemPositionAuto, ItemPositionStretch, ItemPositionBaseline, ItemPositionLastBaseline, ItemPositionCenter, ItemPositionStart, ItemPositionEnd, ItemPositionSelfStart, ItemPositionSelfEnd, ItemPositionFlexStart, ItemPositionFlexEnd, ItemPositionLeft, ItemPositionRight};
 enum OverflowAlignment {OverflowAlignmentDefault, OverflowAlignmentUnsafe, OverflowAlignmentSafe};
 enum ItemPositionType {NonLegacyPosition, LegacyPosition};
-enum ContentPosition {ContentPositionAuto, ContentPositionBaseline, ContentPositionLastBaseline, ContentPositionCenter, ContentPositionStart, ContentPositionEnd, ContentPositionFlexStart, ContentPositionFlexEnd, ContentPositionLeft, ContentPositionRight};
+enum ContentPosition {ContentPositionNormal, ContentPositionBaseline, ContentPositionLastBaseline, ContentPositionCenter, ContentPositionStart, ContentPositionEnd, ContentPositionFlexStart, ContentPositionFlexEnd, ContentPositionLeft, ContentPositionRight};
 enum ContentDistributionType {ContentDistributionDefault, ContentDistributionSpaceBetween, ContentDistributionSpaceAround, ContentDistributionSpaceEvenly, ContentDistributionStretch};
 
 enum ETextSecurity {