Title: [295765] trunk
- Revision
- 295765
- Author
- za...@apple.com
- Date
- 2022-06-22 19:54:49 -0700 (Wed, 22 Jun 2022)
Log Message
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
Modified Paths
Added Paths
Diff
Modified: trunk/LayoutTests/css3/flexbox/overflow-and-padding-expected.txt (295764 => 295765)
--- trunk/LayoutTests/css3/flexbox/overflow-and-padding-expected.txt 2022-06-23 01:48:47 UTC (rev 295764)
+++ trunk/LayoutTests/css3/flexbox/overflow-and-padding-expected.txt 2022-06-23 02:54:49 UTC (rev 295765)
@@ -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.
Added: trunk/LayoutTests/fast/overflow/flex-box-overflow-with-padding-end-expected.html (0 => 295765)
--- trunk/LayoutTests/fast/overflow/flex-box-overflow-with-padding-end-expected.html (rev 0)
+++ trunk/LayoutTests/fast/overflow/flex-box-overflow-with-padding-end-expected.html 2022-06-23 02:54:49 UTC (rev 295765)
@@ -0,0 +1,9 @@
+<style>
+div {
+ width: 300px;
+ height: 100px;
+ font-size: 20px;
+ font-family: Ahem;
+}
+</style>
+<div>PASS</div>
Added: trunk/LayoutTests/fast/overflow/flex-box-overflow-with-padding-end.html (0 => 295765)
--- trunk/LayoutTests/fast/overflow/flex-box-overflow-with-padding-end.html (rev 0)
+++ trunk/LayoutTests/fast/overflow/flex-box-overflow-with-padding-end.html 2022-06-23 02:54:49 UTC (rev 295765)
@@ -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>
Modified: trunk/Source/WebCore/rendering/RenderBlock.cpp (295764 => 295765)
--- trunk/Source/WebCore/rendering/RenderBlock.cpp 2022-06-23 01:48:47 UTC (rev 295764)
+++ trunk/Source/WebCore/rendering/RenderBlock.cpp 2022-06-23 02:54:49 UTC (rev 295765)
@@ -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();
_______________________________________________
webkit-changes mailing list
webkit-changes@lists.webkit.org
https://lists.webkit.org/mailman/listinfo/webkit-changes
