Changeset 219315 in webkit


Ignore:
Timestamp:
Jul 10, 2017 4:56:21 PM (7 years ago)
Author:
jfernandez@igalia.com
Message:

[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.

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:
Location:
trunk
Files:
31 edited

Legend:

Unmodified
Added
Removed
  • trunk/LayoutTests/ChangeLog

    r219313 r219315  
     12017-07-10  Javier Fernandez  <jfernandez@igalia.com>
     2
     3        [css-align][css-flex][css-grid] 'auto' values of align-self and justify-self must not be resolved
     4        https://bugs.webkit.org/show_bug.cgi?id=172707
     5
     6        Reviewed by Antti Koivisto.
     7
     8        Updated layout tests so that resolved value is as specified, even for 'auto' values.
     9
     10        * TestExpectations:
     11        * css3/flexbox/css-properties-expected.txt:
     12        * css3/flexbox/css-properties.html:
     13        * css3/flexbox/new-alignment-values-invalid-if-grid-not-enabled-expected.txt:
     14        * css3/flexbox/new-alignment-values-invalid-if-grid-not-enabled.html:
     15        * css3/parse-align-self.html:
     16        * css3/parse-alignment-of-root-elements-expected.txt:
     17        * css3/parse-alignment-of-root-elements.html:
     18        * css3/parse-place-items.html:
     19        * css3/parse-place-self.html:
     20        * fast/css/ensure-flexbox-compatibility-with-initial-values-expected.txt:
     21        * fast/css/parse-justify-self.html:
     22
    1232017-07-10  Myles C. Maxfield  <mmaxfield@apple.com>
    224
  • trunk/LayoutTests/TestExpectations

    r219311 r219315  
    296296imported/w3c/web-platform-tests/IndexedDB/bindings-inject-key.html [ Pass Failure ]
    297297imported/w3c/web-platform-tests/fetch/dangling-markup-mitigation.tentative.html [ Pass Failure ]
     298
     299# css alignment tests
     300webkit.org/b/172711 css3/parse-alignment-of-root-elements.html [ Failure ]
    298301
    299302# selectors4
  • trunk/LayoutTests/css3/flexbox/css-properties-expected.txt

    r216536 r219315  
    3232PASS window.getComputedStyle(flexbox, null).justifyContent is "normal"
    3333PASS flexbox.style.alignSelf is ""
    34 PASS window.getComputedStyle(flexbox, null).alignSelf is "normal"
    35 PASS window.getComputedStyle(document.documentElement, null).alignSelf is "normal"
     34PASS window.getComputedStyle(flexbox, null).alignSelf is "auto"
     35PASS window.getComputedStyle(document.documentElement, null).alignSelf is "auto"
    3636PASS flexbox.style.alignSelf is ""
    37 PASS window.getComputedStyle(flexbox, null).alignSelf is "normal"
     37PASS window.getComputedStyle(flexbox, null).alignSelf is "auto"
    3838PASS flexbox.style.alignSelf is "auto"
    39 PASS window.getComputedStyle(flexbox, null).alignSelf is "normal"
     39PASS window.getComputedStyle(flexbox, null).alignSelf is "auto"
    4040PASS flexbox.style.alignSelf is "flex-start"
    4141PASS window.getComputedStyle(flexbox, null).alignSelf is "flex-start"
     
    4949PASS window.getComputedStyle(flexbox, null).alignSelf is "baseline"
    5050PASS flexbox.style.alignSelf is ""
    51 PASS window.getComputedStyle(flexbox, null).alignSelf is "normal"
    52 PASS flexbox.style.alignItems is ""
    53 PASS flexitem.style.alignSelf is ""
    54 PASS window.getComputedStyle(flexbox, null).alignItems is "normal"
    55 PASS window.getComputedStyle(flexitem, null).alignSelf is "normal"
    56 PASS flexbox.style.alignItems is ""
    57 PASS flexitem.style.alignSelf is ""
    58 PASS window.getComputedStyle(flexbox, null).alignItems is "normal"
    59 PASS window.getComputedStyle(flexitem, null).alignSelf is "normal"
    60 PASS flexbox.style.alignItems is ""
    61 PASS flexitem.style.alignSelf is ""
    62 PASS window.getComputedStyle(flexbox, null).alignItems is "normal"
    63 PASS window.getComputedStyle(flexitem, null).alignSelf is "normal"
     51PASS window.getComputedStyle(flexbox, null).alignSelf is "auto"
     52PASS flexbox.style.alignItems is ""
     53PASS flexitem.style.alignSelf is ""
     54PASS window.getComputedStyle(flexbox, null).alignItems is "normal"
     55PASS window.getComputedStyle(flexitem, null).alignSelf is "auto"
     56PASS flexbox.style.alignItems is ""
     57PASS flexitem.style.alignSelf is ""
     58PASS window.getComputedStyle(flexbox, null).alignItems is "normal"
     59PASS window.getComputedStyle(flexitem, null).alignSelf is "auto"
     60PASS flexbox.style.alignItems is ""
     61PASS flexitem.style.alignSelf is ""
     62PASS window.getComputedStyle(flexbox, null).alignItems is "normal"
     63PASS window.getComputedStyle(flexitem, null).alignSelf is "auto"
    6464PASS flexbox.style.alignItems is "flex-start"
    6565PASS flexitem.style.alignSelf is ""
    6666PASS window.getComputedStyle(flexbox, null).alignItems is "flex-start"
    67 PASS window.getComputedStyle(flexitem, null).alignSelf is "flex-start"
     67PASS window.getComputedStyle(flexitem, null).alignSelf is "auto"
    6868PASS flexbox.style.alignItems is "flex-end"
    6969PASS window.getComputedStyle(flexbox, null).alignItems is "flex-end"
    70 PASS window.getComputedStyle(flexitem, null).alignSelf is "flex-end"
     70PASS window.getComputedStyle(flexitem, null).alignSelf is "auto"
    7171PASS flexbox.style.alignItems is "center"
    7272PASS window.getComputedStyle(flexbox, null).alignItems is "center"
    73 PASS window.getComputedStyle(flexitem, null).alignSelf is "center"
     73PASS window.getComputedStyle(flexitem, null).alignSelf is "auto"
    7474PASS flexbox.style.alignItems is "stretch"
    7575PASS window.getComputedStyle(flexbox, null).alignItems is "stretch"
    76 PASS window.getComputedStyle(flexitem, null).alignSelf is "stretch"
     76PASS window.getComputedStyle(flexitem, null).alignSelf is "auto"
    7777PASS flexbox.style.alignItems is "baseline"
    7878PASS window.getComputedStyle(flexbox, null).alignItems is "baseline"
    79 PASS window.getComputedStyle(flexitem, null).alignSelf is "baseline"
    80 PASS flexbox.style.alignItems is ""
    81 PASS window.getComputedStyle(flexbox, null).alignItems is "normal"
    82 PASS window.getComputedStyle(flexitem, null).alignSelf is "normal"
    83 PASS flexbox.style.alignItems is ""
    84 PASS window.getComputedStyle(flexbox, null).alignItems is "normal"
    85 PASS window.getComputedStyle(flexitem, null).alignSelf is "normal"
     79PASS window.getComputedStyle(flexitem, null).alignSelf is "auto"
     80PASS flexbox.style.alignItems is ""
     81PASS window.getComputedStyle(flexbox, null).alignItems is "normal"
     82PASS window.getComputedStyle(flexitem, null).alignSelf is "auto"
     83PASS flexbox.style.alignItems is ""
     84PASS window.getComputedStyle(flexbox, null).alignItems is "normal"
     85PASS window.getComputedStyle(flexitem, null).alignSelf is "auto"
    8686PASS window.getComputedStyle(detachedFlexbox, null).alignSelf is ""
    8787PASS window.getComputedStyle(detachedFlexItem, null).alignSelf is ""
  • trunk/LayoutTests/css3/flexbox/css-properties.html

    r216536 r219315  
    8585
    8686shouldBeEqualToString('flexbox.style.alignSelf', '');
    87 // The initial value is 'auto', which will be resolved depending on parent's style (except for the 'document' element).
    88 shouldBeEqualToString('window.getComputedStyle(flexbox, null).alignSelf', 'normal');
    89 shouldBeEqualToString('window.getComputedStyle(document.documentElement, null).alignSelf', 'normal');
     87// The initial value is 'auto'.
     88shouldBeEqualToString('window.getComputedStyle(flexbox, null).alignSelf', 'auto');
     89shouldBeEqualToString('window.getComputedStyle(document.documentElement, null).alignSelf', 'auto');
    9090
    9191flexbox.style.alignSelf = 'foo';
    9292shouldBeEqualToString('flexbox.style.alignSelf', '');
    93 shouldBeEqualToString('window.getComputedStyle(flexbox, null).alignSelf', 'normal');
     93shouldBeEqualToString('window.getComputedStyle(flexbox, null).alignSelf', 'auto');
    9494
    9595flexbox.style.alignSelf = 'auto';
    9696shouldBeEqualToString('flexbox.style.alignSelf', 'auto');
    97 shouldBeEqualToString('window.getComputedStyle(flexbox, null).alignSelf', 'normal');
     97shouldBeEqualToString('window.getComputedStyle(flexbox, null).alignSelf', 'auto');
    9898
    9999flexbox.style.alignSelf = 'flex-start';
     
    119119flexbox.style.alignSelf = '';
    120120shouldBeEqualToString('flexbox.style.alignSelf', '');
    121 shouldBeEqualToString('window.getComputedStyle(flexbox, null).alignSelf', 'normal');
     121shouldBeEqualToString('window.getComputedStyle(flexbox, null).alignSelf', 'auto');
    122122
    123123shouldBeEqualToString('flexbox.style.alignItems', '');
    124124shouldBeEqualToString('flexitem.style.alignSelf', '');
    125 // The initial value is 'auto', which will be resolved to 'normal' in case of flexbox containers.
    126 shouldBeEqualToString('window.getComputedStyle(flexbox, null).alignItems', 'normal');
    127 shouldBeEqualToString('window.getComputedStyle(flexitem, null).alignSelf', 'normal');
     125// The initial value is 'auto'.
     126shouldBeEqualToString('window.getComputedStyle(flexbox, null).alignItems', 'normal');
     127shouldBeEqualToString('window.getComputedStyle(flexitem, null).alignSelf', 'auto');
    128128
    129129flexbox.style.alignItems = 'foo';
     
    131131shouldBeEqualToString('flexitem.style.alignSelf', '');
    132132shouldBeEqualToString('window.getComputedStyle(flexbox, null).alignItems', 'normal');
    133 shouldBeEqualToString('window.getComputedStyle(flexitem, null).alignSelf', 'normal');
     133shouldBeEqualToString('window.getComputedStyle(flexitem, null).alignSelf', 'auto');
    134134
    135135// The 'auto' value is not valid for the align-items property.
     
    138138shouldBeEqualToString('flexitem.style.alignSelf', '');
    139139shouldBeEqualToString('window.getComputedStyle(flexbox, null).alignItems', 'normal');
    140 shouldBeEqualToString('window.getComputedStyle(flexitem, null).alignSelf', 'normal');
     140shouldBeEqualToString('window.getComputedStyle(flexitem, null).alignSelf', 'auto');
    141141
    142142flexbox.style.alignItems = 'flex-start';
     
    144144shouldBeEqualToString('flexitem.style.alignSelf', '');
    145145shouldBeEqualToString('window.getComputedStyle(flexbox, null).alignItems', 'flex-start');
    146 shouldBeEqualToString('window.getComputedStyle(flexitem, null).alignSelf', 'flex-start');
     146shouldBeEqualToString('window.getComputedStyle(flexitem, null).alignSelf', 'auto');
    147147
    148148flexbox.style.alignItems = 'flex-end';
    149149shouldBeEqualToString('flexbox.style.alignItems', 'flex-end');
    150150shouldBeEqualToString('window.getComputedStyle(flexbox, null).alignItems', 'flex-end');
    151 shouldBeEqualToString('window.getComputedStyle(flexitem, null).alignSelf', 'flex-end');
     151shouldBeEqualToString('window.getComputedStyle(flexitem, null).alignSelf', 'auto');
    152152
    153153flexbox.style.alignItems = 'center';
    154154shouldBeEqualToString('flexbox.style.alignItems', 'center');
    155155shouldBeEqualToString('window.getComputedStyle(flexbox, null).alignItems', 'center');
    156 shouldBeEqualToString('window.getComputedStyle(flexitem, null).alignSelf', 'center');
     156shouldBeEqualToString('window.getComputedStyle(flexitem, null).alignSelf', 'auto');
    157157
    158158flexbox.style.alignItems = 'stretch';
    159159shouldBeEqualToString('flexbox.style.alignItems', 'stretch');
    160160shouldBeEqualToString('window.getComputedStyle(flexbox, null).alignItems', 'stretch');
    161 shouldBeEqualToString('window.getComputedStyle(flexitem, null).alignSelf', 'stretch');
     161shouldBeEqualToString('window.getComputedStyle(flexitem, null).alignSelf', 'auto');
    162162
    163163flexbox.style.alignItems = 'baseline';
    164164shouldBeEqualToString('flexbox.style.alignItems', 'baseline');
    165165shouldBeEqualToString('window.getComputedStyle(flexbox, null).alignItems', 'baseline');
    166 shouldBeEqualToString('window.getComputedStyle(flexitem, null).alignSelf', 'baseline');
     166shouldBeEqualToString('window.getComputedStyle(flexitem, null).alignSelf', 'auto');
    167167
    168168flexbox.style.alignItems = '';
    169169shouldBeEqualToString('flexbox.style.alignItems', '');
    170170shouldBeEqualToString('window.getComputedStyle(flexbox, null).alignItems', 'normal');
    171 shouldBeEqualToString('window.getComputedStyle(flexitem, null).alignSelf', 'normal');
     171shouldBeEqualToString('window.getComputedStyle(flexitem, null).alignSelf', 'auto');
    172172
    173173flexbox.style.display = 'none';
    174174shouldBeEqualToString('flexbox.style.alignItems', '');
    175175shouldBeEqualToString('window.getComputedStyle(flexbox, null).alignItems', 'normal');
    176 shouldBeEqualToString('window.getComputedStyle(flexitem, null).alignSelf', 'normal');
     176shouldBeEqualToString('window.getComputedStyle(flexitem, null).alignSelf', 'auto');
    177177flexbox.style.display = 'flex';
    178178
  • trunk/LayoutTests/css3/flexbox/new-alignment-values-invalid-if-grid-not-enabled-expected.txt

    r205102 r219315  
    11Test 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.
    22
    3 On success, you will see a series of "PASS" messages, followed by "TEST COMPLETE".
    43
     4PASS New Self-Alignment values should be invalid when grid layout is DISABLED.
     5PASS New Default-Alignment values should be invalid when grid layout is DISABLED.
     6PASS Even when grid layout is ENABLED, new Self-Alignment values should not violate assertions in FlexibleBox layout logic..
     7PASS Even when grid layout is ENABLED, new Default-Alignment values should not violate assertions in FlexibleBox layout logic..
    58
    6 
    7 New alignment values should be invalid when grid layout is disabled
    8 
    9 Testing Self-Alignment values.
    10 PASS alignSelf is 'flex-start'
    11 PASS alignSelf is 'flex-start'
    12 PASS alignSelf is 'flex-start'
    13 PASS alignSelf is 'flex-start'
    14 PASS alignSelf is 'flex-start'
    15 PASS alignSelf is 'flex-start'
    16 
    17 Testing Default-Alignment values.
    18 PASS alignItems is 'flex-end'
    19 PASS alignSelf is 'flex-end'
    20 PASS alignItems is 'flex-end'
    21 PASS alignSelf is 'flex-end'
    22 PASS alignItems is 'flex-end'
    23 PASS alignSelf is 'flex-end'
    24 PASS alignItems is 'flex-end'
    25 PASS alignSelf is 'flex-end'
    26 PASS alignItems is 'flex-end'
    27 PASS alignSelf is 'flex-end'
    28 PASS alignItems is 'flex-end'
    29 PASS alignSelf is 'flex-end'
    30 
    31 Even when grid layout is enabled, new values should not violate assertions in FlexibleBox layout logic.
    32 
    33 Testing Self-Alignment values.
    34 PASS alignSelf is 'start unsafe'
    35 PASS alignSelf is 'start'
    36 PASS alignSelf is 'end'
    37 PASS alignSelf is 'flex-start safe'
    38 PASS alignSelf is 'self-start'
    39 PASS alignSelf is 'self-end'
    40 
    41 Testing Default-Alignment values.
    42 PASS alignItems is 'start unsafe'
    43 PASS alignSelf is 'start unsafe'
    44 PASS alignItems is 'start'
    45 PASS alignSelf is 'start'
    46 PASS alignItems is 'end'
    47 PASS alignSelf is 'end'
    48 PASS alignItems is 'flex-start safe'
    49 PASS alignSelf is 'flex-start safe'
    50 PASS alignItems is 'self-start'
    51 PASS alignSelf is 'self-start'
    52 PASS alignItems is 'self-end'
    53 PASS alignSelf is 'self-end'
    54 PASS successfullyParsed is true
    55 
    56 TEST COMPLETE
    57 
  • trunk/LayoutTests/css3/flexbox/new-alignment-values-invalid-if-grid-not-enabled.html

    r211006 r219315  
    11<!DOCTYPE html>
    2 <div id="flexContainer" style="display: flex">
    3     <div id="flexItem"></div>
    4 </div>
    5 <script src="../../resources/js-test.js"></script>
     2<script src="../../resources/testharness.js"></script>
     3<script src="../../resources/testharnessreport.js"></script>
     4<script src="../resources/alignment-parsing-utils-th.js"></script>
     5<html>
     6 <body>
     7     <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>
     8     <div id="log"></div>
     9
     10     <div id="flexContainer" style="display: flex">
     11         <div id="flexItem"></div>
     12     </div>
    613<script>
    7 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.');
     14
     15var container = document.getElementById("flexContainer");
     16var item = document.getElementById("flexItem");
    817
    918function checkAlignSelfValue(value, computedValue, gridEnabled)
    1019{
    1120    item.style.webkitAlignSelf = value;
    12     alignSelf = getComputedStyle(item, '').getPropertyValue('-webkit-align-self');
    1321    if (gridEnabled)
    14         shouldBe("alignSelf", computedValue);
     22        checkValues(item, "alignSelf", "align-self", value, computedValue);
    1523    else
    16         shouldBe("alignSelf", "'flex-start'");
     24        checkValues(item, "alignSelf", "align-self", "flex-start", "flex-start");
    1725}
    1826
     
    2028{
    2129    container.style.webkitAlignItems = value;
    22     alignItems = getComputedStyle(container, '').getPropertyValue('-webkit-align-items');
    23     alignSelf = getComputedStyle(item, '').getPropertyValue('-webkit-align-self');
    2430    if (gridEnabled) {
    25         shouldBe("alignItems", computedValue);
    26         shouldBe("alignSelf", computedValue);
     31        checkValues(container, "alignItems", "align-items", value, computedValue);
     32        checkValues(item, "alignSelf", "align-self", "auto", "auto");
    2733    } else {
    28         shouldBe("alignItems", "'flex-end'");
    29         shouldBe("alignSelf", "'flex-end'");
     34        checkValues(container, "alignItems", "align-items", "flex-end", "flex-end");
     35        checkValues(item, "alignSelf", "align-self", "auto", "auto");
    3036    }
    3137}
    3238
    33 function checkAlignmentValues(gridEnabled)
     39function checkSelfAlignmentValues(gridEnabled)
    3440{
    3541    if (window.internals)
    36         internals.settings.setCSSGridLayoutEnabled(gridEnabled);
     42        internals.settings.setCSSGridLayoutEnabled(gridEnabled)
    3743
    38     debug('<br>Testing Self-Alignment values.');
    39     checkAlignSelfValue("start unsafe", "'start unsafe'", gridEnabled)
    40     checkAlignSelfValue("start", "'start'", gridEnabled)
    41     checkAlignSelfValue("end", "'end'", gridEnabled)
    42     checkAlignSelfValue("flex-start safe", "'flex-start safe'", gridEnabled)
    43     checkAlignSelfValue("self-start", "'self-start'", gridEnabled)
    44     checkAlignSelfValue("self-end", "'self-end'", gridEnabled)
     44    item.style.webkitAlignSelf = "flex-start";
    4545
     46    checkAlignSelfValue("start unsafe", "start unsafe", gridEnabled)
     47    checkAlignSelfValue("start", "start", gridEnabled)
     48    checkAlignSelfValue("end", "end", gridEnabled)
     49    checkAlignSelfValue("flex-start safe", "flex-start safe", gridEnabled)
     50    checkAlignSelfValue("self-start", "self-start", gridEnabled)
     51    checkAlignSelfValue("self-end", "self-end", gridEnabled)
     52}
     53
     54function checkDefaultAlignmentValues(gridEnabled)
     55{
     56    if (window.internals)
     57        internals.settings.setCSSGridLayoutEnabled(gridEnabled)
     58
     59    container.style.webkitAlignItems = "flex-end";
    4660    item.style.webkitAlignSelf = "auto";
    4761
    48     debug('<br>Testing Default-Alignment values.');
    49     checkAlignItemsValue("start unsafe", "'start unsafe'", gridEnabled)
    50     checkAlignItemsValue("start", "'start'", gridEnabled)
    51     checkAlignItemsValue("end", "'end'", gridEnabled)
    52     checkAlignItemsValue("flex-start safe", "'flex-start safe'", gridEnabled)
    53     checkAlignItemsValue("self-start", "'self-start'", gridEnabled)
    54     checkAlignItemsValue("self-end", "'self-end'", gridEnabled)
    55 
    56     item.style.webkitAlignSelf = "flex-start";
     62    checkAlignItemsValue("start unsafe", "start unsafe", gridEnabled)
     63    checkAlignItemsValue("start", "start", gridEnabled)
     64    checkAlignItemsValue("end", "end", gridEnabled)
     65    checkAlignItemsValue("flex-start safe", "flex-start safe", gridEnabled)
     66    checkAlignItemsValue("self-start", "self-start", gridEnabled)
     67    checkAlignItemsValue("self-end", "self-end", gridEnabled)
    5768}
    5869
    59 var container = document.getElementById("flexContainer");
    60 var item = document.getElementById("flexItem");
     70test(function() {
     71    checkSelfAlignmentValues(false);
     72}, "New Self-Alignment values should be invalid when grid layout is DISABLED.");
    6173
    62 container.style.webkitAlignItems = "flex-end";
    63 item.style.webkitAlignSelf = "flex-start";
    64 var alignSelf = "flex-start";
    65 var alignItems = "flex-start";
     74test(function() {
     75    checkDefaultAlignmentValues(false);
     76}, "New Default-Alignment values should be invalid when grid layout is DISABLED.");
    6677
    67 debug('<br>New alignment values should be invalid when grid layout is disabled');
    68 checkAlignmentValues(false);
     78test(function() {
     79    checkSelfAlignmentValues(true);
     80}, "Even when grid layout is ENABLED, new Self-Alignment values should not violate assertions in FlexibleBox layout logic..");
    6981
    70 debug('<br>Even when grid layout is enabled, new values should not violate assertions in FlexibleBox layout logic.');
    71 checkAlignmentValues(true);
     82test(function() {
     83    checkDefaultAlignmentValues(true);
     84}, "Even when grid layout is ENABLED, new Default-Alignment values should not violate assertions in FlexibleBox layout logic..");
    7285
    7386</script>
     87
     88</body>
     89</html>
  • trunk/LayoutTests/css3/parse-align-self.html

    r214564 r219315  
    1515#alignSelfStretch {
    1616    align-self: stretch;
     17}
     18
     19#alignSelfNormal {
     20    align-self: normal;
    1721}
    1822
     
    9094<div id="alignSelfLastBaseline"></div>
    9195<div id="alignSelfStretch"></div>
     96<div id="alignSelfNormal"></div>
    9297<div id="alignSelfStart"></div>
    9398<div id="alignSelfEnd"></div>
     
    121126    var alignSelfStretch = document.getElementById("alignSelfStretch");
    122127    checkValues(alignSelfStretch, "alignSelf", "align-self", "", "stretch");
     128    var alignSelfNormal = document.getElementById("alignSelfNormal");
     129    checkValues(alignSelfNormal, "alignSelf", "align-self", "", "normal");
    123130    var alignSelfStart = document.getElementById("alignSelfStart");
    124131    checkValues(alignSelfStart, "alignSelf", "align-self", "", "start");
     
    161168    element = document.createElement("div");
    162169    document.body.appendChild(element);
    163     checkValues(element, "alignSelf", "align-self", "", "normal");
     170    checkValues(element, "alignSelf", "align-self", "", "auto");
    164171}, "Test initial value of align-self through JS");
    165172
     
    187194    checkValues(element, "alignSelf", "align-self",  "self-start", "self-start");
    188195
     196    element.style.alignSelf = "normal";
     197    checkValues(element, "alignSelf", "align-self",  "normal", "normal");
     198
    189199    element.style.alignSelf = "auto";
    190     checkValues(element, "alignSelf", "align-self",  "auto", "normal");
     200    checkValues(element, "alignSelf", "align-self",  "auto", "auto");
    191201
    192202    container.style.display = "flex";
    193203    element.style.alignSelf = "auto";
    194     checkValues(element, "alignSelf", "align-self",  "auto", "normal");
     204    checkValues(element, "alignSelf", "align-self",  "auto", "auto");
    195205
    196206    container.style.display = "grid";
    197207    element.style.alignSelf = "auto";
    198     checkValues(element, "alignSelf", "align-self",  "auto", "normal");
     208    checkValues(element, "alignSelf", "align-self",  "auto", "auto");
    199209
    200210    element.style.alignSelf = "self-end";
     
    204214test(function() {
    205215    document.documentElement.style.alignSelf = "auto";
    206     checkValues(document.documentElement, "alignSelf", "align-self",  "auto", "normal");
     216    checkValues(document.documentElement, "alignSelf", "align-self",  "auto", "auto");
    207217}, "Test 'auto' value resolution for the root node");
    208218
     
    215225    checkBadValues(element, "alignSelf", "align-self",  "auto safe");
    216226    checkBadValues(element, "alignSelf", "align-self",  "auto left");
     227    checkBadValues(element, "alignSelf", "align-self",  "normal unsafe");
     228    checkBadValues(element, "alignSelf", "align-self",  "normal stretch");
     229    checkBadValues(element, "alignSelf", "align-self",  "baseline normal");
    217230    checkBadValues(element, "alignSelf", "align-self",  "baseline safe");
    218231    checkBadValues(element, "alignSelf", "align-self",  "baseline center");
     
    240253test(function() {
    241254    container.style.display = "";
    242     checkInitialValues(element, "alignSelf", "align-self", "center", "normal");
     255    checkInitialValues(element, "alignSelf", "align-self", "center", "auto");
    243256}, "Test the value 'initial'");
    244257
    245258test(function() {
    246259    container.style.display = "grid";
    247     checkInitialValues(element, "alignSelf", "align-self", "left safe", "normal");
     260    checkInitialValues(element, "alignSelf", "align-self", "left safe", "auto");
    248261}, "Test the value 'initial' for grid containers");
    249262
    250263test(function() {
    251264    container.style.display = "flex";
    252     checkInitialValues(element, "alignSelf", "align-self", "right unsafe", "normal");
     265    checkInitialValues(element, "alignSelf", "align-self", "right unsafe", "auto");
    253266}, "Test the value 'initial' for flex containers");
    254267
     
    256269    container.style.display = "";
    257270    element.style.position = "absolute";
    258     checkInitialValues(element, "alignSelf", "align-self", "left", "normal");
     271    checkInitialValues(element, "alignSelf", "align-self", "left", "auto");
    259272}, "Test the value 'initial' for positioned elements");
    260273
     
    262275    container.style.display = "grid";
    263276    element.style.position = "absolute";
    264     checkInitialValues(element, "alignSelf", "align-self", "right", "normal");
     277    checkInitialValues(element, "alignSelf", "align-self", "right", "auto");
    265278}, "Test the value 'initial' for positioned elements in grid containers");
    266279
     
    268281    container.style.display = "flex";
    269282    element.style.position = "absolute";
    270     checkInitialValues(element, "alignSelf", "align-self", "end", "normal");
     283    checkInitialValues(element, "alignSelf", "align-self", "end", "auto");
    271284}, "Test the value 'initial' for positioned elements in grid containers");
    272285
  • trunk/LayoutTests/css3/parse-alignment-of-root-elements-expected.txt

    r201498 r219315  
    1 Test to verify auto value resolution works as expected in root elements (eg. document root / shadow roots / slotted elements / elements inside<slot>)
    2 
    3 On success, you will see a series of "PASS" messages, followed by "TEST COMPLETE".
     1CONSOLE MESSAGE: line 17:
     2CONSOLE MESSAGE: line 18: *** Test 'auto' value resolution for the document root node. ***
     3CONSOLE MESSAGE: line 96:
     4CONSOLE MESSAGE: line 97: *** Test 'auto' value resolution for the shadow DOM root node. ***
     5CONSOLE MESSAGE: line 104:
     6CONSOLE MESSAGE: line 149:
     7CONSOLE MESSAGE: line 150: *** Test 'auto' value resolution for the shadow DOM 'slotted' elements. ***
     8Test to verify auto value resolution works as expected in root elements (eg. document root / shadow roots / slotted elements / elements inside slot)
    49
    510
     11PASS Check out how the DOM's root element resolves the align-self 'auto' values.
     12PASS Check out how the DOM's root element align-items's value is used to resolve its children's align-self 'auto' values.
     13PASS Check out how the DOM's root element deals with 'auto' value in align-items.
     14PASS Check out how the DOM's root element resolves the justify-self 'auto' values.
     15PASS Check out how the DOM's root element justify-items's value is used to resolve its children's justify-self 'auto' values.
     16PASS Check out how the DOM's root element deals with 'auto' value in justify-items.
     17PASS 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.
     18PASS Check out how the DOM's root element recomputes its descendant's style when 'legacy' keyword is removed from its justify-items value.
     19PASS Shadow Node inherits from ShadowHost to resolve the 'auto' values for align-self.
     20PASS Shadow Node inherits from ShadowHost to resolve the 'auto' values for justify-self.
     21PASS Check out how the 'legacy' keyword in justify-items propagates from the DOM Tree to the Shadow Node.
     22PASS Check out how align-self uses the 'shadowHost' as 'slotted' element's parent while 'slot' is not assigned.
     23PASS Check out how justify-self uses the 'shadowHost' as 'slotted' element's parent while 'slot' is not assigned.
     24PASS Check out how the 'legacy' keyword in justify-items affects the 'slotted' elements while 'slot' is not assigned.
     25PASS Check out how align-self uses the 'slot' element's parent (Shadow Node) as 'slotted' element' s parent after the 'slot' is assigned.
     26PASS Check out how justify-self uses the 'slot' element's parent (Shadow Node) as 'slotted' element' s parent after the 'slot' is assigned.
     27PASS Check out how the 'legacy' keyword affects the 'slotted' elements after the 'slot' is assigned.
     28PASS 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.
     29PASS 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.
    630
    7 *** Test 'auto' value resolution for the document root node. ***
    8 
    9 Check out how the DOM's root element resolves the align-self 'auto' values.
    10 PASS element.style.webkitAlignSelf is "center"
    11 PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-align-self') is "center"
    12 PASS element.style.webkitAlignSelf is "auto"
    13 PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-align-self') is "normal"
    14 
    15 Check out how the DOM's root element align-items's value is used to resolve its children's align-self 'auto' values.
    16 PASS element.style.webkitAlignItems is "center"
    17 PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-align-items') is "center"
    18 PASS element.style.webkitAlignItems is ""
    19 PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-align-items') is "normal"
    20 PASS element.style.webkitAlignSelf is "auto"
    21 PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-align-self') is "center"
    22 PASS element.style.webkitAlignItems is ""
    23 PASS window.getComputedStyle(host, '').getPropertyValue('-webkit-align-items') is "normal"
    24 PASS element.style.webkitAlignSelf is "auto"
    25 PASS window.getComputedStyle(host, '').getPropertyValue('-webkit-align-self') is "normal"
    26 
    27 Check out how the DOM's root element deals with 'auto' value in align-items.
    28 PASS element.style.webkitAlignItems is "center"
    29 PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-align-items') is "center"
    30 PASS element.style.webkitAlignItems is ""
    31 PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-align-items') is "normal"
    32 
    33 Check out how the DOM's root element resolves the justify-self 'auto' values.
    34 PASS element.style.justifySelf is "left"
    35 PASS window.getComputedStyle(element, '').getPropertyValue('justify-self') is "left"
    36 PASS element.style.justifySelf is "auto"
    37 PASS window.getComputedStyle(element, '').getPropertyValue('justify-self') is "normal"
    38 
    39 Check out how the DOM's root element align-items's value is used to resolve its children's align-self 'auto' values.
    40 PASS element.style.justifyItems is "center"
    41 PASS window.getComputedStyle(element, '').getPropertyValue('justify-items') is "center"
    42 PASS element.style.justifyItems is "auto"
    43 PASS window.getComputedStyle(element, '').getPropertyValue('justify-items') is "normal"
    44 PASS element.style.justifySelf is "auto"
    45 PASS window.getComputedStyle(element, '').getPropertyValue('justify-self') is "center"
    46 PASS element.style.justifyItems is "auto"
    47 PASS window.getComputedStyle(host, '').getPropertyValue('justify-items') is "normal"
    48 PASS element.style.justifySelf is "auto"
    49 PASS window.getComputedStyle(host, '').getPropertyValue('justify-self') is "normal"
    50 
    51 Check out how the DOM's root element deals with 'auto' value in justify-items.
    52 PASS element.style.justifyItems is "auto"
    53 PASS window.getComputedStyle(element, '').getPropertyValue('justify-items') is "normal"
    54 PASS element.style.justifySelf is "auto"
    55 PASS window.getComputedStyle(element, '').getPropertyValue('justify-self') is "normal"
    56 PASS element.style.justifySelf is "auto"
    57 PASS window.getComputedStyle(host, '').getPropertyValue('justify-self') is "normal"
    58 
    59 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.
    60 PASS element.style.justifyItems is "legacy center"
    61 PASS window.getComputedStyle(element, '').getPropertyValue('justify-items') is "legacy center"
    62 PASS element.style.justifyItems is "auto"
    63 PASS window.getComputedStyle(element, '').getPropertyValue('justify-items') is "legacy center"
    64 PASS element.style.justifySelf is "auto"
    65 PASS window.getComputedStyle(element, '').getPropertyValue('justify-self') is "center"
    66 PASS element.style.justifyItems is "auto"
    67 PASS window.getComputedStyle(host, '').getPropertyValue('justify-items') is "legacy center"
    68 PASS element.style.justifySelf is "auto"
    69 PASS window.getComputedStyle(host, '').getPropertyValue('justify-self') is "center"
    70 
    71 Check out how the DOM's root element recomputes its descendant's style when 'legacy' keyword is removed from its justify-items value.
    72 PASS element.style.justifyItems is "auto"
    73 PASS window.getComputedStyle(element, '').getPropertyValue('justify-items') is "normal"
    74 PASS element.style.justifySelf is "auto"
    75 PASS window.getComputedStyle(element, '').getPropertyValue('justify-self') is "normal"
    76 PASS element.style.justifyItems is "auto"
    77 PASS window.getComputedStyle(host, '').getPropertyValue('justify-items') is "normal"
    78 PASS element.style.justifySelf is "auto"
    79 PASS window.getComputedStyle(host, '').getPropertyValue('justify-self') is "normal"
    80 PASS successfullyParsed is true
    81 
    82 TEST COMPLETE
    83 
  • trunk/LayoutTests/css3/parse-alignment-of-root-elements.html

    r201498 r219315  
    11<!DOCTYPE html>
    2 <script src="../resources/js-test.js"></script>
     2<script src="../resources/testharness.js"></script>
     3<script src="../resources/testharnessreport.js"></script>
     4<script src="resources/alignment-parsing-utils-th.js"></script>
    35<html>
    46 <body>
     7     <p>Test to verify auto value resolution works as expected in root elements (eg. document root / shadow roots / slotted elements / elements inside slot)</p>
     8     <div id="log"></div>
     9
    510     <div id="host">
    611         <div id="slotted" slot="s1"></div>
    712     </div>
    8 <script src="resources/alignment-parsing-utils.js"></script>
    913<script>
    10 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;)');
    1114
    1215var block = document.getElementById("host");
    1316
    14 debug("");
    15 debug("*** Test 'auto' value resolution for the document root node. ***");
    16 
    17 debug("");
    18 debug("Check out how the DOM's root element resolves the align-self 'auto' values.");
    19 document.documentElement.style.webkitAlignSelf = "center";
    20 checkValues(document.documentElement, "webkitAlignSelf", "-webkit-align-self", "center", "center");
    21 document.documentElement.style.webkitAlignSelf = "auto";
    22 checkValues(document.documentElement, "webkitAlignSelf", "-webkit-align-self", "auto", "normal");
    23 
    24 debug("");
    25 debug("Check out how the DOM's root element align-items's value is used to resolve its children's align-self 'auto' values.");
    26 document.documentElement.style.webkitAlignItems = "center";
    27 checkValues(document.documentElement, "webkitAlignItems", "-webkit-align-items", "center", "center");
    28 document.body.style.webkitAlignItems = "auto"; // The 'auto' value is not valid for align-items.
    29 document.body.style.webkitAlignSelf = "auto";
    30 checkValues(document.body, "webkitAlignItems", "-webkit-align-items", "", "normal");
    31 checkValues(document.body, "webkitAlignSelf", "-webkit-align-self", "auto", "center");
    32 block.style.webkitAlignItems = ""; // Default value is 'normal' for align-items.
    33 block.style.webkitAlignSelf = "auto";
    34 checkValues(block, "webkitAlignItems", "-webkit-align-items", "", "normal");
    35 checkValues(block, "webkitAlignSelf", "-webkit-align-self", "auto", "normal");
    36 
    37 debug("");
    38 debug("Check out how the DOM's root element deals with 'auto' value in align-items.");
    39 document.documentElement.style.webkitAlignItems = "auto"; // The 'auto' value is not valid for align-items.
    40 checkValues(document.documentElement, "webkitAlignItems", "-webkit-align-items", "center", "center");
    41 document.documentElement.style.webkitAlignItems = ""; // Default value is 'normal' for align-items.
    42 checkValues(document.documentElement, "webkitAlignItems", "-webkit-align-items", "", "normal");
    43 
    44 debug("");
    45 debug("Check out how the DOM's root element resolves the justify-self 'auto' values.");
    46 document.documentElement.style.justifySelf = "left";
    47 checkValues(document.documentElement, "justifySelf", "justify-self", "left", "left");
    48 document.documentElement.style.justifySelf = "auto";
    49 checkValues(document.documentElement, "justifySelf", "justify-self", "auto", "normal");
    50 
    51 debug("");
    52 debug("Check out how the DOM's root element align-items's value is used to resolve its children's align-self 'auto' values.");
    53 document.documentElement.style.justifyItems = "center";
    54 checkValues(document.documentElement, "justifyItems", "justify-items", "center", "center");
    55 document.body.style.justifyItems = "auto";
    56 document.body.style.justifySelf = "auto";
    57 checkValues(document.body, "justifyItems", "justify-items", "auto", "normal");
    58 checkValues(document.body, "justifySelf", "justify-self", "auto", "center");
    59 block.style.justifyItems = "auto";
    60 block.style.justifySelf = "auto";
    61 checkValues(block, "justifyItems", "justify-items",  "auto", "normal");
    62 checkValues(block, "justifySelf", "justify-self",  "auto", "normal");
    63 
    64 debug("");
    65 debug("Check out how the DOM's root element deals with 'auto' value in justify-items.");
    66 document.documentElement.style.justifyItems = "auto";
    67 checkValues(document.documentElement, "justifyItems", "justify-items", "auto", "normal");
    68 checkValues(document.body, "justifySelf", "justify-self",  "auto", "normal");
    69 checkValues(block, "justifySelf", "justify-self",  "auto", "normal");
    70 
    71 debug("");
    72 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.");
    73 document.documentElement.style.justifyItems = "legacy center";
    74 checkValues(document.documentElement, "justifyItems", "justify-items",  "legacy center", "legacy center");
    75 document.body.style.justifyItems = "auto";
    76 document.body.style.justifySelf = "auto";
    77 checkValues(document.body, "justifyItems", "justify-items",  "auto", "legacy center");
    78 checkValues(document.body, "justifySelf", "justify-self",  "auto", "center");
    79 block.style.justifyItems = "auto";
    80 block.style.justifySelf = "auto";
    81 checkValues(block, "justifyItems", "justify-items",  "auto", "legacy center");
    82 checkValues(block, "justifySelf", "justify-self",  "auto", "center");
    83 
    84 debug("");
    85 debug("Check out how the DOM's root element recomputes its descendant's style when 'legacy' keyword is removed from its justify-items value.");
    86 document.documentElement.style.justifyItems = "auto";
    87 checkValues(document.body, "justifyItems", "justify-items",  "auto", "normal");
    88 checkValues(document.body, "justifySelf", "justify-self",  "auto", "normal");
    89 checkValues(block, "justifyItems", "justify-items",  "auto", "normal");
    90 checkValues(block, "justifySelf", "justify-self",  "auto", "normal");
     17console.log("");
     18console.log("*** Test 'auto' value resolution for the document root node. ***");
     19
     20test(function() {
     21    document.documentElement.style.alignSelf = "center";
     22    checkValues(document.documentElement, "alignSelf", "align-self", "center", "center");
     23    document.documentElement.style.alignSelf = "auto";
     24    checkValues(document.documentElement, "alignSelf", "align-self", "auto", "auto");
     25}, "Check out how the DOM's root element resolves the align-self 'auto' values.");
     26
     27test(function() {
     28    document.documentElement.style.alignItems = "center";
     29    checkValues(document.documentElement, "alignItems", "align-items", "center", "center");
     30    document.body.style.alignItems = "auto"; // The 'auto' value is not valid for align-items.
     31    document.body.style.alignSelf = "auto";
     32    checkValues(document.body, "alignItems", "align-items", "", "normal");
     33    checkValues(document.body, "alignSelf", "align-self", "auto", "auto");
     34    block.style.alignItems = ""; // Default value is 'normal' for align-items.
     35    block.style.alignSelf = "auto";
     36    checkValues(block, "alignItems", "align-items", "", "normal");
     37    checkValues(block, "alignSelf", "align-self", "auto", "auto");
     38}, "Check out how the DOM's root element align-items's value is used to resolve its children's align-self 'auto' values.");
     39
     40test(function() {
     41    document.documentElement.style.alignItems = "auto"; // The 'auto' value is not valid for align-items.
     42    checkValues(document.documentElement, "alignItems", "align-items", "center", "center");
     43    document.documentElement.style.alignItems = ""; // Default value is 'normal' for align-items.
     44    checkValues(document.documentElement, "alignItems", "align-items", "", "normal");
     45}, "Check out how the DOM's root element deals with 'auto' value in align-items.");
     46
     47test(function() {
     48    document.documentElement.style.justifySelf = "left";
     49    checkValues(document.documentElement, "justifySelf", "justify-self", "left", "left");
     50    document.documentElement.style.justifySelf = "auto";
     51    checkValues(document.documentElement, "justifySelf", "justify-self", "auto", "auto");
     52}, "Check out how the DOM's root element resolves the justify-self 'auto' values.");
     53
     54test(function() {
     55    console.log();
     56    document.documentElement.style.justifyItems = "center";
     57    checkValues(document.documentElement, "justifyItems", "justify-items", "center", "center");
     58    document.body.style.justifyItems = "auto";
     59    document.body.style.justifySelf = "auto";
     60    checkValues(document.body, "justifyItems", "justify-items", "auto", "normal");
     61    checkValues(document.body, "justifySelf", "justify-self", "auto", "auto");
     62    block.style.justifyItems = "auto";
     63    block.style.justifySelf = "auto";
     64    checkValues(block, "justifyItems", "justify-items",  "auto", "normal");
     65    checkValues(block, "justifySelf", "justify-self",  "auto", "auto");
     66}, "Check out how the DOM's root element justify-items's value is used to resolve its children's justify-self 'auto' values.");
     67
     68test(function() {
     69    document.documentElement.style.justifyItems = "auto";
     70    checkValues(document.documentElement, "justifyItems", "justify-items", "auto", "normal");
     71    checkValues(document.body, "justifySelf", "justify-self",  "auto", "auto");
     72    checkValues(block, "justifySelf", "justify-self",  "auto", "auto");
     73}, "Check out how the DOM's root element deals with 'auto' value in justify-items.");
     74
     75test(function() {
     76    document.documentElement.style.justifyItems = "legacy center";
     77    checkValues(document.documentElement, "justifyItems", "justify-items",  "legacy center", "legacy center");
     78    document.body.style.justifyItems = "auto";
     79    document.body.style.justifySelf = "auto";
     80    checkValues(document.body, "justifyItems", "justify-items",  "auto", "legacy center");
     81    checkValues(document.body, "justifySelf", "justify-self",  "auto", "auto");
     82    block.style.justifyItems = "auto";
     83    block.style.justifySelf = "auto";
     84    checkValues(block, "justifyItems", "justify-items",  "auto", "legacy center");
     85    checkValues(block, "justifySelf", "justify-self",  "auto", "auto");
     86}, "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.");
     87
     88test(function() {
     89    document.documentElement.style.justifyItems = "auto";
     90    checkValues(document.body, "justifyItems", "justify-items",  "auto", "normal");
     91    checkValues(document.body, "justifySelf", "justify-self",  "auto", "auto");
     92    checkValues(block, "justifyItems", "justify-items",  "auto", "normal");
     93    checkValues(block, "justifySelf", "justify-self",  "auto", "auto");
     94}, "Check out how the DOM's root element recomputes its descendant's style when 'legacy' keyword is removed from its justify-items value.");
     95
     96console.log("");
     97console.log("*** Test 'auto' value resolution for the shadow DOM root node. ***");
     98
     99var shadowHost = document.getElementById("host")
     100var shadowRoot = shadowHost.attachShadow({mode:"open"});
     101var shadowNode = document.createElement('div');
     102shadowRoot.appendChild(shadowNode);
     103
     104console.log("");
     105console.log();
     106
     107test(function() {
     108    shadowHost.style.alignItems = "center";
     109    shadowNode.style.alignItems = "right";
     110    checkValues(shadowHost, "alignItems", "align-items", "center", "center");
     111    checkValues(shadowNode, "alignItems", "align-items", "right", "right");
     112    shadowNode.style.alignItems = "";
     113    checkValues(shadowNode, "alignItems", "align-items", "", "normal");
     114    shadowNode.style.alignSelf = "auto";
     115    checkValues(shadowNode, "alignSelf", "align-self", "auto", "auto");
     116}, "Shadow Node inherits from ShadowHost to resolve the 'auto' values for align-self.");
     117
     118test(function() {
     119    shadowHost.style.justifyItems = "center";
     120    shadowNode.style.justifyItems = "right";
     121    checkValues(shadowHost, "justifyItems", "justify-items", "center", "center");
     122    checkValues(shadowNode, "justifyItems", "justify-items", "right", "right");
     123    shadowNode.style.justifyItems = "";
     124    checkValues(shadowNode, "justifyItems", "justify-items", "", "normal");
     125    shadowNode.style.justifySelf = "auto";
     126    checkValues(shadowNode, "justifySelf", "justify-self", "auto", "auto");
     127}, "Shadow Node inherits from ShadowHost to resolve the 'auto' values for justify-self.");
     128
     129test(function() {
     130    shadowHost.style.justifyItems = "auto";
     131    shadowNode.style.justifyItems = "right";
     132    shadowNode.style.justifySelf = "auto";
     133    checkValues(shadowHost, "justifyItems", "justify-items", "auto", "normal");
     134    checkValues(shadowNode, "justifyItems", "justify-items", "right", "right");
     135    checkValues(shadowNode, "justifySelf", "justify-self", "auto", "auto");
     136
     137    checkValues(shadowHost, "justifyItems", "justify-items", "auto", "normal");
     138    document.documentElement.style.justifyItems = "legacy center";
     139    checkValues(document.documentElement, "justifyItems", "justify-items",  "legacy center", "legacy center");
     140    checkValues(shadowHost, "justifyItems", "justify-items",  "auto", "legacy center");
     141    checkValues(shadowNode, "justifyItems", "justify-items", "right", "right");
     142    checkValues(shadowNode, "justifySelf", "justify-self", "auto", "auto");
     143    shadowNode.style.justifyItems = "auto";
     144    checkValues(shadowNode, "justifyItems", "justify-items", "auto", "legacy center");
     145    document.documentElement.style.justifyItems = "auto";
     146}, "Check out how the 'legacy' keyword in justify-items propagates from the DOM Tree to the Shadow Node.");
     147
     148
     149console.log("");
     150console.log("*** Test 'auto' value resolution for the shadow DOM 'slotted' elements. ***");
     151
     152var slotted = document.getElementById("slotted");
     153
     154test(function() {
     155    shadowHost.style.alignItems = "center";
     156    shadowNode.style.alignItems = "right";
     157    slotted.style.alignItems = "left";
     158    checkValues(slotted, "alignItems", "align-items", "left", "left");
     159    slotted.style.alignItems = "normal";
     160    checkValues(slotted, "alignItems", "align-items", "normal", "normal");
     161    slotted.style.alignSelf = "start";
     162    checkValues(slotted, "alignSelf", "align-self", "start", "start");
     163    slotted.style.alignSelf = "auto";
     164    checkValues(slotted, "alignSelf", "align-self", "auto", "auto");
     165}, "Check out how align-self uses the 'shadowHost' as 'slotted' element's parent while 'slot' is not assigned.");
     166
     167test(function() {
     168    shadowHost.style.justifyItems = "center";
     169    shadowNode.style.justifyItems = "right";
     170    slotted.style.justifyItems = "left";
     171    checkValues(slotted, "justifyItems", "justify-items", "left", "left");
     172    slotted.style.justifyItems = "";
     173    checkValues(slotted, "justifyItems", "justify-items", "", "normal");
     174    slotted.style.justifySelf = "start";
     175    checkValues(slotted, "justifySelf", "justify-self", "start", "start");
     176    slotted.style.justifySelf = "auto";
     177    checkValues(slotted, "justifySelf", "justify-self", "auto", "auto");
     178}, "Check out how justify-self uses the 'shadowHost' as 'slotted' element's parent while 'slot' is not assigned.");
     179
     180test(function() {
     181    shadowHost.style.justifyItems = "auto";
     182    shadowNode.style.justifyItems = "right";
     183    checkValues(shadowHost, "justifyItems", "justify-items", "auto", "normal");
     184    checkValues(shadowNode, "justifyItems", "justify-items", "right", "right");
     185    document.documentElement.style.justifyItems = "legacy center";
     186    checkValues(document.documentElement, "justifyItems", "justify-items",  "legacy center", "legacy center");
     187    checkValues(shadowHost, "justifyItems", "justify-items",  "auto", "legacy center");
     188    slotted.style.justifyItems = "auto";
     189    checkValues(slotted, "justifyItems", "justify-items",  "auto", "normal");
     190    slotted.style.justifySelf = "auto";
     191    checkValues(slotted, "justifySelf", "justify-self",  "auto", "auto");
     192    shadowNode.style.justifyItems = "auto";
     193    checkValues(shadowNode, "justifyItems", "justify-items", "auto", "legacy center");
     194    checkValues(slotted, "justifyItems", "justify-items", "auto", "normal");
     195    checkValues(slotted, "justifySelf", "justify-self", "auto", "auto");
     196    document.documentElement.style.justifyItems = "auto";
     197}, "Check out how the 'legacy' keyword in justify-items affects the 'slotted' elements while 'slot' is not assigned.");
     198
     199// Slot element is assigned now.
     200var slot = document.createElement('slot');
     201slot.setAttribute('name', 's1');
     202shadowNode.appendChild(slot);
     203
     204test(function() {
     205    shadowHost.style.alignItems = "center";
     206    shadowNode.style.alignItems = "right";
     207    slotted.style.alignItems = "left";
     208    checkValues(slotted, "alignItems", "align-items", "left", "left");
     209    slotted.style.alignItems = "";
     210    checkValues(slotted, "alignItems", "align-items", "", "normal");
     211    slotted.style.alignSelf = "start";
     212    checkValues(slotted, "alignSelf", "align-self", "start", "start");
     213    slotted.style.alignSelf = "auto";
     214    checkValues(slotted, "alignSelf", "align-self", "auto", "auto");
     215}, "Check out how align-self uses the 'slot' element's parent (Shadow Node) as 'slotted' element' s parent after the 'slot' is assigned.");
     216
     217test(function() {
     218    shadowHost.style.justifyItems = "center";
     219    shadowNode.style.justifyItems = "right";
     220    slotted.style.justifyItems = "left";
     221    checkValues(slotted, "justifyItems", "justify-items", "left", "left");
     222    slotted.style.justifyItems = "";
     223    checkValues(slotted, "justifyItems", "justify-items", "", "normal");
     224    slotted.style.justifySelf = "start";
     225    checkValues(slotted, "justifySelf", "justify-self", "start", "start");
     226    slotted.style.justifySelf = "auto";
     227    checkValues(slotted, "justifySelf", "justify-self", "auto", "auto");
     228}, "Check out how justify-self uses the 'slot' element's parent (Shadow Node) as 'slotted' element' s parent after the 'slot' is assigned.");
     229
     230test(function() {
     231    shadowHost.style.justifyItems = "auto";
     232    shadowNode.style.justifyItems = "right";
     233    checkValues(shadowHost, "justifyItems", "justify-items", "auto", "normal");
     234    checkValues(shadowNode, "justifyItems", "justify-items", "right", "right");
     235    document.documentElement.style.justifyItems = "legacy center";
     236    checkValues(document.documentElement, "justifyItems", "justify-items",  "legacy center", "legacy center");
     237    checkValues(shadowHost, "justifyItems", "justify-items", "auto", "legacy center");
     238    slotted.style.justifyItems = "auto";
     239    checkValues(slotted, "justifyItems", "justify-items", "auto", "normal"); // Shadow host is not the parent now, but ShadowNode.
     240    slotted.style.justifySelf = "auto";
     241    checkValues(slotted, "justifySelf", "justify-self", "auto", "auto"); // Shadow host is not the parent now, but ShadowNode.
     242    shadowNode.style.justifyItems = "auto";
     243    checkValues(shadowNode, "justifyItems", "justify-items", "auto", "legacy center");
     244    checkValues(slotted, "justifyItems", "justify-items", "auto", "legacy center"); // Now that shadowNode is auto, 'legacy' applies.
     245    checkValues(slotted, "justifySelf", "justify-self", "auto", "auto"); // Now that shadowNode is auto, 'legacy' applies.
     246    document.documentElement.style.justifyItems = "auto";
     247}, "Check out how the 'legacy' keyword affects the 'slotted' elements after the 'slot' is assigned.");
     248
     249test(function() {
     250    shadowHost.style.alignItems = "center";
     251    shadowNode.style.alignItems = "right";
     252    slot.style.alignItems = "left";
     253    checkValues(slot, "alignItems", "align-items",  "left", "left");
     254    slot.style.alignItems = "";
     255    checkValues(slot, "alignItems", "align-items", "", "normal");
     256    slot.style.alignSelf = "left";
     257    checkValues(slot, "alignSelf", "align-self",  "left", "left");
     258    slot.style.alignSelf = "auto";
     259    checkValues(slot, "alignSelf", "align-self",  "auto", "auto");
     260}, "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.");
     261
     262test(function() {
     263    shadowHost.style.justifyItems = "center";
     264    shadowNode.style.justifyItems = "right";
     265
     266    slot.style.justifyItems = "left";
     267    checkValues(slot, "justifyItems", "justify-items",  "left", "left");
     268    slot.style.justifyItems = "auto";
     269    checkValues(slot, "justifyItems", "justify-items", "auto", "normal");
     270    slot.style.justifySelf = "left";
     271    checkValues(slot, "justifySelf", "justify-self",  "left", "left");
     272    slot.style.justifySelf = "auto";
     273    checkValues(slot, "justifySelf", "justify-self",  "auto", "auto");
     274}, "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.");
    91275
    92276</script>
  • trunk/LayoutTests/css3/parse-place-items.html

    r217435 r219315  
    228228
    229229test(function() {
    230   checkPlaceItemsValuesBadJS("auto normal", "normal", "normal");
    231   checkPlaceItemsValuesBadJS("space-between", "normal", "normal");
    232   checkPlaceItemsValuesBadJS("center safe", "normal", "normal");
    233   checkPlaceItemsValuesBadJS("center self-start center", "normal", "normal");
    234   checkPlaceItemsValuesBadJS("asrt", "normal", "normal");
    235   checkPlaceItemsValuesBadJS("auto", "normal", "normal");
    236   checkPlaceItemsValuesBadJS("10px", "normal", "normal");
    237   checkPlaceItemsValuesBadJS("stretch safe", "normal", "normal");
    238   checkPlaceItemsValuesBadJS("self-start start end", "normal", "normal");
    239   checkPlaceItemsValuesBadJS("", "normal", "normal");
     230  checkPlaceItemsValuesBadJS("auto normal");
     231  checkPlaceItemsValuesBadJS("space-between");
     232  checkPlaceItemsValuesBadJS("center safe");
     233  checkPlaceItemsValuesBadJS("center self-start center");
     234  checkPlaceItemsValuesBadJS("asrt", "normal");
     235  checkPlaceItemsValuesBadJS("auto", "normal");
     236  checkPlaceItemsValuesBadJS("10px", "normal");
     237  checkPlaceItemsValuesBadJS("stretch safe");
     238  checkPlaceItemsValuesBadJS("self-start start end");
     239  checkPlaceItemsValuesBadJS("");
    240240}, "Test setting incorrect values through JS.");
    241241
  • trunk/LayoutTests/css3/parse-place-self.html

    r217435 r219315  
    117117  element.style.placeSelf = "";
    118118  element.style.placeSelf = value;
    119   checkPlaceSelfValues(element, "", "normal", "normal")
     119  checkPlaceSelfValues(element, "", "auto", "auto")
    120120}
    121121
     
    126126
    127127test(function() {
    128   checkValues(placeSelfCenterAuto, "placeSelf", "place-self", "", "center normal");
    129   checkPlaceSelfValues(placeSelfCenterAuto, "", "center", "normal");
     128  checkValues(placeSelfCenterAuto, "placeSelf", "place-self", "", "center auto");
     129  checkPlaceSelfValues(placeSelfCenterAuto, "", "center", "auto");
    130130}, "Test getting the Computed Value of place-self's longhand properties when setting 'center auto' value through CSS.");
    131131
     
    186186
    187187test(function() {
    188   checkValues(placeSelfAuto, "placeSelf", "place-self", "", "normal normal");
    189   checkPlaceSelfValues(placeSelfAuto, "", "normal", "normal");
     188  checkValues(placeSelfEmpty, "placeSelf", "place-self", "", "auto auto");
     189  checkPlaceSelfValues(placeSelfEmpty, "", "auto", "auto");
    190190}, "Test setting '' as incorrect value through CSS.");
    191191
    192192test(function() {
    193   checkValues(placeSelfAuto, "placeSelf", "place-self", "", "normal normal");
    194   checkPlaceSelfValues(placeSelfAuto, "", "normal", "normal");
     193  checkValues(placeSelfAuto, "placeSelf", "place-self", "", "auto auto");
     194  checkPlaceSelfValues(placeSelfAuto, "", "auto", "auto");
    195195}, "Test setting 'auto' as incorrect value through CSS.");
    196196
    197197test(function() {
    198   checkValues(placeSelfNone, "placeSelf", "place-self", "", "normal normal");
    199   checkPlaceSelfValues(placeSelfNone, "", "normal", "normal");
     198  checkValues(placeSelfNone, "placeSelf", "place-self", "", "auto auto");
     199  checkPlaceSelfValues(placeSelfNone, "", "auto", "auto");
    200200}, "Test setting 'none' as incorrect value through CSS.");
    201201
    202202test(function() {
    203   checkValues(placeSelfSafe, "placeSelf", "place-self", "", "normal normal");
    204   checkPlaceSelfValues(placeSelfSafe, "", "normal", "normal");
     203  checkValues(placeSelfSafe, "placeSelf", "place-self", "", "auto auto");
     204  checkPlaceSelfValues(placeSelfSafe, "", "auto", "auto");
    205205}, "Test setting 'safe' as incorrect value through CSS.");
    206206
    207207test(function() {
    208   checkValues(placeSelfStartSafe, "placeSelf", "place-self", "", "normal normal");
    209   checkPlaceSelfValues(placeSelfStartSafe, "", "normal", "normal");
     208  checkValues(placeSelfStartSafe, "placeSelf", "place-self", "", "auto auto");
     209  checkPlaceSelfValues(placeSelfStartSafe, "", "auto", "auto");
    210210}, "Test setting 'start safe' as incorrect value through CSS.");
    211211
    212212test(function() {
    213   checkValues(placeSelfBaselineSafe, "placeSelf", "place-self", "", "normal normal");
    214   checkPlaceSelfValues(placeSelfBaselineSafe, "", "normal", "normal");
     213  checkValues(placeSelfBaselineSafe, "placeSelf", "place-self", "", "auto auto");
     214  checkPlaceSelfValues(placeSelfBaselineSafe, "", "auto", "auto");
    215215}, "Test setting 'baseline safe' as incorrect value through CSS.");
    216216
    217217test(function() {
    218   checkValues(placeSelfStartEndLeft, "placeSelf", "place-self", "", "normal normal");
    219   checkPlaceSelfValues(placeSelfStartEndLeft, "", "normal", "normal");
     218  checkValues(placeSelfStartEndLeft, "placeSelf", "place-self", "", "auto auto");
     219  checkPlaceSelfValues(placeSelfStartEndLeft, "", "auto", "auto");
    220220}, "Test setting 'start end left' as incorrect value through CSS.");
    221221
     
    225225  checkPlaceSelfValuesJS("self-start end", "self-start", "end");
    226226  checkPlaceSelfValuesJS("normal end", "normal", "end");
     227  checkPlaceSelfValuesJS("auto right", "auto", "right");
    227228}, "Test setting values through JS.");
    228229
    229230test(function() {
    230   checkPlaceSelfValuesBadJS("space-between", "normal", "normal");
    231   checkPlaceSelfValuesBadJS("center safe", "normal", "normal");
    232   checkPlaceSelfValuesBadJS("center self-start center", "normal", "normal");
    233   checkPlaceSelfValuesBadJS("asrt", "normal", "normal");
    234   checkPlaceSelfValuesBadJS("10px", "normal", "normal");
    235   checkPlaceSelfValuesBadJS("stretch safe", "normal", "normal");
    236   checkPlaceSelfValuesBadJS("self-start start end", "normal", "normal");
    237   checkPlaceSelfValuesBadJS("", "normal", "normal");
     231  checkPlaceSelfValuesBadJS("space-between");
     232  checkPlaceSelfValuesBadJS("center safe");
     233  checkPlaceSelfValuesBadJS("center self-start center");
     234  checkPlaceSelfValuesBadJS("asrt");
     235  checkPlaceSelfValuesBadJS("10px");
     236  checkPlaceSelfValuesBadJS("stretch safe");
     237  checkPlaceSelfValuesBadJS("self-start start end");
     238  checkPlaceSelfValuesBadJS("");
    238239}, "Test setting incorrect values through JS.");
    239240
     
    241242  element = document.createElement("div");
    242243  document.body.appendChild(element);
    243   checkValues(element, "placeSelf", "place-self", "", "normal normal");
     244  checkValues(element, "placeSelf", "place-self", "", "auto auto");
    244245  element.style.placeSelf = "center";
    245246  checkPlaceSelfValues(element, "center", "center", "center");
    246247  element.style.placeSelf = "initial";
    247   checkValues(element, "placeSelf", "place-self", "initial", "normal normal");
    248   checkPlaceSelfValues(element, "initial", "normal", "normal");
     248  checkValues(element, "placeSelf", "place-self", "initial", "auto auto");
     249  checkPlaceSelfValues(element, "initial", "auto", "auto");
    249250}, "Test the 'initial' value of the place-self shorthand and its longhand properties' Computed value");
    250251
     
    253254  var anotherElement = document.createElement("div");
    254255  document.body.appendChild(anotherElement);
    255   checkPlaceSelfValues(anotherElement, "", "normal", "normal");
     256  checkPlaceSelfValues(anotherElement, "", "auto", "auto");
    256257  anotherElement.style.placeSelf = "inherit";
    257258  checkPlaceSelfValues(anotherElement, "inherit", "start", "start");
  • trunk/LayoutTests/fast/css/ensure-flexbox-compatibility-with-initial-values-expected.txt

    r207535 r219315  
    77Verifying initial values are supported when grid is ENABLED.
    88PASS CSS.supports('align-items', 'normal') is true
    9 PASS CSS.supports('align-self', 'normal') is true
     9PASS CSS.supports('align-self', 'auto') is true
    1010PASS CSS.supports('align-content', 'normal') is true
    1111PASS CSS.supports('justify-content', 'normal') is true
    1212PASS CSS.supports('align-items', 'normal') is true
    13 PASS CSS.supports('align-self', 'normal') is true
     13PASS CSS.supports('align-self', 'auto') is true
    1414PASS CSS.supports('align-content', 'normal') is true
    1515PASS CSS.supports('justify-content', 'normal') is true
    1616PASS CSS.supports('align-items', 'normal') is true
    17 PASS CSS.supports('align-self', 'normal') is true
     17PASS CSS.supports('align-self', 'auto') is true
    1818PASS CSS.supports('align-content', 'normal') is true
    1919PASS CSS.supports('justify-content', 'normal') is true
    2020PASS CSS.supports('align-items', 'normal') is true
    21 PASS CSS.supports('align-self', 'normal') is true
     21PASS CSS.supports('align-self', 'auto') is true
    2222PASS CSS.supports('align-content', 'normal') is true
    2323PASS CSS.supports('justify-content', 'normal') is true
     
    2525Verifying initial values are supported when grid is DISABLED.
    2626PASS CSS.supports('align-items', 'stretch') is true
    27 PASS CSS.supports('align-self', 'stretch') is true
     27PASS CSS.supports('align-self', 'auto') is true
    2828PASS CSS.supports('align-content', 'stretch') is true
    2929PASS CSS.supports('justify-content', 'flex-start') is true
    3030PASS CSS.supports('align-items', 'stretch') is true
    31 PASS CSS.supports('align-self', 'stretch') is true
     31PASS CSS.supports('align-self', 'auto') is true
    3232PASS CSS.supports('align-content', 'stretch') is true
    3333PASS CSS.supports('justify-content', 'flex-start') is true
    3434PASS CSS.supports('align-items', 'stretch') is true
    35 PASS CSS.supports('align-self', 'stretch') is true
     35PASS CSS.supports('align-self', 'auto') is true
    3636PASS CSS.supports('align-content', 'stretch') is true
    3737PASS CSS.supports('justify-content', 'flex-start') is true
    3838PASS CSS.supports('align-items', 'stretch') is true
    39 PASS CSS.supports('align-self', 'stretch') is true
     39PASS CSS.supports('align-self', 'auto') is true
    4040PASS CSS.supports('align-content', 'stretch') is true
    4141PASS CSS.supports('justify-content', 'flex-start') is true
  • trunk/LayoutTests/fast/css/getComputedStyle/computed-style-expected.txt

    r219151 r219315  
    155155align-content: normal;
    156156align-items: normal;
    157 align-self: normal;
     157align-self: auto;
    158158filter: none;
    159159flex-basis: auto;
     
    164164flex-wrap: nowrap;
    165165justify-content: normal;
    166 justify-self: normal;
     166justify-self: auto;
    167167justify-items: normal;
    168168-webkit-font-kerning: auto;
  • trunk/LayoutTests/fast/css/getComputedStyle/computed-style-without-renderer-expected.txt

    r218620 r219315  
    154154align-content: normal
    155155align-items: normal
    156 align-self: normal
     156align-self: auto
    157157filter: none
    158158flex-basis: auto
     
    163163flex-wrap: nowrap
    164164justify-content: normal
    165 justify-self: normal
     165justify-self: auto
    166166justify-items: normal
    167167-webkit-font-kerning: auto
  • trunk/LayoutTests/fast/css/parse-justify-self.html

    r214564 r219315  
    1515#justifySelfStretch {
    1616    justify-self: stretch;
     17}
     18
     19#justifySelfNormal {
     20    justify-self: normal;
    1721}
    1822
     
    9094<div id="justifySelfLastBaseline"></div>
    9195<div id="justifySelfStretch"></div>
     96<div id="justifySelfNormal"></div>
    9297<div id="justifySelfStart"></div>
    9398<div id="justifySelfEnd"></div>
     
    121126    var justifySelfStretch = document.getElementById("justifySelfStretch");
    122127    checkValues(justifySelfStretch, "justifySelf", "justify-self", "", "stretch");
     128    var justifySelfNormal = document.getElementById("justifySelfNormal");
     129    checkValues(justifySelfNormal, "justifySelf", "justify-self", "", "normal");
    123130    var justifySelfStart = document.getElementById("justifySelfStart");
    124131    checkValues(justifySelfStart, "justifySelf", "justify-self", "", "start");
     
    161168    element = document.createElement("div");
    162169    document.body.appendChild(element);
    163     checkValues(element, "justifySelf", "justify-self", "", "normal");
     170    checkValues(element, "justifySelf", "justify-self", "", "auto");
    164171}, "Test initial value of justify-self through JS");
    165172
     
    187194    checkValues(element, "justifySelf", "justify-self",  "self-start", "self-start");
    188195
     196    element.style.justifySelf = "normal";
     197    checkValues(element, "justifySelf", "justify-self",  "normal", "normal");
     198
    189199    element.style.justifySelf = "auto";
    190     checkValues(element, "justifySelf", "justify-self",  "auto", "normal");
     200    checkValues(element, "justifySelf", "justify-self",  "auto", "auto");
    191201
    192202    container.style.display = "flex";
    193203    element.style.justifySelf = "auto";
    194     checkValues(element, "justifySelf", "justify-self",  "auto", "normal");
     204    checkValues(element, "justifySelf", "justify-self",  "auto", "auto");
    195205
    196206    container.style.display = "grid";
    197207    element.style.justifySelf = "auto";
    198     checkValues(element, "justifySelf", "justify-self",  "auto", "normal");
     208    checkValues(element, "justifySelf", "justify-self",  "auto", "auto");
    199209
    200210    element.style.justifySelf = "self-end";
     
    204214test(function() {
    205215    document.documentElement.style.justifySelf = "auto";
    206     checkValues(document.documentElement, "justifySelf", "justify-self",  "auto", "normal");
     216    checkValues(document.documentElement, "justifySelf", "justify-self",  "auto", "auto");
    207217}, "Test 'auto' value resolution for the root node");
    208218
     
    216226    checkBadValues(element, "justifySelf", "justify-self",  "auto safe");
    217227    checkBadValues(element, "justifySelf", "justify-self",  "auto left");
     228    checkBadValues(element, "justifySelf", "justify-self",  "normal unsafe");
     229    checkBadValues(element, "justifySelf", "justify-self",  "normal stretch");
     230    checkBadValues(element, "justifySelf", "justify-self",  "baseline normal");
    218231    checkBadValues(element, "justifySelf", "justify-self",  "baseline safe");
    219232    checkBadValues(element, "justifySelf", "justify-self",  "baseline center");
     
    241254test(function() {
    242255    container.style.display = "";
    243     checkInitialValues(element, "justifySelf", "justify-self", "center", "normal");
     256    checkInitialValues(element, "justifySelf", "justify-self", "center", "auto");
    244257}, "Test the value 'initial'");
    245258
    246259test(function() {
    247260    container.style.display = "grid";
    248     checkInitialValues(element, "justifySelf", "justify-self", "left safe", "normal");
     261    checkInitialValues(element, "justifySelf", "justify-self", "left safe", "auto");
    249262}, "Test the value 'initial' for grid containers");
    250263
    251264test(function() {
    252265    container.style.display = "flex";
    253     checkInitialValues(element, "justifySelf", "justify-self", "right unsafe", "normal");
     266    checkInitialValues(element, "justifySelf", "justify-self", "right unsafe", "auto");
    254267}, "Test the value 'initial' for flex containers");
    255268
     
    257270    container.style.display = "";
    258271    element.style.position = "absolute";
    259     checkInitialValues(element, "justifySelf", "justify-self", "left", "normal");
     272    checkInitialValues(element, "justifySelf", "justify-self", "left", "auto");
    260273}, "Test the value 'initial' for positioned elements");
    261274
     
    263276    container.style.display = "grid";
    264277    element.style.position = "absolute";
    265     checkInitialValues(element, "justifySelf", "justify-self", "right", "normal");
     278    checkInitialValues(element, "justifySelf", "justify-self", "right", "auto");
    266279}, "Test the value 'initial' for positioned elements in grid containers");
    267280
     
    269282    container.style.display = "flex";
    270283    element.style.position = "absolute";
    271     checkInitialValues(element, "justifySelf", "justify-self", "end", "normal");
     284    checkInitialValues(element, "justifySelf", "justify-self", "end", "auto");
    272285}, "Test the value 'initial' for positioned elements in grid containers");
    273286
  • trunk/LayoutTests/fast/repaint/align-items-change-expected.txt

    r213480 r219315  
    22
    33(repaint rects
    4   (rect 0 52 100 102)
    5   (rect 100 52 100 152)
    64  (rect 0 52 100 300)
    75  (rect 0 51 100 1)
  • trunk/LayoutTests/fast/repaint/align-items-overflow-change-expected.txt

    r213480 r219315  
    22
    33(repaint rects
    4   (rect 0 2 200 200)
    5   (rect 0 252 200 100)
    64  (rect 0 2 200 350)
    75  (rect 0 52 200 300)
  • trunk/LayoutTests/fast/repaint/justify-items-overflow-change-expected.txt

    r213480 r219315  
    22
    33(repaint rects
    4   (rect -60 52 160 300)
    5   (rect 150 52 50 300)
    64  (rect -60 52 260 300)
    75  (rect 0 52 200 300)
  • trunk/LayoutTests/imported/w3c/ChangeLog

    r219151 r219315  
     12017-07-10  Javier Fernandez  <jfernandez@igalia.com>
     2
     3        [css-align][css-flex][css-grid] 'auto' values of align-self and justify-self must not be resolved
     4        https://bugs.webkit.org/show_bug.cgi?id=172707
     5
     6        Reviewed by Antti Koivisto.
     7
     8        This change makes all the cases of the test below to pass now, hence updated expectations accordingly.
     9
     10        * web-platform-tests/css/css-align-3/self-alignment/place-self-shorthand-006-expected.txt:
     11
    1122017-07-05  Zalan Bujtas  <zalan@apple.com>
    213
  • trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-align-3/self-alignment/place-self-shorthand-006-expected.txt

    r217575 r219315  
    11
    2 FAIL Checking place-self: auto assert_in_array: place-self resolved value value "normal normal" not in array ["", "auto auto"]
    3 FAIL Checking place-self: auto auto assert_in_array: place-self resolved value value "normal normal" not in array ["", "auto auto"]
    4 FAIL Checking place-self: auto normal assert_in_array: place-self resolved value value "normal normal" not in array ["", "auto normal"]
    5 FAIL Checking place-self: auto stretch assert_in_array: place-self resolved value value "normal stretch" not in array ["", "auto stretch"]
    6 FAIL Checking place-self: auto start assert_in_array: place-self resolved value value "normal start" not in array ["", "auto start"]
    7 FAIL Checking place-self: auto end assert_in_array: place-self resolved value value "normal end" not in array ["", "auto end"]
    8 FAIL Checking place-self: auto self-start assert_in_array: place-self resolved value value "normal self-start" not in array ["", "auto self-start"]
    9 FAIL Checking place-self: auto self-end assert_in_array: place-self resolved value value "normal self-end" not in array ["", "auto self-end"]
    10 FAIL Checking place-self: auto left assert_in_array: place-self resolved value value "normal left" not in array ["", "auto left"]
    11 FAIL Checking place-self: auto right assert_in_array: place-self resolved value value "normal right" not in array ["", "auto right"]
    12 FAIL Checking place-self: auto center assert_in_array: place-self resolved value value "normal center" not in array ["", "auto center"]
    13 FAIL Checking place-self: auto flex-start assert_in_array: place-self resolved value value "normal flex-start" not in array ["", "auto flex-start"]
    14 FAIL Checking place-self: auto flex-end assert_in_array: place-self resolved value value "normal flex-end" not in array ["", "auto flex-end"]
    15 FAIL Checking place-self: auto baseline assert_in_array: place-self resolved value value "normal baseline" not in array ["", "auto baseline"]
    16 FAIL Checking place-self: auto first baseline assert_in_array: place-self resolved value value "normal baseline" not in array ["", "auto baseline"]
    17 FAIL Checking place-self: auto last baseline assert_in_array: place-self resolved value value "normal last baseline" not in array ["", "auto last baseline"]
     2PASS Checking place-self: auto
     3PASS Checking place-self: auto auto
     4PASS Checking place-self: auto normal
     5PASS Checking place-self: auto stretch
     6PASS Checking place-self: auto start
     7PASS Checking place-self: auto end
     8PASS Checking place-self: auto self-start
     9PASS Checking place-self: auto self-end
     10PASS Checking place-self: auto left
     11PASS Checking place-self: auto right
     12PASS Checking place-self: auto center
     13PASS Checking place-self: auto flex-start
     14PASS Checking place-self: auto flex-end
     15PASS Checking place-self: auto baseline
     16PASS Checking place-self: auto first baseline
     17PASS Checking place-self: auto last baseline
    1818PASS Checking place-self: normal
    19 FAIL Checking place-self: normal auto assert_in_array: place-self resolved value value "normal normal" not in array ["", "normal auto"]
     19PASS Checking place-self: normal auto
    2020PASS Checking place-self: normal normal
    2121PASS Checking place-self: normal stretch
     
    3333PASS Checking place-self: normal last baseline
    3434PASS Checking place-self: stretch
    35 FAIL Checking place-self: stretch auto assert_in_array: place-self resolved value value "stretch normal" not in array ["", "stretch auto"]
     35PASS Checking place-self: stretch auto
    3636PASS Checking place-self: stretch normal
    3737PASS Checking place-self: stretch stretch
     
    4949PASS Checking place-self: stretch last baseline
    5050PASS Checking place-self: start
    51 FAIL Checking place-self: start auto assert_in_array: place-self resolved value value "start normal" not in array ["", "start auto"]
     51PASS Checking place-self: start auto
    5252PASS Checking place-self: start normal
    5353PASS Checking place-self: start stretch
     
    6565PASS Checking place-self: start last baseline
    6666PASS Checking place-self: end
    67 FAIL Checking place-self: end auto assert_in_array: place-self resolved value value "end normal" not in array ["", "end auto"]
     67PASS Checking place-self: end auto
    6868PASS Checking place-self: end normal
    6969PASS Checking place-self: end stretch
     
    8181PASS Checking place-self: end last baseline
    8282PASS Checking place-self: self-start
    83 FAIL Checking place-self: self-start auto assert_in_array: place-self resolved value value "self-start normal" not in array ["", "self-start auto"]
     83PASS Checking place-self: self-start auto
    8484PASS Checking place-self: self-start normal
    8585PASS Checking place-self: self-start stretch
     
    9797PASS Checking place-self: self-start last baseline
    9898PASS Checking place-self: self-end
    99 FAIL Checking place-self: self-end auto assert_in_array: place-self resolved value value "self-end normal" not in array ["", "self-end auto"]
     99PASS Checking place-self: self-end auto
    100100PASS Checking place-self: self-end normal
    101101PASS Checking place-self: self-end stretch
     
    113113PASS Checking place-self: self-end last baseline
    114114PASS Checking place-self: left
    115 FAIL Checking place-self: left auto assert_in_array: place-self resolved value value "left normal" not in array ["", "left auto"]
     115PASS Checking place-self: left auto
    116116PASS Checking place-self: left normal
    117117PASS Checking place-self: left stretch
     
    129129PASS Checking place-self: left last baseline
    130130PASS Checking place-self: right
    131 FAIL Checking place-self: right auto assert_in_array: place-self resolved value value "right normal" not in array ["", "right auto"]
     131PASS Checking place-self: right auto
    132132PASS Checking place-self: right normal
    133133PASS Checking place-self: right stretch
     
    145145PASS Checking place-self: right last baseline
    146146PASS Checking place-self: center
    147 FAIL Checking place-self: center auto assert_in_array: place-self resolved value value "center normal" not in array ["", "center auto"]
     147PASS Checking place-self: center auto
    148148PASS Checking place-self: center normal
    149149PASS Checking place-self: center stretch
     
    161161PASS Checking place-self: center last baseline
    162162PASS Checking place-self: flex-start
    163 FAIL Checking place-self: flex-start auto assert_in_array: place-self resolved value value "flex-start normal" not in array ["", "flex-start auto"]
     163PASS Checking place-self: flex-start auto
    164164PASS Checking place-self: flex-start normal
    165165PASS Checking place-self: flex-start stretch
     
    177177PASS Checking place-self: flex-start last baseline
    178178PASS Checking place-self: flex-end
    179 FAIL Checking place-self: flex-end auto assert_in_array: place-self resolved value value "flex-end normal" not in array ["", "flex-end auto"]
     179PASS Checking place-self: flex-end auto
    180180PASS Checking place-self: flex-end normal
    181181PASS Checking place-self: flex-end stretch
     
    193193PASS Checking place-self: flex-end last baseline
    194194PASS Checking place-self: baseline
    195 FAIL Checking place-self: baseline auto assert_in_array: place-self resolved value value "baseline normal" not in array ["", "baseline auto"]
     195PASS Checking place-self: baseline auto
    196196PASS Checking place-self: baseline normal
    197197PASS Checking place-self: baseline stretch
     
    209209PASS Checking place-self: baseline last baseline
    210210PASS Checking place-self: first baseline
    211 FAIL Checking place-self: first baseline auto assert_in_array: place-self resolved value value "baseline normal" not in array ["", "baseline auto"]
     211PASS Checking place-self: first baseline auto
    212212PASS Checking place-self: first baseline normal
    213213PASS Checking place-self: first baseline stretch
     
    225225PASS Checking place-self: first baseline last baseline
    226226PASS Checking place-self: last baseline
    227 FAIL Checking place-self: last baseline auto assert_in_array: place-self resolved value value "last baseline normal" not in array ["", "last baseline auto"]
     227PASS Checking place-self: last baseline auto
    228228PASS Checking place-self: last baseline normal
    229229PASS Checking place-self: last baseline stretch
  • trunk/LayoutTests/svg/css/getComputedStyle-basic-expected.txt

    r214359 r219315  
    307307rect: style.getPropertyValue(align-items) : normal
    308308rect: style.getPropertyCSSValue(align-items) : [object CSSValueList]
    309 rect: style.getPropertyValue(align-self) : normal
     309rect: style.getPropertyValue(align-self) : auto
    310310rect: style.getPropertyCSSValue(align-self) : [object CSSValueList]
    311311rect: style.getPropertyValue(filter) : none
     
    325325rect: style.getPropertyValue(justify-content) : normal
    326326rect: style.getPropertyCSSValue(justify-content) : [object CSSValueList]
    327 rect: style.getPropertyValue(justify-self) : normal
     327rect: style.getPropertyValue(justify-self) : auto
    328328rect: style.getPropertyCSSValue(justify-self) : [object CSSValueList]
    329329rect: style.getPropertyValue(justify-items) : normal
     
    859859g: style.getPropertyValue(align-items) : normal
    860860g: style.getPropertyCSSValue(align-items) : [object CSSValueList]
    861 g: style.getPropertyValue(align-self) : normal
     861g: style.getPropertyValue(align-self) : auto
    862862g: style.getPropertyCSSValue(align-self) : [object CSSValueList]
    863863g: style.getPropertyValue(filter) : none
     
    877877g: style.getPropertyValue(justify-content) : normal
    878878g: style.getPropertyCSSValue(justify-content) : [object CSSValueList]
    879 g: style.getPropertyValue(justify-self) : normal
     879g: style.getPropertyValue(justify-self) : auto
    880880g: style.getPropertyCSSValue(justify-self) : [object CSSValueList]
    881881g: style.getPropertyValue(justify-items) : normal
  • trunk/Source/WebCore/ChangeLog

    r219310 r219315  
     12017-07-10  Javier Fernandez  <jfernandez@igalia.com>
     2
     3        [css-align][css-flex][css-grid] 'auto' values of align-self and justify-self must not be resolved
     4        https://bugs.webkit.org/show_bug.cgi?id=172707
     5
     6        Reviewed by Antti Koivisto.
     7
     8        The CSS Box Alignment specification has been changed recently so that
     9        now all the propeties have the specificed value as computed value. The
     10        rationale of this change are at the associated W3C github issue [1].
     11
     12        This change implies that we don't need to execute the StyleAdjuter
     13        logic we implemented specifically for supporting 'auto' values
     14        resolution for computed style. We can live now with resolution at
     15        layout time only.
     16
     17        [1] https://github.com/w3c/csswg-drafts/issues/440
     18
     19        No new tests, just updating the already defined tests.
     20
     21        * css/CSSComputedStyleDeclaration.cpp:
     22        (WebCore::ComputedStyleExtractor::propertyValue):
     23        * css/StyleResolver.cpp:
     24        (WebCore::StyleResolver::adjustRenderStyle): Removed
     25        * css/StyleResolver.h:
     26        * html/shadow/TextControlInnerElements.cpp:
     27        (WebCore::TextControlInnerElement::resolveCustomStyle):
     28        * rendering/RenderBox.cpp:
     29        (WebCore::RenderBox::columnFlexItemHasStretchAlignment):
     30        (WebCore::RenderBox::hasStretchedLogicalWidth):
     31        * rendering/RenderFlexibleBox.cpp:
     32        (WebCore::RenderFlexibleBox::styleDidChange): Added
     33        (WebCore::RenderFlexibleBox::alignmentForChild):
     34        * rendering/RenderFlexibleBox.h:
     35
    1362017-07-10  Wenson Hsieh  <wenson_hsieh@apple.com>
    237
  • trunk/Source/WebCore/css/CSSComputedStyleDeclaration.cpp

    r219151 r219315  
    23832383}
    23842384
    2385 static StyleSelfAlignmentData resolveLegacyJustifyItems(const StyleSelfAlignmentData& data)
    2386 {
    2387     if (data.positionType() == LegacyPosition)
    2388         return { data.position(), OverflowAlignmentDefault };
    2389     return data;
    2390 }
    2391 
    2392 static StyleSelfAlignmentData resolveJustifyItemsAuto(const StyleSelfAlignmentData& data, Node* parent)
    2393 {
    2394     if (data.position() != ItemPositionAuto)
    2395         return data;
    2396 
    2397     // If the inherited value of justify-items includes the 'legacy' keyword, 'auto' computes to the inherited value.
    2398     const auto& inheritedValue = (!parent || !parent->computedStyle()) ? RenderStyle::initialDefaultAlignment() : parent->computedStyle()->justifyItems();
    2399     if (inheritedValue.positionType() == LegacyPosition)
    2400         return inheritedValue;
    2401     if (inheritedValue.position() == ItemPositionAuto)
    2402         return resolveJustifyItemsAuto(inheritedValue, parent->parentNode());
    2403     return { ItemPositionNormal, OverflowAlignmentDefault };
    2404 }
    2405 
    2406 static StyleSelfAlignmentData resolveJustifySelfAuto(const StyleSelfAlignmentData& data, Node* parent)
    2407 {
    2408     if (data.position() != ItemPositionAuto)
    2409         return data;
    2410 
    2411     // The 'auto' keyword computes to the computed value of justify-items on the parent or 'normal' if the box has no parent.
    2412     if (!parent || !parent->computedStyle())
    2413         return { ItemPositionNormal, OverflowAlignmentDefault };
    2414     return resolveLegacyJustifyItems(resolveJustifyItemsAuto(parent->computedStyle()->justifyItems(), parent->parentNode()));
    2415 }
    2416 
    2417 static StyleSelfAlignmentData resolveAlignSelfAuto(const StyleSelfAlignmentData& data, Node* parent)
    2418 {
    2419     if (data.position() != ItemPositionAuto)
    2420         return data;
    2421 
    2422     // The 'auto' keyword computes to the computed value of align-items on the parent or 'normal' if the box has no parent.
    2423     if (!parent || !parent->computedStyle())
    2424         return { ItemPositionNormal, OverflowAlignmentDefault };
    2425     return parent->computedStyle()->alignItems();
    2426 }
    2427 
    24282385static bool isImplicitlyInheritedGridOrFlexProperty(CSSPropertyID propertyID)
    24292386{
     
    30152972            return valueForItemPositionWithOverflowAlignment(style->alignItems());
    30162973        case CSSPropertyAlignSelf:
    3017             return valueForItemPositionWithOverflowAlignment(resolveAlignSelfAuto(style->alignSelf(), styledElement->parentNode()));
     2974            return valueForItemPositionWithOverflowAlignment(style->alignSelf());
    30182975        case CSSPropertyFlex:
    30192976            return getCSSPropertyValuesForShorthandProperties(flexShorthand());
     
    30332990            return valueForContentPositionAndDistributionWithOverflowAlignment(style->justifyContent(), CSSValueFlexStart);
    30342991        case CSSPropertyJustifyItems:
    3035             return valueForItemPositionWithOverflowAlignment(resolveJustifyItemsAuto(style->justifyItems(), styledElement->parentNode()));
     2992            return valueForItemPositionWithOverflowAlignment(style->justifyItems().position() == ItemPositionAuto ? RenderStyle::initialDefaultAlignment() : style->justifyItems());
    30362993        case CSSPropertyJustifySelf:
    3037             return valueForItemPositionWithOverflowAlignment(resolveJustifySelfAuto(style->justifySelf(), styledElement->parentNode()));
     2994            return valueForItemPositionWithOverflowAlignment(style->justifySelf());
    30382995        case CSSPropertyPlaceContent:
    30392996            return getCSSPropertyValuesForShorthandProperties(placeContentShorthand());
  • trunk/Source/WebCore/css/StyleResolver.cpp

    r219145 r219315  
    10501050    }
    10511051   
    1052     adjustStyleForAlignment(style, *parentBoxStyle);
    1053 }
    1054    
    1055 void StyleResolver::adjustStyleForAlignment(RenderStyle& style, const RenderStyle& parentBoxStyle)
    1056 {
    1057     // To avoid needing to copy the StyleRareNonInheritedData, we repurpose the 'auto'
    1058     // flag to not just mean 'auto' prior to running adjustRenderStyle but also
    1059     // mean 'normal' after running it.
    1060    
    10611052    // If the inherited value of justify-items includes the 'legacy' keyword,
    10621053    // 'auto' computes to the the inherited value. Otherwise, 'auto' computes to
    10631054    // 'normal'.
    10641055    if (style.justifyItems().position() == ItemPositionAuto) {
    1065         if (parentBoxStyle.justifyItems().positionType() == LegacyPosition)
    1066             style.setJustifyItems(parentBoxStyle.justifyItems());
    1067     }
    1068    
    1069     // The 'auto' keyword computes the computed value of justify-items on the
    1070     // parent (minus any legacy keywords), or 'normal' if the box has no parent.
    1071     if (style.justifySelf().position() == ItemPositionAuto) {
    1072         if (parentBoxStyle.justifyItems().positionType() == LegacyPosition)
    1073             style.setJustifySelfPosition(parentBoxStyle.justifyItems().position());
    1074         else if (parentBoxStyle.justifyItems().position() != ItemPositionAuto)
    1075             style.setJustifySelf(parentBoxStyle.justifyItems());
    1076     }
    1077    
    1078     // The 'auto' keyword computes the computed value of align-items on the parent
    1079     // or 'normal' if the box has no parent.
    1080     if (style.alignSelf().position() == ItemPositionAuto && parentBoxStyle.alignItems().position() != RenderStyle::initialDefaultAlignment().position())
    1081         style.setAlignSelf(parentBoxStyle.alignItems());
    1082 }
    1083 
     1056        if (parentBoxStyle->justifyItems().positionType() == LegacyPosition)
     1057            style.setJustifyItems(parentBoxStyle->justifyItems());
     1058    }
     1059}
     1060   
    10841061bool StyleResolver::checkRegionStyle(const Element* regionElement)
    10851062{
  • trunk/Source/WebCore/css/StyleResolver.h

    r219145 r219315  
    306306        WritingMode m_writingMode;
    307307    };
    308 
    309     // FIXME: Should make a StyleAdjuster class (like Blink has) that handles all RenderStyle
    310     // adjustments. For now put this function on StyleResolver, since adjustRenderStyle is here.
    311     static void adjustStyleForAlignment(RenderStyle&, const RenderStyle& parentStyle);
    312308   
    313309private:
  • trunk/Source/WebCore/html/shadow/TextControlInnerElements.cpp

    r213480 r219315  
    7676}
    7777
    78 std::optional<ElementStyle> TextControlInnerElement::resolveCustomStyle(const RenderStyle& parentStyle, const RenderStyle* shadowHostStyle)
     78std::optional<ElementStyle> TextControlInnerElement::resolveCustomStyle(const RenderStyle&, const RenderStyle* shadowHostStyle)
    7979{
    8080    auto innerContainerStyle = RenderStyle::createPtr();
     
    8989    // 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.
    9090    innerContainerStyle->setUserModify(READ_ONLY);
    91 
    92     StyleResolver::adjustStyleForAlignment(*innerContainerStyle, parentStyle);
    9391
    9492    return ElementStyle(WTFMove(innerContainerStyle));
  • trunk/Source/WebCore/rendering/RenderBox.cpp

    r219283 r219315  
    25292529    if (style().marginStart().isAuto() || style().marginEnd().isAuto())
    25302530        return false;
    2531     return style().resolvedAlignSelf(isAnonymous() ? &parentStyle : nullptr, containingBlock()->selfAlignmentNormalBehavior()).position() == ItemPositionStretch;
     2531    return style().resolvedAlignSelf(&parentStyle, containingBlock()->selfAlignmentNormalBehavior()).position() == ItemPositionStretch;
    25322532}
    25332533
     
    25552555        return false;
    25562556    }
    2557     const auto* parentStyle = isAnonymous() ? &containingBlock->style() : nullptr;
    25582557    if (containingBlock->isHorizontalWritingMode() != isHorizontalWritingMode())
    2559         return style.resolvedAlignSelf(parentStyle, containingBlock->selfAlignmentNormalBehavior(this)).position() == ItemPositionStretch;
    2560     return style.resolvedJustifySelf(parentStyle, containingBlock->selfAlignmentNormalBehavior(this)).position() == ItemPositionStretch;
     2558        return style.resolvedAlignSelf(&containingBlock->style(), containingBlock->selfAlignmentNormalBehavior(this)).position() == ItemPositionStretch;
     2559    return style.resolvedJustifySelf(&containingBlock->style(), containingBlock->selfAlignmentNormalBehavior(this)).position() == ItemPositionStretch;
    25612560}
    25622561
  • trunk/Source/WebCore/rendering/RenderFlexibleBox.cpp

    r216536 r219315  
    3434#include "FlexibleBoxAlgorithm.h"
    3535#include "LayoutRepainter.h"
     36#include "RenderChildIterator.h"
    3637#include "RenderLayer.h"
    3738#include "RenderView.h"
     
    234235    static const StyleContentAlignmentData normalBehavior = { ContentPositionNormal, ContentDistributionStretch};
    235236    return normalBehavior;
     237}
     238
     239void RenderFlexibleBox::styleDidChange(StyleDifference diff, const RenderStyle* oldStyle)
     240{
     241    RenderBlock::styleDidChange(diff, oldStyle);
     242    if (!oldStyle || diff != StyleDifferenceLayout)
     243        return;
     244
     245    if (oldStyle->resolvedAlignItems(selfAlignmentNormalBehavior()).position() == ItemPositionStretch) {
     246        // Flex items that were previously stretching need to be relayed out so we
     247        // can compute new available cross axis space. This is only necessary for
     248        // stretching since other alignment values don't change the size of the
     249        // box.
     250        for (auto& child : childrenOfType<RenderBox>(*this)) {
     251            ItemPosition previousAlignment = child.style().resolvedAlignSelf(oldStyle, selfAlignmentNormalBehavior()).position();
     252            if (previousAlignment == ItemPositionStretch && previousAlignment != child.style().resolvedAlignSelf(&style(), selfAlignmentNormalBehavior()).position())
     253                child.setChildNeedsLayout(MarkOnlyThis);
     254        }
     255    }
    236256}
    237257
     
    14381458ItemPosition RenderFlexibleBox::alignmentForChild(const RenderBox& child) const
    14391459{
    1440     ItemPosition align = child.style().resolvedAlignSelf(child.isAnonymous() ? &style() : nullptr, selfAlignmentNormalBehavior()).position();
     1460    ItemPosition align = child.style().resolvedAlignSelf(&style(), selfAlignmentNormalBehavior()).position();
    14411461    ASSERT(align != ItemPositionAuto && align != ItemPositionNormal);
    14421462
  • trunk/Source/WebCore/rendering/RenderFlexibleBox.h

    r213480 r219315  
    5656    std::optional<int> inlineBlockBaseline(LineDirectionMode) const override;
    5757
     58    void styleDidChange(StyleDifference, const RenderStyle*) override;
    5859    void paintChildren(PaintInfo& forSelf, const LayoutPoint&, PaintInfo& forChild, bool usePrintRect) override;
    5960
  • trunk/Source/WebCore/rendering/RenderGrid.cpp

    r217705 r219315  
    3232#include "GridTrackSizingAlgorithm.h"
    3333#include "LayoutRepainter.h"
     34#include "RenderChildIterator.h"
    3435#include "RenderLayer.h"
    3536#include "RenderView.h"
     
    9495}
    9596
     97StyleSelfAlignmentData RenderGrid::selfAlignmentForChild(GridAxis axis, const RenderBox& child, const RenderStyle* gridStyle) const
     98{
     99    return axis == GridRowAxis ? justifySelfForChild(child, gridStyle) : alignSelfForChild(child, gridStyle);
     100}
     101
     102bool RenderGrid::selfAlignmentChangedToStretch(GridAxis axis, const RenderStyle& oldStyle, const RenderStyle& newStyle, const RenderBox& child) const
     103{
     104    return selfAlignmentForChild(axis, child, &oldStyle).position() != ItemPositionStretch
     105        && selfAlignmentForChild(axis, child, &newStyle).position() == ItemPositionStretch;
     106}
     107
     108bool RenderGrid::selfAlignmentChangedFromStretch(GridAxis axis, const RenderStyle& oldStyle, const RenderStyle& newStyle, const RenderBox& child) const
     109{
     110    return selfAlignmentForChild(axis, child, &oldStyle).position() == ItemPositionStretch
     111        && selfAlignmentForChild(axis, child, &newStyle).position() != ItemPositionStretch;
     112}
     113
    96114void RenderGrid::styleDidChange(StyleDifference diff, const RenderStyle* oldStyle)
    97115{
     
    99117    if (!oldStyle || diff != StyleDifferenceLayout)
    100118        return;
     119
     120    const RenderStyle& newStyle = this->style();
     121    if (oldStyle->resolvedAlignItems(selfAlignmentNormalBehavior(this)).position() == ItemPositionStretch) {
     122        // Style changes on the grid container implying stretching (to-stretch) or
     123        // shrinking (from-stretch) require the affected items to be laid out again.
     124        // These logic only applies to 'stretch' since the rest of the alignment
     125        // values don't change the size of the box.
     126        // In any case, the items' overrideSize will be cleared and recomputed (if
     127        // necessary)  as part of the Grid layout logic, triggered by this style
     128        // change.
     129        for (auto& child : childrenOfType<RenderBox>(*this)) {
     130            if (child.isOutOfFlowPositioned())
     131                continue;
     132            if (selfAlignmentChangedToStretch(GridRowAxis, *oldStyle, newStyle, child)
     133                || selfAlignmentChangedFromStretch(GridRowAxis, *oldStyle, newStyle, child)
     134                || selfAlignmentChangedToStretch(GridColumnAxis, *oldStyle, newStyle, child)
     135                || selfAlignmentChangedFromStretch(GridColumnAxis, *oldStyle, newStyle, child)) {
     136                child.setNeedsLayout();
     137            }
     138        }
     139    }
    101140
    102141    if (explicitGridDidResize(*oldStyle) || namedGridLinesDefinitionDidChange(*oldStyle) || oldStyle->gridAutoFlow() != style().gridAutoFlow()
     
    11651204}
    11661205
    1167 StyleSelfAlignmentData RenderGrid::alignSelfForChild(const RenderBox& child) const
    1168 {
    1169     if (!child.isAnonymous())
    1170         return child.style().resolvedAlignSelf(nullptr, selfAlignmentNormalBehavior(&child));
    1171 
    1172     // All the 'auto' values have been resolved by the StyleAdjuster, but it's
    1173     // possible that some grid items generate Anonymous boxes, which need to be
    1174     // solved during layout.
    1175     return child.style().resolvedAlignSelf(&style(), selfAlignmentNormalBehavior(&child));
    1176 }
    1177 
    1178 StyleSelfAlignmentData RenderGrid::justifySelfForChild(const RenderBox& child) const
    1179 {
    1180     if (!child.isAnonymous())
    1181         return child.style().resolvedJustifySelf(nullptr, selfAlignmentNormalBehavior(&child));
    1182    
    1183     // All the 'auto' values have been resolved by the StyleAdjuster, but it's
    1184     // possible that some grid items generate Anonymous boxes, which need to be
    1185     // solved during layout.
    1186     return child.style().resolvedJustifySelf(&style(), selfAlignmentNormalBehavior(&child));
     1206StyleSelfAlignmentData RenderGrid::alignSelfForChild(const RenderBox& child, const RenderStyle* gridStyle) const
     1207{
     1208    if (!gridStyle)
     1209        gridStyle = &style();
     1210    return child.style().resolvedAlignSelf(gridStyle, selfAlignmentNormalBehavior(&child));
     1211}
     1212
     1213StyleSelfAlignmentData RenderGrid::justifySelfForChild(const RenderBox& child, const RenderStyle* gridStyle) const
     1214{
     1215    if (!gridStyle)
     1216        gridStyle = &style();
     1217    return child.style().resolvedJustifySelf(gridStyle, selfAlignmentNormalBehavior(&child));
    11871218}
    11881219
  • trunk/Source/WebCore/rendering/RenderGrid.h

    r217705 r219315  
    3939
    4040enum GridAxisPosition {GridAxisStart, GridAxisEnd, GridAxisCenter};
     41enum GridAxis { GridRowAxis, GridColumnAxis };
    4142
    4243class RenderGrid final : public RenderBlock {
     
    7980    void addChild(RenderObject* newChild, RenderObject* beforeChild) final;
    8081    void removeChild(RenderObject&) final;
     82
     83    StyleSelfAlignmentData selfAlignmentForChild(GridAxis, const RenderBox&, const RenderStyle* = nullptr) const;
     84    bool selfAlignmentChangedToStretch(GridAxis, const RenderStyle& oldStyle, const RenderStyle& newStyle, const RenderBox&) const;
     85    bool selfAlignmentChangedFromStretch(GridAxis, const RenderStyle& oldStyle, const RenderStyle& newStyle, const RenderBox&) const;
    8186
    8287    std::optional<LayoutUnit> availableSpaceForGutters(GridTrackSizingDirection) const;
     
    134139    LayoutUnit computeMarginLogicalSizeForChild(GridTrackSizingDirection, const RenderBox&) const;
    135140    LayoutUnit availableAlignmentSpaceForChildBeforeStretching(LayoutUnit gridAreaBreadthForChild, const RenderBox&) const;
    136     StyleSelfAlignmentData justifySelfForChild(const RenderBox&) const;
    137     StyleSelfAlignmentData alignSelfForChild(const RenderBox&) const;
     141    StyleSelfAlignmentData justifySelfForChild(const RenderBox&, const RenderStyle* = nullptr) const;
     142    StyleSelfAlignmentData alignSelfForChild(const RenderBox&, const RenderStyle* = nullptr) const;
    138143    void applyStretchAlignmentToChildIfNeeded(RenderBox&);
    139144    bool hasAutoSizeInColumnAxis(const RenderBox& child) const { return isHorizontalWritingMode() ? child.style().height().isAuto() : child.style().width().isAuto(); }
Note: See TracChangeset for help on using the changeset viewer.