Bug 221347 – REGRESSION (r272241) [MacOS wk1] imported/w3c/web-platform-tests/css/css-flexbox/overflow-auto-006.html is flaky failure

• Status: NEW
• Component: Layout and Rendering

[Amir Mark Jr]

imported/w3c/web-platform-tests/css/css-flexbox/overflow-auto-006.html

Is flaky failing on BigSur wk1 and Catalina wk1 


History:

https://results.webkit.org/?suite=layout-tests&test=imported%2Fw3c%2Fweb-platform-tests%2Fcss%2Fcss-flexbox%2Foverflow-auto-006.html


Text Diff:

--- /Volumes/Data/slave/bigsur-release-tests-wk1/build/layout-test-results/imported/w3c/web-platform-tests/css/css-flexbox/overflow-auto-006-expected.txt
+++ /Volumes/Data/slave/bigsur-release-tests-wk1/build/layout-test-results/imported/w3c/web-platform-tests/css/css-flexbox/overflow-auto-006-actual.txt
@@ -1,8 +1,24 @@
 
-PASS .flexbox, .inline-flexbox 1
-PASS .flexbox, .inline-flexbox 2
-PASS .flexbox, .inline-flexbox 3
-PASS .flexbox, .inline-flexbox 4
+FAIL .flexbox, .inline-flexbox 1 assert_equals:
+<div class="flexbox to-be-checked" check-height="" check-accounts-scrollbar="" data-expected-height="47">
+  <div class="overflow"><div style="width: 100px; height: 20px"></div></div>
+</div>
+height expected 47 but got 32
+FAIL .flexbox, .inline-flexbox 2 assert_equals:
+<div class="flexbox row-reverse to-be-checked" check-height="" check-accounts-scrollbar="" data-expected-height="47">
+  <div class="overflow"><div style="width: 100px; height: 20px"></div></div>
+</div>
+height expected 47 but got 32
+FAIL .flexbox, .inline-flexbox 3 assert_equals:
+<div class="flexbox to-be-checked" check-height="" check-accounts-scrollbar="" data-expected-height="47">
+  <div class="overflow align-self-baseline"><div style="width: 100px; height: 20px"></div></div>
+</div>
+height expected 47 but got 32
+FAIL .flexbox, .inline-flexbox 4 assert_equals:
+<div class="flexbox row-reverse to-be-checked" check-height="" check-accounts-scrollbar="" data-expected-height="47">
+  <div class="overflow align-self-baseline"><div style="width: 100px; height: 20px"></div></div>
+</div>
+height expected 47 but got 32
 PASS .flexbox, .inline-flexbox 5
 PASS .flexbox, .inline-flexbox 6
 PASS .flexbox, .inline-flexbox 7

[Radar WebKit Bug Importer]

<rdar://problem/73951150>

[Alexey Proskuryakov]

It would be good to find a repro case for this. Might be some state leaking from preceding tests.

[Amir Mark Jr]

Unable to reproduce using command for anything before r272241: 

run-webkit-tests imported/w3c/web-platform-tests/css/css-flexbox/overflow-auto-006.html --iterations 1000 -f -1

[Amir Mark Jr]

(In reply to Amir Mark Jr from comment #3)
> Unable to reproduce using command for anything before r272241: 
> 
> run-webkit-tests
> imported/w3c/web-platform-tests/css/css-flexbox/overflow-auto-006.html
> --iterations 1000 -f -1

Clarification from my previous comment:

I was able to bisect this failure to r272241. I am able to reproduce the issue on r272241 but not on r272240. Using this command:

run-webkit-tests imported/w3c/web-platform-tests/css/css-flexbox/overflow-auto-006.html --iterations 1000 -f -1

[Amir Mark Jr]

Created attachment 420151 [details]
Patch

[Ryan Haddad]

Comment on attachment 420151 [details]
Patch

This patch doesn't apply, and it looks like you have two changes in one.

[Amir Mark Jr]

Created attachment 420157 [details]
Mark as flaky

[Truitt Savell]

Comment on attachment 420157 [details]
Mark as flaky

Clearing flags on attachment: 420157

Committed 234034@main: <https://commits.webkit.org/234034@main>

[Alexey Proskuryakov]

I guess it's not too crazy that a test with scrollbars could be flaky, yet it seems somewhat crazy.

[Simon Fraser (smfr)]

Scrollbars should be determined at layout time so should not cause flakiness.

[Rúnar Berg]

I think this bug is related to a behavior I just encountered on a website I’m developing.

So if you have a container with display: flex and flex-direction: row-reverse and an overflow: auto or overflow: scroll then you cannot use the scrollbar thumb to scroll the container.

I created a jsfiddle here: https://jsfiddle.net/u0mrwdz2

This example works fine in Firefox and Chrome, however in Safari this scrolls fine except if you click and drag the scrollbar thumb to the position you want. Two finger scrolling, arrow key scrolling and clicking a position still works fine, it is only dragging the thumb that is broken. If you change the flex-direction to row, then this works fine again.

I just encountered the same bug as above regarding row-reverse and overflow auto. It's still an issue.

[fantasai]

I think the reversing issues are https://bugs.webkit.org/show_bug.cgi?id=250207 actually.

[fantasai]

Actually maybe it's https://bugs.webkit.org/show_bug.cgi?id=256995