Changeset 281840 in webkit


Ignore:
Timestamp:
Sep 1, 2021 1:35:53 AM (11 months ago)
Author:
svillar@igalia.com
Message:

[css-flexbox] Add initial support for css-align-3 positional alignment properties
​https://bugs.webkit.org/show_bug.cgi?id=229074

Reviewed by Simon Fraser.

LayoutTests/imported/w3c:

Fixed expectations for 56 subtests that should PASS now instead of FAIL.

  • web-platform-tests/css/css-flexbox/align-content-horiz-001a-expected.txt: Mark 8 subtests as PASS.
  • web-platform-tests/css/css-flexbox/align-content-horiz-001b-expected.txt: Ditto.
  • web-platform-tests/css/css-flexbox/align-content-horiz-002-expected.txt: Ditto.
  • web-platform-tests/css/css-flexbox/align-content-vert-001a-expected.txt: Ditto.
  • web-platform-tests/css/css-flexbox/align-content-vert-001b-expected.txt: Ditto.
  • web-platform-tests/css/css-flexbox/align-content-vert-002-expected.txt: Ditto.
  • web-platform-tests/css/css-flexbox/align-content-wmvert-001-expected.txt: Ditto.

Source/WebCore:

Added initial support for Start and End positional alignment properties from
​https://drafts.csswg.org/css-align-3/#positional-values. These two properties
align the flex item to be flush with the alignment container's (the flex container)
start and end edges in the appropriate axis.

  • rendering/RenderFlexibleBox.cpp:

(WebCore::RenderFlexibleBox::isColumnOrRowReverse const): New method.
(WebCore::initialJustifyContentOffset): Handle Start and End.
(WebCore::alignmentOffset): Ditto.
(WebCore::RenderFlexibleBox::staticMainAxisPositionForPositionedChild):
(WebCore::RenderFlexibleBox::alignmentForChild const):
(WebCore::RenderFlexibleBox::layoutAndPlaceChildren):
(WebCore::RenderFlexibleBox::layoutColumnReverse):
(WebCore::initialAlignContentOffset): Handle Start and End.
(WebCore::RenderFlexibleBox::alignFlexLines):

  • rendering/RenderFlexibleBox.h:

LayoutTests:

Location:
trunk
Files:
13 edited

Legend:

Unmodified
Added
Removed

  • trunk/LayoutTests/ChangeLog

    r281836 r281840  
     12021-08-13  Sergio Villar Senin  <svillar@igalia.com>
     2
     3        [css-flexbox] Add initial support for css-align-3 positional alignment properties
     4        https://bugs.webkit.org/show_bug.cgi?id=229074
     5
     6        Reviewed by Simon Fraser.
     7
     8        * TestExpectations: Unskipped 4 WPT tests that are passing now.
     9
    1102021-08-31  Myles C. Maxfield  <mmaxfield@apple.com>
    211

  • trunk/LayoutTests/TestExpectations

    r281836 r281840  
    41874187webkit.org/b/221472 imported/w3c/web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-justify-content-003.html [ ImageOnlyFailure ]
    41884188webkit.org/b/221472 imported/w3c/web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-justify-content-004.html [ ImageOnlyFailure ]
    4189 webkit.org/b/221472 imported/w3c/web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-justify-content-005.html [ ImageOnlyFailure ]
    41904189webkit.org/b/221472 imported/w3c/web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-justify-content-006.html [ ImageOnlyFailure ]
    41914190webkit.org/b/221472 imported/w3c/web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-justify-content-007.html [ ImageOnlyFailure ]
    41924191webkit.org/b/221472 imported/w3c/web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-justify-content-008.html [ ImageOnlyFailure ]
    41934192webkit.org/b/221472 imported/w3c/web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-justify-content-rtl-001.html [ ImageOnlyFailure ]
    4194 webkit.org/b/221472 imported/w3c/web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-justify-content-rtl-002.html [ ImageOnlyFailure ]
    41954193webkit.org/b/221472 imported/w3c/web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-justify-content-vertWM-001.html [ ImageOnlyFailure ]
    41964194webkit.org/b/221472 imported/w3c/web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-justify-content-vertWM-002.html [ ImageOnlyFailure ]
    … …  
    42214219webkit.org/b/221477 imported/w3c/web-platform-tests/css/css-flexbox/flexbox-justify-content-vert-006.xhtml [ ImageOnlyFailure ]
    42224220webkit.org/b/221477 imported/w3c/web-platform-tests/css/css-flexbox/flexbox-justify-content-wmvert-001.xhtml [ ImageOnlyFailure ]
    4223 webkit.org/b/221477 imported/w3c/web-platform-tests/css/css-flexbox/flexbox_justifycontent-start.html [ ImageOnlyFailure ]
    4224 webkit.org/b/221477 imported/w3c/web-platform-tests/css/css-flexbox/flexbox_justifycontent-start-rtl.html [ ImageOnlyFailure ]
    42254221webkit.org/b/221477 imported/w3c/web-platform-tests/css/css-flexbox/flexbox_justifycontent-left-001.html [ ImageOnlyFailure ]
    42264222webkit.org/b/221477 imported/w3c/web-platform-tests/css/css-flexbox/flexbox_justifycontent-left-002.html [ ImageOnlyFailure ]

  • trunk/LayoutTests/imported/w3c/ChangeLog

    r281836 r281840  
     12021-08-13  Sergio Villar Senin  <svillar@igalia.com>
     2
     3        [css-flexbox] Add initial support for css-align-3 positional alignment properties
     4        https://bugs.webkit.org/show_bug.cgi?id=229074
     5
     6        Reviewed by Simon Fraser.
     7
     8        Fixed expectations for 56 subtests that should PASS now instead of FAIL.
     9
     10        * web-platform-tests/css/css-flexbox/align-content-horiz-001a-expected.txt: Mark 8 subtests as PASS.
     11        * web-platform-tests/css/css-flexbox/align-content-horiz-001b-expected.txt: Ditto.
     12        * web-platform-tests/css/css-flexbox/align-content-horiz-002-expected.txt: Ditto.
     13        * web-platform-tests/css/css-flexbox/align-content-vert-001a-expected.txt: Ditto.
     14        * web-platform-tests/css/css-flexbox/align-content-vert-001b-expected.txt: Ditto.
     15        * web-platform-tests/css/css-flexbox/align-content-vert-002-expected.txt: Ditto.
     16        * web-platform-tests/css/css-flexbox/align-content-wmvert-001-expected.txt: Ditto.
     17
    1182021-08-31  Myles C. Maxfield  <mmaxfield@apple.com>
    219

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

    r272644 r281840  
    6464PASS .flexbox div 63
    6565PASS .flexbox div 64
    66 FAIL .flexbox div 65 assert_equals:
    67 <div class="a" data-expected-width="20" data-expected-height="10" data-offset-x="536" data-offset-y="198"></div>
    68 offsetTop expected 198 but got 8
    69 FAIL .flexbox div 66 assert_equals:
    70 <div class="a" data-expected-width="20" data-expected-height="10" data-offset-x="558" data-offset-y="168"></div>
    71 offsetTop expected 168 but got 8
    72 FAIL .flexbox div 67 assert_equals:
    73 <div class="b" data-expected-width="20" data-expected-height="30" data-offset-x="558" data-offset-y="178"><div class="fixedSizeChild" data-expected-width="10" data-expected-height="30" data-offset-x="558" data-offset-y="178"></div></div>
    74 offsetTop expected 178 but got 18
    75 FAIL .flexbox div 68 assert_equals:
    76 <div class="fixedSizeChild" data-expected-width="10" data-expected-height="30" data-offset-x="558" data-offset-y="178"></div>
    77 offsetTop expected 178 but got 18
    78 FAIL .flexbox div 69 assert_equals:
    79 <div class="a" data-expected-width="20" data-expected-height="10" data-offset-x="580" data-offset-y="128"></div>
    80 offsetTop expected 128 but got 8
    81 FAIL .flexbox div 70 assert_equals:
    82 <div class="b" data-expected-width="20" data-expected-height="30" data-offset-x="580" data-offset-y="138"><div class="fixedSizeChild" data-expected-width="10" data-expected-height="30" data-offset-x="580" data-offset-y="138"></div></div>
    83 offsetTop expected 138 but got 18
    84 FAIL .flexbox div 71 assert_equals:
    85 <div class="fixedSizeChild" data-expected-width="10" data-expected-height="30" data-offset-x="580" data-offset-y="138"></div>
    86 offsetTop expected 138 but got 18
    87 FAIL .flexbox div 72 assert_equals:
    88 <div class="c" data-expected-width="20" data-expected-height="40" data-offset-x="580" data-offset-y="168"></div>
    89 offsetTop expected 168 but got 48
     66PASS .flexbox div 65
     67PASS .flexbox div 66
     68PASS .flexbox div 67
     69PASS .flexbox div 68
     70PASS .flexbox div 69
     71PASS .flexbox div 70
     72PASS .flexbox div 71
     73PASS .flexbox div 72
    9074

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

    r272644 r281840  
    6464PASS .flexbox div 63
    6565PASS .flexbox div 64
    66 FAIL .flexbox div 65 assert_equals:
    67 <div class="a" data-expected-width="20" data-expected-height="10" data-offset-x="536" data-offset-y="198"></div>
    68 offsetTop expected 198 but got 8
    69 FAIL .flexbox div 66 assert_equals:
    70 <div class="a" data-expected-width="20" data-expected-height="10" data-offset-x="558" data-offset-y="168"></div>
    71 offsetTop expected 168 but got 8
    72 FAIL .flexbox div 67 assert_equals:
    73 <div class="b" data-expected-width="20" data-expected-height="30" data-offset-x="558" data-offset-y="178"><div class="fixedSizeChild" data-expected-width="10" data-expected-height="30" data-offset-x="558" data-offset-y="178"></div></div>
    74 offsetTop expected 178 but got 18
    75 FAIL .flexbox div 68 assert_equals:
    76 <div class="fixedSizeChild" data-expected-width="10" data-expected-height="30" data-offset-x="558" data-offset-y="178"></div>
    77 offsetTop expected 178 but got 18
    78 FAIL .flexbox div 69 assert_equals:
    79 <div class="a" data-expected-width="20" data-expected-height="10" data-offset-x="580" data-offset-y="128"></div>
    80 offsetTop expected 128 but got 8
    81 FAIL .flexbox div 70 assert_equals:
    82 <div class="b" data-expected-width="20" data-expected-height="30" data-offset-x="580" data-offset-y="138"><div class="fixedSizeChild" data-expected-width="10" data-expected-height="30" data-offset-x="580" data-offset-y="138"></div></div>
    83 offsetTop expected 138 but got 18
    84 FAIL .flexbox div 71 assert_equals:
    85 <div class="fixedSizeChild" data-expected-width="10" data-expected-height="30" data-offset-x="580" data-offset-y="138"></div>
    86 offsetTop expected 138 but got 18
    87 FAIL .flexbox div 72 assert_equals:
    88 <div class="c" data-expected-width="20" data-expected-height="40" data-offset-x="580" data-offset-y="168"></div>
    89 offsetTop expected 168 but got 48
     66PASS .flexbox div 65
     67PASS .flexbox div 66
     68PASS .flexbox div 67
     69PASS .flexbox div 68
     70PASS .flexbox div 69
     71PASS .flexbox div 70
     72PASS .flexbox div 71
     73PASS .flexbox div 72
    9074

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

    r272644 r281840  
    5656PASS .flexbox div 55
    5757PASS .flexbox div 56
    58 FAIL .flexbox div 57 assert_equals:
    59 <div class="a" data-expected-width="20" data-expected-height="10" data-offset-x="470" data-offset-y="8"></div>
    60 offsetTop expected 8 but got 198
    61 FAIL .flexbox div 58 assert_equals:
    62 <div class="a" data-expected-width="20" data-expected-height="10" data-offset-x="492" data-offset-y="38"></div>
    63 offsetTop expected 38 but got 198
    64 FAIL .flexbox div 59 assert_equals:
    65 <div class="b" data-expected-width="20" data-expected-height="30" data-offset-x="492" data-offset-y="8"><div class="fixedSizeChild" data-expected-width="10" data-expected-height="30" data-offset-x="492" data-offset-y="8"></div></div>
    66 offsetTop expected 8 but got 168
    67 FAIL .flexbox div 60 assert_equals:
    68 <div class="fixedSizeChild" data-expected-width="10" data-expected-height="30" data-offset-x="492" data-offset-y="8"></div>
    69 offsetTop expected 8 but got 168
    70 FAIL .flexbox div 61 assert_equals:
    71 <div class="a" data-expected-width="20" data-expected-height="10" data-offset-x="514" data-offset-y="78"></div>
    72 offsetTop expected 78 but got 198
    73 FAIL .flexbox div 62 assert_equals:
    74 <div class="b" data-expected-width="20" data-expected-height="30" data-offset-x="514" data-offset-y="48"><div class="fixedSizeChild" data-expected-width="10" data-expected-height="30" data-offset-x="514" data-offset-y="48"></div></div>
    75 offsetTop expected 48 but got 168
    76 FAIL .flexbox div 63 assert_equals:
    77 <div class="fixedSizeChild" data-expected-width="10" data-expected-height="30" data-offset-x="514" data-offset-y="48"></div>
    78 offsetTop expected 48 but got 168
    79 FAIL .flexbox div 64 assert_equals:
    80 <div class="c" data-expected-width="20" data-expected-height="40" data-offset-x="514" data-offset-y="8"></div>
    81 offsetTop expected 8 but got 128
     58PASS .flexbox div 57
     59PASS .flexbox div 58
     60PASS .flexbox div 59
     61PASS .flexbox div 60
     62PASS .flexbox div 61
     63PASS .flexbox div 62
     64PASS .flexbox div 63
     65PASS .flexbox div 64
    8266PASS .flexbox div 65
    8367PASS .flexbox div 66

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

    r272644 r281840  
    6464PASS .flexbox div 63
    6565PASS .flexbox div 64
    66 FAIL .flexbox div 65 assert_equals:
    67 <div class="a" data-expected-width="10" data-expected-height="10" data-offset-x="198" data-offset-y="296"></div>
    68 offsetLeft expected 198 but got 8
    69 FAIL .flexbox div 66 assert_equals:
    70 <div class="a" data-expected-width="10" data-expected-height="10" data-offset-x="168" data-offset-y="308"></div>
    71 offsetLeft expected 168 but got 8
    72 FAIL .flexbox div 67 assert_equals:
    73 <div class="b" data-expected-width="30" data-expected-height="10" data-offset-x="178" data-offset-y="308"><div class="fixedSizeChild" data-expected-width="30" data-expected-height="5" data-offset-x="178" data-offset-y="308"></div></div>
    74 offsetLeft expected 178 but got 18
    75 FAIL .flexbox div 68 assert_equals:
    76 <div class="fixedSizeChild" data-expected-width="30" data-expected-height="5" data-offset-x="178" data-offset-y="308"></div>
    77 offsetLeft expected 178 but got 18
    78 FAIL .flexbox div 69 assert_equals:
    79 <div class="a" data-expected-width="10" data-expected-height="10" data-offset-x="128" data-offset-y="320"></div>
    80 offsetLeft expected 128 but got 8
    81 FAIL .flexbox div 70 assert_equals:
    82 <div class="b" data-expected-width="30" data-expected-height="10" data-offset-x="138" data-offset-y="320"><div class="fixedSizeChild" data-expected-width="30" data-expected-height="5" data-offset-x="138" data-offset-y="320"></div></div>
    83 offsetLeft expected 138 but got 18
    84 FAIL .flexbox div 71 assert_equals:
    85 <div class="fixedSizeChild" data-expected-width="30" data-expected-height="5" data-offset-x="138" data-offset-y="320"></div>
    86 offsetLeft expected 138 but got 18
    87 FAIL .flexbox div 72 assert_equals:
    88 <div class="c" data-expected-width="40" data-expected-height="10" data-offset-x="168" data-offset-y="320"></div>
    89 offsetLeft expected 168 but got 48
     66PASS .flexbox div 65
     67PASS .flexbox div 66
     68PASS .flexbox div 67
     69PASS .flexbox div 68
     70PASS .flexbox div 69
     71PASS .flexbox div 70
     72PASS .flexbox div 71
     73PASS .flexbox div 72
    9074

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

    r272644 r281840  
    6464PASS .flexbox div 63
    6565PASS .flexbox div 64
    66 FAIL .flexbox div 65 assert_equals:
    67 <div class="a" data-expected-width="10" data-expected-height="10" data-offset-x="198" data-offset-y="296"></div>
    68 offsetLeft expected 198 but got 8
    69 FAIL .flexbox div 66 assert_equals:
    70 <div class="a" data-expected-width="10" data-expected-height="10" data-offset-x="168" data-offset-y="308"></div>
    71 offsetLeft expected 168 but got 8
    72 FAIL .flexbox div 67 assert_equals:
    73 <div class="b" data-expected-width="30" data-expected-height="10" data-offset-x="178" data-offset-y="308"><div class="fixedSizeChild" data-expected-width="30" data-expected-height="5" data-offset-x="178" data-offset-y="308"></div></div>
    74 offsetLeft expected 178 but got 18
    75 FAIL .flexbox div 68 assert_equals:
    76 <div class="fixedSizeChild" data-expected-width="30" data-expected-height="5" data-offset-x="178" data-offset-y="308"></div>
    77 offsetLeft expected 178 but got 18
    78 FAIL .flexbox div 69 assert_equals:
    79 <div class="a" data-expected-width="10" data-expected-height="10" data-offset-x="128" data-offset-y="320"></div>
    80 offsetLeft expected 128 but got 8
    81 FAIL .flexbox div 70 assert_equals:
    82 <div class="b" data-expected-width="30" data-expected-height="10" data-offset-x="138" data-offset-y="320"><div class="fixedSizeChild" data-expected-width="30" data-expected-height="5" data-offset-x="138" data-offset-y="320"></div></div>
    83 offsetLeft expected 138 but got 18
    84 FAIL .flexbox div 71 assert_equals:
    85 <div class="fixedSizeChild" data-expected-width="30" data-expected-height="5" data-offset-x="138" data-offset-y="320"></div>
    86 offsetLeft expected 138 but got 18
    87 FAIL .flexbox div 72 assert_equals:
    88 <div class="c" data-expected-width="40" data-expected-height="10" data-offset-x="168" data-offset-y="320"></div>
    89 offsetLeft expected 168 but got 48
     66PASS .flexbox div 65
     67PASS .flexbox div 66
     68PASS .flexbox div 67
     69PASS .flexbox div 68
     70PASS .flexbox div 69
     71PASS .flexbox div 70
     72PASS .flexbox div 71
     73PASS .flexbox div 72
    9074

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

    r272644 r281840  
    5656PASS .flexbox div 55
    5757PASS .flexbox div 56
    58 FAIL .flexbox div 57 assert_equals:
    59 <div class="a" data-expected-width="10" data-expected-height="20" data-offset-x="8" data-offset-y="470"></div>
    60 offsetLeft expected 8 but got 198
    61 FAIL .flexbox div 58 assert_equals:
    62 <div class="a" data-expected-width="10" data-expected-height="20" data-offset-x="38" data-offset-y="492"></div>
    63 offsetLeft expected 38 but got 198
    64 FAIL .flexbox div 59 assert_equals:
    65 <div class="b" data-expected-width="30" data-expected-height="20" data-offset-x="8" data-offset-y="492"><div class="fixedSizeChild" data-expected-width="30" data-expected-height="10" data-offset-x="8" data-offset-y="492"></div></div>
    66 offsetLeft expected 8 but got 168
    67 FAIL .flexbox div 60 assert_equals:
    68 <div class="fixedSizeChild" data-expected-width="30" data-expected-height="10" data-offset-x="8" data-offset-y="492"></div>
    69 offsetLeft expected 8 but got 168
    70 FAIL .flexbox div 61 assert_equals:
    71 <div class="a" data-expected-width="10" data-expected-height="20" data-offset-x="78" data-offset-y="514"></div>
    72 offsetLeft expected 78 but got 198
    73 FAIL .flexbox div 62 assert_equals:
    74 <div class="b" data-expected-width="30" data-expected-height="20" data-offset-x="48" data-offset-y="514"><div class="fixedSizeChild" data-expected-width="30" data-expected-height="10" data-offset-x="48" data-offset-y="514"></div></div>
    75 offsetLeft expected 48 but got 168
    76 FAIL .flexbox div 63 assert_equals:
    77 <div class="fixedSizeChild" data-expected-width="30" data-expected-height="10" data-offset-x="48" data-offset-y="514"></div>
    78 offsetLeft expected 48 but got 168
    79 FAIL .flexbox div 64 assert_equals:
    80 <div class="c" data-expected-width="40" data-expected-height="20" data-offset-x="8" data-offset-y="514"></div>
    81 offsetLeft expected 8 but got 128
     58PASS .flexbox div 57
     59PASS .flexbox div 58
     60PASS .flexbox div 59
     61PASS .flexbox div 60
     62PASS .flexbox div 61
     63PASS .flexbox div 62
     64PASS .flexbox div 63
     65PASS .flexbox div 64
    8266PASS .flexbox div 65
    8367PASS .flexbox div 66

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

    r272644 r281840  
    5656PASS .flexbox div 55
    5757PASS .flexbox div 56
    58 FAIL .flexbox div 57 assert_equals:
    59 <div class="a" data-expected-width="10" data-expected-height="20" data-offset-x="8" data-offset-y="470"></div>
    60 offsetLeft expected 8 but got 198
    61 FAIL .flexbox div 58 assert_equals:
    62 <div class="a" data-expected-width="10" data-expected-height="20" data-offset-x="38" data-offset-y="492"></div>
    63 offsetLeft expected 38 but got 198
    64 FAIL .flexbox div 59 assert_equals:
    65 <div class="b" data-expected-width="30" data-expected-height="20" data-offset-x="8" data-offset-y="492"><div class="fixedSizeChild" data-expected-width="30" data-expected-height="10" data-offset-x="8" data-offset-y="492"></div></div>
    66 offsetLeft expected 8 but got 168
    67 FAIL .flexbox div 60 assert_equals:
    68 <div class="fixedSizeChild" data-expected-width="30" data-expected-height="10" data-offset-x="8" data-offset-y="492"></div>
    69 offsetLeft expected 8 but got 168
    70 FAIL .flexbox div 61 assert_equals:
    71 <div class="a" data-expected-width="10" data-expected-height="20" data-offset-x="78" data-offset-y="514"></div>
    72 offsetLeft expected 78 but got 198
    73 FAIL .flexbox div 62 assert_equals:
    74 <div class="b" data-expected-width="30" data-expected-height="20" data-offset-x="48" data-offset-y="514"><div class="fixedSizeChild" data-expected-width="30" data-expected-height="10" data-offset-x="48" data-offset-y="514"></div></div>
    75 offsetLeft expected 48 but got 168
    76 FAIL .flexbox div 63 assert_equals:
    77 <div class="fixedSizeChild" data-expected-width="30" data-expected-height="10" data-offset-x="48" data-offset-y="514"></div>
    78 offsetLeft expected 48 but got 168
    79 FAIL .flexbox div 64 assert_equals:
    80 <div class="c" data-expected-width="40" data-expected-height="20" data-offset-x="8" data-offset-y="514"></div>
    81 offsetLeft expected 8 but got 128
     58PASS .flexbox div 57
     59PASS .flexbox div 58
     60PASS .flexbox div 59
     61PASS .flexbox div 60
     62PASS .flexbox div 61
     63PASS .flexbox div 62
     64PASS .flexbox div 63
     65PASS .flexbox div 64
    8266PASS .flexbox div 65
    8367PASS .flexbox div 66

  • trunk/Source/WebCore/ChangeLog

    r281839 r281840  
     12021-08-13  Sergio Villar Senin  <svillar@igalia.com>
     2
     3        [css-flexbox] Add initial support for css-align-3 positional alignment properties
     4        https://bugs.webkit.org/show_bug.cgi?id=229074
     5
     6        Reviewed by Simon Fraser.
     7
     8        Added initial support for Start and End positional alignment properties from
     9        https://drafts.csswg.org/css-align-3/#positional-values. These two properties
     10        align the flex item to be flush with the alignment container's (the flex container)
     11        start and end edges in the appropriate axis.
     12
     13        * rendering/RenderFlexibleBox.cpp:
     14        (WebCore::RenderFlexibleBox::isColumnOrRowReverse const): New method.
     15        (WebCore::initialJustifyContentOffset): Handle Start and End.
     16        (WebCore::alignmentOffset): Ditto.
     17        (WebCore::RenderFlexibleBox::staticMainAxisPositionForPositionedChild):
     18        (WebCore::RenderFlexibleBox::alignmentForChild const):
     19        (WebCore::RenderFlexibleBox::layoutAndPlaceChildren):
     20        (WebCore::RenderFlexibleBox::layoutColumnReverse):
     21        (WebCore::initialAlignContentOffset): Handle Start and End.
     22        (WebCore::RenderFlexibleBox::alignFlexLines):
     23        * rendering/RenderFlexibleBox.h:
     24
    1252021-09-01  Said Abou-Hallawa  <said@apple.com>
    226

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

    r280530 r281840  
    483483}
    484484
     485bool RenderFlexibleBox::isColumnOrRowReverse() const
     486{
     487    return style().flexDirection() == FlexDirection::ColumnReverse || style().flexDirection() == FlexDirection::RowReverse;
     488}
     489
    485490bool RenderFlexibleBox::isHorizontalFlow() const
    486491{
    … …  
    14941499}
    14951500
    1496 static LayoutUnit initialJustifyContentOffset(LayoutUnit availableFreeSpace, ContentPosition justifyContent, ContentDistribution justifyContentDistribution, unsigned numberOfChildren)
    1497 {
    1498     if (justifyContent == ContentPosition::FlexEnd)
     1501static LayoutUnit initialJustifyContentOffset(LayoutUnit availableFreeSpace, ContentPosition justifyContent, ContentDistribution justifyContentDistribution, unsigned numberOfChildren, bool isReversed)
     1502{
     1503    if (justifyContent == ContentPosition::FlexEnd
     1504        || (justifyContent == ContentPosition::End && !isReversed)
     1505        || (justifyContent == ContentPosition::Start && isReversed))
    14991506        return availableFreeSpace;
    15001507    if (justifyContent == ContentPosition::Center)
    … …  
    15351542    case ItemPosition::Normal:
    15361543        ASSERT_NOT_REACHED();
     1544        break;
     1545    case ItemPosition::Start:
     1546    case ItemPosition::End:
     1547        ASSERT_NOT_REACHED("%u alignmentForChild should have transformed this position value to something we handle below.", static_cast<uint8_t>(position));
    15371548        break;
    15381549    case ItemPosition::Stretch:
    … …  
    15601571    case ItemPosition::SelfStart:
    15611572    case ItemPosition::SelfEnd:
    1562     case ItemPosition::Start:
    1563     case ItemPosition::End:
    15641573    case ItemPosition::Left:
    15651574    case ItemPosition::Right:
    1566         // FIXME: Implement the extended grammar, enabled when the Grid Layout
    1567         // feature was enabled by default.
     1575        // FIXME: Implement last baseline.
    15681576        break;
    15691577    }
    … …  
    15851593    ContentPosition position = style().resolvedJustifyContentPosition(contentAlignmentNormalBehavior());
    15861594    ContentDistribution distribution = style().resolvedJustifyContentDistribution(contentAlignmentNormalBehavior());
    1587     LayoutUnit offset = initialJustifyContentOffset(availableSpace, position, distribution, 1);
    1588     if (style().flexDirection() == FlexDirection::RowReverse || style().flexDirection() == FlexDirection::ColumnReverse)
     1595    auto isReverse = isColumnOrRowReverse();
     1596    LayoutUnit offset = initialJustifyContentOffset(availableSpace, position, distribution, 1, isReverse);
     1597    if (isReverse)
    15891598        offset = availableSpace - offset;
    15901599    return offset;
    … …  
    16791688    if (align == ItemPosition::Baseline && !mainAxisIsChildInlineAxis(child))
    16801689        align = ItemPosition::FlexStart;
     1690
     1691    // We can safely return here because start/end are not affected by a reversed flex-wrap because the
     1692    // alignment container is the flex line, and in a wrap reversed flex container the start and end within
     1693    // a flex line are still the same. Contrary to this flex-start/flex-end depend on the flex container
     1694    // start/end edges which are flipped in the case of wrap-reverse.
     1695    if (align == ItemPosition::Start)
     1696        return ItemPosition::FlexStart;
     1697    if (align == ItemPosition::End)
     1698        return ItemPosition::FlexEnd;
    16811699
    16821700    if (style().flexWrap() == FlexWrap::Reverse) {
    … …  
    18131831    LayoutUnit autoMarginOffset = autoMarginOffsetInMainAxis(children, availableFreeSpace);
    18141832    LayoutUnit mainAxisOffset = flowAwareBorderStart() + flowAwarePaddingStart();
    1815     mainAxisOffset += initialJustifyContentOffset(availableFreeSpace, position, distribution, children.size());
     1833    mainAxisOffset += initialJustifyContentOffset(availableFreeSpace, position, distribution, children.size(), isColumnOrRowReverse());
    18161834    if (style().flexDirection() == FlexDirection::RowReverse)
    18171835        mainAxisOffset += isHorizontalFlow() ? verticalScrollbarWidth() : horizontalScrollbarHeight();
    … …  
    19211939    // layout anything since we're just moving the children to a new position.
    19221940    LayoutUnit mainAxisOffset = logicalHeight() - flowAwareBorderEnd() - flowAwarePaddingEnd();
    1923     mainAxisOffset -= initialJustifyContentOffset(availableFreeSpace, position, distribution, children.size());
     1941    mainAxisOffset -= initialJustifyContentOffset(availableFreeSpace, position, distribution, children.size(), isColumnOrRowReverse());
    19241942    mainAxisOffset -= isHorizontalFlow() ? verticalScrollbarWidth() : horizontalScrollbarHeight();
    19251943   
    … …  
    19341952}
    19351953   
    1936 static LayoutUnit initialAlignContentOffset(LayoutUnit availableFreeSpace, ContentPosition alignContent, ContentDistribution alignContentDistribution, unsigned numberOfLines)
    1937 {
    1938     if (alignContent == ContentPosition::FlexEnd)
     1954static LayoutUnit initialAlignContentOffset(LayoutUnit availableFreeSpace, ContentPosition alignContent, ContentDistribution alignContentDistribution, unsigned numberOfLines, bool isReversed)
     1955{
     1956    if (alignContent == ContentPosition::FlexEnd
     1957        || (alignContent == ContentPosition::End && !isReversed)
     1958        || (alignContent == ContentPosition::Start && isReversed))
    19391959        return availableFreeSpace;
    19401960    if (alignContent == ContentPosition::Center)
    … …  
    19842004        availableCrossAxisSpace -= lineContexts[i].crossAxisExtent;
    19852005
    1986     LayoutUnit lineOffset = initialAlignContentOffset(availableCrossAxisSpace, position, distribution, numLines);
     2006    LayoutUnit lineOffset = initialAlignContentOffset(availableCrossAxisSpace, position, distribution, numLines, style().flexWrap() == FlexWrap::Reverse);
    19872007    for (unsigned lineNumber = 0; lineNumber < numLines; ++lineNumber) {
    19882008        LineContext& lineContext = lineContexts[lineNumber];

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

    r279286 r281840  
    110110    bool mainAxisIsChildInlineAxis(const RenderBox&) const;
    111111    bool isColumnFlow() const;
     112    bool isColumnOrRowReverse() const;
    112113    bool isLeftToRightFlow() const;
    113114    bool isMultiline() const;
Note: See TracChangeset for help on using the changeset viewer.