Changeset 262716 in webkit


Ignore:
Timestamp:
Jun 8, 2020 8:52:18 AM (4 years ago)
Author:
svillar@igalia.com
Message:

[css-flexbox] align-content should apply even when there's just a single line
​https://bugs.webkit.org/show_bug.cgi?id=209871

Reviewed by Manuel Rego Casasnovas.

LayoutTests/imported/w3c:

Mark as PASSing 15 subtests that are now working as expected.

  • web-platform-tests/css/css-flexbox/align-content-wrap-001-expected.txt: Remove FAIL results.
  • web-platform-tests/css/css-flexbox/align-content-wrap-002-expected.txt: Ditto.
  • web-platform-tests/css/css-flexbox/align-content-wrap-003-expected.txt: Ditto.

Source/WebCore:

The 'align-content' property should have no effect on single line flex containers according to
the specs ​https://drafts.csswg.org/css-flexbox/#propdef-align-content. The current code was not
differentiating between single-line containers and multi-line containers with just 1 line.

Also in order not to introduce regressions and properly support replaced elements as flex items
we replaced the computation of child's width for 'flex-direction:column' by a direct call to
computeLogicalWidthForFragment() which already properly handles all the cases. It used to be
just the shrink-to-fit computation but that was not enough for replaced elements for example or
elements with min/max-size restrictions.

Several align-content-wrap-* subtests are working now. Updated expectations.

  • rendering/RenderFlexibleBox.cpp:

(WebCore::initialAlignContentOffset): Removed check for #lines <= 1, as it is incorrect because it
is true for multi-line containers with just 1 line.
(WebCore::RenderFlexibleBox::alignFlexLines): Use isMultiline() instead of "#lines == 1".
(WebCore::RenderFlexibleBox::childIntrinsicLogicalWidth const): Replace shrink-to-fit computation
by a call computeLogicalWidthForFragment().
(WebCore::RenderFlexibleBox::repositionLogicalHeightDependentFlexItems): Use the whole crossAxisExtent
for single line containers. Moved from alignFlexLines() as it fits much better here.

LayoutTests:

  • TestExpectations:
  • css3/flexbox/alignContent-applies-with-flexWrap-wrap-with-single-line-expected.txt: Removed.
  • css3/flexbox/alignContent-applies-with-flexWrap-wrap-with-single-line.html: Replaced by

WPT's align-content-wrap-001.html.

  • css3/flexbox/flexbox-wordwrap-expected.txt: Removed.
  • css3/flexbox/flexbox-wordwrap.html: Replaced by WPT's align-content-wrap-002.html.
  • css3/flexbox/multiline-align-content-expected.txt: Removed.
  • css3/flexbox/multiline-align-content.html: Replaced by WPT's align-content-wrap-003.html.
  • platform/ios/fast/forms/auto-fill-button/input-strong-password-auto-fill-button-expected.txt:

Updated expectations.

Location:
trunk
Files:
6 deleted
9 edited

Legend:

Unmodified
Added
Removed

  • trunk/LayoutTests/ChangeLog

    r262713 r262716  
     12020-06-03  Sergio Villar Senin  <svillar@igalia.com>
     2
     3        [css-flexbox] align-content should apply even when there's just a single line
     4        https://bugs.webkit.org/show_bug.cgi?id=209871
     5
     6        Reviewed by Manuel Rego Casasnovas.
     7
     8        * TestExpectations:
     9        * css3/flexbox/alignContent-applies-with-flexWrap-wrap-with-single-line-expected.txt: Removed.
     10        * css3/flexbox/alignContent-applies-with-flexWrap-wrap-with-single-line.html: Replaced by
     11        WPT's align-content-wrap-001.html.
     12        * css3/flexbox/flexbox-wordwrap-expected.txt: Removed.
     13        * css3/flexbox/flexbox-wordwrap.html: Replaced by WPT's align-content-wrap-002.html.
     14        * css3/flexbox/multiline-align-content-expected.txt: Removed.
     15        * css3/flexbox/multiline-align-content.html: Replaced by WPT's align-content-wrap-003.html.
     16        * platform/ios/fast/forms/auto-fill-button/input-strong-password-auto-fill-button-expected.txt:
     17        Updated expectations.
     18
    1192020-06-08  Diego Pino Garcia  <dpino@igalia.com>
    220

  • trunk/LayoutTests/TestExpectations

    r262708 r262716  
    42334233webkit.org/b/206767 imported/w3c/web-platform-tests/css/css-flexbox/gap-016.html [ ImageOnlyFailure ]
    42344234webkit.org/b/209649 imported/w3c/web-platform-tests/css/css-flexbox/padding-overflow-crash.html [ ImageOnlyFailure ]
    4235 webkit.org/b/209871 imported/w3c/web-platform-tests/css/css-flexbox/flex-wrap-005.html [ ImageOnlyFailure ]
    42364235webkit.org/b/210077 imported/w3c/web-platform-tests/css/css-flexbox/flex-aspect-ratio-img-column-010.html [ ImageOnlyFailure ]
    42374236webkit.org/b/210077 imported/w3c/web-platform-tests/css/css-flexbox/flex-basis-010.html [ ImageOnlyFailure ]

  • trunk/LayoutTests/imported/w3c/ChangeLog

    r262689 r262716  
     12020-06-01  Sergio Villar Senin  <svillar@igalia.com>
     2
     3        [css-flexbox] align-content should apply even when there's just a single line
     4        https://bugs.webkit.org/show_bug.cgi?id=209871
     5
     6        Reviewed by Manuel Rego Casasnovas.
     7
     8        Mark as PASSing 15 subtests that are now working as expected.
     9
     10        * web-platform-tests/css/css-flexbox/align-content-wrap-001-expected.txt: Remove FAIL results.
     11        * web-platform-tests/css/css-flexbox/align-content-wrap-002-expected.txt: Ditto.
     12        * web-platform-tests/css/css-flexbox/align-content-wrap-003-expected.txt: Ditto.
     13
    1142020-06-06  Charlie Turner  <cturner@igalia.com>
    215

  • trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/align-content-wrap-001-expected.txt

    r261859 r262716  
    11
    22PASS .default, .verticalWriting 1
    3 FAIL .default, .verticalWriting 2 assert_equals:
    4 <div class="default" style="align-content: flex-end">
    5 <div data-offset-y="50">This text should be at the bottom of its container</div>
    6 </div>
    7 offsetTop expected 50 but got 0
    8 FAIL .default, .verticalWriting 3 assert_equals:
    9 <div class="default" style="align-content: center">
    10 <div data-offset-y="25">This text should be centered in its container</div>
    11 </div>
    12 offsetTop expected 25 but got 0
     3PASS .default, .verticalWriting 2
     4PASS .default, .verticalWriting 3
    135PASS .default, .verticalWriting 4
    14 FAIL .default, .verticalWriting 5 assert_equals:
    15 <div class="default" style="align-content: space-around">
    16 <div data-offset-y="25">This text should be centered in its container</div>
    17 </div>
    18 offsetTop expected 25 but got 0
    19 FAIL .default, .verticalWriting 6 assert_equals:
    20 <div class="default" style="align-content: space-evenly">
    21 <div data-offset-y="25">This text should be centered in its container</div>
    22 </div>
    23 offsetTop expected 25 but got 0
     6PASS .default, .verticalWriting 5
     7PASS .default, .verticalWriting 6
    248PASS .default, .verticalWriting 7
    259PASS .default, .verticalWriting 8
    26 FAIL .default, .verticalWriting 9 assert_equals:
    27 <div class="verticalWriting" style="align-content: flex-end">
    28 <div data-offset-x="50">This text should be at the right of its container</div>
    29 </div>
    30 offsetLeft expected 50 but got 0
    31 FAIL .default, .verticalWriting 10 assert_equals:
    32 <div class="verticalWriting" style="align-content: center">
    33 <div data-offset-x="25">This text should be centered in its container</div>
    34 </div>
    35 offsetLeft expected 25 but got 0
     10PASS .default, .verticalWriting 9
     11PASS .default, .verticalWriting 10
    3612PASS .default, .verticalWriting 11
    37 FAIL .default, .verticalWriting 12 assert_equals:
    38 <div class="verticalWriting" style="align-content: space-around">
    39 <div data-offset-x="25">This text should be centered in its container</div>
    40 </div>
    41 offsetLeft expected 25 but got 0
     13PASS .default, .verticalWriting 12
    4214PASS .default, .verticalWriting 13
    4315Test that we honor align-content even in single-line flex containers

  • trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/align-content-wrap-002-expected.txt

    r261859 r262716  
    11
    22PASS .flex-horizontal, .flex-vertical 1
    3 FAIL .flex-horizontal, .flex-vertical 2 assert_equals:
    4 <div class="flex-horizontal" style="flex-wrap:wrap;">
    5     <div class="item-horizontal" data-expected-height="150"><div class="content1-horizontal"></div></div>
    6     <div class="item-horizontal" data-expected-height="150"><div class="content2-horizontal"></div></div>
    7     <div class="item-horizontal" data-expected-height="150"><div class="content3-horizontal"></div></div>
    8 </div>
    9 height expected 150 but got 80
     3PASS .flex-horizontal, .flex-vertical 2
    104PASS .flex-horizontal, .flex-vertical 3
    115PASS .flex-horizontal, .flex-vertical 4
    12 FAIL .flex-horizontal, .flex-vertical 5 assert_equals:
    13 <div class="flex-vertical" style="flex-wrap:wrap;">
    14     <div class="item-vertical" data-expected-width="150"><div class="content1-vertical"></div></div>
    15     <div class="item-vertical" data-expected-width="150"><div class="content2-vertical"></div></div>
    16     <div class="item-vertical" data-expected-width="150"><div class="content3-vertical"></div></div>
    17 </div>
    18 width expected 150 but got 80
     6PASS .flex-horizontal, .flex-vertical 5
    197PASS .flex-horizontal, .flex-vertical 6
    208Test for crbug.com/362848: Flex box word-wrap is not adhering to spec

  • trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/align-content-wrap-003-expected.txt

    r261859 r262716  
    1818PASS .flexbox 17
    1919PASS .flexbox 18
    20 FAIL .flexbox 19 assert_equals:
    21 <div data-expected-height="30" class="flexbox horizontal" style="align-content: space-between; height: 30px">
    22   <div data-offset-x="0" data-offset-y="0" data-expected-height="10"></div>
    23 </div>
    24 height expected 10 but got 30
    25 FAIL .flexbox 20 assert_equals:
    26 <div data-expected-height="30" class="flexbox horizontal" style="align-content: space-around; height: 30px">
    27   <div data-offset-x="0" data-offset-y="10" data-expected-height="10"></div>
    28 </div>
    29 height expected 10 but got 30
    30 FAIL .flexbox 21 assert_equals:
    31 <div data-expected-height="30" class="flexbox horizontal" style="align-content: space-evenly; height: 30px">
    32   <div data-offset-x="0" data-offset-y="10" data-expected-height="10"></div>
    33 </div>
    34 height expected 10 but got 30
     20PASS .flexbox 19
     21PASS .flexbox 20
     22PASS .flexbox 21
    3523PASS .flexbox 22
    3624PASS .flexbox 23
    … …  
    5240PASS .flexbox 39
    5341PASS .flexbox 40
    54 FAIL .flexbox 41 assert_equals:
    55 <div data-expected-width="30" class="flexbox vertical-rl" style="align-content: space-between; width: 30px">
    56   <div data-offset-x="20" data-offset-y="0" data-expected-width="10"></div>
    57 </div>
    58 width expected 10 but got 30
    59 FAIL .flexbox 42 assert_equals:
    60 <div data-expected-width="30" class="flexbox vertical-rl" style="align-content: space-around; width: 30px">
    61   <div data-offset-x="10" data-offset-y="0" data-expected-width="10"></div>
    62 </div>
    63 width expected 10 but got 30
    64 FAIL .flexbox 43 assert_equals:
    65 <div data-expected-width="30" class="flexbox vertical-rl" style="align-content: space-evenly; width: 30px">
    66   <div data-offset-x="10" data-offset-y="0" data-expected-width="10"></div>
    67 </div>
    68 width expected 10 but got 30
     42PASS .flexbox 41
     43PASS .flexbox 42
     44PASS .flexbox 43
    6945PASS .flexbox 44
    7046Test to make sure that align-content works properly.

  • trunk/LayoutTests/platform/ios/fast/forms/auto-fill-button/input-strong-password-auto-fill-button-expected.txt

    r232480 r262716  
    11layer at (0,0) size 800x600
    22  RenderView at (0,0) size 800x600
    3 layer at (0,0) size 800x216
    4   RenderBlock {HTML} at (0,0) size 800x216
    5     RenderBody {BODY} at (8,16) size 784x192
     3layer at (0,0) size 800x214
     4  RenderBlock {HTML} at (0,0) size 800x214
     5    RenderBody {BODY} at (8,16) size 784x190
    66      RenderBlock {P} at (0,0) size 784x20
    77        RenderText {#text} at (0,0) size 758x19
    88          text run at (0,0) width 758: "This tests that the Strong Password AutoFill button renders in an auto-filled input. It can only be tested in the test tool."
    9       RenderBlock {DIV} at (0,36) size 784x156
    10         RenderTextControl {INPUT} at (2,15) size 153x20 [bgcolor=#FAFFBD] [border: (1px solid #4C4C4C)]
     9      RenderBlock {DIV} at (0,36) size 784x154
     10        RenderTextControl {INPUT} at (2,14) size 153x20 [bgcolor=#FAFFBD] [border: (1px solid #4C4C4C)]
    1111        RenderText {#text} at (157,13) size 4x19
    1212          text run at (157,13) width 4: " "
    13         RenderTextControl {INPUT} at (163,15) size 153x20 [bgcolor=#FAFFBD] [border: (1px solid #4C4C4C)]
     13        RenderTextControl {INPUT} at (163,14) size 153x20 [bgcolor=#FAFFBD] [border: (1px solid #4C4C4C)]
    1414        RenderText {#text} at (318,13) size 4x19
    1515          text run at (318,13) width 4: " "
    16         RenderTextControl {INPUT} at (322,15) size 313x20 [bgcolor=#FAFFBD] [border: (1px solid #4C4C4C)]
     16        RenderTextControl {INPUT} at (322,14) size 313x20 [bgcolor=#FAFFBD] [border: (1px solid #4C4C4C)]
    1717        RenderText {#text} at (635,13) size 4x19
    1818          text run at (635,13) width 4: " "
    1919        RenderTextControl {INPUT} at (639,2) size 33x20 [bgcolor=#FAFFBD] [border: (1px solid #4C4C4C)]
    2020        RenderText {#text} at (0,0) size 0x0
    21         RenderTextControl {INPUT} at (2,49) size 153x108 [bgcolor=#FAFFBD] [border: (1px solid #4C4C4C)]
    22         RenderText {#text} at (157,91) size 4x19
    23           text run at (157,91) width 4: " "
    24         RenderTextControl {INPUT} at (161,36) size 33x108 [bgcolor=#FAFFBD] [border: (1px solid #4C4C4C)]
    25         RenderText {#text} at (194,91) size 4x19
    26           text run at (194,91) width 4: " "
    27         RenderTextControl {INPUT} at (200,93) size 153x20 [bgcolor=#FAFFBD] [border: (1px solid #4C4C4C)]
    28 layer at (17,70) size 140x12 scrollHeight 13
     21        RenderTextControl {INPUT} at (2,47) size 153x108 [bgcolor=#FAFFBD] [border: (1px solid #4C4C4C)]
     22        RenderText {#text} at (157,90) size 4x19
     23          text run at (157,90) width 4: " "
     24        RenderTextControl {INPUT} at (161,35) size 33x108 [bgcolor=#FAFFBD] [border: (1px solid #4C4C4C)]
     25        RenderText {#text} at (194,90) size 4x19
     26          text run at (194,90) width 4: " "
     27        RenderTextControl {INPUT} at (200,91) size 153x20 [bgcolor=#FAFFBD] [border: (1px solid #4C4C4C)]
     28layer at (17,69) size 140x12 scrollHeight 14
    2929  RenderFlexibleBox {DIV} at (6,3) size 141x13
    30     RenderBlock {DIV} at (45,-1) size 95x14 [color=#000000CC]
     30    RenderBlock {DIV} at (45,0) size 95x14 [color=#000000CC]
    3131      RenderText {#text} at (6,0) size 89x14
    3232        text run at (6,0) width 89: "Strong Password"
    33 layer at (17,70) size 46x12 backgroundClip at (17,70) size 45x12 clip at (17,70) size 45x12
    34   RenderBlock {DIV} at (0,0) size 46x12
    35 layer at (178,70) size 140x12 scrollHeight 13
     33layer at (17,70) size 46x12 backgroundClip at (17,70) size 45x11 clip at (17,70) size 45x11
     34  RenderBlock {DIV} at (0,1) size 46x12
     35layer at (178,69) size 140x12 scrollHeight 14
    3636  RenderFlexibleBox {DIV} at (6,3) size 141x13
    37     RenderBlock {DIV} at (45,-1) size 95x14 [color=#000000CC]
     37    RenderBlock {DIV} at (45,0) size 95x14 [color=#000000CC]
    3838      RenderText {#text} at (6,0) size 89x14
    3939        text run at (6,0) width 89: "Strong Password"
    40 layer at (178,70) size 46x12 backgroundClip at (178,70) size 45x12 clip at (178,70) size 45x12
    41   RenderBlock {DIV} at (0,0) size 46x12
    42 layer at (337,70) size 300x12 scrollHeight 13
     40layer at (178,70) size 46x12 backgroundClip at (178,70) size 45x11 clip at (178,70) size 45x11
     41  RenderBlock {DIV} at (0,1) size 46x12
     42layer at (337,69) size 300x12 scrollHeight 14
    4343  RenderFlexibleBox {DIV} at (6,3) size 301x13
    44     RenderBlock {DIV} at (205,-1) size 95x14 [color=#000000CC]
     44    RenderBlock {DIV} at (205,0) size 95x14 [color=#000000CC]
    4545      RenderText {#text} at (6,0) size 89x14
    4646        text run at (6,0) width 89: "Strong Password"
    47 layer at (337,70) size 206x12 backgroundClip at (337,70) size 205x12 clip at (337,70) size 205x12
    48   RenderBlock {DIV} at (0,0) size 206x12
     47layer at (337,70) size 206x12 backgroundClip at (337,70) size 205x11 clip at (337,70) size 205x11
     48  RenderBlock {DIV} at (0,1) size 206x12
    4949layer at (654,57) size 20x12 scrollWidth 94 scrollHeight 26
    5050  RenderFlexibleBox {DIV} at (6,3) size 21x13
    … …  
    5454layer at (654,57) size 20x12
    5555  RenderBlock {DIV} at (0,0) size 20x12
    56 layer at (17,148) size 140x12 scrollHeight 13
     56layer at (17,146) size 140x12 scrollHeight 14
    5757  RenderFlexibleBox {DIV} at (6,47) size 141x13
    58     RenderBlock {DIV} at (45,-1) size 95x14 [color=#000000CC]
     58    RenderBlock {DIV} at (45,0) size 95x14 [color=#000000CC]
    5959      RenderText {#text} at (6,0) size 89x14
    6060        text run at (6,0) width 89: "Strong Password"
    61 layer at (17,148) size 46x12 backgroundClip at (17,148) size 45x12 clip at (17,148) size 45x12
    62   RenderBlock {DIV} at (0,0) size 46x12
    63 layer at (176,135) size 20x12 scrollWidth 94 scrollHeight 26
     61layer at (17,147) size 46x12 backgroundClip at (17,147) size 45x11 clip at (17,147) size 45x11
     62  RenderBlock {DIV} at (0,1) size 46x12
     63layer at (176,134) size 20x12 scrollWidth 94 scrollHeight 26
    6464  RenderFlexibleBox {DIV} at (6,47) size 21x13
    6565    RenderBlock {DIV} at (0,12) size 20x14 [color=#000000CC]
    6666      RenderText {#text} at (6,0) size 89x14
    6767        text run at (6,0) width 89: "Strong Password"
    68 layer at (176,135) size 20x12
     68layer at (176,134) size 20x12
    6969  RenderBlock {DIV} at (0,0) size 20x12
    70 layer at (215,148) size 140x12 scrollHeight 13
     70layer at (215,146) size 140x12 scrollHeight 14
    7171  RenderFlexibleBox {DIV} at (6,3) size 141x13
    72     RenderBlock {DIV} at (45,-1) size 95x14 [color=#000000CC]
     72    RenderBlock {DIV} at (45,0) size 95x14 [color=#000000CC]
    7373      RenderText {#text} at (6,0) size 89x14
    7474        text run at (6,0) width 89: "Strong Password"
    75 layer at (215,148) size 46x12 backgroundClip at (215,148) size 45x12 clip at (215,148) size 45x12
    76   RenderBlock {DIV} at (0,0) size 46x12
    77 layer at (17,70) size 46x12 backgroundClip at (17,70) size 45x12 clip at (17,70) size 45x12 scrollWidth 284
     75layer at (215,147) size 46x12 backgroundClip at (215,147) size 45x11 clip at (215,147) size 45x11
     76  RenderBlock {DIV} at (0,1) size 46x12
     77layer at (17,70) size 46x12 backgroundClip at (17,70) size 45x11 clip at (17,70) size 45x11 scrollWidth 284
    7878  RenderBlock {DIV} at (0,0) size 46x12 [color=#00000099]
    7979    RenderText {#text} at (0,0) size 284x12
    8080      text run at (0,0) width 284: "A quick brown fox jumped over the lazy dog."
    81 layer at (178,70) size 46x12 backgroundClip at (178,70) size 45x12 clip at (178,70) size 45x12 scrollWidth 284
     81layer at (178,70) size 46x12 backgroundClip at (178,70) size 45x11 clip at (178,70) size 45x11 scrollWidth 284
    8282  RenderBlock {DIV} at (0,0) size 46x12 [color=#00000099]
    8383    RenderText {#text} at (0,0) size 284x12
    8484      text run at (0,0) width 284: "A quick brown fox jumped over the lazy dog."
    85 layer at (337,70) size 206x12 backgroundClip at (337,70) size 205x12 clip at (337,70) size 205x12 scrollWidth 284
     85layer at (337,70) size 206x12 backgroundClip at (337,70) size 205x11 clip at (337,70) size 205x11 scrollWidth 284
    8686  RenderBlock {DIV} at (0,0) size 206x12 [color=#00000099]
    8787    RenderText {#text} at (0,0) size 284x12
    … …  
    9191    RenderText {#text} at (0,0) size 284x12
    9292      text run at (0,0) width 284: "A quick brown fox jumped over the lazy dog."
    93 layer at (17,148) size 46x12 backgroundClip at (17,148) size 45x12 clip at (17,148) size 45x12 scrollWidth 284
     93layer at (17,147) size 46x12 backgroundClip at (17,147) size 45x11 clip at (17,147) size 45x11 scrollWidth 284
    9494  RenderBlock {DIV} at (0,0) size 46x12 [color=#00000099]
    9595    RenderText {#text} at (0,0) size 284x12
    9696      text run at (0,0) width 284: "A quick brown fox jumped over the lazy dog."
    97 layer at (176,135) size 20x12 scrollWidth 284
     97layer at (176,134) size 20x12 scrollWidth 284
    9898  RenderBlock {DIV} at (0,0) size 20x12 [color=#00000099]
    9999    RenderText {#text} at (0,0) size 284x12

  • trunk/Source/WebCore/ChangeLog

    r262714 r262716  
     12020-06-01  Sergio Villar Senin  <svillar@igalia.com>
     2
     3        [css-flexbox] align-content should apply even when there's just a single line
     4        https://bugs.webkit.org/show_bug.cgi?id=209871
     5
     6        Reviewed by Manuel Rego Casasnovas.
     7
     8        The 'align-content' property should have no effect on single line flex containers according to
     9        the specs https://drafts.csswg.org/css-flexbox/#propdef-align-content. The current code was not
     10        differentiating between single-line containers and multi-line containers with just 1 line.
     11
     12        Also in order not to introduce regressions and properly support replaced elements as flex items
     13        we replaced the computation of child's width for 'flex-direction:column' by a direct call to
     14        computeLogicalWidthForFragment() which already properly handles all the cases. It used to be
     15        just the shrink-to-fit computation but that was not enough for replaced elements for example or
     16        elements with min/max-size restrictions.
     17
     18        Several align-content-wrap-* subtests are working now. Updated expectations.
     19
     20        * rendering/RenderFlexibleBox.cpp:
     21        (WebCore::initialAlignContentOffset): Removed check for #lines <= 1, as it is incorrect because it
     22        is true for multi-line containers with just 1 line.
     23        (WebCore::RenderFlexibleBox::alignFlexLines): Use isMultiline() instead of "#lines == 1".
     24        (WebCore::RenderFlexibleBox::childIntrinsicLogicalWidth const): Replace shrink-to-fit computation
     25        by a call computeLogicalWidthForFragment().
     26        (WebCore::RenderFlexibleBox::repositionLogicalHeightDependentFlexItems): Use the whole crossAxisExtent
     27        for single line containers. Moved from alignFlexLines() as it fits much better here.
     28
     29
    1302020-06-08  Andy Estes  <aestes@apple.com>
    231

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

    r262411 r262716  
    360360{
    361361    LayoutUnit crossAxisStartEdge = lineContexts.isEmpty() ? 0_lu : lineContexts[0].crossAxisOffset;
     362    // If we have a single line flexbox, the line height is all the available space. For flex-direction: row,
     363    // this means we need to use the height, so we do this after calling updateLogicalHeight.
     364    if (!isMultiline() && !lineContexts.isEmpty())
     365        lineContexts[0].crossAxisExtent = crossAxisContentExtent();
     366
    362367    alignFlexLines(lineContexts);
    363368   
    … …  
    467472    // This should only be called if the logical width is the cross size
    468473    ASSERT(hasOrthogonalFlow(child));
    469     // If our height is auto, make sure that our returned height is unaffected by
    470     // earlier layouts by returning the shrink-to-fit size.
    471     if (!crossAxisLengthIsDefinite(child, child.style().logicalWidth()))
    472         return std::min(child.maxPreferredLogicalWidth(), std::max(child.minPreferredLogicalWidth(), contentLogicalWidth()));
    473 
    474     return child.logicalWidth();
     474    if (crossAxisLengthIsDefinite(child, child.style().logicalWidth()))
     475        return child.logicalWidth();
     476
     477    // Temporarily clear potential overrides to compute the logical width otherwise it'll return the override size.
     478    bool childHasOverrideWidth = child.hasOverrideContentLogicalWidth();
     479    auto overrideWidth = childHasOverrideWidth ? child.overrideContentLogicalWidth() : -1_lu;
     480    if (childHasOverrideWidth)
     481        const_cast<RenderBox*>(&child)->clearOverrideContentLogicalWidth();
     482    LogicalExtentComputedValues values;
     483    child.computeLogicalWidthInFragment(values);
     484    if (childHasOverrideWidth)
     485        const_cast<RenderBox*>(&child)->setOverrideContentLogicalWidth(overrideWidth);
     486    return values.m_extent;
    475487}
    476488
    … …  
    16901702static LayoutUnit initialAlignContentOffset(LayoutUnit availableFreeSpace, ContentPosition alignContent, ContentDistribution alignContentDistribution, unsigned numberOfLines)
    16911703{
    1692     if (numberOfLines <= 1)
    1693         return 0_lu;
    16941704    if (alignContent == ContentPosition::FlexEnd)
    16951705        return availableFreeSpace;
    … …  
    17261736void RenderFlexibleBox::alignFlexLines(Vector<LineContext>& lineContexts)
    17271737{
     1738    if (lineContexts.isEmpty() || !isMultiline())
     1739        return;
     1740
    17281741    ContentPosition position = style().resolvedAlignContentPosition(contentAlignmentNormalBehavior());
    17291742    ContentDistribution distribution = style().resolvedAlignContentDistribution(contentAlignmentNormalBehavior());
    1730    
    1731     // If we have a single line flexbox or a multiline line flexbox with only one
    1732     // flex line, the line height is all the available space. For
    1733     // flex-direction: row, this means we need to use the height, so we do this
    1734     // after calling updateLogicalHeight.
    1735     if (lineContexts.size() == 1) {
    1736         lineContexts[0].crossAxisExtent = crossAxisContentExtent();
    1737         return;
    1738     }
    17391743   
    17401744    if (position == ContentPosition::FlexStart)
Note: See TracChangeset for help on using the changeset viewer.