Commit 2d47a613 authored by Ting-Yu Lin's avatar Ting-Yu Lin
Browse files

Bug 1543267 Part 1 - Make 'stretch' fallback to 'flex-start' for flexbox's... 

Bug 1543267 Part 1 - Make 'stretch' fallback to 'flex-start' for flexbox's abspos children. r=dholbert

In Flexbox spec 4.1, Example 3 [1]:
   ... since the absolutely-positioned box is considered to be
   "fixed-size", a value of stretch is treated the same as flex-start.

Also, per Alignment 3 spec [2]:
  The default fallback alignment for 'stretch' is 'flex-start'.

Thus, when computing the alignment for flexbox's abspos children in
CSSAlignmentForAbsPosChild(), we convert 'stretch' to 'flex-start', and let the
subsequent logic convert 'flex-start' to either 'start' or 'end', because
nsAbsoluteContainingBlock don't know how to deal with the flex-relative axis.

This patch makes us behave the same as Google Chrome on the modified testcases.

[1] https://drafts.csswg.org/css-flexbox/#abspos-items
[2] https://drafts.csswg.org/css-align/#valdef-align-content-stretch

Differential Revision: https://phabricator.services.mozilla.com/D134543
parent a1ab1d2f

layout/generic/nsFlexContainerFrame.cpp

+12 −0
Original line number Diff line number Diff line
@@ -1317,6 +1317,11 @@ StyleAlignFlags nsFlexContainerFrame::CSSAlignmentForAbsPosChild( 
    }

  }



  if (alignment == StyleAlignFlags::STRETCH) {

    // The default fallback alignment for 'stretch' is 'flex-start'.

    alignment = StyleAlignFlags::FLEX_START;

  }



  // Resolve flex-start, flex-end, auto, left, right, baseline, last baseline;

  if (alignment == StyleAlignFlags::FLEX_START) {

    alignment = isAxisReversed ? StyleAlignFlags::END : StyleAlignFlags::START;
@@ -1332,6 +1337,13 @@ StyleAlignFlags nsFlexContainerFrame::CSSAlignmentForAbsPosChild( 
    alignment = StyleAlignFlags::END;

  }



  MOZ_ASSERT(alignment != StyleAlignFlags::STRETCH,

             "We should've converted 'stretch' to the fallback alignment!");

  MOZ_ASSERT(alignment != StyleAlignFlags::FLEX_START &&

                 alignment != StyleAlignFlags::FLEX_END,

             "nsAbsoluteContainingBlock doesn't know how to handle "

             "flex-relative axis for flex containers!");



  return (alignment | alignmentFlags);

}

testing/web-platform/meta/css/css-flexbox/abspos/position-absolute-002.html.ini

deleted100644 → 0
+0 −4
Original line number Diff line number Diff line 
[position-absolute-002.html]

  [.flexbox 5]

    expected: FAIL

testing/web-platform/meta/css/css-flexbox/abspos/position-absolute-013.html.ini

deleted100644 → 0
+0 −145
Original line number Diff line number Diff line 
[position-absolute-013.html]

  [.flexbox 99]

    expected: FAIL



  [.flexbox 102]

    expected: FAIL



  [.flexbox 105]

    expected: FAIL



  [.flexbox 108]

    expected: FAIL



  [.flexbox 111]

    expected: FAIL



  [.flexbox 114]

    expected: FAIL



  [.flexbox 117]

    expected: FAIL



  [.flexbox 120]

    expected: FAIL



  [.flexbox 123]

    expected: FAIL



  [.flexbox 126]

    expected: FAIL



  [.flexbox 129]

    expected: FAIL



  [.flexbox 132]

    expected: FAIL



  [.flexbox 135]

    expected: FAIL



  [.flexbox 138]

    expected: FAIL



  [.flexbox 141]

    expected: FAIL



  [.flexbox 144]

    expected: FAIL



  [.flexbox 243]

    expected: FAIL



  [.flexbox 246]

    expected: FAIL



  [.flexbox 249]

    expected: FAIL



  [.flexbox 252]

    expected: FAIL



  [.flexbox 255]

    expected: FAIL



  [.flexbox 258]

    expected: FAIL



  [.flexbox 261]

    expected: FAIL



  [.flexbox 264]

    expected: FAIL



  [.flexbox 267]

    expected: FAIL



  [.flexbox 270]

    expected: FAIL



  [.flexbox 273]

    expected: FAIL



  [.flexbox 276]

    expected: FAIL



  [.flexbox 279]

    expected: FAIL



  [.flexbox 282]

    expected: FAIL



  [.flexbox 285]

    expected: FAIL



  [.flexbox 288]

    expected: FAIL



  [.flexbox 387]

    expected: FAIL



  [.flexbox 390]

    expected: FAIL



  [.flexbox 393]

    expected: FAIL



  [.flexbox 396]

    expected: FAIL



  [.flexbox 399]

    expected: FAIL



  [.flexbox 402]

    expected: FAIL



  [.flexbox 405]

    expected: FAIL



  [.flexbox 408]

    expected: FAIL



  [.flexbox 411]

    expected: FAIL



  [.flexbox 414]

    expected: FAIL



  [.flexbox 417]

    expected: FAIL



  [.flexbox 420]

    expected: FAIL



  [.flexbox 423]

    expected: FAIL



  [.flexbox 426]

    expected: FAIL



  [.flexbox 429]

    expected: FAIL



  [.flexbox 432]

    expected: FAIL

testing/web-platform/tests/css/css-flexbox/abspos/flex-abspos-staticpos-align-self-002.html

+4 −4
Original line number Diff line number Diff line
@@ -51,8 +51,8 @@ 
         https://www.w3.org/TR/css-align-3/#propdef-align-self -->

    <!-- auto | normal | stretch -->

    <div class="container"><div style="align-self: auto" data-offset-x="2" data-offset-y="3"></div></div>

    <div class="container"><div style="align-self: normal" data-offset-x="2" data-offset-y="1"></div></div>

    <div class="container"><div style="align-self: stretch" data-offset-x="2" data-offset-y="1"></div></div>

    <div class="container"><div style="align-self: normal" data-offset-x="2" data-offset-y="5"></div></div>

    <div class="container"><div style="align-self: stretch" data-offset-x="2" data-offset-y="5"></div></div>

    <br>

    <!-- <baseline-position> -->

    <div class="container"><div style="align-self: baseline" data-offset-x="2" data-offset-y="1"></div></div>
@@ -75,8 +75,8 @@ 
         https://www.w3.org/TR/css-align-3/#propdef-align-self -->

    <!-- auto | normal | stretch -->

    <div class="container"><div style="align-self: auto" data-offset-x="2" data-offset-y="-1"></div></div>

    <div class="container"><div style="align-self: normal" data-offset-x="2" data-offset-y="1"></div></div>

    <div class="container"><div style="align-self: stretch" data-offset-x="2" data-offset-y="1"></div></div>

    <div class="container"><div style="align-self: normal" data-offset-x="2" data-offset-y="-3"></div></div>

    <div class="container"><div style="align-self: stretch" data-offset-x="2" data-offset-y="-3"></div></div>

    <br>

    <!-- <baseline-position> -->

    <div class="container"><div style="align-self: baseline" data-offset-x="2" data-offset-y="1"></div></div>

testing/web-platform/tests/css/css-flexbox/abspos/flex-abspos-staticpos-align-self-004.html

+4 −4
Original line number Diff line number Diff line
@@ -51,8 +51,8 @@ 
         https://www.w3.org/TR/css-align-3/#propdef-align-self -->

    <!-- auto | normal | stretch -->

    <div class="container"><div style="align-self: auto" data-offset-x="10" data-offset-y="3"></div></div>

    <div class="container"><div style="align-self: normal" data-offset-x="10" data-offset-y="1"></div></div>

    <div class="container"><div style="align-self: stretch" data-offset-x="10" data-offset-y="1"></div></div>

    <div class="container"><div style="align-self: normal" data-offset-x="10" data-offset-y="5"></div></div>

    <div class="container"><div style="align-self: stretch" data-offset-x="10" data-offset-y="5"></div></div>

    <br>

    <!-- <baseline-position> -->

    <div class="container"><div style="align-self: baseline" data-offset-x="10" data-offset-y="1"></div></div>
@@ -75,8 +75,8 @@ 
         https://www.w3.org/TR/css-align-3/#propdef-align-self -->

    <!-- auto | normal | stretch -->

    <div class="container"><div style="align-self: auto" data-offset-x="-2" data-offset-y="-1"></div></div>

    <div class="container"><div style="align-self: normal" data-offset-x="-2" data-offset-y="1"></div></div>

    <div class="container"><div style="align-self: stretch" data-offset-x="-2" data-offset-y="1"></div></div>

    <div class="container"><div style="align-self: normal" data-offset-x="-2" data-offset-y="-3"></div></div>

    <div class="container"><div style="align-self: stretch" data-offset-x="-2" data-offset-y="-3"></div></div>

    <br>

    <!-- <baseline-position> -->

    <div class="container"><div style="align-self: baseline" data-offset-x="-2" data-offset-y="1"></div></div>