Switch flex scrollers to allow infinite endward overflow, plus startw…

…ard overflow limited to in-flow alignment https://bugs.webkit.org/show_bug.cgi?id=275209 rdar://problem/129343181 Reviewed by Sammy Gill. Switches allowedLayoutOverflow to allow infinite overflow in the end direction (per writing mode), and to allow limited overflow based on in-flow alignment. This matches Flexbox to the logic used in Grid and Block layout. * LayoutTests/imported/w3c/web-platform-tests/css/css-overflow/overflow-alignment-flex-col-reverse-overflow-001-expected.html: Added. * LayoutTests/imported/w3c/web-platform-tests/css/css-overflow/overflow-alignment-flex-col-reverse-overflow-001.html: Added. * LayoutTests/imported/w3c/web-platform-tests/css/css-overflow/overflow-alignment-flex-col-reverse-overflow-002-expected.html: Added. * LayoutTests/imported/w3c/web-platform-tests/css/css-overflow/overflow-alignment-flex-col-reverse-overflow-002.html: Added. * LayoutTests/imported/w3c/web-platform-tests/css/css-overflow/overflow-alignment-flex-col-wrap-overflow-001-expected.html: Added. * LayoutTests/imported/w3c/web-platform-tests/css/css-overflow/overflow-alignment-flex-col-wrap-overflow-001.html: Added. * LayoutTests/imported/w3c/web-platform-tests/css/css-overflow/overflow-alignment-flex-col-wrap-overflow-002-expected.html: Added. * LayoutTests/imported/w3c/web-platform-tests/css/css-overflow/overflow-alignment-flex-col-wrap-overflow-002.html: Added. * LayoutTests/imported/w3c/web-platform-tests/css/css-overflow/overflow-alignment-flex-row-reverse-overflow-001-expected.html: Added. * LayoutTests/imported/w3c/web-platform-tests/css/css-overflow/overflow-alignment-flex-row-reverse-overflow-001.html: Added. * LayoutTests/imported/w3c/web-platform-tests/css/css-overflow/overflow-alignment-flex-row-reverse-overflow-002-expected.html: Added. * LayoutTests/imported/w3c/web-platform-tests/css/css-overflow/overflow-alignment-flex-row-reverse-overflow-002.html: Added. * LayoutTests/imported/w3c/web-platform-tests/css/css-overflow/overflow-alignment-flex-row-wrap-overflow-001-expected.html: Added. * LayoutTests/imported/w3c/web-platform-tests/css/css-overflow/overflow-alignment-flex-row-wrap-overflow-001.html: Added. * LayoutTests/imported/w3c/web-platform-tests/css/css-overflow/overflow-alignment-flex-row-wrap-overflow-002-expected.html: Added. * LayoutTests/imported/w3c/web-platform-tests/css/css-overflow/overflow-alignment-flex-row-wrap-overflow-002.html: Added. * Source/WebCore/rendering/RenderFlexibleBox.cpp: (WebCore::resolveLeftRightAlignment): Add convenience method. (WebCore::initialJustifyContentOffset): Use convenience method. (WebCore::contentAlignmentStartOverflow): Add convenience method. (WebCore::RenderFlexibleBox::layoutAndPlaceChildren): Stash alignment overflow. (WebCore::RenderFlexibleBox::alignFlexLines): Stash alignment overflow. (WebCore::RenderFlexibleBox::allowedLayoutOverflow const): Use alignment overflow for limits. * Source/WebCore/rendering/RenderFlexibleBox.h: Add storage for alignment overflow. Canonical link: https://commits.webkit.org/279992@main
WebKit · Jun 14, 2024 · ce08f32 · ce08f32
1 parent ad63895
commit ce08f32
Show file tree

Hide file tree

Showing 20 changed files with 7,354 additions and 175 deletions.
diff --git a/...tTests/imported/w3c/web-platform-tests/css/css-flexbox/negative-overflow-002-expected.txt b/...tTests/imported/w3c/web-platform-tests/css/css-flexbox/negative-overflow-002-expected.txt
@@ -220,20 +220,14 @@ PASS .container 2
 FAIL .container 3 assert_equals:
 <div class="container" data-expected-scroll-width="130" data-expected-scroll-height="370" style="writing-mode: horizontal-tb; direction: ltr; flex-flow: wrap-reverse;"><div class="item">1</div><div class="item">2</div><div class="item">3</div></div>
 scrollHeight expected 370 but got 360
-FAIL .container 4 assert_equals:
-<div class="container" data-expected-scroll-width="370" data-expected-scroll-height="130" style="writing-mode: horizontal-tb; direction: ltr; flex-flow: row-reverse;"><div class="item">1</div><div class="item">2</div><div class="item">3</div></div>
-scrollWidth expected 370 but got 360
-FAIL .container 5 assert_equals:
-<div class="container" data-expected-scroll-width="130" data-expected-scroll-height="370" style="writing-mode: horizontal-tb; direction: ltr; flex-flow: row-reverse wrap;"><div class="item">1</div><div class="item">2</div><div class="item">3</div></div>
-scrollWidth expected 130 but got 120
+PASS .container 4
+PASS .container 5
 FAIL .container 6 assert_equals:
 <div class="container" data-expected-scroll-width="130" data-expected-scroll-height="370" style="writing-mode: horizontal-tb; direction: ltr; flex-flow: row-reverse wrap-reverse;"><div class="item">1</div><div class="item">2</div><div class="item">3</div></div>
-scrollWidth expected 130 but got 120
+scrollHeight expected 370 but got 360
 PASS .container 7
 PASS .container 8
-FAIL .container 9 assert_equals:
-<div class="container" data-expected-scroll-width="370" data-expected-scroll-height="130" style="writing-mode: horizontal-tb; direction: ltr; flex-flow: column wrap-reverse;"><div class="item">1</div><div class="item">2</div><div class="item">3</div></div>
-scrollWidth expected 370 but got 360
+PASS .container 9
 FAIL .container 10 assert_equals:
 <div class="container" data-expected-scroll-width="130" data-expected-scroll-height="370" style="writing-mode: horizontal-tb; direction: ltr; flex-flow: column-reverse;"><div class="item">1</div><div class="item">2</div><div class="item">3</div></div>
 scrollHeight expected 370 but got 360
@@ -242,16 +236,12 @@ FAIL .container 11 assert_equals:
 scrollHeight expected 130 but got 120
 FAIL .container 12 assert_equals:
 <div class="container" data-expected-scroll-width="370" data-expected-scroll-height="130" style="writing-mode: horizontal-tb; direction: ltr; flex-flow: column-reverse wrap-reverse;"><div class="item">1</div><div class="item">2</div><div class="item">3</div></div>
-scrollWidth expected 370 but got 360
-FAIL .container 13 assert_equals:
-<div class="container" data-expected-scroll-width="370" data-expected-scroll-height="130" style="writing-mode: horizontal-tb; direction: rtl; flex-flow: row;"><div class="item">1</div><div class="item">2</div><div class="item">3</div></div>
-scrollWidth expected 370 but got 360
-FAIL .container 14 assert_equals:
-<div class="container" data-expected-scroll-width="130" data-expected-scroll-height="370" style="writing-mode: horizontal-tb; direction: rtl; flex-flow: wrap;"><div class="item">1</div><div class="item">2</div><div class="item">3</div></div>
-scrollWidth expected 130 but got 120
+scrollHeight expected 130 but got 120
+PASS .container 13
+PASS .container 14
 FAIL .container 15 assert_equals:
 <div class="container" data-expected-scroll-width="130" data-expected-scroll-height="370" style="writing-mode: horizontal-tb; direction: rtl; flex-flow: wrap-reverse;"><div class="item">1</div><div class="item">2</div><div class="item">3</div></div>
-scrollWidth expected 130 but got 120
+scrollHeight expected 370 but got 360
 PASS .container 16
 PASS .container 17
 FAIL .container 18 assert_equals:
@@ -260,16 +250,14 @@ scrollHeight expected 370 but got 360
 FAIL .container 19 assert_equals:
 <div class="container" data-expected-scroll-width="130" data-expected-scroll-height="370" style="writing-mode: horizontal-tb; direction: rtl; flex-flow: column;"><div class="item">1</div><div class="item">2</div><div class="item">3</div></div>
 scrollWidth expected 130 but got 120
-FAIL .container 20 assert_equals:
-<div class="container" data-expected-scroll-width="370" data-expected-scroll-height="130" style="writing-mode: horizontal-tb; direction: rtl; flex-flow: column wrap;"><div class="item">1</div><div class="item">2</div><div class="item">3</div></div>
-scrollWidth expected 370 but got 360
+PASS .container 20
 PASS .container 21
 FAIL .container 22 assert_equals:
 <div class="container" data-expected-scroll-width="130" data-expected-scroll-height="370" style="writing-mode: horizontal-tb; direction: rtl; flex-flow: column-reverse;"><div class="item">1</div><div class="item">2</div><div class="item">3</div></div>
 scrollWidth expected 130 but got 120
 FAIL .container 23 assert_equals:
 <div class="container" data-expected-scroll-width="370" data-expected-scroll-height="130" style="writing-mode: horizontal-tb; direction: rtl; flex-flow: column-reverse wrap;"><div class="item">1</div><div class="item">2</div><div class="item">3</div></div>
-scrollWidth expected 370 but got 360
+scrollHeight expected 130 but got 120
 FAIL .container 24 assert_equals:
 <div class="container" data-expected-scroll-width="370" data-expected-scroll-height="130" style="writing-mode: horizontal-tb; direction: rtl; flex-flow: column-reverse wrap-reverse;"><div class="item">1</div><div class="item">2</div><div class="item">3</div></div>
 scrollHeight expected 130 but got 120
@@ -278,20 +266,14 @@ PASS .container 26
 FAIL .container 27 assert_equals:
 <div class="container" data-expected-scroll-width="370" data-expected-scroll-height="130" style="writing-mode: vertical-rl; direction: ltr; flex-flow: wrap-reverse;"><div class="item">1</div><div class="item">2</div><div class="item">3</div></div>
 scrollWidth expected 370 but got 360
-FAIL .container 28 assert_equals:
-<div class="container" data-expected-scroll-width="130" data-expected-scroll-height="370" style="writing-mode: vertical-rl; direction: ltr; flex-flow: row-reverse;"><div class="item">1</div><div class="item">2</div><div class="item">3</div></div>
-scrollHeight expected 370 but got 360
-FAIL .container 29 assert_equals:
-<div class="container" data-expected-scroll-width="370" data-expected-scroll-height="130" style="writing-mode: vertical-rl; direction: ltr; flex-flow: row-reverse wrap;"><div class="item">1</div><div class="item">2</div><div class="item">3</div></div>
-scrollHeight expected 130 but got 120
+PASS .container 28
+PASS .container 29
 FAIL .container 30 assert_equals:
 <div class="container" data-expected-scroll-width="370" data-expected-scroll-height="130" style="writing-mode: vertical-rl; direction: ltr; flex-flow: row-reverse wrap-reverse;"><div class="item">1</div><div class="item">2</div><div class="item">3</div></div>
 scrollWidth expected 370 but got 360
 PASS .container 31
 PASS .container 32
-FAIL .container 33 assert_equals:
-<div class="container" data-expected-scroll-width="130" data-expected-scroll-height="370" style="writing-mode: vertical-rl; direction: ltr; flex-flow: column wrap-reverse;"><div class="item">1</div><div class="item">2</div><div class="item">3</div></div>
-scrollHeight expected 370 but got 360
+PASS .container 33
 FAIL .container 34 assert_equals:
 <div class="container" data-expected-scroll-width="370" data-expected-scroll-height="130" style="writing-mode: vertical-rl; direction: ltr; flex-flow: column-reverse;"><div class="item">1</div><div class="item">2</div><div class="item">3</div></div>
 scrollWidth expected 370 but got 360
@@ -303,28 +285,22 @@ FAIL .container 36 assert_equals:
 scrollWidth expected 130 but got 120
 FAIL .container 37 assert_equals:
 <div class="container" data-expected-scroll-width="130" data-expected-scroll-height="370" style="writing-mode: vertical-rl; direction: rtl; flex-flow: row;"><div class="item">1</div><div class="item">2</div><div class="item">3</div></div>
-scrollHeight expected 370 but got 345
+scrollHeight expected 370 but got 360
 FAIL .container 38 assert_equals:
 <div class="container" data-expected-scroll-width="370" data-expected-scroll-height="130" style="writing-mode: vertical-rl; direction: rtl; flex-flow: wrap;"><div class="item">1</div><div class="item">2</div><div class="item">3</div></div>
-scrollHeight expected 130 but got 105
+scrollHeight expected 130 but got 120
 FAIL .container 39 assert_equals:
 <div class="container" data-expected-scroll-width="370" data-expected-scroll-height="130" style="writing-mode: vertical-rl; direction: rtl; flex-flow: wrap-reverse;"><div class="item">1</div><div class="item">2</div><div class="item">3</div></div>
 scrollWidth expected 370 but got 360
-FAIL .container 40 assert_equals:
-<div class="container" data-expected-scroll-width="130" data-expected-scroll-height="370" style="writing-mode: vertical-rl; direction: rtl; flex-flow: row-reverse;"><div class="item">1</div><div class="item">2</div><div class="item">3</div></div>
-scrollHeight expected 370 but got 385
-FAIL .container 41 assert_equals:
-<div class="container" data-expected-scroll-width="370" data-expected-scroll-height="130" style="writing-mode: vertical-rl; direction: rtl; flex-flow: row-reverse wrap;"><div class="item">1</div><div class="item">2</div><div class="item">3</div></div>
-scrollHeight expected 130 but got 145
+PASS .container 40
+PASS .container 41
 FAIL .container 42 assert_equals:
 <div class="container" data-expected-scroll-width="370" data-expected-scroll-height="130" style="writing-mode: vertical-rl; direction: rtl; flex-flow: row-reverse wrap-reverse;"><div class="item">1</div><div class="item">2</div><div class="item">3</div></div>
 scrollWidth expected 370 but got 360
 FAIL .container 43 assert_equals:
 <div class="container" data-expected-scroll-width="370" data-expected-scroll-height="130" style="writing-mode: vertical-rl; direction: rtl; flex-flow: column;"><div class="item">1</div><div class="item">2</div><div class="item">3</div></div>
 scrollHeight expected 130 but got 120
-FAIL .container 44 assert_equals:
-<div class="container" data-expected-scroll-width="130" data-expected-scroll-height="370" style="writing-mode: vertical-rl; direction: rtl; flex-flow: column wrap;"><div class="item">1</div><div class="item">2</div><div class="item">3</div></div>
-scrollHeight expected 370 but got 360
+PASS .container 44
 PASS .container 45
 FAIL .container 46 assert_equals:
 <div class="container" data-expected-scroll-width="370" data-expected-scroll-height="130" style="writing-mode: vertical-rl; direction: rtl; flex-flow: column-reverse;"><div class="item">1</div><div class="item">2</div><div class="item">3</div></div>
@@ -340,20 +316,14 @@ PASS .container 50
 FAIL .container 51 assert_equals:
 <div class="container" data-expected-scroll-width="370" data-expected-scroll-height="130" style="writing-mode: vertical-lr; direction: ltr; flex-flow: wrap-reverse;"><div class="item">1</div><div class="item">2</div><div class="item">3</div></div>
 scrollWidth expected 370 but got 360
-FAIL .container 52 assert_equals:
-<div class="container" data-expected-scroll-width="130" data-expected-scroll-height="370" style="writing-mode: vertical-lr; direction: ltr; flex-flow: row-reverse;"><div class="item">1</div><div class="item">2</div><div class="item">3</div></div>
-scrollHeight expected 370 but got 360
-FAIL .container 53 assert_equals:
-<div class="container" data-expected-scroll-width="370" data-expected-scroll-height="130" style="writing-mode: vertical-lr; direction: ltr; flex-flow: row-reverse wrap;"><div class="item">1</div><div class="item">2</div><div class="item">3</div></div>
-scrollHeight expected 130 but got 120
+PASS .container 52
+PASS .container 53
 FAIL .container 54 assert_equals:
 <div class="container" data-expected-scroll-width="370" data-expected-scroll-height="130" style="writing-mode: vertical-lr; direction: ltr; flex-flow: row-reverse wrap-reverse;"><div class="item">1</div><div class="item">2</div><div class="item">3</div></div>
 scrollWidth expected 370 but got 360
 PASS .container 55
 PASS .container 56
-FAIL .container 57 assert_equals:
-<div class="container" data-expected-scroll-width="130" data-expected-scroll-height="370" style="writing-mode: vertical-lr; direction: ltr; flex-flow: column wrap-reverse;"><div class="item">1</div><div class="item">2</div><div class="item">3</div></div>
-scrollHeight expected 370 but got 360
+PASS .container 57
 FAIL .container 58 assert_equals:
 <div class="container" data-expected-scroll-width="370" data-expected-scroll-height="130" style="writing-mode: vertical-lr; direction: ltr; flex-flow: column-reverse;"><div class="item">1</div><div class="item">2</div><div class="item">3</div></div>
 scrollWidth expected 370 but got 360
@@ -365,28 +335,22 @@ FAIL .container 60 assert_equals:
 scrollWidth expected 130 but got 120
 FAIL .container 61 assert_equals:
 <div class="container" data-expected-scroll-width="130" data-expected-scroll-height="370" style="writing-mode: vertical-lr; direction: rtl; flex-flow: row;"><div class="item">1</div><div class="item">2</div><div class="item">3</div></div>
-scrollHeight expected 370 but got 345
+scrollHeight expected 370 but got 360
 FAIL .container 62 assert_equals:
 <div class="container" data-expected-scroll-width="370" data-expected-scroll-height="130" style="writing-mode: vertical-lr; direction: rtl; flex-flow: wrap;"><div class="item">1</div><div class="item">2</div><div class="item">3</div></div>
-scrollHeight expected 130 but got 105
+scrollHeight expected 130 but got 120
 FAIL .container 63 assert_equals:
 <div class="container" data-expected-scroll-width="370" data-expected-scroll-height="130" style="writing-mode: vertical-lr; direction: rtl; flex-flow: wrap-reverse;"><div class="item">1</div><div class="item">2</div><div class="item">3</div></div>
 scrollWidth expected 370 but got 360
-FAIL .container 64 assert_equals:
-<div class="container" data-expected-scroll-width="130" data-expected-scroll-height="370" style="writing-mode: vertical-lr; direction: rtl; flex-flow: row-reverse;"><div class="item">1</div><div class="item">2</div><div class="item">3</div></div>
-scrollHeight expected 370 but got 385
-FAIL .container 65 assert_equals:
-<div class="container" data-expected-scroll-width="370" data-expected-scroll-height="130" style="writing-mode: vertical-lr; direction: rtl; flex-flow: row-reverse wrap;"><div class="item">1</div><div class="item">2</div><div class="item">3</div></div>
-scrollHeight expected 130 but got 145
+PASS .container 64
+PASS .container 65
 FAIL .container 66 assert_equals:
 <div class="container" data-expected-scroll-width="370" data-expected-scroll-height="130" style="writing-mode: vertical-lr; direction: rtl; flex-flow: row-reverse wrap-reverse;"><div class="item">1</div><div class="item">2</div><div class="item">3</div></div>
 scrollWidth expected 370 but got 360
 FAIL .container 67 assert_equals:
 <div class="container" data-expected-scroll-width="370" data-expected-scroll-height="130" style="writing-mode: vertical-lr; direction: rtl; flex-flow: column;"><div class="item">1</div><div class="item">2</div><div class="item">3</div></div>
 scrollHeight expected 130 but got 120
-FAIL .container 68 assert_equals:
-<div class="container" data-expected-scroll-width="130" data-expected-scroll-height="370" style="writing-mode: vertical-lr; direction: rtl; flex-flow: column wrap;"><div class="item">1</div><div class="item">2</div><div class="item">3</div></div>
-scrollHeight expected 370 but got 360
+PASS .container 68
 PASS .container 69
 FAIL .container 70 assert_equals:
 <div class="container" data-expected-scroll-width="370" data-expected-scroll-height="130" style="writing-mode: vertical-lr; direction: rtl; flex-flow: column-reverse;"><div class="item">1</div><div class="item">2</div><div class="item">3</div></div>