Adding padding on a horizontal scroller prevents last item from being fully viewable
https://bugs.webkit.org/show_bug.cgi?id=236142
<rdar://problem/88495053>
Reviewed by Simon Fraser.
Flex box's padding end should be taken into account when computing scrollable overflow.
* LayoutTests/fast/overflow/flex-box-overflow-with-padding-end-expected.html: Added.
* LayoutTests/fast/overflow/flex-box-overflow-with-padding-end.html: Added.
* Source/WebCore/rendering/RenderBlock.cpp:
(WebCore::RenderBlock::computeOverflow):
css3/flexbox/overflow-and-padding.html: matching Blink.
Canonical link: https://commits.webkit.org/251770@main
git-svn-id: http://svn.webkit.org/repository/webkit/trunk@295765 268f45cc-cd09-0410-ab3c-d52691b4dbfc
diff --git a/LayoutTests/css3/flexbox/overflow-and-padding-expected.txt b/LayoutTests/css3/flexbox/overflow-and-padding-expected.txt
index 8583035..1f95f3f 100644
--- a/LayoutTests/css3/flexbox/overflow-and-padding-expected.txt
+++ b/LayoutTests/css3/flexbox/overflow-and-padding-expected.txt
@@ -1,4 +1,8 @@
-PASS #scrollable 1
+FAIL #scrollable 1 assert_equals:
+<div id="scrollable" data-expected-scroll-height="500" data-expected-scroll-width="400">
+ <div id="item"></div>
+</div>
+scrollWidth expected 400 but got 500
Tests that padding bottom on a flexbox works in the face of overflowing content. Padding-right does not work. This matches the Blink/WebKit display:block behavior. Unfortunately, IE and Gecko both lose the padding bottom and the padding right.
diff --git a/LayoutTests/fast/overflow/flex-box-overflow-with-padding-end-expected.html b/LayoutTests/fast/overflow/flex-box-overflow-with-padding-end-expected.html
new file mode 100644
index 0000000..9c65cad
--- /dev/null
+++ b/LayoutTests/fast/overflow/flex-box-overflow-with-padding-end-expected.html
@@ -0,0 +1,9 @@
+<style>
+div {
+ width: 300px;
+ height: 100px;
+ font-size: 20px;
+ font-family: Ahem;
+}
+</style>
+<div>PASS</div>
diff --git a/LayoutTests/fast/overflow/flex-box-overflow-with-padding-end.html b/LayoutTests/fast/overflow/flex-box-overflow-with-padding-end.html
new file mode 100644
index 0000000..e20aaea
--- /dev/null
+++ b/LayoutTests/fast/overflow/flex-box-overflow-with-padding-end.html
@@ -0,0 +1,36 @@
+<style>
+.container {
+ width: 300px;
+ overflow: hidden;
+ font-size: 20px;
+ font-family: Ahem;
+}
+
+#flexBox {
+ display: flex;
+ overflow: scroll;
+ margin-inline-end: -300px;
+ padding-inline-end: 300px;
+}
+
+.item {
+ flex-shrink: 0;
+ width: 300px;
+ height: 100px;
+}
+
+.hide_scrollbar {
+ position: absolute;
+ background-color: white;
+ width: 500px;
+ height: 50px;
+ left: 0px;
+ top: 100px;
+}
+</style>
+<!-- PASS if visible -->
+<div class="container"><div id=flexBox><div class=item></div><div class=item>PASS</div></div></div>
+<div class=hide_scrollbar></div>
+<script>
+flexBox.scrollTo(300, 0);
+</script>
diff --git a/Source/WebCore/rendering/RenderBlock.cpp b/Source/WebCore/rendering/RenderBlock.cpp
index dcfd0ef..2ec1e10 100644
--- a/Source/WebCore/rendering/RenderBlock.cpp
+++ b/Source/WebCore/rendering/RenderBlock.cpp
@@ -695,8 +695,8 @@
// As per https://github.com/w3c/csswg-drafts/issues/3653 padding should contribute to the scrollable overflow area.
if (!paddingEnd())
return;
- // FIXME: Expand it to non-grid cases when applicable.
- if (!is<RenderGrid>(*this))
+ // FIXME: Expand it to non-grid/flex cases when applicable.
+ if (!is<RenderGrid>(*this) && !is<RenderFlexibleBox>(*this))
return;
auto layoutOverflowRect = this->layoutOverflowRect();
