Skip to content
Permalink
Browse files
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: https://svn.webkit.org/repository/webkit/trunk@295765 268f45cc-cd09-0410-ab3c-d52691b4dbfc
  • Loading branch information
alanbujtas committed Jun 23, 2022
1 parent f708d98 commit 69702d99513b14e4d17f51109f9a6a734a4d3686
Showing 4 changed files with 52 additions and 3 deletions.
@@ -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.

@@ -0,0 +1,9 @@
<style>
div {
width: 300px;
height: 100px;
font-size: 20px;
font-family: Ahem;
}
</style>
<div>PASS</div>
@@ -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>
@@ -695,8 +695,8 @@ void RenderBlock::computeOverflow(LayoutUnit oldClientAfterEdge, bool)
// 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();

0 comments on commit 69702d9

Please sign in to comment.