Flexboxes incorrectly add the scrollbar width to the intrinsic width of fixed-width items
https://bugs.webkit.org/show_bug.cgi?id=106591
Reviewed by Levi Weintraub.
Source/WebCore:
The scrollbar width should only be added if the width of the flex item
is not fixed.
Test: fast/css/fixed-width-intrinsic-width-excludes-scrollbars.html
* rendering/RenderBlock.cpp:
(WebCore::RenderBlock::computePreferredLogicalWidths):
Use shared helper method. This also happens to fix the vertical
writing-mode case.
* rendering/RenderBox.cpp:
(WebCore::RenderBox::instrinsicScrollbarLogicalWidth):
(WebCore):
* rendering/RenderBox.h:
(RenderBox):
Add a method for determining the scrollbar's contribution to the boxes
intrinsic width.
* rendering/RenderDeprecatedFlexibleBox.cpp:
(WebCore::RenderDeprecatedFlexibleBox::computePreferredLogicalWidths):
* rendering/RenderFlexibleBox.cpp:
(WebCore::RenderFlexibleBox::computePreferredLogicalWidths):
Use shared code for determining the scrollbar width and only add the
width when computing the intrinsic widths.
* rendering/RenderGrid.cpp:
(WebCore::RenderGrid::computePreferredLogicalWidths):\
Just adding a FIXME to account for scrollbar width.
LayoutTests:
* fast/css/fixed-width-intrinsic-width-excludes-scrollbars-expected.txt: Added.
* fast/css/fixed-width-intrinsic-width-excludes-scrollbars.html: Added.
* fast/css/positioned-overflow-scroll.html:
git-svn-id: http://svn.webkit.org/repository/webkit/trunk@139351 268f45cc-cd09-0410-ab3c-d52691b4dbfc
diff --git a/LayoutTests/fast/css/positioned-overflow-scroll.html b/LayoutTests/fast/css/positioned-overflow-scroll.html
index 928dcba44..915513d 100644
--- a/LayoutTests/fast/css/positioned-overflow-scroll.html
+++ b/LayoutTests/fast/css/positioned-overflow-scroll.html
@@ -14,8 +14,10 @@
<body>
Test that scrollbar width is added to the intrinsic width of different display types.
-<div style="top: 100px" data-expected-width=100 data-expected-height=100><span class="box"></span></div>
-<div style="display: -webkit-box; top:100px; left: 150px;" data-expected-width=100 data-expected-height=100><span class="box"></span></div>
+<div style="top: 100px"><span class="box"></span></div>
+<div style="top: 100px; left: 150px; display: -webkit-box;"><span class="box"></span></div>
+<div style="top: 100px; left: 300px; -webkit-writing-mode: vertical-rl; overflow-x: hidden" data-no-horizontal-scrollbar><span class="box"></span></div>
+<div style="top: 100px; left: 450px; overflow-y: hidden" data-no-vertical-scrollbar><span class="box"></span></div>
<script src="../../resources/check-layout.js"></script>
<script>
@@ -26,8 +28,14 @@
document.body.removeChild(dummy);
Array.prototype.forEach.call(document.querySelectorAll('div'), function(node) {
- node.setAttribute('data-expected-width', 100 + scrollbarWidth);
- node.setAttribute('data-expected-height', 100 + scrollbarWidth);
+ var width = 100;
+ if (!node.hasAttribute('data-no-vertical-scrollbar'))
+ width += scrollbarWidth;
+ node.setAttribute('data-expected-width', width);
+ var height = 100;
+ if (!node.hasAttribute('data-no-horizontal-scrollbar'))
+ height += scrollbarWidth;
+ node.setAttribute('data-expected-height', height);
});
checkLayout('body');
</script>
