- Revision
- 143476
- Author
- o...@chromium.org
- Date
- 2013-02-20 10:37:06 -0800 (Wed, 20 Feb 2013)
Log Message
Make intrinsic width values work for positioned elements
https://bugs.webkit.org/show_bug.cgi?id=110264
Reviewed by Tony Chang.
Source/WebCore:
Tests: fast/css-intrinsic-dimensions/intrinsic-sized-absolutes.html
fast/css-intrinsic-dimensions/width-shrinks-avoid-floats.html
* rendering/RenderBox.cpp:
(WebCore::RenderBox::computeIntrinsicLogicalWidthUsing):
(WebCore::RenderBox::computeLogicalWidthInRegionUsing):
Move the computation of intrinsic widths out into a helper function so that
computePositionedLogicalWidthUsing can use it. As per the current spec,
fill-available measures shrink to avoid floats. http://dev.w3.org/csswg/css3-sizing/
(WebCore::RenderBox::computePositionedLogicalWidth):
Compute intrinsic min-widths in addition to non-zero ones. Intrinsic widths
return true for isZero. width and max-width don't need modifying since they already
call computePositionedLogicalWidthUsing for intrinsic widths.
(WebCore::RenderBox::computePositionedLogicalWidthUsing):
Compute intrinsic widths and use a Fixed length for the rest of the positioned width
computation. Doesn't include bordersPlusPadding because the caller, expected the content
width and adds in the bordersPlusPadding later.
* rendering/RenderBox.h:
LayoutTests:
* fast/css-intrinsic-dimensions/intrinsic-sized-absolutes-expected.txt: Added.
* fast/css-intrinsic-dimensions/intrinsic-sized-absolutes.html: Added.
* fast/css-intrinsic-dimensions/width-shrinks-avoid-floats-expected.txt: Added.
* fast/css-intrinsic-dimensions/width-shrinks-avoid-floats.html: Added.
Modified Paths
Added Paths
Diff
Modified: trunk/LayoutTests/ChangeLog (143475 => 143476)
--- trunk/LayoutTests/ChangeLog 2013-02-20 18:27:03 UTC (rev 143475)
+++ trunk/LayoutTests/ChangeLog 2013-02-20 18:37:06 UTC (rev 143476)
@@ -1,3 +1,15 @@
+2013-02-20 Ojan Vafai <o...@chromium.org>
+
+ Make intrinsic width values work for positioned elements
+ https://bugs.webkit.org/show_bug.cgi?id=110264
+
+ Reviewed by Tony Chang.
+
+ * fast/css-intrinsic-dimensions/intrinsic-sized-absolutes-expected.txt: Added.
+ * fast/css-intrinsic-dimensions/intrinsic-sized-absolutes.html: Added.
+ * fast/css-intrinsic-dimensions/width-shrinks-avoid-floats-expected.txt: Added.
+ * fast/css-intrinsic-dimensions/width-shrinks-avoid-floats.html: Added.
+
2013-02-20 Robert Hogan <rob...@webkit.org>
input element with placeholder text and width set to 100% on focus causes overflow even after losing focus
Added: trunk/LayoutTests/fast/css-intrinsic-dimensions/intrinsic-sized-absolutes-expected.txt (0 => 143476)
--- trunk/LayoutTests/fast/css-intrinsic-dimensions/intrinsic-sized-absolutes-expected.txt (rev 0)
+++ trunk/LayoutTests/fast/css-intrinsic-dimensions/intrinsic-sized-absolutes-expected.txt 2013-02-20 18:37:06 UTC (rev 143476)
@@ -0,0 +1,16 @@
+Tests that intrinsic width values on absolutely positioned element work.
+PASS
+PASS
+PASS
+PASS
+PASS
+PASS
+PASS
+PASS
+PASS
+PASS
+PASS
+PASS
+PASS
+PASS
+PASS
Added: trunk/LayoutTests/fast/css-intrinsic-dimensions/intrinsic-sized-absolutes.html (0 => 143476)
--- trunk/LayoutTests/fast/css-intrinsic-dimensions/intrinsic-sized-absolutes.html (rev 0)
+++ trunk/LayoutTests/fast/css-intrinsic-dimensions/intrinsic-sized-absolutes.html 2013-02-20 18:37:06 UTC (rev 143476)
@@ -0,0 +1,138 @@
+<!DOCTYPE html>
+<style>
+.container {
+ position:relative;
+ border: 5px solid blue;
+ width: 250px;
+ height: 250px;
+}
+.child {
+ position:absolute;
+ display: -webkit-flex;
+ -webkit-flex-wrap: wrap;
+ border: 5px solid pink;
+}
+.content {
+ display: inline-block;
+ width: 100px;
+ height: 100px;
+ background-color: salmon;
+}
+</style>
+
+Tests that intrinsic width values on absolutely positioned element work.
+
+<!-- width tests -->
+<div class="container">
+ <div class="child" style="width: -webkit-max-content;" data-expected-width="210">
+ <div class="content"></div>
+ <div class="content"></div>
+ </div>
+</div>
+
+<div class="container">
+ <div class="child" style="width: -webkit-min-content;" data-expected-width="110">
+ <div class="content"></div>
+ <div class="content"></div>
+ </div>
+</div>
+
+<div class="container">
+ <div class="child" style="width: -webkit-fit-content;" data-expected-width="210">
+ <div class="content"></div>
+ <div class="content"></div>
+ </div>
+</div>
+
+<div class="container" style="width: 50px">
+ <div class="child" style="width: -webkit-fit-content;" data-expected-width="110">
+ <div class="content"></div>
+ <div class="content"></div>
+ </div>
+</div>
+
+<div class="container">
+ <div class="child" style="width: -webkit-fill-available;" data-expected-width="250">
+ <div class="content"></div>
+ <div class="content"></div>
+ </div>
+</div>
+
+<!-- min-width tests -->
+<div class="container">
+ <div class="child" style="min-width: -webkit-max-content; width: 10px;" data-expected-width="210">
+ <div class="content"></div>
+ <div class="content"></div>
+ </div>
+</div>
+
+<div class="container">
+ <div class="child" style="min-width: -webkit-min-content; width: 10px;" data-expected-width="110">
+ <div class="content"></div>
+ <div class="content"></div>
+ </div>
+</div>
+
+<div class="container">
+ <div class="child" style="min-width: -webkit-fit-content; width: 10px;" data-expected-width="210">
+ <div class="content"></div>
+ <div class="content"></div>
+ </div>
+</div>
+
+<div class="container" style="width: 50px">
+ <div class="child" style="min-width: -webkit-fit-content; width: 10px;" data-expected-width="110">
+ <div class="content"></div>
+ <div class="content"></div>
+ </div>
+</div>
+
+<div class="container">
+ <div class="child" style="min-width: -webkit-fill-available; width: 10px;" data-expected-width="250">
+ <div class="content"></div>
+ <div class="content"></div>
+ </div>
+</div>
+
+<!-- max-width tests -->
+<div class="container">
+ <div class="child" style="max-width: -webkit-max-content; width: 1000px;" data-expected-width="210">
+ <div class="content"></div>
+ <div class="content"></div>
+ </div>
+</div>
+
+<div class="container">
+ <div class="child" style="max-width: -webkit-min-content; width: 1000px;" data-expected-width="110">
+ <div class="content"></div>
+ <div class="content"></div>
+ </div>
+</div>
+
+<div class="container">
+ <div class="child" style="max-width: -webkit-fit-content; width: 1000px;" data-expected-width="210">
+ <div class="content"></div>
+ <div class="content"></div>
+ </div>
+</div>
+
+<div class="container" style="width: 50px">
+ <div class="child" style="max-width: -webkit-fit-content; width: 1000px;" data-expected-width="110">
+ <div class="content"></div>
+ <div class="content"></div>
+ </div>
+</div>
+
+<div class="container">
+ <div class="child" style="max-width: -webkit-fill-available; width: 1000px;" data-expected-width="250">
+ <div class="content"></div>
+ <div class="content"></div>
+ </div>
+</div>
+
+
+
+<script src=""
+<script>
+checkLayout(".container");
+</script>
Added: trunk/LayoutTests/fast/css-intrinsic-dimensions/width-shrinks-avoid-floats-expected.txt (0 => 143476)
--- trunk/LayoutTests/fast/css-intrinsic-dimensions/width-shrinks-avoid-floats-expected.txt (rev 0)
+++ trunk/LayoutTests/fast/css-intrinsic-dimensions/width-shrinks-avoid-floats-expected.txt 2013-02-20 18:37:06 UTC (rev 143476)
@@ -0,0 +1,17 @@
+Tests that intrinsic width values on absolute positioned elements don't shrink to avoid floats.
+Float
+Child 1
+Child 2
+PASS
+Float
+Child 1
+Child 2
+PASS
+Float
+Child 1
+Child 2
+PASS
+Float
+Child 1
+Child 2
+PASS
Added: trunk/LayoutTests/fast/css-intrinsic-dimensions/width-shrinks-avoid-floats.html (0 => 143476)
--- trunk/LayoutTests/fast/css-intrinsic-dimensions/width-shrinks-avoid-floats.html (rev 0)
+++ trunk/LayoutTests/fast/css-intrinsic-dimensions/width-shrinks-avoid-floats.html 2013-02-20 18:37:06 UTC (rev 143476)
@@ -0,0 +1,74 @@
+<!DOCTYPE html>
+<style>
+ @import "resources/width-keyword-classes.css";
+
+ .container {
+ border: 5px solid grey;
+ width: 300px;
+ height: 120px;
+ margin-bottom: 5px;
+ position: relative;
+ }
+
+ .container > div:last-child {
+ border: 5px solid salmon;
+ padding: 5px;
+ width: 0px;
+ display: -webkit-flex;
+ -webkit-flex-wrap: wrap;
+ position: absolute;
+ }
+
+ .child {
+ display: inline-block;
+ width: 100px;
+ height: 50px;
+ background-color: pink;
+ }
+
+ .float {
+ float: right;
+ width: 100px;
+ height: 50px;
+ border: 5px solid orange;
+ }
+</style>
+
+Tests that intrinsic width values on absolute positioned elements don't shrink to avoid floats.
+
+<div class="container">
+ <div class="float">Float</div>
+ <div class="min-width-min-content" data-expected-width=120>
+ <div class="child">Child 1</div>
+ <div class="child">Child 2</div>
+ </div>
+</div>
+
+<div class="container">
+ <div class="float">Float</div>
+ <div class="min-width-max-content" data-expected-width=220>
+ <div class="child">Child 1</div>
+ <div class="child">Child 2</div>
+ </div>
+</div>
+
+<div class="container">
+ <div class="float">Float</div>
+ <div class="min-width-fit-content" data-expected-width=220>
+ <div class="child">Child 1</div>
+ <div class="child">Child 2</div>
+ </div>
+</div>
+
+<div class="container">
+ <div class="float">Float</div>
+ <div class="min-width-fill-available" data-expected-width=300>
+ <div class="child">Child 1</div>
+ <div class="child">Child 2</div>
+ </div>
+</div>
+
+<script src=""
+<script>
+checkLayout(".container");
+</script>
\ No newline at end of file
Modified: trunk/Source/WebCore/ChangeLog (143475 => 143476)
--- trunk/Source/WebCore/ChangeLog 2013-02-20 18:27:03 UTC (rev 143475)
+++ trunk/Source/WebCore/ChangeLog 2013-02-20 18:37:06 UTC (rev 143476)
@@ -1,3 +1,32 @@
+2013-02-20 Ojan Vafai <o...@chromium.org>
+
+ Make intrinsic width values work for positioned elements
+ https://bugs.webkit.org/show_bug.cgi?id=110264
+
+ Reviewed by Tony Chang.
+
+ Tests: fast/css-intrinsic-dimensions/intrinsic-sized-absolutes.html
+ fast/css-intrinsic-dimensions/width-shrinks-avoid-floats.html
+
+ * rendering/RenderBox.cpp:
+ (WebCore::RenderBox::computeIntrinsicLogicalWidthUsing):
+ (WebCore::RenderBox::computeLogicalWidthInRegionUsing):
+ Move the computation of intrinsic widths out into a helper function so that
+ computePositionedLogicalWidthUsing can use it. As per the current spec,
+ fill-available measures shrink to avoid floats. http://dev.w3.org/csswg/css3-sizing/
+
+ (WebCore::RenderBox::computePositionedLogicalWidth):
+ Compute intrinsic min-widths in addition to non-zero ones. Intrinsic widths
+ return true for isZero. width and max-width don't need modifying since they already
+ call computePositionedLogicalWidthUsing for intrinsic widths.
+
+ (WebCore::RenderBox::computePositionedLogicalWidthUsing):
+ Compute intrinsic widths and use a Fixed length for the rest of the positioned width
+ computation. Doesn't include bordersPlusPadding because the caller, expected the content
+ width and adds in the bordersPlusPadding later.
+
+ * rendering/RenderBox.h:
+
2013-02-20 Robert Hogan <rob...@webkit.org>
input element with placeholder text and width set to 100% on focus causes overflow even after losing focus
Modified: trunk/Source/WebCore/rendering/RenderBox.cpp (143475 => 143476)
--- trunk/Source/WebCore/rendering/RenderBox.cpp 2013-02-20 18:27:03 UTC (rev 143475)
+++ trunk/Source/WebCore/rendering/RenderBox.cpp 2013-02-20 18:37:06 UTC (rev 143476)
@@ -2038,6 +2038,32 @@
}
}
+LayoutUnit RenderBox::computeIntrinsicLogicalWidthUsing(Length logicalWidthLength, LayoutUnit availableLogicalWidth) const
+{
+ if (logicalWidthLength.type() == MinContent)
+ return minIntrinsicLogicalWidth();
+ if (logicalWidthLength.type() == MaxContent)
+ return maxIntrinsicLogicalWidth();
+
+ RenderView* renderView = view();
+ LayoutUnit marginStart = minimumValueForLength(style()->marginStart(), availableLogicalWidth, renderView);
+ LayoutUnit marginEnd = minimumValueForLength(style()->marginEnd(), availableLogicalWidth, renderView);
+ LayoutUnit fillAvailableMeasure = availableLogicalWidth - marginStart - marginEnd;
+
+ if (logicalWidthLength.type() == FillAvailable)
+ return fillAvailableMeasure;
+ if (logicalWidthLength.type() == FitContent) {
+ LayoutUnit minLogicalWidth = 0;
+ LayoutUnit maxLogicalWidth = 0;
+ computeIntrinsicLogicalWidths(minLogicalWidth, maxLogicalWidth);
+ minLogicalWidth += borderAndPaddingLogicalWidth();
+ maxLogicalWidth += borderAndPaddingLogicalWidth();
+ return max(minLogicalWidth, min(maxLogicalWidth, fillAvailableMeasure));
+ }
+ ASSERT_NOT_REACHED();
+ return 0;
+}
+
LayoutUnit RenderBox::computeLogicalWidthInRegionUsing(SizeType widthType, LayoutUnit availableLogicalWidth,
const RenderBlock* cb, RenderRegion* region, LayoutUnit offsetFromLogicalTopOfFirstPage) const
{
@@ -2060,33 +2086,17 @@
return adjustBorderBoxLogicalWidthForBoxSizing(valueForLength(logicalWidth, availableLogicalWidth, view()));
}
- if (logicalWidth.type() == MinContent)
- return minIntrinsicLogicalWidth();
- if (logicalWidth.type() == MaxContent)
- return maxIntrinsicLogicalWidth();
+ if (logicalWidth.isIntrinsic())
+ return computeIntrinsicLogicalWidthUsing(logicalWidth, availableLogicalWidth);
RenderView* renderView = view();
LayoutUnit marginStart = minimumValueForLength(styleToUse->marginStart(), availableLogicalWidth, renderView);
LayoutUnit marginEnd = minimumValueForLength(styleToUse->marginEnd(), availableLogicalWidth, renderView);
LayoutUnit logicalWidthResult = availableLogicalWidth - marginStart - marginEnd;
- // shrinkToAvoidFloats() is only true for width: auto so the below code works correctly for
- // width: fill-available since no case matches and it returns the logicalWidthResult from above.
if (shrinkToAvoidFloats() && cb->containsFloats())
logicalWidthResult = min(logicalWidthResult, shrinkLogicalWidthToAvoidFloats(marginStart, marginEnd, cb, region, offsetFromLogicalTopOfFirstPage));
- if (logicalWidth.type() == FitContent) {
- LayoutUnit minLogicalWidth = 0;
- LayoutUnit maxLogicalWidth = 0;
- computeIntrinsicLogicalWidths(minLogicalWidth, maxLogicalWidth);
- minLogicalWidth += borderAndPaddingLogicalWidth();
- maxLogicalWidth += borderAndPaddingLogicalWidth();
- return max(minLogicalWidth, min(maxLogicalWidth, logicalWidthResult));
- }
-
- if (logicalWidth.type() == FillAvailable)
- return logicalWidthResult;
-
if (widthType == MainOrPreferredSize && sizesLogicalWidthToFitContent(widthType))
return max(minPreferredLogicalWidth(), min(maxPreferredLogicalWidth(), logicalWidthResult));
return logicalWidthResult;
@@ -3000,7 +3010,7 @@
}
// Calculate constraint equation values for 'min-width' case.
- if (!style()->logicalMinWidth().isZero()) {
+ if (!style()->logicalMinWidth().isZero() || style()->logicalMinWidth().isIntrinsic()) {
LogicalExtentComputedValues minValues;
computePositionedLogicalWidthUsing(MinSize, style()->logicalMinWidth(), containerBlock, containerDirection,
@@ -3062,6 +3072,8 @@
{
if (widthSizeType == MinSize && logicalWidth.isAuto())
logicalWidth = Length(0, Fixed);
+ else if (logicalWidth.isIntrinsic())
+ logicalWidth = Length(computeIntrinsicLogicalWidthUsing(logicalWidth, containerLogicalWidth) - bordersPlusPadding, Fixed);
// 'left' and 'right' cannot both be 'auto' because one would of been
// converted to the static position already
Modified: trunk/Source/WebCore/rendering/RenderBox.h (143475 => 143476)
--- trunk/Source/WebCore/rendering/RenderBox.h 2013-02-20 18:27:03 UTC (rev 143475)
+++ trunk/Source/WebCore/rendering/RenderBox.h 2013-02-20 18:37:06 UTC (rev 143476)
@@ -658,6 +658,8 @@
void computePositionedLogicalHeightReplaced(LogicalExtentComputedValues&) const;
void computePositionedLogicalWidthReplaced(LogicalExtentComputedValues&) const;
+ LayoutUnit computeIntrinsicLogicalWidthUsing(Length logicalWidthLength, LayoutUnit availableLogicalWidth) const;
+
virtual void computeIntrinsicLogicalWidths(LayoutUnit& minLogicalWidth, LayoutUnit& maxLogicalWidth) const;
// This function calculates the minimum and maximum preferred widths for an object.
