[css-align][css-flex][css-grid] 'auto' values of align-self and justify-self must...
authorjfernandez@igalia.com <jfernandez@igalia.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Mon, 10 Jul 2017 23:56:21 +0000 (23:56 +0000)
committerjfernandez@igalia.com <jfernandez@igalia.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Mon, 10 Jul 2017 23:56:21 +0000 (23:56 +0000)
https://bugs.webkit.org/show_bug.cgi?id=172707

Reviewed by Antti Koivisto.

LayoutTests/imported/w3c:

This change makes all the cases of the test below to pass now, hence updated expectations accordingly.

* web-platform-tests/css/css-align-3/self-alignment/place-self-shorthand-006-expected.txt:

Source/WebCore:

The CSS Box Alignment specification has been changed recently so that
now all the propeties have the specificed value as computed value. The
rationale of this change are at the associated W3C github issue [1].

This change implies that we don't need to execute the StyleAdjuter
logic we implemented specifically for supporting 'auto' values
resolution for computed style. We can live now with resolution at
layout time only.

[1] https://github.com/w3c/csswg-drafts/issues/440

No new tests, just updating the already defined tests.

* css/CSSComputedStyleDeclaration.cpp:
(WebCore::ComputedStyleExtractor::propertyValue):
* css/StyleResolver.cpp:
(WebCore::StyleResolver::adjustRenderStyle): Removed
* css/StyleResolver.h:
* html/shadow/TextControlInnerElements.cpp:
(WebCore::TextControlInnerElement::resolveCustomStyle):
* rendering/RenderBox.cpp:
(WebCore::RenderBox::columnFlexItemHasStretchAlignment):
(WebCore::RenderBox::hasStretchedLogicalWidth):
* rendering/RenderFlexibleBox.cpp:
(WebCore::RenderFlexibleBox::styleDidChange): Added
(WebCore::RenderFlexibleBox::alignmentForChild):
* rendering/RenderFlexibleBox.h:

LayoutTests:

Updated layout tests so that resolved value is as specified, even for 'auto' values.

* TestExpectations:
* css3/flexbox/css-properties-expected.txt:
* css3/flexbox/css-properties.html:
* css3/flexbox/new-alignment-values-invalid-if-grid-not-enabled-expected.txt:
* css3/flexbox/new-alignment-values-invalid-if-grid-not-enabled.html:
* css3/parse-align-self.html:
* css3/parse-alignment-of-root-elements-expected.txt:
* css3/parse-alignment-of-root-elements.html:
* css3/parse-place-items.html:
* css3/parse-place-self.html:
* fast/css/ensure-flexbox-compatibility-with-initial-values-expected.txt:
* fast/css/parse-justify-self.html:

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

31 files changed:
LayoutTests/ChangeLog
LayoutTests/TestExpectations
LayoutTests/css3/flexbox/css-properties-expected.txt
LayoutTests/css3/flexbox/css-properties.html
LayoutTests/css3/flexbox/new-alignment-values-invalid-if-grid-not-enabled-expected.txt
LayoutTests/css3/flexbox/new-alignment-values-invalid-if-grid-not-enabled.html
LayoutTests/css3/parse-align-self.html
LayoutTests/css3/parse-alignment-of-root-elements-expected.txt
LayoutTests/css3/parse-alignment-of-root-elements.html
LayoutTests/css3/parse-place-items.html
LayoutTests/css3/parse-place-self.html
LayoutTests/fast/css/ensure-flexbox-compatibility-with-initial-values-expected.txt
LayoutTests/fast/css/getComputedStyle/computed-style-expected.txt
LayoutTests/fast/css/getComputedStyle/computed-style-without-renderer-expected.txt
LayoutTests/fast/css/parse-justify-self.html
LayoutTests/fast/repaint/align-items-change-expected.txt
LayoutTests/fast/repaint/align-items-overflow-change-expected.txt
LayoutTests/fast/repaint/justify-items-overflow-change-expected.txt
LayoutTests/imported/w3c/ChangeLog
LayoutTests/imported/w3c/web-platform-tests/css/css-align-3/self-alignment/place-self-shorthand-006-expected.txt
LayoutTests/svg/css/getComputedStyle-basic-expected.txt
Source/WebCore/ChangeLog
Source/WebCore/css/CSSComputedStyleDeclaration.cpp
Source/WebCore/css/StyleResolver.cpp
Source/WebCore/css/StyleResolver.h
Source/WebCore/html/shadow/TextControlInnerElements.cpp
Source/WebCore/rendering/RenderBox.cpp
Source/WebCore/rendering/RenderFlexibleBox.cpp
Source/WebCore/rendering/RenderFlexibleBox.h
Source/WebCore/rendering/RenderGrid.cpp
Source/WebCore/rendering/RenderGrid.h

index 4f30898..25f3ec4 100644 (file)
@@ -1,3 +1,25 @@
+2017-07-10  Javier Fernandez  <jfernandez@igalia.com>
+
+        [css-align][css-flex][css-grid] 'auto' values of align-self and justify-self must not be resolved
+        https://bugs.webkit.org/show_bug.cgi?id=172707
+
+        Reviewed by Antti Koivisto.
+
+        Updated layout tests so that resolved value is as specified, even for 'auto' values.
+
+        * TestExpectations:
+        * css3/flexbox/css-properties-expected.txt:
+        * css3/flexbox/css-properties.html:
+        * css3/flexbox/new-alignment-values-invalid-if-grid-not-enabled-expected.txt:
+        * css3/flexbox/new-alignment-values-invalid-if-grid-not-enabled.html:
+        * css3/parse-align-self.html:
+        * css3/parse-alignment-of-root-elements-expected.txt:
+        * css3/parse-alignment-of-root-elements.html:
+        * css3/parse-place-items.html:
+        * css3/parse-place-self.html:
+        * fast/css/ensure-flexbox-compatibility-with-initial-values-expected.txt:
+        * fast/css/parse-justify-self.html:
+
 2017-07-10  Myles C. Maxfield  <mmaxfield@apple.com>
 
         fast/text/trak-optimizeLegibility.html is failing on macOS High Sierra
index 6031b2f..1aa6d2b 100644 (file)
@@ -296,6 +296,9 @@ imported/w3c/web-platform-tests/IndexedDB/clone-before-keypath-eval.html [ Pass
 imported/w3c/web-platform-tests/IndexedDB/bindings-inject-key.html [ Pass Failure ]
 imported/w3c/web-platform-tests/fetch/dangling-markup-mitigation.tentative.html [ Pass Failure ]
 
+# css alignment tests
+webkit.org/b/172711 css3/parse-alignment-of-root-elements.html [ Failure ]
+
 # selectors4
 webkit.org/b/64861 imported/w3c/web-platform-tests/css/selectors4/selectors-dir-selector-ltr-001.html [ ImageOnlyFailure ]
 webkit.org/b/64861 imported/w3c/web-platform-tests/css/selectors4/selectors-dir-selector-rtl-001.html [ ImageOnlyFailure ]
index 9880226..367da9a 100644 (file)
@@ -31,12 +31,12 @@ PASS window.getComputedStyle(flexbox, null).justifyContent is "space-evenly"
 PASS flexbox.style.justifyContent is ""
 PASS window.getComputedStyle(flexbox, null).justifyContent is "normal"
 PASS flexbox.style.alignSelf is ""
-PASS window.getComputedStyle(flexbox, null).alignSelf is "normal"
-PASS window.getComputedStyle(document.documentElement, null).alignSelf is "normal"
+PASS window.getComputedStyle(flexbox, null).alignSelf is "auto"
+PASS window.getComputedStyle(document.documentElement, null).alignSelf is "auto"
 PASS flexbox.style.alignSelf is ""
-PASS window.getComputedStyle(flexbox, null).alignSelf is "normal"
+PASS window.getComputedStyle(flexbox, null).alignSelf is "auto"
 PASS flexbox.style.alignSelf is "auto"
-PASS window.getComputedStyle(flexbox, null).alignSelf is "normal"
+PASS window.getComputedStyle(flexbox, null).alignSelf is "auto"
 PASS flexbox.style.alignSelf is "flex-start"
 PASS window.getComputedStyle(flexbox, null).alignSelf is "flex-start"
 PASS flexbox.style.alignSelf is "flex-end"
@@ -48,41 +48,41 @@ PASS window.getComputedStyle(flexbox, null).alignSelf is "stretch"
 PASS flexbox.style.alignSelf is "baseline"
 PASS window.getComputedStyle(flexbox, null).alignSelf is "baseline"
 PASS flexbox.style.alignSelf is ""
-PASS window.getComputedStyle(flexbox, null).alignSelf is "normal"
+PASS window.getComputedStyle(flexbox, null).alignSelf is "auto"
 PASS flexbox.style.alignItems is ""
 PASS flexitem.style.alignSelf is ""
 PASS window.getComputedStyle(flexbox, null).alignItems is "normal"
-PASS window.getComputedStyle(flexitem, null).alignSelf is "normal"
+PASS window.getComputedStyle(flexitem, null).alignSelf is "auto"
 PASS flexbox.style.alignItems is ""
 PASS flexitem.style.alignSelf is ""
 PASS window.getComputedStyle(flexbox, null).alignItems is "normal"
-PASS window.getComputedStyle(flexitem, null).alignSelf is "normal"
+PASS window.getComputedStyle(flexitem, null).alignSelf is "auto"
 PASS flexbox.style.alignItems is ""
 PASS flexitem.style.alignSelf is ""
 PASS window.getComputedStyle(flexbox, null).alignItems is "normal"
-PASS window.getComputedStyle(flexitem, null).alignSelf is "normal"
+PASS window.getComputedStyle(flexitem, null).alignSelf is "auto"
 PASS flexbox.style.alignItems is "flex-start"
 PASS flexitem.style.alignSelf is ""
 PASS window.getComputedStyle(flexbox, null).alignItems is "flex-start"
-PASS window.getComputedStyle(flexitem, null).alignSelf is "flex-start"
+PASS window.getComputedStyle(flexitem, null).alignSelf is "auto"
 PASS flexbox.style.alignItems is "flex-end"
 PASS window.getComputedStyle(flexbox, null).alignItems is "flex-end"
-PASS window.getComputedStyle(flexitem, null).alignSelf is "flex-end"
+PASS window.getComputedStyle(flexitem, null).alignSelf is "auto"
 PASS flexbox.style.alignItems is "center"
 PASS window.getComputedStyle(flexbox, null).alignItems is "center"
-PASS window.getComputedStyle(flexitem, null).alignSelf is "center"
+PASS window.getComputedStyle(flexitem, null).alignSelf is "auto"
 PASS flexbox.style.alignItems is "stretch"
 PASS window.getComputedStyle(flexbox, null).alignItems is "stretch"
-PASS window.getComputedStyle(flexitem, null).alignSelf is "stretch"
+PASS window.getComputedStyle(flexitem, null).alignSelf is "auto"
 PASS flexbox.style.alignItems is "baseline"
 PASS window.getComputedStyle(flexbox, null).alignItems is "baseline"
-PASS window.getComputedStyle(flexitem, null).alignSelf is "baseline"
+PASS window.getComputedStyle(flexitem, null).alignSelf is "auto"
 PASS flexbox.style.alignItems is ""
 PASS window.getComputedStyle(flexbox, null).alignItems is "normal"
-PASS window.getComputedStyle(flexitem, null).alignSelf is "normal"
+PASS window.getComputedStyle(flexitem, null).alignSelf is "auto"
 PASS flexbox.style.alignItems is ""
 PASS window.getComputedStyle(flexbox, null).alignItems is "normal"
-PASS window.getComputedStyle(flexitem, null).alignSelf is "normal"
+PASS window.getComputedStyle(flexitem, null).alignSelf is "auto"
 PASS window.getComputedStyle(detachedFlexbox, null).alignSelf is ""
 PASS window.getComputedStyle(detachedFlexItem, null).alignSelf is ""
 PASS flexbox.style.flexDirection is ""
index b95bb5a..28d8449 100644 (file)
@@ -84,17 +84,17 @@ shouldBeEqualToString('flexbox.style.justifyContent', '');
 shouldBeEqualToString('window.getComputedStyle(flexbox, null).justifyContent', 'normal');
 
 shouldBeEqualToString('flexbox.style.alignSelf', '');
-// The initial value is 'auto', which will be resolved depending on parent's style (except for the 'document' element).
-shouldBeEqualToString('window.getComputedStyle(flexbox, null).alignSelf', 'normal');
-shouldBeEqualToString('window.getComputedStyle(document.documentElement, null).alignSelf', 'normal');
+// The initial value is 'auto'.
+shouldBeEqualToString('window.getComputedStyle(flexbox, null).alignSelf', 'auto');
+shouldBeEqualToString('window.getComputedStyle(document.documentElement, null).alignSelf', 'auto');
 
 flexbox.style.alignSelf = 'foo';
 shouldBeEqualToString('flexbox.style.alignSelf', '');
-shouldBeEqualToString('window.getComputedStyle(flexbox, null).alignSelf', 'normal');
+shouldBeEqualToString('window.getComputedStyle(flexbox, null).alignSelf', 'auto');
 
 flexbox.style.alignSelf = 'auto';
 shouldBeEqualToString('flexbox.style.alignSelf', 'auto');
-shouldBeEqualToString('window.getComputedStyle(flexbox, null).alignSelf', 'normal');
+shouldBeEqualToString('window.getComputedStyle(flexbox, null).alignSelf', 'auto');
 
 flexbox.style.alignSelf = 'flex-start';
 shouldBeEqualToString('flexbox.style.alignSelf', 'flex-start');
@@ -118,62 +118,62 @@ shouldBeEqualToString('window.getComputedStyle(flexbox, null).alignSelf', 'basel
 
 flexbox.style.alignSelf = '';
 shouldBeEqualToString('flexbox.style.alignSelf', '');
-shouldBeEqualToString('window.getComputedStyle(flexbox, null).alignSelf', 'normal');
+shouldBeEqualToString('window.getComputedStyle(flexbox, null).alignSelf', 'auto');
 
 shouldBeEqualToString('flexbox.style.alignItems', '');
 shouldBeEqualToString('flexitem.style.alignSelf', '');
-// The initial value is 'auto', which will be resolved to 'normal' in case of flexbox containers.
+// The initial value is 'auto'.
 shouldBeEqualToString('window.getComputedStyle(flexbox, null).alignItems', 'normal');
-shouldBeEqualToString('window.getComputedStyle(flexitem, null).alignSelf', 'normal');
+shouldBeEqualToString('window.getComputedStyle(flexitem, null).alignSelf', 'auto');
 
 flexbox.style.alignItems = 'foo';
 shouldBeEqualToString('flexbox.style.alignItems', '');
 shouldBeEqualToString('flexitem.style.alignSelf', '');
 shouldBeEqualToString('window.getComputedStyle(flexbox, null).alignItems', 'normal');
-shouldBeEqualToString('window.getComputedStyle(flexitem, null).alignSelf', 'normal');
+shouldBeEqualToString('window.getComputedStyle(flexitem, null).alignSelf', 'auto');
 
 // The 'auto' value is not valid for the align-items property.
 flexbox.style.alignItems = 'auto';
 shouldBeEqualToString('flexbox.style.alignItems', '');
 shouldBeEqualToString('flexitem.style.alignSelf', '');
 shouldBeEqualToString('window.getComputedStyle(flexbox, null).alignItems', 'normal');
-shouldBeEqualToString('window.getComputedStyle(flexitem, null).alignSelf', 'normal');
+shouldBeEqualToString('window.getComputedStyle(flexitem, null).alignSelf', 'auto');
 
 flexbox.style.alignItems = 'flex-start';
 shouldBeEqualToString('flexbox.style.alignItems', 'flex-start');
 shouldBeEqualToString('flexitem.style.alignSelf', '');
 shouldBeEqualToString('window.getComputedStyle(flexbox, null).alignItems', 'flex-start');
-shouldBeEqualToString('window.getComputedStyle(flexitem, null).alignSelf', 'flex-start');
+shouldBeEqualToString('window.getComputedStyle(flexitem, null).alignSelf', 'auto');
 
 flexbox.style.alignItems = 'flex-end';
 shouldBeEqualToString('flexbox.style.alignItems', 'flex-end');
 shouldBeEqualToString('window.getComputedStyle(flexbox, null).alignItems', 'flex-end');
-shouldBeEqualToString('window.getComputedStyle(flexitem, null).alignSelf', 'flex-end');
+shouldBeEqualToString('window.getComputedStyle(flexitem, null).alignSelf', 'auto');
 
 flexbox.style.alignItems = 'center';
 shouldBeEqualToString('flexbox.style.alignItems', 'center');
 shouldBeEqualToString('window.getComputedStyle(flexbox, null).alignItems', 'center');
-shouldBeEqualToString('window.getComputedStyle(flexitem, null).alignSelf', 'center');
+shouldBeEqualToString('window.getComputedStyle(flexitem, null).alignSelf', 'auto');
 
 flexbox.style.alignItems = 'stretch';
 shouldBeEqualToString('flexbox.style.alignItems', 'stretch');
 shouldBeEqualToString('window.getComputedStyle(flexbox, null).alignItems', 'stretch');
-shouldBeEqualToString('window.getComputedStyle(flexitem, null).alignSelf', 'stretch');
+shouldBeEqualToString('window.getComputedStyle(flexitem, null).alignSelf', 'auto');
 
 flexbox.style.alignItems = 'baseline';
 shouldBeEqualToString('flexbox.style.alignItems', 'baseline');
 shouldBeEqualToString('window.getComputedStyle(flexbox, null).alignItems', 'baseline');
-shouldBeEqualToString('window.getComputedStyle(flexitem, null).alignSelf', 'baseline');
+shouldBeEqualToString('window.getComputedStyle(flexitem, null).alignSelf', 'auto');
 
 flexbox.style.alignItems = '';
 shouldBeEqualToString('flexbox.style.alignItems', '');
 shouldBeEqualToString('window.getComputedStyle(flexbox, null).alignItems', 'normal');
-shouldBeEqualToString('window.getComputedStyle(flexitem, null).alignSelf', 'normal');
+shouldBeEqualToString('window.getComputedStyle(flexitem, null).alignSelf', 'auto');
 
 flexbox.style.display = 'none';
 shouldBeEqualToString('flexbox.style.alignItems', '');
 shouldBeEqualToString('window.getComputedStyle(flexbox, null).alignItems', 'normal');
-shouldBeEqualToString('window.getComputedStyle(flexitem, null).alignSelf', 'normal');
+shouldBeEqualToString('window.getComputedStyle(flexitem, null).alignSelf', 'auto');
 flexbox.style.display = 'flex';
 
 
index f883b2e..2117c33 100644 (file)
@@ -1,57 +1,8 @@
 Test to verify that the new alignment values are parsed as invalid if Grid Layout is disabled and in any case they do not cause a crash because assertions in flexbox layout code.
 
-On success, you will see a series of "PASS" messages, followed by "TEST COMPLETE".
 
-
-
-New alignment values should be invalid when grid layout is disabled
-
-Testing Self-Alignment values.
-PASS alignSelf is 'flex-start'
-PASS alignSelf is 'flex-start'
-PASS alignSelf is 'flex-start'
-PASS alignSelf is 'flex-start'
-PASS alignSelf is 'flex-start'
-PASS alignSelf is 'flex-start'
-
-Testing Default-Alignment values.
-PASS alignItems is 'flex-end'
-PASS alignSelf is 'flex-end'
-PASS alignItems is 'flex-end'
-PASS alignSelf is 'flex-end'
-PASS alignItems is 'flex-end'
-PASS alignSelf is 'flex-end'
-PASS alignItems is 'flex-end'
-PASS alignSelf is 'flex-end'
-PASS alignItems is 'flex-end'
-PASS alignSelf is 'flex-end'
-PASS alignItems is 'flex-end'
-PASS alignSelf is 'flex-end'
-
-Even when grid layout is enabled, new values should not violate assertions in FlexibleBox layout logic.
-
-Testing Self-Alignment values.
-PASS alignSelf is 'start unsafe'
-PASS alignSelf is 'start'
-PASS alignSelf is 'end'
-PASS alignSelf is 'flex-start safe'
-PASS alignSelf is 'self-start'
-PASS alignSelf is 'self-end'
-
-Testing Default-Alignment values.
-PASS alignItems is 'start unsafe'
-PASS alignSelf is 'start unsafe'
-PASS alignItems is 'start'
-PASS alignSelf is 'start'
-PASS alignItems is 'end'
-PASS alignSelf is 'end'
-PASS alignItems is 'flex-start safe'
-PASS alignSelf is 'flex-start safe'
-PASS alignItems is 'self-start'
-PASS alignSelf is 'self-start'
-PASS alignItems is 'self-end'
-PASS alignSelf is 'self-end'
-PASS successfullyParsed is true
-
-TEST COMPLETE
+PASS New Self-Alignment values should be invalid when grid layout is DISABLED. 
+PASS New Default-Alignment values should be invalid when grid layout is DISABLED. 
+PASS Even when grid layout is ENABLED, new Self-Alignment values should not violate assertions in FlexibleBox layout logic.. 
+PASS Even when grid layout is ENABLED, new Default-Alignment values should not violate assertions in FlexibleBox layout logic.. 
 
index 063f891..b33c770 100644 (file)
@@ -1,73 +1,89 @@
 <!DOCTYPE html>
-<div id="flexContainer" style="display: flex">
-    <div id="flexItem"></div>
-</div>
-<script src="../../resources/js-test.js"></script>
+<script src="../../resources/testharness.js"></script>
+<script src="../../resources/testharnessreport.js"></script>
+<script src="../resources/alignment-parsing-utils-th.js"></script>
+<html>
+ <body>
+     <p>Test to verify that the new alignment values are parsed as invalid if Grid Layout is disabled and in any case they do not cause a crash because assertions in flexbox layout code.</p>
+     <div id="log"></div>
+
+     <div id="flexContainer" style="display: flex">
+         <div id="flexItem"></div>
+     </div>
 <script>
-description('Test to verify that the new alignment values are parsed as invalid if Grid Layout is disabled and in any case they do not cause a crash because assertions in flexbox layout code.');
+
+var container = document.getElementById("flexContainer");
+var item = document.getElementById("flexItem");
 
 function checkAlignSelfValue(value, computedValue, gridEnabled)
 {
     item.style.webkitAlignSelf = value;
-    alignSelf = getComputedStyle(item, '').getPropertyValue('-webkit-align-self');
     if (gridEnabled)
-        shouldBe("alignSelf", computedValue);
+        checkValues(item, "alignSelf", "align-self", value, computedValue);
     else
-        shouldBe("alignSelf", "'flex-start'");
+        checkValues(item, "alignSelf", "align-self", "flex-start", "flex-start");
 }
 
 function checkAlignItemsValue(value, computedValue, gridEnabled)
 {
     container.style.webkitAlignItems = value;
-    alignItems = getComputedStyle(container, '').getPropertyValue('-webkit-align-items');
-    alignSelf = getComputedStyle(item, '').getPropertyValue('-webkit-align-self');
     if (gridEnabled) {
-        shouldBe("alignItems", computedValue);
-        shouldBe("alignSelf", computedValue);
+        checkValues(container, "alignItems", "align-items", value, computedValue);
+        checkValues(item, "alignSelf", "align-self", "auto", "auto");
     } else {
-        shouldBe("alignItems", "'flex-end'");
-        shouldBe("alignSelf", "'flex-end'");
+        checkValues(container, "alignItems", "align-items", "flex-end", "flex-end");
+        checkValues(item, "alignSelf", "align-self", "auto", "auto");
     }
 }
 
-function checkAlignmentValues(gridEnabled)
+function checkSelfAlignmentValues(gridEnabled)
 {
     if (window.internals)
-        internals.settings.setCSSGridLayoutEnabled(gridEnabled);
+        internals.settings.setCSSGridLayoutEnabled(gridEnabled)
 
-    debug('<br>Testing Self-Alignment values.');
-    checkAlignSelfValue("start unsafe", "'start unsafe'", gridEnabled)
-    checkAlignSelfValue("start", "'start'", gridEnabled)
-    checkAlignSelfValue("end", "'end'", gridEnabled)
-    checkAlignSelfValue("flex-start safe", "'flex-start safe'", gridEnabled)
-    checkAlignSelfValue("self-start", "'self-start'", gridEnabled)
-    checkAlignSelfValue("self-end", "'self-end'", gridEnabled)
+    item.style.webkitAlignSelf = "flex-start";
 
-    item.style.webkitAlignSelf = "auto";
+    checkAlignSelfValue("start unsafe", "start unsafe", gridEnabled)
+    checkAlignSelfValue("start", "start", gridEnabled)
+    checkAlignSelfValue("end", "end", gridEnabled)
+    checkAlignSelfValue("flex-start safe", "flex-start safe", gridEnabled)
+    checkAlignSelfValue("self-start", "self-start", gridEnabled)
+    checkAlignSelfValue("self-end", "self-end", gridEnabled)
+}
 
-    debug('<br>Testing Default-Alignment values.');
-    checkAlignItemsValue("start unsafe", "'start unsafe'", gridEnabled)
-    checkAlignItemsValue("start", "'start'", gridEnabled)
-    checkAlignItemsValue("end", "'end'", gridEnabled)
-    checkAlignItemsValue("flex-start safe", "'flex-start safe'", gridEnabled)
-    checkAlignItemsValue("self-start", "'self-start'", gridEnabled)
-    checkAlignItemsValue("self-end", "'self-end'", gridEnabled)
+function checkDefaultAlignmentValues(gridEnabled)
+{
+    if (window.internals)
+        internals.settings.setCSSGridLayoutEnabled(gridEnabled)
 
-    item.style.webkitAlignSelf = "flex-start";
+    container.style.webkitAlignItems = "flex-end";
+    item.style.webkitAlignSelf = "auto";
+
+    checkAlignItemsValue("start unsafe", "start unsafe", gridEnabled)
+    checkAlignItemsValue("start", "start", gridEnabled)
+    checkAlignItemsValue("end", "end", gridEnabled)
+    checkAlignItemsValue("flex-start safe", "flex-start safe", gridEnabled)
+    checkAlignItemsValue("self-start", "self-start", gridEnabled)
+    checkAlignItemsValue("self-end", "self-end", gridEnabled)
 }
 
-var container = document.getElementById("flexContainer");
-var item = document.getElementById("flexItem");
+test(function() {
+    checkSelfAlignmentValues(false);
+}, "New Self-Alignment values should be invalid when grid layout is DISABLED.");
 
-container.style.webkitAlignItems = "flex-end";
-item.style.webkitAlignSelf = "flex-start";
-var alignSelf = "flex-start";
-var alignItems = "flex-start";
+test(function() {
+    checkDefaultAlignmentValues(false);
+}, "New Default-Alignment values should be invalid when grid layout is DISABLED.");
 
-debug('<br>New alignment values should be invalid when grid layout is disabled');
-checkAlignmentValues(false);
+test(function() {
+    checkSelfAlignmentValues(true);
+}, "Even when grid layout is ENABLED, new Self-Alignment values should not violate assertions in FlexibleBox layout logic..");
 
-debug('<br>Even when grid layout is enabled, new values should not violate assertions in FlexibleBox layout logic.');
-checkAlignmentValues(true);
+test(function() {
+    checkDefaultAlignmentValues(true);
+}, "Even when grid layout is ENABLED, new Default-Alignment values should not violate assertions in FlexibleBox layout logic..");
 
 </script>
+
+</body>
+</html>
index 2689a01..3e55bce 100644 (file)
     align-self: stretch;
 }
 
+#alignSelfNormal {
+    align-self: normal;
+}
+
 #alignSelfStart {
     align-self: start;
 }
@@ -89,6 +93,7 @@
 <div id="alignSelfFirstBaseline"></div>
 <div id="alignSelfLastBaseline"></div>
 <div id="alignSelfStretch"></div>
+<div id="alignSelfNormal"></div>
 <div id="alignSelfStart"></div>
 <div id="alignSelfEnd"></div>
 <div id="alignSelfCenter"></div>
@@ -120,6 +125,8 @@ test(function() {
     checkValues(alignSelfLastBaseline, "alignSelf", "align-self", "", "last baseline");
     var alignSelfStretch = document.getElementById("alignSelfStretch");
     checkValues(alignSelfStretch, "alignSelf", "align-self", "", "stretch");
+    var alignSelfNormal = document.getElementById("alignSelfNormal");
+    checkValues(alignSelfNormal, "alignSelf", "align-self", "", "normal");
     var alignSelfStart = document.getElementById("alignSelfStart");
     checkValues(alignSelfStart, "alignSelf", "align-self", "", "start");
     var alignSelfEnd = document.getElementById("alignSelfEnd");
@@ -160,7 +167,7 @@ test(function() {
 test(function() {
     element = document.createElement("div");
     document.body.appendChild(element);
-    checkValues(element, "alignSelf", "align-self", "", "normal");
+    checkValues(element, "alignSelf", "align-self", "", "auto");
 }, "Test initial value of align-self through JS");
 
 test(function() {
@@ -186,16 +193,19 @@ test(function() {
     element.style.alignSelf = "self-start";
     checkValues(element, "alignSelf", "align-self",  "self-start", "self-start");
 
+    element.style.alignSelf = "normal";
+    checkValues(element, "alignSelf", "align-self",  "normal", "normal");
+
     element.style.alignSelf = "auto";
-    checkValues(element, "alignSelf", "align-self",  "auto", "normal");
+    checkValues(element, "alignSelf", "align-self",  "auto", "auto");
 
     container.style.display = "flex";
     element.style.alignSelf = "auto";
-    checkValues(element, "alignSelf", "align-self",  "auto", "normal");
+    checkValues(element, "alignSelf", "align-self",  "auto", "auto");
 
     container.style.display = "grid";
     element.style.alignSelf = "auto";
-    checkValues(element, "alignSelf", "align-self",  "auto", "normal");
+    checkValues(element, "alignSelf", "align-self",  "auto", "auto");
 
     element.style.alignSelf = "self-end";
     checkValues(element, "alignSelf", "align-self",  "self-end", "self-end");
@@ -203,7 +213,7 @@ test(function() {
 
 test(function() {
     document.documentElement.style.alignSelf = "auto";
-    checkValues(document.documentElement, "alignSelf", "align-self",  "auto", "normal");
+    checkValues(document.documentElement, "alignSelf", "align-self",  "auto", "auto");
 }, "Test 'auto' value resolution for the root node");
 
 test(function() {
@@ -214,6 +224,9 @@ test(function() {
 
     checkBadValues(element, "alignSelf", "align-self",  "auto safe");
     checkBadValues(element, "alignSelf", "align-self",  "auto left");
+    checkBadValues(element, "alignSelf", "align-self",  "normal unsafe");
+    checkBadValues(element, "alignSelf", "align-self",  "normal stretch");
+    checkBadValues(element, "alignSelf", "align-self",  "baseline normal");
     checkBadValues(element, "alignSelf", "align-self",  "baseline safe");
     checkBadValues(element, "alignSelf", "align-self",  "baseline center");
     checkBadValues(element, "alignSelf", "align-self",  "stretch unsafe");
@@ -239,35 +252,35 @@ test(function() {
 
 test(function() {
     container.style.display = "";
-    checkInitialValues(element, "alignSelf", "align-self", "center", "normal");
+    checkInitialValues(element, "alignSelf", "align-self", "center", "auto");
 }, "Test the value 'initial'");
 
 test(function() {
     container.style.display = "grid";
-    checkInitialValues(element, "alignSelf", "align-self", "left safe", "normal");
+    checkInitialValues(element, "alignSelf", "align-self", "left safe", "auto");
 }, "Test the value 'initial' for grid containers");
 
 test(function() {
     container.style.display = "flex";
-    checkInitialValues(element, "alignSelf", "align-self", "right unsafe", "normal");
+    checkInitialValues(element, "alignSelf", "align-self", "right unsafe", "auto");
 }, "Test the value 'initial' for flex containers");
 
 test(function() {
     container.style.display = "";
     element.style.position = "absolute";
-    checkInitialValues(element, "alignSelf", "align-self", "left", "normal");
+    checkInitialValues(element, "alignSelf", "align-self", "left", "auto");
 }, "Test the value 'initial' for positioned elements");
 
 test(function() {
     container.style.display = "grid";
     element.style.position = "absolute";
-    checkInitialValues(element, "alignSelf", "align-self", "right", "normal");
+    checkInitialValues(element, "alignSelf", "align-self", "right", "auto");
 }, "Test the value 'initial' for positioned elements in grid containers");
 
 test(function() {
     container.style.display = "flex";
     element.style.position = "absolute";
-    checkInitialValues(element, "alignSelf", "align-self", "end", "normal");
+    checkInitialValues(element, "alignSelf", "align-self", "end", "auto");
 }, "Test the value 'initial' for positioned elements in grid containers");
 
 test(function() {
index bd67414..df03e92 100644 (file)
@@ -1,83 +1,30 @@
-Test to verify auto value resolution works as expected in root elements (eg. document root / shadow roots / slotted elements / elements inside<slot>)
-
-On success, you will see a series of "PASS" messages, followed by "TEST COMPLETE".
-
-
-
-*** Test 'auto' value resolution for the document root node. ***
-
-Check out how the DOM's root element resolves the align-self 'auto' values.
-PASS element.style.webkitAlignSelf is "center"
-PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-align-self') is "center"
-PASS element.style.webkitAlignSelf is "auto"
-PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-align-self') is "normal"
-
-Check out how the DOM's root element align-items's value is used to resolve its children's align-self 'auto' values.
-PASS element.style.webkitAlignItems is "center"
-PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-align-items') is "center"
-PASS element.style.webkitAlignItems is ""
-PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-align-items') is "normal"
-PASS element.style.webkitAlignSelf is "auto"
-PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-align-self') is "center"
-PASS element.style.webkitAlignItems is ""
-PASS window.getComputedStyle(host, '').getPropertyValue('-webkit-align-items') is "normal"
-PASS element.style.webkitAlignSelf is "auto"
-PASS window.getComputedStyle(host, '').getPropertyValue('-webkit-align-self') is "normal"
-
-Check out how the DOM's root element deals with 'auto' value in align-items.
-PASS element.style.webkitAlignItems is "center"
-PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-align-items') is "center"
-PASS element.style.webkitAlignItems is ""
-PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-align-items') is "normal"
-
-Check out how the DOM's root element resolves the justify-self 'auto' values.
-PASS element.style.justifySelf is "left"
-PASS window.getComputedStyle(element, '').getPropertyValue('justify-self') is "left"
-PASS element.style.justifySelf is "auto"
-PASS window.getComputedStyle(element, '').getPropertyValue('justify-self') is "normal"
-
-Check out how the DOM's root element align-items's value is used to resolve its children's align-self 'auto' values.
-PASS element.style.justifyItems is "center"
-PASS window.getComputedStyle(element, '').getPropertyValue('justify-items') is "center"
-PASS element.style.justifyItems is "auto"
-PASS window.getComputedStyle(element, '').getPropertyValue('justify-items') is "normal"
-PASS element.style.justifySelf is "auto"
-PASS window.getComputedStyle(element, '').getPropertyValue('justify-self') is "center"
-PASS element.style.justifyItems is "auto"
-PASS window.getComputedStyle(host, '').getPropertyValue('justify-items') is "normal"
-PASS element.style.justifySelf is "auto"
-PASS window.getComputedStyle(host, '').getPropertyValue('justify-self') is "normal"
-
-Check out how the DOM's root element deals with 'auto' value in justify-items.
-PASS element.style.justifyItems is "auto"
-PASS window.getComputedStyle(element, '').getPropertyValue('justify-items') is "normal"
-PASS element.style.justifySelf is "auto"
-PASS window.getComputedStyle(element, '').getPropertyValue('justify-self') is "normal"
-PASS element.style.justifySelf is "auto"
-PASS window.getComputedStyle(host, '').getPropertyValue('justify-self') is "normal"
-
-Check out how the DOM's root element justify-items's value with 'legacy' keyword is used to resolve any descendant's justify-items 'auto' values.
-PASS element.style.justifyItems is "legacy center"
-PASS window.getComputedStyle(element, '').getPropertyValue('justify-items') is "legacy center"
-PASS element.style.justifyItems is "auto"
-PASS window.getComputedStyle(element, '').getPropertyValue('justify-items') is "legacy center"
-PASS element.style.justifySelf is "auto"
-PASS window.getComputedStyle(element, '').getPropertyValue('justify-self') is "center"
-PASS element.style.justifyItems is "auto"
-PASS window.getComputedStyle(host, '').getPropertyValue('justify-items') is "legacy center"
-PASS element.style.justifySelf is "auto"
-PASS window.getComputedStyle(host, '').getPropertyValue('justify-self') is "center"
-
-Check out how the DOM's root element recomputes its descendant's style when 'legacy' keyword is removed from its justify-items value.
-PASS element.style.justifyItems is "auto"
-PASS window.getComputedStyle(element, '').getPropertyValue('justify-items') is "normal"
-PASS element.style.justifySelf is "auto"
-PASS window.getComputedStyle(element, '').getPropertyValue('justify-self') is "normal"
-PASS element.style.justifyItems is "auto"
-PASS window.getComputedStyle(host, '').getPropertyValue('justify-items') is "normal"
-PASS element.style.justifySelf is "auto"
-PASS window.getComputedStyle(host, '').getPropertyValue('justify-self') is "normal"
-PASS successfullyParsed is true
-
-TEST COMPLETE
+CONSOLE MESSAGE: line 17: 
+CONSOLE MESSAGE: line 18: *** Test 'auto' value resolution for the document root node. ***
+CONSOLE MESSAGE: line 96: 
+CONSOLE MESSAGE: line 97: *** Test 'auto' value resolution for the shadow DOM root node. ***
+CONSOLE MESSAGE: line 104: 
+CONSOLE MESSAGE: line 149: 
+CONSOLE MESSAGE: line 150: *** Test 'auto' value resolution for the shadow DOM 'slotted' elements. ***
+Test to verify auto value resolution works as expected in root elements (eg. document root / shadow roots / slotted elements / elements inside slot)
+
+
+PASS Check out how the DOM's root element resolves the align-self 'auto' values. 
+PASS Check out how the DOM's root element align-items's value is used to resolve its children's align-self 'auto' values. 
+PASS Check out how the DOM's root element deals with 'auto' value in align-items. 
+PASS Check out how the DOM's root element resolves the justify-self 'auto' values. 
+PASS Check out how the DOM's root element justify-items's value is used to resolve its children's justify-self 'auto' values. 
+PASS Check out how the DOM's root element deals with 'auto' value in justify-items. 
+PASS Check out how the DOM's root element justify-items's value with 'legacy' keyword is used to resolve any descendant's justify-items 'auto' values. 
+PASS Check out how the DOM's root element recomputes its descendant's style when 'legacy' keyword is removed from its justify-items value. 
+PASS Shadow Node inherits from ShadowHost to resolve the 'auto' values for align-self. 
+PASS Shadow Node inherits from ShadowHost to resolve the 'auto' values for justify-self. 
+PASS Check out how the 'legacy' keyword in justify-items propagates from the DOM Tree to the Shadow Node. 
+PASS Check out how align-self uses the 'shadowHost' as 'slotted' element's parent while 'slot' is not assigned. 
+PASS Check out how justify-self uses the 'shadowHost' as 'slotted' element's parent while 'slot' is not assigned. 
+PASS Check out how the 'legacy' keyword in justify-items affects the 'slotted' elements while 'slot' is not assigned. 
+PASS Check out how align-self uses the 'slot' element's parent (Shadow Node) as 'slotted' element' s parent after the 'slot' is assigned. 
+PASS Check out how justify-self uses the 'slot' element's parent (Shadow Node) as 'slotted' element' s parent after the 'slot' is assigned. 
+PASS Check out how the 'legacy' keyword affects the 'slotted' elements after the 'slot' is assigned. 
+PASS The 'slot' element should not use its parent inside the ShadowDOM tree to resolve the align-self 'auto' values because Blink does not support slots in the flat tree. 
+PASS The 'slot' element should not use its parent inside the ShadowDOM tree to resolve the justify-self 'auto' values because Blink does not support slots in the flat tree. 
 
index 97511e8..c427cda 100644 (file)
 <!DOCTYPE html>
-<script src="../resources/js-test.js"></script>
+<script src="../resources/testharness.js"></script>
+<script src="../resources/testharnessreport.js"></script>
+<script src="resources/alignment-parsing-utils-th.js"></script>
 <html>
  <body>
+     <p>Test to verify auto value resolution works as expected in root elements (eg. document root / shadow roots / slotted elements / elements inside slot)</p>
+     <div id="log"></div>
+
      <div id="host">
          <div id="slotted" slot="s1"></div>
      </div>
-<script src="resources/alignment-parsing-utils.js"></script>
 <script>
-description('Test to verify auto value resolution works as expected in root elements (eg. document root / shadow roots / slotted elements / elements inside&lt;slot&gt;)');
 
 var block = document.getElementById("host");
 
-debug("");
-debug("*** Test 'auto' value resolution for the document root node. ***");
-
-debug("");
-debug("Check out how the DOM's root element resolves the align-self 'auto' values.");
-document.documentElement.style.webkitAlignSelf = "center";
-checkValues(document.documentElement, "webkitAlignSelf", "-webkit-align-self", "center", "center");
-document.documentElement.style.webkitAlignSelf = "auto";
-checkValues(document.documentElement, "webkitAlignSelf", "-webkit-align-self", "auto", "normal");
-
-debug("");
-debug("Check out how the DOM's root element align-items's value is used to resolve its children's align-self 'auto' values.");
-document.documentElement.style.webkitAlignItems = "center";
-checkValues(document.documentElement, "webkitAlignItems", "-webkit-align-items", "center", "center");
-document.body.style.webkitAlignItems = "auto"; // The 'auto' value is not valid for align-items.
-document.body.style.webkitAlignSelf = "auto";
-checkValues(document.body, "webkitAlignItems", "-webkit-align-items", "", "normal");
-checkValues(document.body, "webkitAlignSelf", "-webkit-align-self", "auto", "center");
-block.style.webkitAlignItems = ""; // Default value is 'normal' for align-items.
-block.style.webkitAlignSelf = "auto";
-checkValues(block, "webkitAlignItems", "-webkit-align-items", "", "normal");
-checkValues(block, "webkitAlignSelf", "-webkit-align-self", "auto", "normal");
-
-debug("");
-debug("Check out how the DOM's root element deals with 'auto' value in align-items.");
-document.documentElement.style.webkitAlignItems = "auto"; // The 'auto' value is not valid for align-items.
-checkValues(document.documentElement, "webkitAlignItems", "-webkit-align-items", "center", "center");
-document.documentElement.style.webkitAlignItems = ""; // Default value is 'normal' for align-items.
-checkValues(document.documentElement, "webkitAlignItems", "-webkit-align-items", "", "normal");
-
-debug("");
-debug("Check out how the DOM's root element resolves the justify-self 'auto' values.");
-document.documentElement.style.justifySelf = "left";
-checkValues(document.documentElement, "justifySelf", "justify-self", "left", "left");
-document.documentElement.style.justifySelf = "auto";
-checkValues(document.documentElement, "justifySelf", "justify-self", "auto", "normal");
-
-debug("");
-debug("Check out how the DOM's root element align-items's value is used to resolve its children's align-self 'auto' values.");
-document.documentElement.style.justifyItems = "center";
-checkValues(document.documentElement, "justifyItems", "justify-items", "center", "center");
-document.body.style.justifyItems = "auto";
-document.body.style.justifySelf = "auto";
-checkValues(document.body, "justifyItems", "justify-items", "auto", "normal");
-checkValues(document.body, "justifySelf", "justify-self", "auto", "center");
-block.style.justifyItems = "auto";
-block.style.justifySelf = "auto";
-checkValues(block, "justifyItems", "justify-items",  "auto", "normal");
-checkValues(block, "justifySelf", "justify-self",  "auto", "normal");
-
-debug("");
-debug("Check out how the DOM's root element deals with 'auto' value in justify-items.");
-document.documentElement.style.justifyItems = "auto";
-checkValues(document.documentElement, "justifyItems", "justify-items", "auto", "normal");
-checkValues(document.body, "justifySelf", "justify-self",  "auto", "normal");
-checkValues(block, "justifySelf", "justify-self",  "auto", "normal");
-
-debug("");
-debug("Check out how the DOM's root element justify-items's value with 'legacy' keyword is used to resolve any descendant's justify-items 'auto' values.");
-document.documentElement.style.justifyItems = "legacy center";
-checkValues(document.documentElement, "justifyItems", "justify-items",  "legacy center", "legacy center");
-document.body.style.justifyItems = "auto";
-document.body.style.justifySelf = "auto";
-checkValues(document.body, "justifyItems", "justify-items",  "auto", "legacy center");
-checkValues(document.body, "justifySelf", "justify-self",  "auto", "center");
-block.style.justifyItems = "auto";
-block.style.justifySelf = "auto";
-checkValues(block, "justifyItems", "justify-items",  "auto", "legacy center");
-checkValues(block, "justifySelf", "justify-self",  "auto", "center");
-
-debug("");
-debug("Check out how the DOM's root element recomputes its descendant's style when 'legacy' keyword is removed from its justify-items value.");
-document.documentElement.style.justifyItems = "auto";
-checkValues(document.body, "justifyItems", "justify-items",  "auto", "normal");
-checkValues(document.body, "justifySelf", "justify-self",  "auto", "normal");
-checkValues(block, "justifyItems", "justify-items",  "auto", "normal");
-checkValues(block, "justifySelf", "justify-self",  "auto", "normal");
+console.log("");
+console.log("*** Test 'auto' value resolution for the document root node. ***");
+
+test(function() {
+    document.documentElement.style.alignSelf = "center";
+    checkValues(document.documentElement, "alignSelf", "align-self", "center", "center");
+    document.documentElement.style.alignSelf = "auto";
+    checkValues(document.documentElement, "alignSelf", "align-self", "auto", "auto");
+}, "Check out how the DOM's root element resolves the align-self 'auto' values.");
+
+test(function() {
+    document.documentElement.style.alignItems = "center";
+    checkValues(document.documentElement, "alignItems", "align-items", "center", "center");
+    document.body.style.alignItems = "auto"; // The 'auto' value is not valid for align-items.
+    document.body.style.alignSelf = "auto";
+    checkValues(document.body, "alignItems", "align-items", "", "normal");
+    checkValues(document.body, "alignSelf", "align-self", "auto", "auto");
+    block.style.alignItems = ""; // Default value is 'normal' for align-items.
+    block.style.alignSelf = "auto";
+    checkValues(block, "alignItems", "align-items", "", "normal");
+    checkValues(block, "alignSelf", "align-self", "auto", "auto");
+}, "Check out how the DOM's root element align-items's value is used to resolve its children's align-self 'auto' values.");
+
+test(function() {
+    document.documentElement.style.alignItems = "auto"; // The 'auto' value is not valid for align-items.
+    checkValues(document.documentElement, "alignItems", "align-items", "center", "center");
+    document.documentElement.style.alignItems = ""; // Default value is 'normal' for align-items.
+    checkValues(document.documentElement, "alignItems", "align-items", "", "normal");
+}, "Check out how the DOM's root element deals with 'auto' value in align-items.");
+
+test(function() {
+    document.documentElement.style.justifySelf = "left";
+    checkValues(document.documentElement, "justifySelf", "justify-self", "left", "left");
+    document.documentElement.style.justifySelf = "auto";
+    checkValues(document.documentElement, "justifySelf", "justify-self", "auto", "auto");
+}, "Check out how the DOM's root element resolves the justify-self 'auto' values.");
+
+test(function() {
+    console.log();
+    document.documentElement.style.justifyItems = "center";
+    checkValues(document.documentElement, "justifyItems", "justify-items", "center", "center");
+    document.body.style.justifyItems = "auto";
+    document.body.style.justifySelf = "auto";
+    checkValues(document.body, "justifyItems", "justify-items", "auto", "normal");
+    checkValues(document.body, "justifySelf", "justify-self", "auto", "auto");
+    block.style.justifyItems = "auto";
+    block.style.justifySelf = "auto";
+    checkValues(block, "justifyItems", "justify-items",  "auto", "normal");
+    checkValues(block, "justifySelf", "justify-self",  "auto", "auto");
+}, "Check out how the DOM's root element justify-items's value is used to resolve its children's justify-self 'auto' values.");
+
+test(function() {
+    document.documentElement.style.justifyItems = "auto";
+    checkValues(document.documentElement, "justifyItems", "justify-items", "auto", "normal");
+    checkValues(document.body, "justifySelf", "justify-self",  "auto", "auto");
+    checkValues(block, "justifySelf", "justify-self",  "auto", "auto");
+}, "Check out how the DOM's root element deals with 'auto' value in justify-items.");
+
+test(function() {
+    document.documentElement.style.justifyItems = "legacy center";
+    checkValues(document.documentElement, "justifyItems", "justify-items",  "legacy center", "legacy center");
+    document.body.style.justifyItems = "auto";
+    document.body.style.justifySelf = "auto";
+    checkValues(document.body, "justifyItems", "justify-items",  "auto", "legacy center");
+    checkValues(document.body, "justifySelf", "justify-self",  "auto", "auto");
+    block.style.justifyItems = "auto";
+    block.style.justifySelf = "auto";
+    checkValues(block, "justifyItems", "justify-items",  "auto", "legacy center");
+    checkValues(block, "justifySelf", "justify-self",  "auto", "auto");
+}, "Check out how the DOM's root element justify-items's value with 'legacy' keyword is used to resolve any descendant's justify-items 'auto' values.");
+
+test(function() {
+    document.documentElement.style.justifyItems = "auto";
+    checkValues(document.body, "justifyItems", "justify-items",  "auto", "normal");
+    checkValues(document.body, "justifySelf", "justify-self",  "auto", "auto");
+    checkValues(block, "justifyItems", "justify-items",  "auto", "normal");
+    checkValues(block, "justifySelf", "justify-self",  "auto", "auto");
+}, "Check out how the DOM's root element recomputes its descendant's style when 'legacy' keyword is removed from its justify-items value.");
+
+console.log("");
+console.log("*** Test 'auto' value resolution for the shadow DOM root node. ***");
+
+var shadowHost = document.getElementById("host")
+var shadowRoot = shadowHost.attachShadow({mode:"open"});
+var shadowNode = document.createElement('div');
+shadowRoot.appendChild(shadowNode);
+
+console.log("");
+console.log();
+
+test(function() {
+    shadowHost.style.alignItems = "center";
+    shadowNode.style.alignItems = "right";
+    checkValues(shadowHost, "alignItems", "align-items", "center", "center");
+    checkValues(shadowNode, "alignItems", "align-items", "right", "right");
+    shadowNode.style.alignItems = "";
+    checkValues(shadowNode, "alignItems", "align-items", "", "normal");
+    shadowNode.style.alignSelf = "auto";
+    checkValues(shadowNode, "alignSelf", "align-self", "auto", "auto");
+}, "Shadow Node inherits from ShadowHost to resolve the 'auto' values for align-self.");
+
+test(function() {
+    shadowHost.style.justifyItems = "center";
+    shadowNode.style.justifyItems = "right";
+    checkValues(shadowHost, "justifyItems", "justify-items", "center", "center");
+    checkValues(shadowNode, "justifyItems", "justify-items", "right", "right");
+    shadowNode.style.justifyItems = "";
+    checkValues(shadowNode, "justifyItems", "justify-items", "", "normal");
+    shadowNode.style.justifySelf = "auto";
+    checkValues(shadowNode, "justifySelf", "justify-self", "auto", "auto");
+}, "Shadow Node inherits from ShadowHost to resolve the 'auto' values for justify-self.");
+
+test(function() {
+    shadowHost.style.justifyItems = "auto";
+    shadowNode.style.justifyItems = "right";
+    shadowNode.style.justifySelf = "auto";
+    checkValues(shadowHost, "justifyItems", "justify-items", "auto", "normal");
+    checkValues(shadowNode, "justifyItems", "justify-items", "right", "right");
+    checkValues(shadowNode, "justifySelf", "justify-self", "auto", "auto");
+
+    checkValues(shadowHost, "justifyItems", "justify-items", "auto", "normal");
+    document.documentElement.style.justifyItems = "legacy center";
+    checkValues(document.documentElement, "justifyItems", "justify-items",  "legacy center", "legacy center");
+    checkValues(shadowHost, "justifyItems", "justify-items",  "auto", "legacy center");
+    checkValues(shadowNode, "justifyItems", "justify-items", "right", "right");
+    checkValues(shadowNode, "justifySelf", "justify-self", "auto", "auto");
+    shadowNode.style.justifyItems = "auto";
+    checkValues(shadowNode, "justifyItems", "justify-items", "auto", "legacy center");
+    document.documentElement.style.justifyItems = "auto";
+}, "Check out how the 'legacy' keyword in justify-items propagates from the DOM Tree to the Shadow Node.");
+
+
+console.log("");
+console.log("*** Test 'auto' value resolution for the shadow DOM 'slotted' elements. ***");
+
+var slotted = document.getElementById("slotted");
+
+test(function() {
+    shadowHost.style.alignItems = "center";
+    shadowNode.style.alignItems = "right";
+    slotted.style.alignItems = "left";
+    checkValues(slotted, "alignItems", "align-items", "left", "left");
+    slotted.style.alignItems = "normal";
+    checkValues(slotted, "alignItems", "align-items", "normal", "normal");
+    slotted.style.alignSelf = "start";
+    checkValues(slotted, "alignSelf", "align-self", "start", "start");
+    slotted.style.alignSelf = "auto";
+    checkValues(slotted, "alignSelf", "align-self", "auto", "auto");
+}, "Check out how align-self uses the 'shadowHost' as 'slotted' element's parent while 'slot' is not assigned.");
+
+test(function() {
+    shadowHost.style.justifyItems = "center";
+    shadowNode.style.justifyItems = "right";
+    slotted.style.justifyItems = "left";
+    checkValues(slotted, "justifyItems", "justify-items", "left", "left");
+    slotted.style.justifyItems = "";
+    checkValues(slotted, "justifyItems", "justify-items", "", "normal");
+    slotted.style.justifySelf = "start";
+    checkValues(slotted, "justifySelf", "justify-self", "start", "start");
+    slotted.style.justifySelf = "auto";
+    checkValues(slotted, "justifySelf", "justify-self", "auto", "auto");
+}, "Check out how justify-self uses the 'shadowHost' as 'slotted' element's parent while 'slot' is not assigned.");
+
+test(function() {
+    shadowHost.style.justifyItems = "auto";
+    shadowNode.style.justifyItems = "right";
+    checkValues(shadowHost, "justifyItems", "justify-items", "auto", "normal");
+    checkValues(shadowNode, "justifyItems", "justify-items", "right", "right");
+    document.documentElement.style.justifyItems = "legacy center";
+    checkValues(document.documentElement, "justifyItems", "justify-items",  "legacy center", "legacy center");
+    checkValues(shadowHost, "justifyItems", "justify-items",  "auto", "legacy center");
+    slotted.style.justifyItems = "auto";
+    checkValues(slotted, "justifyItems", "justify-items",  "auto", "normal");
+    slotted.style.justifySelf = "auto";
+    checkValues(slotted, "justifySelf", "justify-self",  "auto", "auto");
+    shadowNode.style.justifyItems = "auto";
+    checkValues(shadowNode, "justifyItems", "justify-items", "auto", "legacy center");
+    checkValues(slotted, "justifyItems", "justify-items", "auto", "normal");
+    checkValues(slotted, "justifySelf", "justify-self", "auto", "auto");
+    document.documentElement.style.justifyItems = "auto";
+}, "Check out how the 'legacy' keyword in justify-items affects the 'slotted' elements while 'slot' is not assigned.");
+
+// Slot element is assigned now.
+var slot = document.createElement('slot');
+slot.setAttribute('name', 's1');
+shadowNode.appendChild(slot);
+
+test(function() {
+    shadowHost.style.alignItems = "center";
+    shadowNode.style.alignItems = "right";
+    slotted.style.alignItems = "left";
+    checkValues(slotted, "alignItems", "align-items", "left", "left");
+    slotted.style.alignItems = "";
+    checkValues(slotted, "alignItems", "align-items", "", "normal");
+    slotted.style.alignSelf = "start";
+    checkValues(slotted, "alignSelf", "align-self", "start", "start");
+    slotted.style.alignSelf = "auto";
+    checkValues(slotted, "alignSelf", "align-self", "auto", "auto");
+}, "Check out how align-self uses the 'slot' element's parent (Shadow Node) as 'slotted' element' s parent after the 'slot' is assigned.");
+
+test(function() {
+    shadowHost.style.justifyItems = "center";
+    shadowNode.style.justifyItems = "right";
+    slotted.style.justifyItems = "left";
+    checkValues(slotted, "justifyItems", "justify-items", "left", "left");
+    slotted.style.justifyItems = "";
+    checkValues(slotted, "justifyItems", "justify-items", "", "normal");
+    slotted.style.justifySelf = "start";
+    checkValues(slotted, "justifySelf", "justify-self", "start", "start");
+    slotted.style.justifySelf = "auto";
+    checkValues(slotted, "justifySelf", "justify-self", "auto", "auto");
+}, "Check out how justify-self uses the 'slot' element's parent (Shadow Node) as 'slotted' element' s parent after the 'slot' is assigned.");
+
+test(function() {
+    shadowHost.style.justifyItems = "auto";
+    shadowNode.style.justifyItems = "right";
+    checkValues(shadowHost, "justifyItems", "justify-items", "auto", "normal");
+    checkValues(shadowNode, "justifyItems", "justify-items", "right", "right");
+    document.documentElement.style.justifyItems = "legacy center";
+    checkValues(document.documentElement, "justifyItems", "justify-items",  "legacy center", "legacy center");
+    checkValues(shadowHost, "justifyItems", "justify-items", "auto", "legacy center");
+    slotted.style.justifyItems = "auto";
+    checkValues(slotted, "justifyItems", "justify-items", "auto", "normal"); // Shadow host is not the parent now, but ShadowNode.
+    slotted.style.justifySelf = "auto";
+    checkValues(slotted, "justifySelf", "justify-self", "auto", "auto"); // Shadow host is not the parent now, but ShadowNode.
+    shadowNode.style.justifyItems = "auto";
+    checkValues(shadowNode, "justifyItems", "justify-items", "auto", "legacy center");
+    checkValues(slotted, "justifyItems", "justify-items", "auto", "legacy center"); // Now that shadowNode is auto, 'legacy' applies.
+    checkValues(slotted, "justifySelf", "justify-self", "auto", "auto"); // Now that shadowNode is auto, 'legacy' applies.
+    document.documentElement.style.justifyItems = "auto";
+}, "Check out how the 'legacy' keyword affects the 'slotted' elements after the 'slot' is assigned.");
+
+test(function() {
+    shadowHost.style.alignItems = "center";
+    shadowNode.style.alignItems = "right";
+    slot.style.alignItems = "left";
+    checkValues(slot, "alignItems", "align-items",  "left", "left");
+    slot.style.alignItems = "";
+    checkValues(slot, "alignItems", "align-items", "", "normal");
+    slot.style.alignSelf = "left";
+    checkValues(slot, "alignSelf", "align-self",  "left", "left");
+    slot.style.alignSelf = "auto";
+    checkValues(slot, "alignSelf", "align-self",  "auto", "auto");
+}, "The 'slot' element should not use its parent inside the ShadowDOM tree to resolve the align-self 'auto' values because Blink does not support slots in the flat tree.");
+
+test(function() {
+    shadowHost.style.justifyItems = "center";
+    shadowNode.style.justifyItems = "right";
+
+    slot.style.justifyItems = "left";
+    checkValues(slot, "justifyItems", "justify-items",  "left", "left");
+    slot.style.justifyItems = "auto";
+    checkValues(slot, "justifyItems", "justify-items", "auto", "normal");
+    slot.style.justifySelf = "left";
+    checkValues(slot, "justifySelf", "justify-self",  "left", "left");
+    slot.style.justifySelf = "auto";
+    checkValues(slot, "justifySelf", "justify-self",  "auto", "auto");
+}, "The 'slot' element should not use its parent inside the ShadowDOM tree to resolve the justify-self 'auto' values because Blink does not support slots in the flat tree.");
 
 </script>
 
index 5bccda5..16bf97b 100644 (file)
@@ -227,16 +227,16 @@ test(function() {
 }, "Test setting values through JS.");
 
 test(function() {
-  checkPlaceItemsValuesBadJS("auto normal", "normal", "normal");
-  checkPlaceItemsValuesBadJS("space-between", "normal", "normal");
-  checkPlaceItemsValuesBadJS("center safe", "normal", "normal");
-  checkPlaceItemsValuesBadJS("center self-start center", "normal", "normal");
-  checkPlaceItemsValuesBadJS("asrt", "normal", "normal");
-  checkPlaceItemsValuesBadJS("auto", "normal", "normal");
-  checkPlaceItemsValuesBadJS("10px", "normal", "normal");
-  checkPlaceItemsValuesBadJS("stretch safe", "normal", "normal");
-  checkPlaceItemsValuesBadJS("self-start start end", "normal", "normal");
-  checkPlaceItemsValuesBadJS("", "normal", "normal");
+  checkPlaceItemsValuesBadJS("auto normal");
+  checkPlaceItemsValuesBadJS("space-between");
+  checkPlaceItemsValuesBadJS("center safe");
+  checkPlaceItemsValuesBadJS("center self-start center");
+  checkPlaceItemsValuesBadJS("asrt", "normal");
+  checkPlaceItemsValuesBadJS("auto", "normal");
+  checkPlaceItemsValuesBadJS("10px", "normal");
+  checkPlaceItemsValuesBadJS("stretch safe");
+  checkPlaceItemsValuesBadJS("self-start start end");
+  checkPlaceItemsValuesBadJS("");
 }, "Test setting incorrect values through JS.");
 
 test(function() {
index 8e72e1c..1b89b91 100644 (file)
@@ -116,7 +116,7 @@ function checkPlaceSelfValuesBadJS(value)
 {
   element.style.placeSelf = "";
   element.style.placeSelf = value;
-  checkPlaceSelfValues(element, "", "normal", "normal")
+  checkPlaceSelfValues(element, "", "auto", "auto")
 }
 
 test(function() {
@@ -125,8 +125,8 @@ test(function() {
 }, "Test getting the Computed Value of place-self's longhand properties when setting 'normal' value through CSS.");
 
 test(function() {
-  checkValues(placeSelfCenterAuto, "placeSelf", "place-self", "", "center normal");
-  checkPlaceSelfValues(placeSelfCenterAuto, "", "center", "normal");
+  checkValues(placeSelfCenterAuto, "placeSelf", "place-self", "", "center auto");
+  checkPlaceSelfValues(placeSelfCenterAuto, "", "center", "auto");
 }, "Test getting the Computed Value of place-self's longhand properties when setting 'center auto' value through CSS.");
 
 test(function() {
@@ -185,38 +185,38 @@ test(function() {
 }, "Test getting the Computed Value of place-self's longhand properties when setting 'start baseline' value through CSS.");
 
 test(function() {
-  checkValues(placeSelfAuto, "placeSelf", "place-self", "", "normal normal");
-  checkPlaceSelfValues(placeSelfAuto, "", "normal", "normal");
+  checkValues(placeSelfEmpty, "placeSelf", "place-self", "", "auto auto");
+  checkPlaceSelfValues(placeSelfEmpty, "", "auto", "auto");
 }, "Test setting '' as incorrect value through CSS.");
 
 test(function() {
-  checkValues(placeSelfAuto, "placeSelf", "place-self", "", "normal normal");
-  checkPlaceSelfValues(placeSelfAuto, "", "normal", "normal");
+  checkValues(placeSelfAuto, "placeSelf", "place-self", "", "auto auto");
+  checkPlaceSelfValues(placeSelfAuto, "", "auto", "auto");
 }, "Test setting 'auto' as incorrect value through CSS.");
 
 test(function() {
-  checkValues(placeSelfNone, "placeSelf", "place-self", "", "normal normal");
-  checkPlaceSelfValues(placeSelfNone, "", "normal", "normal");
+  checkValues(placeSelfNone, "placeSelf", "place-self", "", "auto auto");
+  checkPlaceSelfValues(placeSelfNone, "", "auto", "auto");
 }, "Test setting 'none' as incorrect value through CSS.");
 
 test(function() {
-  checkValues(placeSelfSafe, "placeSelf", "place-self", "", "normal normal");
-  checkPlaceSelfValues(placeSelfSafe, "", "normal", "normal");
+  checkValues(placeSelfSafe, "placeSelf", "place-self", "", "auto auto");
+  checkPlaceSelfValues(placeSelfSafe, "", "auto", "auto");
 }, "Test setting 'safe' as incorrect value through CSS.");
 
 test(function() {
-  checkValues(placeSelfStartSafe, "placeSelf", "place-self", "", "normal normal");
-  checkPlaceSelfValues(placeSelfStartSafe, "", "normal", "normal");
+  checkValues(placeSelfStartSafe, "placeSelf", "place-self", "", "auto auto");
+  checkPlaceSelfValues(placeSelfStartSafe, "", "auto", "auto");
 }, "Test setting 'start safe' as incorrect value through CSS.");
 
 test(function() {
-  checkValues(placeSelfBaselineSafe, "placeSelf", "place-self", "", "normal normal");
-  checkPlaceSelfValues(placeSelfBaselineSafe, "", "normal", "normal");
+  checkValues(placeSelfBaselineSafe, "placeSelf", "place-self", "", "auto auto");
+  checkPlaceSelfValues(placeSelfBaselineSafe, "", "auto", "auto");
 }, "Test setting 'baseline safe' as incorrect value through CSS.");
 
 test(function() {
-  checkValues(placeSelfStartEndLeft, "placeSelf", "place-self", "", "normal normal");
-  checkPlaceSelfValues(placeSelfStartEndLeft, "", "normal", "normal");
+  checkValues(placeSelfStartEndLeft, "placeSelf", "place-self", "", "auto auto");
+  checkPlaceSelfValues(placeSelfStartEndLeft, "", "auto", "auto");
 }, "Test setting 'start end left' as incorrect value through CSS.");
 
 test(function() {
@@ -224,35 +224,36 @@ test(function() {
   checkPlaceSelfValuesJS("center start", "center", "start");
   checkPlaceSelfValuesJS("self-start end", "self-start", "end");
   checkPlaceSelfValuesJS("normal end", "normal", "end");
+  checkPlaceSelfValuesJS("auto right", "auto", "right");
 }, "Test setting values through JS.");
 
 test(function() {
-  checkPlaceSelfValuesBadJS("space-between", "normal", "normal");
-  checkPlaceSelfValuesBadJS("center safe", "normal", "normal");
-  checkPlaceSelfValuesBadJS("center self-start center", "normal", "normal");
-  checkPlaceSelfValuesBadJS("asrt", "normal", "normal");
-  checkPlaceSelfValuesBadJS("10px", "normal", "normal");
-  checkPlaceSelfValuesBadJS("stretch safe", "normal", "normal");
-  checkPlaceSelfValuesBadJS("self-start start end", "normal", "normal");
-  checkPlaceSelfValuesBadJS("", "normal", "normal");
+  checkPlaceSelfValuesBadJS("space-between");
+  checkPlaceSelfValuesBadJS("center safe");
+  checkPlaceSelfValuesBadJS("center self-start center");
+  checkPlaceSelfValuesBadJS("asrt");
+  checkPlaceSelfValuesBadJS("10px");
+  checkPlaceSelfValuesBadJS("stretch safe");
+  checkPlaceSelfValuesBadJS("self-start start end");
+  checkPlaceSelfValuesBadJS("");
 }, "Test setting incorrect values through JS.");
 
 test(function() {
   element = document.createElement("div");
   document.body.appendChild(element);
-  checkValues(element, "placeSelf", "place-self", "", "normal normal");
+  checkValues(element, "placeSelf", "place-self", "", "auto auto");
   element.style.placeSelf = "center";
   checkPlaceSelfValues(element, "center", "center", "center");
   element.style.placeSelf = "initial";
-  checkValues(element, "placeSelf", "place-self", "initial", "normal normal");
-  checkPlaceSelfValues(element, "initial", "normal", "normal");
+  checkValues(element, "placeSelf", "place-self", "initial", "auto auto");
+  checkPlaceSelfValues(element, "initial", "auto", "auto");
 }, "Test the 'initial' value of the place-self shorthand and its longhand properties' Computed value");
 
 test(function() {
   document.body.style.placeSelf = "start";
   var anotherElement = document.createElement("div");
   document.body.appendChild(anotherElement);
-  checkPlaceSelfValues(anotherElement, "", "normal", "normal");
+  checkPlaceSelfValues(anotherElement, "", "auto", "auto");
   anotherElement.style.placeSelf = "inherit";
   checkPlaceSelfValues(anotherElement, "inherit", "start", "start");
 }, "Test the 'inherit' value of the place-self shorthand and its longhand properties' Computed value");
index b1a3b03..1e0e745 100644 (file)
@@ -6,37 +6,37 @@ On success, you will see a series of "PASS" messages, followed by "TEST COMPLETE
 
 Verifying initial values are supported when grid is ENABLED.
 PASS CSS.supports('align-items', 'normal') is true
-PASS CSS.supports('align-self', 'normal') is true
+PASS CSS.supports('align-self', 'auto') is true
 PASS CSS.supports('align-content', 'normal') is true
 PASS CSS.supports('justify-content', 'normal') is true
 PASS CSS.supports('align-items', 'normal') is true
-PASS CSS.supports('align-self', 'normal') is true
+PASS CSS.supports('align-self', 'auto') is true
 PASS CSS.supports('align-content', 'normal') is true
 PASS CSS.supports('justify-content', 'normal') is true
 PASS CSS.supports('align-items', 'normal') is true
-PASS CSS.supports('align-self', 'normal') is true
+PASS CSS.supports('align-self', 'auto') is true
 PASS CSS.supports('align-content', 'normal') is true
 PASS CSS.supports('justify-content', 'normal') is true
 PASS CSS.supports('align-items', 'normal') is true
-PASS CSS.supports('align-self', 'normal') is true
+PASS CSS.supports('align-self', 'auto') is true
 PASS CSS.supports('align-content', 'normal') is true
 PASS CSS.supports('justify-content', 'normal') is true
 
 Verifying initial values are supported when grid is DISABLED.
 PASS CSS.supports('align-items', 'stretch') is true
-PASS CSS.supports('align-self', 'stretch') is true
+PASS CSS.supports('align-self', 'auto') is true
 PASS CSS.supports('align-content', 'stretch') is true
 PASS CSS.supports('justify-content', 'flex-start') is true
 PASS CSS.supports('align-items', 'stretch') is true
-PASS CSS.supports('align-self', 'stretch') is true
+PASS CSS.supports('align-self', 'auto') is true
 PASS CSS.supports('align-content', 'stretch') is true
 PASS CSS.supports('justify-content', 'flex-start') is true
 PASS CSS.supports('align-items', 'stretch') is true
-PASS CSS.supports('align-self', 'stretch') is true
+PASS CSS.supports('align-self', 'auto') is true
 PASS CSS.supports('align-content', 'stretch') is true
 PASS CSS.supports('justify-content', 'flex-start') is true
 PASS CSS.supports('align-items', 'stretch') is true
-PASS CSS.supports('align-self', 'stretch') is true
+PASS CSS.supports('align-self', 'auto') is true
 PASS CSS.supports('align-content', 'stretch') is true
 PASS CSS.supports('justify-content', 'flex-start') is true
 PASS successfullyParsed is true
index 2c8e7a1..78efe47 100644 (file)
@@ -154,7 +154,7 @@ column-span: none;
 column-width: auto;
 align-content: normal;
 align-items: normal;
-align-self: normal;
+align-self: auto;
 filter: none;
 flex-basis: auto;
 flex-direction: row;
@@ -163,7 +163,7 @@ flex-grow: 0;
 flex-shrink: 1;
 flex-wrap: nowrap;
 justify-content: normal;
-justify-self: normal;
+justify-self: auto;
 justify-items: normal;
 -webkit-font-kerning: auto;
 -webkit-font-smoothing: auto;
index 2bfac7a..0ba402f 100644 (file)
@@ -153,7 +153,7 @@ column-span: none
 column-width: auto
 align-content: normal
 align-items: normal
-align-self: normal
+align-self: auto
 filter: none
 flex-basis: auto
 flex-direction: row
@@ -162,7 +162,7 @@ flex-grow: 0
 flex-shrink: 1
 flex-wrap: nowrap
 justify-content: normal
-justify-self: normal
+justify-self: auto
 justify-items: normal
 -webkit-font-kerning: auto
 -webkit-font-smoothing: auto
index 4a4b760..4e11e1e 100644 (file)
     justify-self: stretch;
 }
 
+#justifySelfNormal {
+    justify-self: normal;
+}
+
 #justifySelfStart {
     justify-self: start;
 }
@@ -89,6 +93,7 @@
 <div id="justifySelfFirstBaseline"></div>
 <div id="justifySelfLastBaseline"></div>
 <div id="justifySelfStretch"></div>
+<div id="justifySelfNormal"></div>
 <div id="justifySelfStart"></div>
 <div id="justifySelfEnd"></div>
 <div id="justifySelfCenter"></div>
@@ -120,6 +125,8 @@ test(function() {
     checkValues(justifySelfLastBaseline, "justifySelf", "justify-self", "", "last baseline");
     var justifySelfStretch = document.getElementById("justifySelfStretch");
     checkValues(justifySelfStretch, "justifySelf", "justify-self", "", "stretch");
+    var justifySelfNormal = document.getElementById("justifySelfNormal");
+    checkValues(justifySelfNormal, "justifySelf", "justify-self", "", "normal");
     var justifySelfStart = document.getElementById("justifySelfStart");
     checkValues(justifySelfStart, "justifySelf", "justify-self", "", "start");
     var justifySelfEnd = document.getElementById("justifySelfEnd");
@@ -160,7 +167,7 @@ test(function() {
 test(function() {
     element = document.createElement("div");
     document.body.appendChild(element);
-    checkValues(element, "justifySelf", "justify-self", "", "normal");
+    checkValues(element, "justifySelf", "justify-self", "", "auto");
 }, "Test initial value of justify-self through JS");
 
 test(function() {
@@ -186,16 +193,19 @@ test(function() {
     element.style.justifySelf = "self-start";
     checkValues(element, "justifySelf", "justify-self",  "self-start", "self-start");
 
+    element.style.justifySelf = "normal";
+    checkValues(element, "justifySelf", "justify-self",  "normal", "normal");
+
     element.style.justifySelf = "auto";
-    checkValues(element, "justifySelf", "justify-self",  "auto", "normal");
+    checkValues(element, "justifySelf", "justify-self",  "auto", "auto");
 
     container.style.display = "flex";
     element.style.justifySelf = "auto";
-    checkValues(element, "justifySelf", "justify-self",  "auto", "normal");
+    checkValues(element, "justifySelf", "justify-self",  "auto", "auto");
 
     container.style.display = "grid";
     element.style.justifySelf = "auto";
-    checkValues(element, "justifySelf", "justify-self",  "auto", "normal");
+    checkValues(element, "justifySelf", "justify-self",  "auto", "auto");
 
     element.style.justifySelf = "self-end";
     checkValues(element, "justifySelf", "justify-self",  "self-end", "self-end");
@@ -203,7 +213,7 @@ test(function() {
 
 test(function() {
     document.documentElement.style.justifySelf = "auto";
-    checkValues(document.documentElement, "justifySelf", "justify-self",  "auto", "normal");
+    checkValues(document.documentElement, "justifySelf", "justify-self",  "auto", "auto");
 }, "Test 'auto' value resolution for the root node");
 
 test(function() {
@@ -215,6 +225,9 @@ test(function() {
     checkBadValues(element, "justifySelf", "justify-self",  "unsafe auto");
     checkBadValues(element, "justifySelf", "justify-self",  "auto safe");
     checkBadValues(element, "justifySelf", "justify-self",  "auto left");
+    checkBadValues(element, "justifySelf", "justify-self",  "normal unsafe");
+    checkBadValues(element, "justifySelf", "justify-self",  "normal stretch");
+    checkBadValues(element, "justifySelf", "justify-self",  "baseline normal");
     checkBadValues(element, "justifySelf", "justify-self",  "baseline safe");
     checkBadValues(element, "justifySelf", "justify-self",  "baseline center");
     checkBadValues(element, "justifySelf", "justify-self",  "stretch unsafe");
@@ -240,35 +253,35 @@ test(function() {
 
 test(function() {
     container.style.display = "";
-    checkInitialValues(element, "justifySelf", "justify-self", "center", "normal");
+    checkInitialValues(element, "justifySelf", "justify-self", "center", "auto");
 }, "Test the value 'initial'");
 
 test(function() {
     container.style.display = "grid";
-    checkInitialValues(element, "justifySelf", "justify-self", "left safe", "normal");
+    checkInitialValues(element, "justifySelf", "justify-self", "left safe", "auto");
 }, "Test the value 'initial' for grid containers");
 
 test(function() {
     container.style.display = "flex";
-    checkInitialValues(element, "justifySelf", "justify-self", "right unsafe", "normal");
+    checkInitialValues(element, "justifySelf", "justify-self", "right unsafe", "auto");
 }, "Test the value 'initial' for flex containers");
 
 test(function() {
     container.style.display = "";
     element.style.position = "absolute";
-    checkInitialValues(element, "justifySelf", "justify-self", "left", "normal");
+    checkInitialValues(element, "justifySelf", "justify-self", "left", "auto");
 }, "Test the value 'initial' for positioned elements");
 
 test(function() {
     container.style.display = "grid";
     element.style.position = "absolute";
-    checkInitialValues(element, "justifySelf", "justify-self", "right", "normal");
+    checkInitialValues(element, "justifySelf", "justify-self", "right", "auto");
 }, "Test the value 'initial' for positioned elements in grid containers");
 
 test(function() {
     container.style.display = "flex";
     element.style.position = "absolute";
-    checkInitialValues(element, "justifySelf", "justify-self", "end", "normal");
+    checkInitialValues(element, "justifySelf", "justify-self", "end", "auto");
 }, "Test the value 'initial' for positioned elements in grid containers");
 
 test(function() {
index 119068b..750a424 100644 (file)
@@ -1,8 +1,6 @@
 Tests invalidation on align-items style change. Passes if there is no red.
 
 (repaint rects
-  (rect 0 52 100 102)
-  (rect 100 52 100 152)
   (rect 0 52 100 300)
   (rect 0 51 100 1)
   (rect 100 52 100 300)
index 272029e..d7a397c 100644 (file)
@@ -1,8 +1,6 @@
 Tests invalidation on align-items style change (just overflow). Passes if there is no red.
 
 (repaint rects
-  (rect 0 2 200 200)
-  (rect 0 252 200 100)
   (rect 0 2 200 350)
   (rect 0 52 200 300)
   (rect 0 2 800 14)
index 88d6599..96654c6 100644 (file)
@@ -1,8 +1,6 @@
 Tests invalidation on justify-items style change. Passes if there is no red.
 
 (repaint rects
-  (rect -60 52 160 300)
-  (rect 150 52 50 300)
   (rect -60 52 260 300)
   (rect 0 52 200 300)
   (rect -60 16 60 336)
index de3bd9a..a247ea3 100644 (file)
@@ -1,3 +1,14 @@
+2017-07-10  Javier Fernandez  <jfernandez@igalia.com>
+
+        [css-align][css-flex][css-grid] 'auto' values of align-self and justify-self must not be resolved
+        https://bugs.webkit.org/show_bug.cgi?id=172707
+
+        Reviewed by Antti Koivisto.
+
+        This change makes all the cases of the test below to pass now, hence updated expectations accordingly.
+
+        * web-platform-tests/css/css-align-3/self-alignment/place-self-shorthand-006-expected.txt:
+
 2017-07-05  Zalan Bujtas  <zalan@apple.com>
 
         REGRESSION (r217522): "Show My Relationship" link in familysearch.org does not work.
index e292b33..74be9dc 100644 (file)
@@ -1,22 +1,22 @@
 
-FAIL Checking place-self: auto assert_in_array: place-self resolved value value "normal normal" not in array ["", "auto auto"]
-FAIL Checking place-self: auto auto assert_in_array: place-self resolved value value "normal normal" not in array ["", "auto auto"]
-FAIL Checking place-self: auto normal assert_in_array: place-self resolved value value "normal normal" not in array ["", "auto normal"]
-FAIL Checking place-self: auto stretch assert_in_array: place-self resolved value value "normal stretch" not in array ["", "auto stretch"]
-FAIL Checking place-self: auto start assert_in_array: place-self resolved value value "normal start" not in array ["", "auto start"]
-FAIL Checking place-self: auto end assert_in_array: place-self resolved value value "normal end" not in array ["", "auto end"]
-FAIL Checking place-self: auto self-start assert_in_array: place-self resolved value value "normal self-start" not in array ["", "auto self-start"]
-FAIL Checking place-self: auto self-end assert_in_array: place-self resolved value value "normal self-end" not in array ["", "auto self-end"]
-FAIL Checking place-self: auto left assert_in_array: place-self resolved value value "normal left" not in array ["", "auto left"]
-FAIL Checking place-self: auto right assert_in_array: place-self resolved value value "normal right" not in array ["", "auto right"]
-FAIL Checking place-self: auto center assert_in_array: place-self resolved value value "normal center" not in array ["", "auto center"]
-FAIL Checking place-self: auto flex-start assert_in_array: place-self resolved value value "normal flex-start" not in array ["", "auto flex-start"]
-FAIL Checking place-self: auto flex-end assert_in_array: place-self resolved value value "normal flex-end" not in array ["", "auto flex-end"]
-FAIL Checking place-self: auto baseline assert_in_array: place-self resolved value value "normal baseline" not in array ["", "auto baseline"]
-FAIL Checking place-self: auto first baseline assert_in_array: place-self resolved value value "normal baseline" not in array ["", "auto baseline"]
-FAIL Checking place-self: auto last baseline assert_in_array: place-self resolved value value "normal last baseline" not in array ["", "auto last baseline"]
+PASS Checking place-self: auto 
+PASS Checking place-self: auto auto 
+PASS Checking place-self: auto normal 
+PASS Checking place-self: auto stretch 
+PASS Checking place-self: auto start 
+PASS Checking place-self: auto end 
+PASS Checking place-self: auto self-start 
+PASS Checking place-self: auto self-end 
+PASS Checking place-self: auto left 
+PASS Checking place-self: auto right 
+PASS Checking place-self: auto center 
+PASS Checking place-self: auto flex-start 
+PASS Checking place-self: auto flex-end 
+PASS Checking place-self: auto baseline 
+PASS Checking place-self: auto first baseline 
+PASS Checking place-self: auto last baseline 
 PASS Checking place-self: normal 
-FAIL Checking place-self: normal auto assert_in_array: place-self resolved value value "normal normal" not in array ["", "normal auto"]
+PASS Checking place-self: normal auto 
 PASS Checking place-self: normal normal 
 PASS Checking place-self: normal stretch 
 PASS Checking place-self: normal start 
@@ -32,7 +32,7 @@ PASS Checking place-self: normal baseline
 PASS Checking place-self: normal first baseline 
 PASS Checking place-self: normal last baseline 
 PASS Checking place-self: stretch 
-FAIL Checking place-self: stretch auto assert_in_array: place-self resolved value value "stretch normal" not in array ["", "stretch auto"]
+PASS Checking place-self: stretch auto 
 PASS Checking place-self: stretch normal 
 PASS Checking place-self: stretch stretch 
 PASS Checking place-self: stretch start 
@@ -48,7 +48,7 @@ PASS Checking place-self: stretch baseline
 PASS Checking place-self: stretch first baseline 
 PASS Checking place-self: stretch last baseline 
 PASS Checking place-self: start 
-FAIL Checking place-self: start auto assert_in_array: place-self resolved value value "start normal" not in array ["", "start auto"]
+PASS Checking place-self: start auto 
 PASS Checking place-self: start normal 
 PASS Checking place-self: start stretch 
 PASS Checking place-self: start start 
@@ -64,7 +64,7 @@ PASS Checking place-self: start baseline
 PASS Checking place-self: start first baseline 
 PASS Checking place-self: start last baseline 
 PASS Checking place-self: end 
-FAIL Checking place-self: end auto assert_in_array: place-self resolved value value "end normal" not in array ["", "end auto"]
+PASS Checking place-self: end auto 
 PASS Checking place-self: end normal 
 PASS Checking place-self: end stretch 
 PASS Checking place-self: end start 
@@ -80,7 +80,7 @@ PASS Checking place-self: end baseline
 PASS Checking place-self: end first baseline 
 PASS Checking place-self: end last baseline 
 PASS Checking place-self: self-start 
-FAIL Checking place-self: self-start auto assert_in_array: place-self resolved value value "self-start normal" not in array ["", "self-start auto"]
+PASS Checking place-self: self-start auto 
 PASS Checking place-self: self-start normal 
 PASS Checking place-self: self-start stretch 
 PASS Checking place-self: self-start start 
@@ -96,7 +96,7 @@ PASS Checking place-self: self-start baseline
 PASS Checking place-self: self-start first baseline 
 PASS Checking place-self: self-start last baseline 
 PASS Checking place-self: self-end 
-FAIL Checking place-self: self-end auto assert_in_array: place-self resolved value value "self-end normal" not in array ["", "self-end auto"]
+PASS Checking place-self: self-end auto 
 PASS Checking place-self: self-end normal 
 PASS Checking place-self: self-end stretch 
 PASS Checking place-self: self-end start 
@@ -112,7 +112,7 @@ PASS Checking place-self: self-end baseline
 PASS Checking place-self: self-end first baseline 
 PASS Checking place-self: self-end last baseline 
 PASS Checking place-self: left 
-FAIL Checking place-self: left auto assert_in_array: place-self resolved value value "left normal" not in array ["", "left auto"]
+PASS Checking place-self: left auto 
 PASS Checking place-self: left normal 
 PASS Checking place-self: left stretch 
 PASS Checking place-self: left start 
@@ -128,7 +128,7 @@ PASS Checking place-self: left baseline
 PASS Checking place-self: left first baseline 
 PASS Checking place-self: left last baseline 
 PASS Checking place-self: right 
-FAIL Checking place-self: right auto assert_in_array: place-self resolved value value "right normal" not in array ["", "right auto"]
+PASS Checking place-self: right auto 
 PASS Checking place-self: right normal 
 PASS Checking place-self: right stretch 
 PASS Checking place-self: right start 
@@ -144,7 +144,7 @@ PASS Checking place-self: right baseline
 PASS Checking place-self: right first baseline 
 PASS Checking place-self: right last baseline 
 PASS Checking place-self: center 
-FAIL Checking place-self: center auto assert_in_array: place-self resolved value value "center normal" not in array ["", "center auto"]
+PASS Checking place-self: center auto 
 PASS Checking place-self: center normal 
 PASS Checking place-self: center stretch 
 PASS Checking place-self: center start 
@@ -160,7 +160,7 @@ PASS Checking place-self: center baseline
 PASS Checking place-self: center first baseline 
 PASS Checking place-self: center last baseline 
 PASS Checking place-self: flex-start 
-FAIL Checking place-self: flex-start auto assert_in_array: place-self resolved value value "flex-start normal" not in array ["", "flex-start auto"]
+PASS Checking place-self: flex-start auto 
 PASS Checking place-self: flex-start normal 
 PASS Checking place-self: flex-start stretch 
 PASS Checking place-self: flex-start start 
@@ -176,7 +176,7 @@ PASS Checking place-self: flex-start baseline
 PASS Checking place-self: flex-start first baseline 
 PASS Checking place-self: flex-start last baseline 
 PASS Checking place-self: flex-end 
-FAIL Checking place-self: flex-end auto assert_in_array: place-self resolved value value "flex-end normal" not in array ["", "flex-end auto"]
+PASS Checking place-self: flex-end auto 
 PASS Checking place-self: flex-end normal 
 PASS Checking place-self: flex-end stretch 
 PASS Checking place-self: flex-end start 
@@ -192,7 +192,7 @@ PASS Checking place-self: flex-end baseline
 PASS Checking place-self: flex-end first baseline 
 PASS Checking place-self: flex-end last baseline 
 PASS Checking place-self: baseline 
-FAIL Checking place-self: baseline auto assert_in_array: place-self resolved value value "baseline normal" not in array ["", "baseline auto"]
+PASS Checking place-self: baseline auto 
 PASS Checking place-self: baseline normal 
 PASS Checking place-self: baseline stretch 
 PASS Checking place-self: baseline start 
@@ -208,7 +208,7 @@ PASS Checking place-self: baseline baseline
 PASS Checking place-self: baseline first baseline 
 PASS Checking place-self: baseline last baseline 
 PASS Checking place-self: first baseline 
-FAIL Checking place-self: first baseline auto assert_in_array: place-self resolved value value "baseline normal" not in array ["", "baseline auto"]
+PASS Checking place-self: first baseline auto 
 PASS Checking place-self: first baseline normal 
 PASS Checking place-self: first baseline stretch 
 PASS Checking place-self: first baseline start 
@@ -224,7 +224,7 @@ PASS Checking place-self: first baseline baseline
 PASS Checking place-self: first baseline first baseline 
 PASS Checking place-self: first baseline last baseline 
 PASS Checking place-self: last baseline 
-FAIL Checking place-self: last baseline auto assert_in_array: place-self resolved value value "last baseline normal" not in array ["", "last baseline auto"]
+PASS Checking place-self: last baseline auto 
 PASS Checking place-self: last baseline normal 
 PASS Checking place-self: last baseline stretch 
 PASS Checking place-self: last baseline start 
index caeffd7..f771bc9 100644 (file)
@@ -306,7 +306,7 @@ rect: style.getPropertyValue(align-content) : normal
 rect: style.getPropertyCSSValue(align-content) : [object CSSValueList]
 rect: style.getPropertyValue(align-items) : normal
 rect: style.getPropertyCSSValue(align-items) : [object CSSValueList]
-rect: style.getPropertyValue(align-self) : normal
+rect: style.getPropertyValue(align-self) : auto
 rect: style.getPropertyCSSValue(align-self) : [object CSSValueList]
 rect: style.getPropertyValue(filter) : none
 rect: style.getPropertyCSSValue(filter) : [object CSSPrimitiveValue]
@@ -324,7 +324,7 @@ rect: style.getPropertyValue(flex-wrap) : nowrap
 rect: style.getPropertyCSSValue(flex-wrap) : [object CSSPrimitiveValue]
 rect: style.getPropertyValue(justify-content) : normal
 rect: style.getPropertyCSSValue(justify-content) : [object CSSValueList]
-rect: style.getPropertyValue(justify-self) : normal
+rect: style.getPropertyValue(justify-self) : auto
 rect: style.getPropertyCSSValue(justify-self) : [object CSSValueList]
 rect: style.getPropertyValue(justify-items) : normal
 rect: style.getPropertyCSSValue(justify-items) : [object CSSValueList]
@@ -858,7 +858,7 @@ g: style.getPropertyValue(align-content) : normal
 g: style.getPropertyCSSValue(align-content) : [object CSSValueList]
 g: style.getPropertyValue(align-items) : normal
 g: style.getPropertyCSSValue(align-items) : [object CSSValueList]
-g: style.getPropertyValue(align-self) : normal
+g: style.getPropertyValue(align-self) : auto
 g: style.getPropertyCSSValue(align-self) : [object CSSValueList]
 g: style.getPropertyValue(filter) : none
 g: style.getPropertyCSSValue(filter) : [object CSSPrimitiveValue]
@@ -876,7 +876,7 @@ g: style.getPropertyValue(flex-wrap) : nowrap
 g: style.getPropertyCSSValue(flex-wrap) : [object CSSPrimitiveValue]
 g: style.getPropertyValue(justify-content) : normal
 g: style.getPropertyCSSValue(justify-content) : [object CSSValueList]
-g: style.getPropertyValue(justify-self) : normal
+g: style.getPropertyValue(justify-self) : auto
 g: style.getPropertyCSSValue(justify-self) : [object CSSValueList]
 g: style.getPropertyValue(justify-items) : normal
 g: style.getPropertyCSSValue(justify-items) : [object CSSValueList]
index aa8db5b..f21e237 100644 (file)
@@ -1,3 +1,38 @@
+2017-07-10  Javier Fernandez  <jfernandez@igalia.com>
+
+        [css-align][css-flex][css-grid] 'auto' values of align-self and justify-self must not be resolved
+        https://bugs.webkit.org/show_bug.cgi?id=172707
+
+        Reviewed by Antti Koivisto.
+
+        The CSS Box Alignment specification has been changed recently so that
+        now all the propeties have the specificed value as computed value. The
+        rationale of this change are at the associated W3C github issue [1].
+
+        This change implies that we don't need to execute the StyleAdjuter
+        logic we implemented specifically for supporting 'auto' values
+        resolution for computed style. We can live now with resolution at
+        layout time only.
+
+        [1] https://github.com/w3c/csswg-drafts/issues/440
+
+        No new tests, just updating the already defined tests.
+
+        * css/CSSComputedStyleDeclaration.cpp:
+        (WebCore::ComputedStyleExtractor::propertyValue):
+        * css/StyleResolver.cpp:
+        (WebCore::StyleResolver::adjustRenderStyle): Removed
+        * css/StyleResolver.h:
+        * html/shadow/TextControlInnerElements.cpp:
+        (WebCore::TextControlInnerElement::resolveCustomStyle):
+        * rendering/RenderBox.cpp:
+        (WebCore::RenderBox::columnFlexItemHasStretchAlignment):
+        (WebCore::RenderBox::hasStretchedLogicalWidth):
+        * rendering/RenderFlexibleBox.cpp:
+        (WebCore::RenderFlexibleBox::styleDidChange): Added
+        (WebCore::RenderFlexibleBox::alignmentForChild):
+        * rendering/RenderFlexibleBox.h:
+
 2017-07-10  Wenson Hsieh  <wenson_hsieh@apple.com>
 
         [WK2] Ignore touch events that interrupt platform-driven momentum scrolling
index 1e4e823..a4c3549 100644 (file)
@@ -2382,49 +2382,6 @@ Element* ComputedStyleExtractor::styledElement()
     return m_element.get();
 }
 
-static StyleSelfAlignmentData resolveLegacyJustifyItems(const StyleSelfAlignmentData& data)
-{
-    if (data.positionType() == LegacyPosition)
-        return { data.position(), OverflowAlignmentDefault };
-    return data;
-}
-
-static StyleSelfAlignmentData resolveJustifyItemsAuto(const StyleSelfAlignmentData& data, Node* parent)
-{
-    if (data.position() != ItemPositionAuto)
-        return data;
-
-    // If the inherited value of justify-items includes the 'legacy' keyword, 'auto' computes to the inherited value.
-    const auto& inheritedValue = (!parent || !parent->computedStyle()) ? RenderStyle::initialDefaultAlignment() : parent->computedStyle()->justifyItems();
-    if (inheritedValue.positionType() == LegacyPosition)
-        return inheritedValue;
-    if (inheritedValue.position() == ItemPositionAuto)
-        return resolveJustifyItemsAuto(inheritedValue, parent->parentNode());
-    return { ItemPositionNormal, OverflowAlignmentDefault };
-}
-
-static StyleSelfAlignmentData resolveJustifySelfAuto(const StyleSelfAlignmentData& data, Node* parent)
-{
-    if (data.position() != ItemPositionAuto)
-        return data;
-
-    // The 'auto' keyword computes to the computed value of justify-items on the parent or 'normal' if the box has no parent.
-    if (!parent || !parent->computedStyle())
-        return { ItemPositionNormal, OverflowAlignmentDefault };
-    return resolveLegacyJustifyItems(resolveJustifyItemsAuto(parent->computedStyle()->justifyItems(), parent->parentNode()));
-}
-
-static StyleSelfAlignmentData resolveAlignSelfAuto(const StyleSelfAlignmentData& data, Node* parent)
-{
-    if (data.position() != ItemPositionAuto)
-        return data;
-
-    // The 'auto' keyword computes to the computed value of align-items on the parent or 'normal' if the box has no parent.
-    if (!parent || !parent->computedStyle())
-        return { ItemPositionNormal, OverflowAlignmentDefault };
-    return parent->computedStyle()->alignItems();
-}
-
 static bool isImplicitlyInheritedGridOrFlexProperty(CSSPropertyID propertyID)
 {
     // It would be nice if grid and flex worked within normal CSS mechanisms and not invented their own inheritance system.
@@ -3014,7 +2971,7 @@ RefPtr<CSSValue> ComputedStyleExtractor::propertyValue(CSSPropertyID propertyID,
         case CSSPropertyAlignItems:
             return valueForItemPositionWithOverflowAlignment(style->alignItems());
         case CSSPropertyAlignSelf:
-            return valueForItemPositionWithOverflowAlignment(resolveAlignSelfAuto(style->alignSelf(), styledElement->parentNode()));
+            return valueForItemPositionWithOverflowAlignment(style->alignSelf());
         case CSSPropertyFlex:
             return getCSSPropertyValuesForShorthandProperties(flexShorthand());
         case CSSPropertyFlexBasis:
@@ -3032,9 +2989,9 @@ RefPtr<CSSValue> ComputedStyleExtractor::propertyValue(CSSPropertyID propertyID,
         case CSSPropertyJustifyContent:
             return valueForContentPositionAndDistributionWithOverflowAlignment(style->justifyContent(), CSSValueFlexStart);
         case CSSPropertyJustifyItems:
-            return valueForItemPositionWithOverflowAlignment(resolveJustifyItemsAuto(style->justifyItems(), styledElement->parentNode()));
+            return valueForItemPositionWithOverflowAlignment(style->justifyItems().position() == ItemPositionAuto ? RenderStyle::initialDefaultAlignment() : style->justifyItems());
         case CSSPropertyJustifySelf:
-            return valueForItemPositionWithOverflowAlignment(resolveJustifySelfAuto(style->justifySelf(), styledElement->parentNode()));
+            return valueForItemPositionWithOverflowAlignment(style->justifySelf());
         case CSSPropertyPlaceContent:
             return getCSSPropertyValuesForShorthandProperties(placeContentShorthand());
         case CSSPropertyPlaceItems:
index c07a187..fa83852 100644 (file)
@@ -1049,38 +1049,15 @@ void StyleResolver::adjustRenderStyle(RenderStyle& style, const RenderStyle& par
             style.setDisplay(BLOCK);
     }
     
-    adjustStyleForAlignment(style, *parentBoxStyle);
-}
-    
-void StyleResolver::adjustStyleForAlignment(RenderStyle& style, const RenderStyle& parentBoxStyle)
-{
-    // To avoid needing to copy the StyleRareNonInheritedData, we repurpose the 'auto'
-    // flag to not just mean 'auto' prior to running adjustRenderStyle but also
-    // mean 'normal' after running it.
-    
     // If the inherited value of justify-items includes the 'legacy' keyword,
     // 'auto' computes to the the inherited value. Otherwise, 'auto' computes to
     // 'normal'.
     if (style.justifyItems().position() == ItemPositionAuto) {
-        if (parentBoxStyle.justifyItems().positionType() == LegacyPosition)
-            style.setJustifyItems(parentBoxStyle.justifyItems());
+        if (parentBoxStyle->justifyItems().positionType() == LegacyPosition)
+            style.setJustifyItems(parentBoxStyle->justifyItems());
     }
-    
-    // The 'auto' keyword computes the computed value of justify-items on the
-    // parent (minus any legacy keywords), or 'normal' if the box has no parent.
-    if (style.justifySelf().position() == ItemPositionAuto) {
-        if (parentBoxStyle.justifyItems().positionType() == LegacyPosition)
-            style.setJustifySelfPosition(parentBoxStyle.justifyItems().position());
-        else if (parentBoxStyle.justifyItems().position() != ItemPositionAuto)
-            style.setJustifySelf(parentBoxStyle.justifyItems());
-    }
-    
-    // The 'auto' keyword computes the computed value of align-items on the parent
-    // or 'normal' if the box has no parent.
-    if (style.alignSelf().position() == ItemPositionAuto && parentBoxStyle.alignItems().position() != RenderStyle::initialDefaultAlignment().position())
-        style.setAlignSelf(parentBoxStyle.alignItems());
 }
-
+    
 bool StyleResolver::checkRegionStyle(const Element* regionElement)
 {
     unsigned rulesSize = m_ruleSets.authorStyle().regionSelectorsAndRuleSets().size();
index e6e84ca..59c8560 100644 (file)
@@ -305,10 +305,6 @@ public:
         TextDirection m_direction;
         WritingMode m_writingMode;
     };
-
-    // FIXME: Should make a StyleAdjuster class (like Blink has) that handles all RenderStyle
-    // adjustments. For now put this function on StyleResolver, since adjustRenderStyle is here.
-    static void adjustStyleForAlignment(RenderStyle&, const RenderStyle& parentStyle);
     
 private:
     // This function fixes up the default font size if it detects that the current generic font family has changed. -dwh
index 614fc1b..584da68 100644 (file)
@@ -75,7 +75,7 @@ Ref<TextControlInnerElement> TextControlInnerElement::create(Document& document)
     return adoptRef(*new TextControlInnerElement(document));
 }
 
-std::optional<ElementStyle> TextControlInnerElement::resolveCustomStyle(const RenderStyle& parentStyle, const RenderStyle* shadowHostStyle)
+std::optional<ElementStyle> TextControlInnerElement::resolveCustomStyle(const RenderStyle&, const RenderStyle* shadowHostStyle)
 {
     auto innerContainerStyle = RenderStyle::createPtr();
     innerContainerStyle->inheritFrom(*shadowHostStyle);
@@ -89,8 +89,6 @@ std::optional<ElementStyle> TextControlInnerElement::resolveCustomStyle(const Re
     // We don't want the shadow dom to be editable, so we set this block to read-only in case the input itself is editable.
     innerContainerStyle->setUserModify(READ_ONLY);
 
-    StyleResolver::adjustStyleForAlignment(*innerContainerStyle, parentStyle);
-
     return ElementStyle(WTFMove(innerContainerStyle));
 }
 
index bc72cd9..27ed072 100644 (file)
@@ -2528,7 +2528,7 @@ bool RenderBox::columnFlexItemHasStretchAlignment() const
     ASSERT(parentStyle.isColumnFlexDirection());
     if (style().marginStart().isAuto() || style().marginEnd().isAuto())
         return false;
-    return style().resolvedAlignSelf(isAnonymous() ? &parentStyle : nullptr, containingBlock()->selfAlignmentNormalBehavior()).position() == ItemPositionStretch;
+    return style().resolvedAlignSelf(&parentStyle, containingBlock()->selfAlignmentNormalBehavior()).position() == ItemPositionStretch;
 }
 
 bool RenderBox::isStretchingColumnFlexItem() const
@@ -2554,10 +2554,9 @@ bool RenderBox::hasStretchedLogicalWidth() const
         // The 'normal' value behaves like 'start' except for Flexbox Items, which obviously should have a container.
         return false;
     }
-    const auto* parentStyle = isAnonymous() ? &containingBlock->style() : nullptr;
     if (containingBlock->isHorizontalWritingMode() != isHorizontalWritingMode())
-        return style.resolvedAlignSelf(parentStyle, containingBlock->selfAlignmentNormalBehavior(this)).position() == ItemPositionStretch;
-    return style.resolvedJustifySelf(parentStyle, containingBlock->selfAlignmentNormalBehavior(this)).position() == ItemPositionStretch;
+        return style.resolvedAlignSelf(&containingBlock->style(), containingBlock->selfAlignmentNormalBehavior(this)).position() == ItemPositionStretch;
+    return style.resolvedJustifySelf(&containingBlock->style(), containingBlock->selfAlignmentNormalBehavior(this)).position() == ItemPositionStretch;
 }
 
 bool RenderBox::sizesLogicalWidthToFitContent(SizeType widthType) const
index 28f8836..8885242 100644 (file)
@@ -33,6 +33,7 @@
 
 #include "FlexibleBoxAlgorithm.h"
 #include "LayoutRepainter.h"
+#include "RenderChildIterator.h"
 #include "RenderLayer.h"
 #include "RenderView.h"
 #include "RuntimeEnabledFeatures.h"
@@ -235,6 +236,25 @@ static const StyleContentAlignmentData& contentAlignmentNormalBehavior()
     return normalBehavior;
 }
 
+void RenderFlexibleBox::styleDidChange(StyleDifference diff, const RenderStyle* oldStyle)
+{
+    RenderBlock::styleDidChange(diff, oldStyle);
+    if (!oldStyle || diff != StyleDifferenceLayout)
+        return;
+
+    if (oldStyle->resolvedAlignItems(selfAlignmentNormalBehavior()).position() == ItemPositionStretch) {
+        // Flex items that were previously stretching need to be relayed out so we
+        // can compute new available cross axis space. This is only necessary for
+        // stretching since other alignment values don't change the size of the
+        // box.
+        for (auto& child : childrenOfType<RenderBox>(*this)) {
+            ItemPosition previousAlignment = child.style().resolvedAlignSelf(oldStyle, selfAlignmentNormalBehavior()).position();
+            if (previousAlignment == ItemPositionStretch && previousAlignment != child.style().resolvedAlignSelf(&style(), selfAlignmentNormalBehavior()).position())
+                child.setChildNeedsLayout(MarkOnlyThis);
+        }
+    }
+}
+
 void RenderFlexibleBox::layoutBlock(bool relayoutChildren, LayoutUnit)
 {
     ASSERT(needsLayout());
@@ -1437,7 +1457,7 @@ void RenderFlexibleBox::prepareChildForPositionedLayout(RenderBox& child)
 
 ItemPosition RenderFlexibleBox::alignmentForChild(const RenderBox& child) const
 {
-    ItemPosition align = child.style().resolvedAlignSelf(child.isAnonymous() ? &style() : nullptr, selfAlignmentNormalBehavior()).position();
+    ItemPosition align = child.style().resolvedAlignSelf(&style(), selfAlignmentNormalBehavior()).position();
     ASSERT(align != ItemPositionAuto && align != ItemPositionNormal);
 
     if (align == ItemPositionBaseline && hasOrthogonalFlow(child))
index b206039..2c6fb0c 100644 (file)
@@ -55,6 +55,7 @@ public:
     std::optional<int> firstLineBaseline() const override;
     std::optional<int> inlineBlockBaseline(LineDirectionMode) const override;
 
+    void styleDidChange(StyleDifference, const RenderStyle*) override;
     void paintChildren(PaintInfo& forSelf, const LayoutPoint&, PaintInfo& forChild, bool usePrintRect) override;
 
     bool isHorizontalFlow() const;
index d82791b..773f522 100644 (file)
@@ -31,6 +31,7 @@
 #include "GridPositionsResolver.h"
 #include "GridTrackSizingAlgorithm.h"
 #include "LayoutRepainter.h"
+#include "RenderChildIterator.h"
 #include "RenderLayer.h"
 #include "RenderView.h"
 #include <cstdlib>
@@ -93,12 +94,50 @@ void RenderGrid::removeChild(RenderObject& child)
     dirtyGrid();
 }
 
+StyleSelfAlignmentData RenderGrid::selfAlignmentForChild(GridAxis axis, const RenderBox& child, const RenderStyle* gridStyle) const
+{
+    return axis == GridRowAxis ? justifySelfForChild(child, gridStyle) : alignSelfForChild(child, gridStyle);
+}
+
+bool RenderGrid::selfAlignmentChangedToStretch(GridAxis axis, const RenderStyle& oldStyle, const RenderStyle& newStyle, const RenderBox& child) const
+{
+    return selfAlignmentForChild(axis, child, &oldStyle).position() != ItemPositionStretch
+        && selfAlignmentForChild(axis, child, &newStyle).position() == ItemPositionStretch;
+}
+
+bool RenderGrid::selfAlignmentChangedFromStretch(GridAxis axis, const RenderStyle& oldStyle, const RenderStyle& newStyle, const RenderBox& child) const
+{
+    return selfAlignmentForChild(axis, child, &oldStyle).position() == ItemPositionStretch
+        && selfAlignmentForChild(axis, child, &newStyle).position() != ItemPositionStretch;
+}
+
 void RenderGrid::styleDidChange(StyleDifference diff, const RenderStyle* oldStyle)
 {
     RenderBlock::styleDidChange(diff, oldStyle);
     if (!oldStyle || diff != StyleDifferenceLayout)
         return;
 
+    const RenderStyle& newStyle = this->style();
+    if (oldStyle->resolvedAlignItems(selfAlignmentNormalBehavior(this)).position() == ItemPositionStretch) {
+        // Style changes on the grid container implying stretching (to-stretch) or
+        // shrinking (from-stretch) require the affected items to be laid out again.
+        // These logic only applies to 'stretch' since the rest of the alignment
+        // values don't change the size of the box.
+        // In any case, the items' overrideSize will be cleared and recomputed (if
+        // necessary)  as part of the Grid layout logic, triggered by this style
+        // change.
+        for (auto& child : childrenOfType<RenderBox>(*this)) {
+            if (child.isOutOfFlowPositioned())
+                continue;
+            if (selfAlignmentChangedToStretch(GridRowAxis, *oldStyle, newStyle, child)
+                || selfAlignmentChangedFromStretch(GridRowAxis, *oldStyle, newStyle, child)
+                || selfAlignmentChangedToStretch(GridColumnAxis, *oldStyle, newStyle, child)
+                || selfAlignmentChangedFromStretch(GridColumnAxis, *oldStyle, newStyle, child)) {
+                child.setNeedsLayout();
+            }
+        }
+    }
+
     if (explicitGridDidResize(*oldStyle) || namedGridLinesDefinitionDidChange(*oldStyle) || oldStyle->gridAutoFlow() != style().gridAutoFlow()
         || (style().gridAutoRepeatColumns().size() || style().gridAutoRepeatRows().size()))
         dirtyGrid();
@@ -1164,26 +1203,18 @@ LayoutUnit RenderGrid::availableAlignmentSpaceForChildBeforeStretching(LayoutUni
     return gridAreaBreadthForChild - (child.needsLayout() ? computeMarginLogicalSizeForChild(childBlockFlowDirection, child) : marginLogicalSizeForChild(childBlockFlowDirection, child));
 }
 
-StyleSelfAlignmentData RenderGrid::alignSelfForChild(const RenderBox& child) const
+StyleSelfAlignmentData RenderGrid::alignSelfForChild(const RenderBox& child, const RenderStyle* gridStyle) const
 {
-    if (!child.isAnonymous())
-        return child.style().resolvedAlignSelf(nullptr, selfAlignmentNormalBehavior(&child));
-
-    // All the 'auto' values have been resolved by the StyleAdjuster, but it's
-    // possible that some grid items generate Anonymous boxes, which need to be
-    // solved during layout.
-    return child.style().resolvedAlignSelf(&style(), selfAlignmentNormalBehavior(&child));
+    if (!gridStyle)
+        gridStyle = &style();
+    return child.style().resolvedAlignSelf(gridStyle, selfAlignmentNormalBehavior(&child));
 }
 
-StyleSelfAlignmentData RenderGrid::justifySelfForChild(const RenderBox& child) const
+StyleSelfAlignmentData RenderGrid::justifySelfForChild(const RenderBox& child, const RenderStyle* gridStyle) const
 {
-    if (!child.isAnonymous())
-        return child.style().resolvedJustifySelf(nullptr, selfAlignmentNormalBehavior(&child));
-    
-    // All the 'auto' values have been resolved by the StyleAdjuster, but it's
-    // possible that some grid items generate Anonymous boxes, which need to be
-    // solved during layout.
-    return child.style().resolvedJustifySelf(&style(), selfAlignmentNormalBehavior(&child));
+    if (!gridStyle)
+        gridStyle = &style();
+    return child.style().resolvedJustifySelf(gridStyle, selfAlignmentNormalBehavior(&child));
 }
 
 // FIXME: This logic is shared by RenderFlexibleBox, so it should be moved to RenderBox.
index d3c4946..bea9728 100644 (file)
@@ -38,6 +38,7 @@ class GridSpan;
 struct ContentAlignmentData;
 
 enum GridAxisPosition {GridAxisStart, GridAxisEnd, GridAxisCenter};
+enum GridAxis { GridRowAxis, GridColumnAxis };
 
 class RenderGrid final : public RenderBlock {
 public:
@@ -79,6 +80,10 @@ private:
     void addChild(RenderObject* newChild, RenderObject* beforeChild) final;
     void removeChild(RenderObject&) final;
 
+    StyleSelfAlignmentData selfAlignmentForChild(GridAxis, const RenderBox&, const RenderStyle* = nullptr) const;
+    bool selfAlignmentChangedToStretch(GridAxis, const RenderStyle& oldStyle, const RenderStyle& newStyle, const RenderBox&) const;
+    bool selfAlignmentChangedFromStretch(GridAxis, const RenderStyle& oldStyle, const RenderStyle& newStyle, const RenderBox&) const;
+
     std::optional<LayoutUnit> availableSpaceForGutters(GridTrackSizingDirection) const;
 
     bool explicitGridDidResize(const RenderStyle&) const;
@@ -133,8 +138,8 @@ private:
     LayoutUnit marginLogicalSizeForChild(GridTrackSizingDirection, const RenderBox&) const;
     LayoutUnit computeMarginLogicalSizeForChild(GridTrackSizingDirection, const RenderBox&) const;
     LayoutUnit availableAlignmentSpaceForChildBeforeStretching(LayoutUnit gridAreaBreadthForChild, const RenderBox&) const;
-    StyleSelfAlignmentData justifySelfForChild(const RenderBox&) const;
-    StyleSelfAlignmentData alignSelfForChild(const RenderBox&) const;
+    StyleSelfAlignmentData justifySelfForChild(const RenderBox&, const RenderStyle* = nullptr) const;
+    StyleSelfAlignmentData alignSelfForChild(const RenderBox&, const RenderStyle* = nullptr) const;
     void applyStretchAlignmentToChildIfNeeded(RenderBox&);
     bool hasAutoSizeInColumnAxis(const RenderBox& child) const { return isHorizontalWritingMode() ? child.style().height().isAuto() : child.style().width().isAuto(); }
     bool hasAutoSizeInRowAxis(const RenderBox& child) const { return isHorizontalWritingMode() ? child.style().width().isAuto() : child.style().height().isAuto(); }