Attachment 254721 Details for Bug 113610 – Patch

[patch] Patch

bug-113610-20150611161526.patch (text/plain), 74.36 KB, created by Sergio Villar Senin on 2015-06-11 07:15:58 PDT

(hide)

Description:

Filename:

MIME Type:

Creator: Sergio Villar Senin

Created: 2015-06-11 07:15:58 PDT

Size: 74.36 KB

patch

obsolete

>Subversion Revision: 185451
>diff --git a/Source/WebCore/ChangeLog b/Source/WebCore/ChangeLog
>index 052a9f2676dbe5965c969cb7cec8a19be5c4fd39..5b1619c294ad5af2ac06ed11536552fe3f706d54 100644
>--- a/Source/WebCore/ChangeLog
>+++ b/Source/WebCore/ChangeLog
>@@ -1,3 +1,73 @@
>+2015-06-11  Sergio Villar Senin  <svillar@igalia.com>
>+
>+        intrinsic size keywords don't work for heights
>+        https://bugs.webkit.org/show_bug.cgi?id=113610
>+
>+        Reviewed by NOBODY (OOPS!).
>+
>+        Based on Blink's r148314 & r150355 by <cbiesinger@chromium.org>.
>+
>+        Adds intrinsic values support to heigh & min/max-height. This involves the
>+        following changes:
>+        - RenderBox needs to pass the content height through to computeLogicalHeight and
>+        related functions, which needs it to resolve max-content, et. al.
>+        - Make the callers pass the content height to this function. Some callers pass
>+        logicalHeight() (adjusted for border/padding) which works because if
>+        logicalHeight is not the content height, then it is the height we ended up using,
>+        so the constrain* functions will just constrain to that value again.
>+        - Parsing code needs to be adjusted to support intrinsic values for heights.
>+
>+        Tests: fast/css-intrinsic-dimensions/height-css-tables-collapsed.html
>+               fast/css-intrinsic-dimensions/height-css-tables.html
>+               fast/css-intrinsic-dimensions/height-flexbox.html
>+               fast/css-intrinsic-dimensions/height-positioned-replaced.html
>+               fast/css-intrinsic-dimensions/height-positioned.html
>+               fast/css-intrinsic-dimensions/height-replaced.html
>+               fast/css-intrinsic-dimensions/height-tables-collapsed.html
>+               fast/css-intrinsic-dimensions/height-tables.html
>+               fast/css-intrinsic-dimensions/height.html
>+
>+        * css/CSSParser.cpp:
>+        (WebCore::CSSParser::isValidSize): Refactored from validateWidth and
>+        validateHeight.
>+        (WebCore::CSSParser::parseValue):
>+        (WebCore::CSSParser::validateWidth): Deleted.
>+        (WebCore::CSSParser::validateHeight): Deleted.
>+        * css/CSSParser.h:
>+        * platform/Length.h:
>+        (WebCore::Length::isFillAvailable):
>+        (WebCore::Length::isFitContent):
>+        * rendering/RenderBox.cpp:
>+        (WebCore::RenderBox::constrainLogicalHeightByMinMax):
>+        (WebCore::RenderBox::constrainContentBoxLogicalHeightByMinMax):
>+        (WebCore::RenderBox::computeLogicalHeight):
>+        (WebCore::RenderBox::computeLogicalHeightUsing):
>+        (WebCore::RenderBox::computeContentLogicalHeight):
>+        (WebCore::RenderBox::computeIntrinsicLogicalContentHeightUsing):
>+        (WebCore::RenderBox::computeContentAndScrollbarLogicalHeightUsing):
>+        (WebCore::RenderBox::computePercentageLogicalHeight):
>+        (WebCore::RenderBox::computeReplacedLogicalHeightUsing):
>+        (WebCore::RenderBox::availableLogicalHeight):
>+        (WebCore::RenderBox::availableLogicalHeightUsing):
>+        (WebCore::RenderBox::computePositionedLogicalHeight):
>+        (WebCore::RenderBox::computePositionedLogicalHeightUsing):
>+        * rendering/RenderBox.h:
>+        * rendering/RenderFlexibleBox.cpp:
>+        (WebCore::RenderFlexibleBox::computeMainAxisExtentForChild):
>+        (WebCore::RenderFlexibleBox::applyStretchAlignmentToChild):
>+        * rendering/RenderFlowThread.cpp:
>+        (WebCore::RenderFlowThread::addForcedRegionBreak):
>+        * rendering/RenderGrid.cpp:
>+        (WebCore::RenderGrid::computeUsedBreadthOfSpecifiedLength):
>+        (WebCore::RenderGrid::applyStretchAlignmentToChildIfNeeded):
>+        * rendering/RenderMultiColumnSet.cpp:
>+        (WebCore::RenderMultiColumnSet::calculateMaxColumnHeight):
>+        * rendering/RenderReplaced.cpp:
>+        (WebCore::RenderReplaced::hasReplacedLogicalHeight):
>+        * rendering/RenderTable.cpp:
>+        (WebCore::RenderTable::convertStyleLogicalHeightToComputedHeight):
>+        (WebCore::RenderTable::layout):
>+
> 2015-06-11  Hunseop Jeong  <hs85.jeong@samsung.com>
> 
>         [EFL] Fix the debug build after r185417.
>diff --git a/Source/WebCore/css/CSSParser.cpp b/Source/WebCore/css/CSSParser.cpp
>index 584c0c577c1b9423b700b2ddbda900aef1d9dca2..cab7df6c118d1cf4283de29bdb1b246f827bd96c 100644
>--- a/Source/WebCore/css/CSSParser.cpp
>+++ b/Source/WebCore/css/CSSParser.cpp
>@@ -1814,7 +1814,7 @@ static inline bool isForwardSlashOperator(CSSParserValue& value)
>     return value.unit == CSSParserValue::Operator && value.iValue == '/';
> }
> 
>-bool CSSParser::validateWidth(ValueWithCalculation& valueWithCalculation)
>+bool CSSParser::isValidSize(ValueWithCalculation& valueWithCalculation)
> {
>     int id = valueWithCalculation.value().id;
>     if (id == CSSValueIntrinsic || id == CSSValueMinIntrinsic || id == CSSValueWebkitMinContent || id == CSSValueWebkitMaxContent || id == CSSValueWebkitFillAvailable || id == CSSValueWebkitFitContent)
>@@ -1822,15 +1822,6 @@ bool CSSParser::validateWidth(ValueWithCalculation& valueWithCalculation)
>     return !id && validateUnit(valueWithCalculation, FLength | FPercent | FNonNeg);
> }
> 
>-// FIXME: Combine this with validWidth when we support fit-content, et al, for heights.
>-bool CSSParser::validateHeight(ValueWithCalculation& valueWithCalculation)
>-{
>-    int id = valueWithCalculation.value().id;
>-    if (id == CSSValueIntrinsic || id == CSSValueMinIntrinsic)
>-        return true;
>-    return !id && validateUnit(valueWithCalculation, FLength | FPercent | FNonNeg);
>-}
>-
> inline PassRefPtr<CSSPrimitiveValue> CSSParser::parseValidPrimitive(CSSValueID identifier, ValueWithCalculation& valueWithCalculation)
> {
>     if (identifier)
>@@ -2255,32 +2246,23 @@ bool CSSParser::parseValue(CSSPropertyID propId, bool important)
> 
>     case CSSPropertyMaxWidth:
>     case CSSPropertyWebkitMaxLogicalWidth:
>-        validPrimitive = (id == CSSValueNone || validateWidth(valueWithCalculation));
>-        break;
>-
>-    case CSSPropertyMinWidth:
>-    case CSSPropertyWebkitMinLogicalWidth:
>-        validPrimitive = validateWidth(valueWithCalculation);
>-        break;
>-
>-    case CSSPropertyWidth:
>-    case CSSPropertyWebkitLogicalWidth:
>-        validPrimitive = (id == CSSValueAuto || validateWidth(valueWithCalculation));
>-        break;
>-
>     case CSSPropertyMaxHeight:
>     case CSSPropertyWebkitMaxLogicalHeight:
>-        validPrimitive = (id == CSSValueNone || validateHeight(valueWithCalculation));
>+        validPrimitive = (id == CSSValueNone || isValidSize(valueWithCalculation));
>         break;
> 
>+    case CSSPropertyMinWidth:
>+    case CSSPropertyWebkitMinLogicalWidth:
>     case CSSPropertyMinHeight:
>     case CSSPropertyWebkitMinLogicalHeight:
>-        validPrimitive = validateHeight(valueWithCalculation);
>+        validPrimitive = isValidSize(valueWithCalculation);
>         break;
> 
>+    case CSSPropertyWidth:
>+    case CSSPropertyWebkitLogicalWidth:
>     case CSSPropertyHeight:
>     case CSSPropertyWebkitLogicalHeight:
>-        validPrimitive = (id == CSSValueAuto || validateHeight(valueWithCalculation));
>+        validPrimitive = (id == CSSValueAuto || isValidSize(valueWithCalculation));
>         break;
> 
>     case CSSPropertyFontSize:
>diff --git a/Source/WebCore/css/CSSParser.h b/Source/WebCore/css/CSSParser.h
>index 5299dbba0ead17886893f07c5903d784f625a3a1..747844b7b528c70970ecf4c94535957be067ef4c 100644
>--- a/Source/WebCore/css/CSSParser.h
>+++ b/Source/WebCore/css/CSSParser.h
>@@ -549,8 +549,7 @@ private:
>     void setupParser(const char* prefix, unsigned prefixLength, StringView, const char* suffix, unsigned suffixLength);
>     bool inShorthand() const { return m_inParseShorthand; }
> 
>-    bool validateWidth(ValueWithCalculation&);
>-    bool validateHeight(ValueWithCalculation&);
>+    bool isValidSize(ValueWithCalculation&);
> 
>     void deleteFontFaceOnlyValues();
> 
>diff --git a/Source/WebCore/platform/Length.h b/Source/WebCore/platform/Length.h
>index 9c8d08a4f7d6ba7b1391b820dc9640ee8f54a43f..e4294e9b3101e200c264206588840d710694a23f 100644
>--- a/Source/WebCore/platform/Length.h
>+++ b/Source/WebCore/platform/Length.h
>@@ -87,6 +87,8 @@ public:
>     bool isPercent() const;
>     bool isRelative() const;
>     bool isUndefined() const;
>+    bool isFillAvailable() const;
>+    bool isFitContent() const;
> 
>     bool hasQuirk() const;
> 
>@@ -400,6 +402,16 @@ inline bool Length::isSpecifiedOrIntrinsic() const
>     return isSpecified() || isIntrinsic();
> }
> 
>+inline bool Length::isFillAvailable() const
>+{
>+    return type() == FillAvailable;
>+}
>+
>+inline bool Length::isFitContent() const
>+{
>+    return type() == FitContent;
>+}
>+
> // FIXME: Does this need to be in the header? Is it valuable to inline? Does it get inlined?
> inline Length Length::blend(const Length& from, double progress) const
> {
>diff --git a/Source/WebCore/rendering/RenderBox.cpp b/Source/WebCore/rendering/RenderBox.cpp
>index df1987a4ae4526ca1d0cbbbc589a83bbedd650b8..307e3358b9a8a92ebfcc46feb81f7d9efbf8a201 100644
>--- a/Source/WebCore/rendering/RenderBox.cpp
>+++ b/Source/WebCore/rendering/RenderBox.cpp
>@@ -656,26 +656,26 @@ LayoutUnit RenderBox::constrainLogicalWidthInRegionByMinMax(LayoutUnit logicalWi
>     return std::max(logicalWidth, computeLogicalWidthInRegionUsing(MinSize, styleToUse.logicalMinWidth(), availableWidth, cb, region));
> }
> 
>-LayoutUnit RenderBox::constrainLogicalHeightByMinMax(LayoutUnit logicalHeight) const
>+LayoutUnit RenderBox::constrainLogicalHeightByMinMax(LayoutUnit logicalHeight, LayoutUnit intrinsicContentHeight) const
> {
>     const RenderStyle& styleToUse = style();
>     if (!styleToUse.logicalMaxHeight().isUndefined()) {
>-        LayoutUnit maxH = computeLogicalHeightUsing(styleToUse.logicalMaxHeight());
>+        LayoutUnit maxH = computeLogicalHeightUsing(styleToUse.logicalMaxHeight(), intrinsicContentHeight);
>         if (maxH != -1)
>             logicalHeight = std::min(logicalHeight, maxH);
>     }
>-    return std::max(logicalHeight, computeLogicalHeightUsing(styleToUse.logicalMinHeight()));
>+    return std::max(logicalHeight, computeLogicalHeightUsing(styleToUse.logicalMinHeight(), intrinsicContentHeight));
> }
> 
>-LayoutUnit RenderBox::constrainContentBoxLogicalHeightByMinMax(LayoutUnit logicalHeight) const
>+LayoutUnit RenderBox::constrainContentBoxLogicalHeightByMinMax(LayoutUnit logicalHeight, LayoutUnit intrinsicContentHeight) const
> {
>     const RenderStyle& styleToUse = style();
>     if (!styleToUse.logicalMaxHeight().isUndefined()) {
>-        LayoutUnit maxH = computeContentLogicalHeight(styleToUse.logicalMaxHeight());
>+        LayoutUnit maxH = computeContentLogicalHeight(styleToUse.logicalMaxHeight(), intrinsicContentHeight);
>         if (maxH != -1)
>             logicalHeight = std::min(logicalHeight, maxH);
>     }
>-    return std::max(logicalHeight, computeContentLogicalHeight(styleToUse.logicalMinHeight()));
>+    return std::max(logicalHeight, computeContentLogicalHeight(styleToUse.logicalMinHeight(), intrinsicContentHeight));
> }
> 
> RoundedRect::Radii RenderBox::borderRadii() const
>@@ -2756,19 +2756,21 @@ void RenderBox::computeLogicalHeight(LayoutUnit logicalHeight, LayoutUnit logica
> 
>         LayoutUnit heightResult;
>         if (checkMinMaxHeight) {
>-            heightResult = computeLogicalHeightUsing(style().logicalHeight());
>+            LayoutUnit intrinsicHeight = computedValues.m_extent - borderAndPaddingLogicalHeight();
>+            heightResult = computeLogicalHeightUsing(style().logicalHeight(), intrinsicHeight);
>             if (heightResult == -1)
>                 heightResult = computedValues.m_extent;
>-            heightResult = constrainLogicalHeightByMinMax(heightResult);
>+            heightResult = constrainLogicalHeightByMinMax(heightResult, intrinsicHeight);
>         } else {
>             // The only times we don't check min/max height are when a fixed length has
>             // been given as an override.  Just use that.  The value has already been adjusted
>             // for box-sizing.
>+            ASSERT(h.isFixed());
>             heightResult = h.value() + borderAndPaddingLogicalHeight();
>         }
> 
>         computedValues.m_extent = heightResult;
>-        
>+
>         if (hasPerpendicularContainingBlock) {
>             bool shouldFlipBeforeAfter = shouldFlipBeforeAfterMargins(cb->style(), &style());
>             computeInlineDirectionMargins(cb, containingBlockLogicalWidthForContent(), heightResult,
>@@ -2796,24 +2798,40 @@ void RenderBox::computeLogicalHeight(LayoutUnit logicalHeight, LayoutUnit logica
>     }
> }
> 
>-LayoutUnit RenderBox::computeLogicalHeightUsing(const Length& height) const
>+LayoutUnit RenderBox::computeLogicalHeightUsing(const Length& height, LayoutUnit intrinsicContentHeight) const
> {
>-    LayoutUnit logicalHeight = computeContentAndScrollbarLogicalHeightUsing(height);
>+    LayoutUnit logicalHeight = computeContentAndScrollbarLogicalHeightUsing(height, intrinsicContentHeight);
>     if (logicalHeight != -1)
>         logicalHeight = adjustBorderBoxLogicalHeightForBoxSizing(logicalHeight);
>     return logicalHeight;
> }
> 
>-LayoutUnit RenderBox::computeContentLogicalHeight(const Length& height) const
>+LayoutUnit RenderBox::computeContentLogicalHeight(const Length& height, LayoutUnit intrinsicContentHeight) const
> {
>-    LayoutUnit heightIncludingScrollbar = computeContentAndScrollbarLogicalHeightUsing(height);
>+    LayoutUnit heightIncludingScrollbar = computeContentAndScrollbarLogicalHeightUsing(height, intrinsicContentHeight);
>     if (heightIncludingScrollbar == -1)
>         return -1;
>     return std::max<LayoutUnit>(0, adjustContentBoxLogicalHeightForBoxSizing(heightIncludingScrollbar) - scrollbarLogicalHeight());
> }
> 
>-LayoutUnit RenderBox::computeContentAndScrollbarLogicalHeightUsing(const Length& height) const
>+LayoutUnit RenderBox::computeIntrinsicLogicalContentHeightUsing(Length logicalHeightLength, LayoutUnit intrinsicContentHeight, LayoutUnit borderAndPadding) const
>+{
>+    // FIXME: the css-sizing spec is considering changing what min-content/max-content should resolve to.
>+    // If that happens, this code will have to change.
>+    if (logicalHeightLength.isMinContent() || logicalHeightLength.isMaxContent() || logicalHeightLength.isFitContent())
>+        return intrinsicContentHeight;
>+    if (logicalHeightLength.isFillAvailable())
>+        return containingBlock()->availableLogicalHeight(ExcludeMarginBorderPadding) - borderAndPadding;
>+    ASSERT_NOT_REACHED();
>+    return 0;
>+}
>+
>+LayoutUnit RenderBox::computeContentAndScrollbarLogicalHeightUsing(const Length& height, LayoutUnit intrinsicContentHeight) const
> {
>+    // FIXME: The css-sizing spec is considering changing what min-content/max-content should resolve to.
>+    // If that happens, this code will have to change.
>+    if (height.isIntrinsic())
>+        return computeIntrinsicLogicalContentHeightUsing(height, intrinsicContentHeight, borderAndPaddingLogicalHeight());
>     if (height.isFixed())
>         return height.value();
>     if (height.isPercentOrCalculated())
>@@ -2890,7 +2908,7 @@ LayoutUnit RenderBox::computePercentageLogicalHeight(const Length& height) const
>         }
>     } else if (cbstyle.logicalHeight().isFixed()) {
>         LayoutUnit contentBoxHeight = cb->adjustContentBoxLogicalHeightForBoxSizing(cbstyle.logicalHeight().value());
>-        availableHeight = std::max<LayoutUnit>(0, cb->constrainContentBoxLogicalHeightByMinMax(contentBoxHeight - cb->scrollbarLogicalHeight()));
>+        availableHeight = std::max<LayoutUnit>(0, cb->constrainContentBoxLogicalHeightByMinMax(contentBoxHeight - cb->scrollbarLogicalHeight(), -1));
>     } else if (cbstyle.logicalHeight().isPercentOrCalculated() && !isOutOfFlowPositionedWithSpecifiedHeight) {
>         // We need to recur and compute the percentage height for our containing block.
>         LayoutUnit heightWithScrollbar = cb->computePercentageLogicalHeight(cbstyle.logicalHeight());
>@@ -2900,7 +2918,7 @@ LayoutUnit RenderBox::computePercentageLogicalHeight(const Length& height) const
>             // handle the min/max of the current block, its caller does. So the
>             // return value from the recursive call will not have been adjusted
>             // yet.
>-            LayoutUnit contentBoxHeight = cb->constrainContentBoxLogicalHeightByMinMax(contentBoxHeightWithScrollbar - cb->scrollbarLogicalHeight());
>+            LayoutUnit contentBoxHeight = cb->constrainContentBoxLogicalHeightByMinMax(contentBoxHeightWithScrollbar - cb->scrollbarLogicalHeight(), -1);
>             availableHeight = std::max<LayoutUnit>(0, contentBoxHeight);
>         }
>     } else if (isOutOfFlowPositionedWithSpecifiedHeight) {
>@@ -3045,6 +3063,11 @@ LayoutUnit RenderBox::computeReplacedLogicalHeightUsing(Length logicalHeight) co
>             }
>             return adjustContentBoxLogicalHeightForBoxSizing(valueForLength(logicalHeight, availableHeight));
>         }
>+        case MinContent:
>+        case MaxContent:
>+        case FitContent:
>+        case FillAvailable:
>+            return adjustContentBoxLogicalHeightForBoxSizing(computeIntrinsicLogicalContentHeightUsing(logicalHeight, intrinsicLogicalHeight(), borderAndPaddingLogicalHeight()));
>         default:
>             return intrinsicLogicalHeight();
>     }
>@@ -3052,7 +3075,7 @@ LayoutUnit RenderBox::computeReplacedLogicalHeightUsing(Length logicalHeight) co
> 
> LayoutUnit RenderBox::availableLogicalHeight(AvailableLogicalHeightType heightType) const
> {
>-    return constrainLogicalHeightByMinMax(availableLogicalHeightUsing(style().logicalHeight(), heightType));
>+    return constrainLogicalHeightByMinMax(availableLogicalHeightUsing(style().logicalHeight(), heightType), -1);
> }
> 
> LayoutUnit RenderBox::availableLogicalHeightUsing(const Length& h, AvailableLogicalHeightType heightType) const
>@@ -3072,7 +3095,7 @@ LayoutUnit RenderBox::availableLogicalHeightUsing(const Length& h, AvailableLogi
>         return adjustContentBoxLogicalHeightForBoxSizing(valueForLength(h, availableHeight));
>     }
> 
>-    LayoutUnit heightIncludingScrollbar = computeContentAndScrollbarLogicalHeightUsing(h);
>+    LayoutUnit heightIncludingScrollbar = computeContentAndScrollbarLogicalHeightUsing(h, -1);
>     if (heightIncludingScrollbar != -1)
>         return std::max<LayoutUnit>(0, adjustContentBoxLogicalHeightForBoxSizing(heightIncludingScrollbar) - scrollbarLogicalHeight());
> 
>@@ -3689,7 +3712,7 @@ void RenderBox::computePositionedLogicalHeight(LogicalExtentComputedValues& comp
>     }
> 
>     // Calculate constraint equation values for 'min-height' case.
>-    if (!styleToUse.logicalMinHeight().isZero()) {
>+    if (!styleToUse.logicalMinHeight().isZero() || styleToUse.logicalMinHeight().isIntrinsic()) {
>         LogicalExtentComputedValues minValues;
> 
>         computePositionedLogicalHeightUsing(styleToUse.logicalMinHeight(), containerBlock, containerLogicalHeight, bordersPlusPadding, logicalHeight,
>@@ -3763,18 +3786,22 @@ void RenderBox::computePositionedLogicalHeightUsing(Length logicalHeightLength,
>     const LayoutUnit containerRelativeLogicalWidth = containingBlockLogicalWidthForPositioned(containerBlock, nullptr, false);
> 
>     LayoutUnit logicalTopValue = 0;
>-    LayoutUnit resolvedLogicalHeight = 0;
> 
>     bool logicalHeightIsAuto = logicalHeightLength.isAuto();
>     bool logicalTopIsAuto = logicalTop.isAuto();
>     bool logicalBottomIsAuto = logicalBottom.isAuto();
> 
>     // Height is never unsolved for tables.
>+    LayoutUnit resolvedLogicalHeight;
>     if (isTable()) {
>         resolvedLogicalHeight = contentLogicalHeight;
>         logicalHeightIsAuto = false;
>-    } else
>-        resolvedLogicalHeight = adjustContentBoxLogicalHeightForBoxSizing(valueForLength(logicalHeightLength, containerLogicalHeight));
>+    } else {
>+        if (logicalHeightLength.isIntrinsic())
>+            resolvedLogicalHeight = computeIntrinsicLogicalContentHeightUsing(logicalHeightLength, contentLogicalHeight, bordersPlusPadding);
>+        else
>+            resolvedLogicalHeight = adjustContentBoxLogicalHeightForBoxSizing(valueForLength(logicalHeightLength, containerLogicalHeight));
>+    }
> 
>     if (!logicalTopIsAuto && !logicalHeightIsAuto && !logicalBottomIsAuto) {
>         /*-----------------------------------------------------------------------*\
>diff --git a/Source/WebCore/rendering/RenderBox.h b/Source/WebCore/rendering/RenderBox.h
>index 408008f42e9bd9ed919eda0af8c4b23ae7ec61bc..d0157088a2d83ff1294b560b1c17de99a99c376d 100644
>--- a/Source/WebCore/rendering/RenderBox.h
>+++ b/Source/WebCore/rendering/RenderBox.h
>@@ -87,8 +87,8 @@ public:
>     LayoutUnit logicalHeight() const { return style().isHorizontalWritingMode() ? height() : width(); }
> 
>     LayoutUnit constrainLogicalWidthInRegionByMinMax(LayoutUnit, LayoutUnit, RenderBlock*, RenderRegion* = nullptr) const;
>-    LayoutUnit constrainLogicalHeightByMinMax(LayoutUnit) const;
>-    LayoutUnit constrainContentBoxLogicalHeightByMinMax(LayoutUnit) const;
>+    LayoutUnit constrainLogicalHeightByMinMax(LayoutUnit logicalHeight, LayoutUnit intrinsicContentHeight) const;
>+    LayoutUnit constrainContentBoxLogicalHeightByMinMax(LayoutUnit logicalHeight, LayoutUnit intrinsicContentHeight) const;
> 
>     int pixelSnappedLogicalHeight() const { return style().isHorizontalWritingMode() ? pixelSnappedSize().height() : pixelSnappedSize().width(); }
>     int pixelSnappedLogicalWidth() const { return style().isHorizontalWritingMode() ? pixelSnappedSize().width() : pixelSnappedSize().height(); }
>@@ -432,9 +432,9 @@ public:
>     LayoutUnit shrinkLogicalWidthToAvoidFloats(LayoutUnit childMarginStart, LayoutUnit childMarginEnd, const RenderBlock* cb, RenderRegion*) const;
> 
>     LayoutUnit computeLogicalWidthInRegionUsing(SizeType, Length logicalWidth, LayoutUnit availableLogicalWidth, const RenderBlock* containingBlock, RenderRegion*) const;
>-    LayoutUnit computeLogicalHeightUsing(const Length& height) const;
>-    LayoutUnit computeContentLogicalHeight(const Length& height) const;
>-    LayoutUnit computeContentAndScrollbarLogicalHeightUsing(const Length& height) const;
>+    LayoutUnit computeLogicalHeightUsing(const Length& height, LayoutUnit intrinsicContentHeight) const;
>+    LayoutUnit computeContentLogicalHeight(const Length& height, LayoutUnit intrinsicContentHeight) const;
>+    LayoutUnit computeContentAndScrollbarLogicalHeightUsing(const Length& height, LayoutUnit intrinsicContentHeight) const;
>     LayoutUnit computeReplacedLogicalWidthUsing(Length width) const;
>     LayoutUnit computeReplacedLogicalWidthRespectingMinMaxWidth(LayoutUnit logicalWidth, ShouldComputePreferred  = ComputeActual) const;
>     LayoutUnit computeReplacedLogicalHeightUsing(Length height) const;
>@@ -653,6 +653,7 @@ protected:
>     void computePositionedLogicalWidth(LogicalExtentComputedValues&, RenderRegion* = nullptr) const;
> 
>     LayoutUnit computeIntrinsicLogicalWidthUsing(Length logicalWidthLength, LayoutUnit availableLogicalWidth, LayoutUnit borderAndPadding) const;
>+    LayoutUnit computeIntrinsicLogicalContentHeightUsing(Length logicalHeightLength, LayoutUnit intrinsicContentHeight, LayoutUnit borderAndPadding) const;
>     
>     virtual bool shouldComputeSizeAsReplaced() const { return isReplaced() && !isInlineBlockOrInlineTable(); }
> 
>diff --git a/Source/WebCore/rendering/RenderFlexibleBox.cpp b/Source/WebCore/rendering/RenderFlexibleBox.cpp
>index 0d5a036a57e8c48e815fe5b89da275185d0f5fef..455b588f7110006b538ea10258b6f3da7f57bef0 100644
>--- a/Source/WebCore/rendering/RenderFlexibleBox.cpp
>+++ b/Source/WebCore/rendering/RenderFlexibleBox.cpp
>@@ -451,11 +451,12 @@ LayoutUnit RenderFlexibleBox::computeMainAxisExtentForChild(RenderBox& child, Si
> {
>     // FIXME: This is wrong for orthogonal flows. It should use the flexbox's writing-mode, not the child's in order
>     // to figure out the logical height/width.
>-    // FIXME: This is wrong if the height is set to an intrinsic keyword value. computeContentLogicalHeight will return -1.
>-    // Instead, we need to layout the child an get the appropriate height value.
>-    // https://bugs.webkit.org/show_bug.cgi?id=113610
>-    if (isColumnFlow())
>-        return child.computeContentLogicalHeight(size);
>+    if (isColumnFlow()) {
>+        // We don't have to check for "auto" here - computeContentLogicalHeight will just return -1 for that case anyway.
>+        if (size.isIntrinsic())
>+            child.layoutIfNeeded();
>+        return child.computeContentLogicalHeight(size, child.logicalHeight() - child.borderAndPaddingLogicalHeight());
>+    }
>     // FIXME: Figure out how this should work for regions and pass in the appropriate values.
>     RenderRegion* region = nullptr;
>     return child.computeLogicalWidthInRegionUsing(sizeType, size, contentLogicalWidth(), this, region) - child.borderAndPaddingLogicalWidth();
>@@ -1336,7 +1337,8 @@ void RenderFlexibleBox::applyStretchAlignmentToChild(RenderBox& child, LayoutUni
>         // FIXME: If the child has orthogonal flow, then it already has an override height set, so use it.
>         if (!hasOrthogonalFlow(child)) {
>             LayoutUnit stretchedLogicalHeight = child.logicalHeight() + availableAlignmentSpaceForChild(lineCrossAxisExtent, child);
>-            LayoutUnit desiredLogicalHeight = child.constrainLogicalHeightByMinMax(stretchedLogicalHeight);
>+            ASSERT(!child->needsLayout());
>+            LayoutUnit desiredLogicalHeight = child.constrainLogicalHeightByMinMax(stretchedLogicalHeight, child.logicalHeight() - child.borderAndPaddingLogicalHeight());
> 
>             // FIXME: Can avoid laying out here in some cases. See https://webkit.org/b/87905.
>             if (desiredLogicalHeight != child.logicalHeight()) {
>diff --git a/Source/WebCore/rendering/RenderFlowThread.cpp b/Source/WebCore/rendering/RenderFlowThread.cpp
>index c2a3d7898db69eb56a4f5fbcf25d851f190a77d7..ddbf3ac541d52c4e3610ee1078ba98ee247011e5 100644
>--- a/Source/WebCore/rendering/RenderFlowThread.cpp
>+++ b/Source/WebCore/rendering/RenderFlowThread.cpp
>@@ -1094,7 +1094,7 @@ bool RenderFlowThread::addForcedRegionBreak(const RenderBlock* block, LayoutUnit
>         hasComputedAutoHeight = true;
> 
>         // Compute the region height pretending that the offsetBreakInCurrentRegion is the logicalHeight for the auto-height region.
>-        LayoutUnit regionComputedAutoHeight = namedFlowFragment.constrainContentBoxLogicalHeightByMinMax(offsetBreakInCurrentRegion);
>+        LayoutUnit regionComputedAutoHeight = namedFlowFragment.constrainContentBoxLogicalHeightByMinMax(offsetBreakInCurrentRegion, -1);
> 
>         // The new height of this region needs to be smaller than the initial value, the max height. A forced break is the only way to change the initial
>         // height of an auto-height region besides content ending.
>diff --git a/Source/WebCore/rendering/RenderGrid.cpp b/Source/WebCore/rendering/RenderGrid.cpp
>index bc378a533b8a32ad4c57463725c21507199e2377..04ba462824cec8a5a403b4e4d0e9bb3e1c381dc1 100644
>--- a/Source/WebCore/rendering/RenderGrid.cpp
>+++ b/Source/WebCore/rendering/RenderGrid.cpp
>@@ -469,7 +469,7 @@ LayoutUnit RenderGrid::computeUsedBreadthOfMaxLength(GridTrackSizingDirection di
> LayoutUnit RenderGrid::computeUsedBreadthOfSpecifiedLength(GridTrackSizingDirection direction, const Length& trackLength) const
> {
>     ASSERT(trackLength.isSpecified());
>-    return valueForLength(trackLength, direction == ForColumns ? logicalWidth() : std::max(LayoutUnit(), computeContentLogicalHeight(style().logicalHeight())));
>+    return valueForLength(trackLength, direction == ForColumns ? logicalWidth() : std::max(LayoutUnit(), computeContentLogicalHeight(style().logicalHeight(), -1)));
> }
> 
> double RenderGrid::computeNormalizedFractionBreadth(Vector<GridTrack>& tracks, const GridSpan& tracksSpan, GridTrackSizingDirection direction, LayoutUnit spaceToFill) const
>@@ -1306,7 +1306,7 @@ void RenderGrid::applyStretchAlignmentToChildIfNeeded(RenderBox& child, LayoutUn
>     // FIXME: grid track sizing and positioning do not support orthogonal modes yet.
>     if (!hasOrthogonalWritingMode) {
>         LayoutUnit stretchedLogicalHeight = availableAlignmentSpaceForChildBeforeStretching(gridAreaBreadthForChild, child);
>-        LayoutUnit desiredLogicalHeight = child.constrainLogicalHeightByMinMax(stretchedLogicalHeight);
>+        LayoutUnit desiredLogicalHeight = child.constrainLogicalHeightByMinMax(stretchedLogicalHeight, -1);
> 
>         // FIXME: Can avoid laying out here in some cases. See https://webkit.org/b/87905.
>         bool childNeedsRelayout = desiredLogicalHeight != child.logicalHeight();
>diff --git a/Source/WebCore/rendering/RenderMultiColumnSet.cpp b/Source/WebCore/rendering/RenderMultiColumnSet.cpp
>index 821e4b98fa23f2c23fceabb044e359e56733671e..2091b5b909bd3170054dd513d687eff982ff641c 100644
>--- a/Source/WebCore/rendering/RenderMultiColumnSet.cpp
>+++ b/Source/WebCore/rendering/RenderMultiColumnSet.cpp
>@@ -415,7 +415,7 @@ LayoutUnit RenderMultiColumnSet::calculateMaxColumnHeight() const
>     LayoutUnit availableHeight = multiColumnFlowThread()->columnHeightAvailable();
>     LayoutUnit maxColumnHeight = availableHeight ? availableHeight : RenderFlowThread::maxLogicalHeight();
>     if (!multicolStyle.logicalMaxHeight().isUndefined()) {
>-        LayoutUnit logicalMaxHeight = multicolBlock->computeContentLogicalHeight(multicolStyle.logicalMaxHeight());
>+        LayoutUnit logicalMaxHeight = multicolBlock->computeContentLogicalHeight(multicolStyle.logicalMaxHeight(), -1);
>         if (logicalMaxHeight != -1 && maxColumnHeight > logicalMaxHeight)
>             maxColumnHeight = logicalMaxHeight;
>     }
>diff --git a/Source/WebCore/rendering/RenderReplaced.cpp b/Source/WebCore/rendering/RenderReplaced.cpp
>index fb16c0dc50aa5d2008fb87f71d2ea0c8431e36ec..bdcd3d8628f46db7c27708243910b40500d0302a 100644
>--- a/Source/WebCore/rendering/RenderReplaced.cpp
>+++ b/Source/WebCore/rendering/RenderReplaced.cpp
>@@ -282,6 +282,9 @@ bool RenderReplaced::hasReplacedLogicalHeight() const
>         return true;
>     }
> 
>+    if (style().logicalHeight().isIntrinsic())
>+        return true;
>+
>     return false;
> }
> 
>diff --git a/Source/WebCore/rendering/RenderTable.cpp b/Source/WebCore/rendering/RenderTable.cpp
>index 08c04271f4d12aad9d53d3183a0a319896a27ad9..ebf3194e92fc046daf079410cf30b4465149c500 100644
>--- a/Source/WebCore/rendering/RenderTable.cpp
>+++ b/Source/WebCore/rendering/RenderTable.cpp
>@@ -357,19 +357,22 @@ LayoutUnit RenderTable::convertStyleLogicalWidthToComputedWidth(const Length& st
> 
> LayoutUnit RenderTable::convertStyleLogicalHeightToComputedHeight(const Length& styleLogicalHeight)
> {
>+    LayoutUnit borderAndPaddingBefore = borderBefore() + (collapseBorders() ? LayoutUnit() : paddingBefore());
>+    LayoutUnit borderAndPaddingAfter = borderAfter() + (collapseBorders() ? LayoutUnit() : paddingAfter());
>+    LayoutUnit borderAndPadding = borderAndPaddingBefore + borderAndPaddingAfter;
>     LayoutUnit computedLogicalHeight = 0;
>     if (styleLogicalHeight.isFixed()) {
>         // HTML tables size as though CSS height includes border/padding, CSS tables do not.
>         LayoutUnit borders = LayoutUnit();
>         // FIXME: We cannot apply box-sizing: content-box on <table> which other browsers allow.
>         if (is<HTMLTableElement>(element()) || style().boxSizing() == BORDER_BOX) {
>-            LayoutUnit borderAndPaddingBefore = borderBefore() + (collapseBorders() ? LayoutUnit() : paddingBefore());
>-            LayoutUnit borderAndPaddingAfter = borderAfter() + (collapseBorders() ? LayoutUnit() : paddingAfter());
>-            borders = borderAndPaddingBefore + borderAndPaddingAfter;
>+            borders = borderAndPadding;
>         }
>         computedLogicalHeight = styleLogicalHeight.value() - borders;
>-    } else if (styleLogicalHeight.isPercentOrCalculated())
>+    } else if (styleLogicalHeight.isPercentOrCalculated()) {
>         computedLogicalHeight = computePercentageLogicalHeight(styleLogicalHeight);
>+    } else if (styleLogicalHeight.isIntrinsic())
>+        computedLogicalHeight = computeIntrinsicLogicalContentHeightUsing(styleLogicalHeight, logicalHeight() - borderAndPadding, borderAndPadding);
>     else
>         ASSERT_NOT_REACHED();
>     return std::max<LayoutUnit>(0, computedLogicalHeight);
>@@ -502,17 +505,17 @@ void RenderTable::layout()
>     LayoutUnit computedLogicalHeight = 0;
>     
>     Length logicalHeightLength = style().logicalHeight();
>-    if (logicalHeightLength.isSpecified() && logicalHeightLength.isPositive())
>+    if (logicalHeightLength.isIntrinsic() || (logicalHeightLength.isSpecified() && logicalHeightLength.isPositive()))
>         computedLogicalHeight = convertStyleLogicalHeightToComputedHeight(logicalHeightLength);
>     
>     Length logicalMaxHeightLength = style().logicalMaxHeight();
>-    if (logicalMaxHeightLength.isSpecified() && !logicalMaxHeightLength.isNegative()) {
>+    if (logicalMaxHeightLength.isIntrinsic() || (logicalMaxHeightLength.isSpecified() && !logicalMaxHeightLength.isNegative())) {
>         LayoutUnit computedMaxLogicalHeight = convertStyleLogicalHeightToComputedHeight(logicalMaxHeightLength);
>         computedLogicalHeight = std::min(computedLogicalHeight, computedMaxLogicalHeight);
>     }
> 
>     Length logicalMinHeightLength = style().logicalMinHeight();
>-    if (logicalMinHeightLength.isSpecified() && !logicalMinHeightLength.isNegative()) {
>+    if (logicalMinHeightLength.isIntrinsic() || (logicalMinHeightLength.isSpecified() && !logicalMinHeightLength.isNegative())) {
>         LayoutUnit computedMinLogicalHeight = convertStyleLogicalHeightToComputedHeight(logicalMinHeightLength);
>         computedLogicalHeight = std::max(computedLogicalHeight, computedMinLogicalHeight);
>     }
>diff --git a/LayoutTests/ChangeLog b/LayoutTests/ChangeLog
>index 6461f3eafe5d5f89c299bfa4afd114bc0d2e57a4..ef111850a0a2d48b03910e8030cfe9ceb5f0c2db 100644
>--- a/LayoutTests/ChangeLog
>+++ b/LayoutTests/ChangeLog
>@@ -1,3 +1,47 @@
>+2015-06-11  Sergio Villar Senin  <svillar@igalia.com>
>+
>+        intrinsic size keywords don't work for heights
>+        https://bugs.webkit.org/show_bug.cgi?id=113610
>+
>+        Reviewed by NOBODY (OOPS!).
>+
>+        Based on Blink's r148314 by <cbiesinger@chromium.org>.
>+
>+        * fast/css-intrinsic-dimensions/height-css-tables-collapsed-expected.html: Added.
>+        * fast/css-intrinsic-dimensions/height-css-tables-collapsed.html: Added.
>+        * fast/css-intrinsic-dimensions/height-css-tables-expected.html: Added.
>+        * fast/css-intrinsic-dimensions/height-css-tables.html: Added.
>+        * fast/css-intrinsic-dimensions/height-expected.html: Added.
>+        * fast/css-intrinsic-dimensions/height-flexbox-expected.html: Added.
>+        * fast/css-intrinsic-dimensions/height-flexbox.html: Added.
>+        * fast/css-intrinsic-dimensions/height-positioned-expected.html: Added.
>+        * fast/css-intrinsic-dimensions/height-positioned-replaced-expected.html: Added.
>+        * fast/css-intrinsic-dimensions/height-positioned-replaced.html: Added.
>+        * fast/css-intrinsic-dimensions/height-positioned.html: Added.
>+        * fast/css-intrinsic-dimensions/height-property-value-expected.txt:
>+        * fast/css-intrinsic-dimensions/height-property-value.html:
>+        * fast/css-intrinsic-dimensions/height-property-value.html.orig: Copied from LayoutTests/fast/css-intrinsic-dimensions/height-property-value.html.
>+        * fast/css-intrinsic-dimensions/height-replaced-expected.html: Added.
>+        * fast/css-intrinsic-dimensions/height-replaced.html: Added.
>+        * fast/css-intrinsic-dimensions/height-tables-collapsed-expected.html: Added.
>+        * fast/css-intrinsic-dimensions/height-tables-collapsed.html: Added.
>+        * fast/css-intrinsic-dimensions/height-tables-expected.html: Added.
>+        * fast/css-intrinsic-dimensions/height-tables.html: Added.
>+        * fast/css-intrinsic-dimensions/height.html: Added.
>+        * fast/css-intrinsic-dimensions/resources/height-keyword-classes.css: Added.
>+        (.min-content):
>+        (.max-content):
>+        (.fill-available):
>+        (.fit-content):
>+        (.max-height-min-content):
>+        (.max-height-max-content):
>+        (.max-height-fill-available):
>+        (.max-height-fit-content):
>+        (.min-height-min-content):
>+        (.min-height-max-content):
>+        (.min-height-fill-available):
>+        (.min-height-fit-content):
>+
> 2015-06-10  Said Abou-Hallawa  <sabouhallawa@apple.com>
> 
>         REGRESSION (r184895): Vertical border elements ([-webkit]-border-image set to 'repeat') that used to render perfectly are now rendering incorrectly.
>diff --git a/LayoutTests/fast/css-intrinsic-dimensions/height-css-tables-collapsed-expected.html b/LayoutTests/fast/css-intrinsic-dimensions/height-css-tables-collapsed-expected.html
>new file mode 100644
>index 0000000000000000000000000000000000000000..d584a60460406b8fc9bf8614025ae81f2e561fae
>--- /dev/null
>+++ b/LayoutTests/fast/css-intrinsic-dimensions/height-css-tables-collapsed-expected.html
>@@ -0,0 +1,34 @@
>+<!DOCTYPE html>
>+
>+<style>
>+  .item { height: 50px; width: 50px; border: 1px solid blue; }
>+
>+  .container { height: 100px; border: 5px solid pink; }
>+  .table { border: 2px solid red; display: table; border-collapse: collapse; border-spacing: 2px; }
>+  .td { border: 2px solid green; display: table-cell; }
>+</style>
>+
>+<div class="table">
>+  <div class="td">
>+    <div class="item"></div>
>+  </div>
>+</div>
>+
>+<table>
>+  <div class="td">
>+    <div class="item"></div>
>+  </div>
>+</div>
>+
>+<div class="container">
>+  <div class="table" style="height: 100%; box-sizing: border-box;">
>+    <div class="td">
>+      <div class="item"></div>
>+    </div>
>+  </div>
>+</div>
>+
>+
>+<div class="table container" style="display: block; float: left; height: 98px; border: 2px solid green;">
>+  <div class="item"></div>
>+</div>
>diff --git a/LayoutTests/fast/css-intrinsic-dimensions/height-css-tables-collapsed.html b/LayoutTests/fast/css-intrinsic-dimensions/height-css-tables-collapsed.html
>new file mode 100644
>index 0000000000000000000000000000000000000000..72ab8f205e77a7dd85f84ca7695d9ad8243298ef
>--- /dev/null
>+++ b/LayoutTests/fast/css-intrinsic-dimensions/height-css-tables-collapsed.html
>@@ -0,0 +1,40 @@
>+<!DOCTYPE html>
>+
>+<style>
>+  @import "resources/height-keyword-classes.css";
>+
>+  .small { height: 1px; }
>+  .big { height: 300px; }
>+  .item { height: 50px; width: 50px; border: 1px solid blue; }
>+
>+  .container { height: 100px; border: 5px solid pink; }
>+  .table { border: 2px solid red; display: table; border-collapse: collapse; border-spacing: 2px; }
>+  .td { border: 2px solid green; display: table-cell; }
>+</style>
>+
>+<div class="table big max-height-min-content">
>+  <div class="td">
>+    <div class="item"></div>
>+  </div>
>+</div>
>+
>+<table>
>+  <div class="td small min-height-min-content">
>+    <div class="item"></div>
>+  </div>
>+</div>
>+
>+<div class="container">
>+  <div class="table small min-height-fill-available">
>+    <div class="td">
>+      <div class="item"></div>
>+    </div>
>+  </div>
>+</div>
>+
>+
>+<div class="table container">
>+  <div class="td small min-height-fill-available">
>+    <div class="item"></div>
>+  </div>
>+</div>
>diff --git a/LayoutTests/fast/css-intrinsic-dimensions/height-css-tables-expected.html b/LayoutTests/fast/css-intrinsic-dimensions/height-css-tables-expected.html
>new file mode 100644
>index 0000000000000000000000000000000000000000..5f4d437aaa2953c379618a9fec8e97f4091a1bf0
>--- /dev/null
>+++ b/LayoutTests/fast/css-intrinsic-dimensions/height-css-tables-expected.html
>@@ -0,0 +1,36 @@
>+<!DOCTYPE html>
>+
>+<style>
>+  .item { height: 50px; width: 50px; border: 1px solid blue; }
>+
>+  .container { height: 100px; border: 5px solid pink; }
>+  .table { border: 2px solid red; display: table; border-spacing: 2px; }
>+  .td { border: 2px solid green; display: table-cell; }
>+</style>
>+
>+<div class="table">
>+  <div class="td">
>+    <div class="item"></div>
>+  </div>
>+</div>
>+
>+<table>
>+  <div class="td">
>+    <div class="item"></div>
>+  </div>
>+</div>
>+
>+<div class="container">
>+  <div class="table" style="height: 100%; box-sizing: border-box;">
>+    <div class="td">
>+      <div class="item"></div>
>+    </div>
>+  </div>
>+</div>
>+
>+
>+<div class="table container" style="display: block; float: left; height: 98px;">
>+  <div class="td" style="height: 90px;" style="display: block;">
>+    <div class="item"></div>
>+  </div>
>+</div>
>diff --git a/LayoutTests/fast/css-intrinsic-dimensions/height-css-tables.html b/LayoutTests/fast/css-intrinsic-dimensions/height-css-tables.html
>new file mode 100644
>index 0000000000000000000000000000000000000000..a37d0747b6f30f5113ca584e8596aa78581229db
>--- /dev/null
>+++ b/LayoutTests/fast/css-intrinsic-dimensions/height-css-tables.html
>@@ -0,0 +1,40 @@
>+<!DOCTYPE html>
>+
>+<style>
>+  @import "resources/height-keyword-classes.css";
>+
>+  .small { height: 1px; }
>+  .big { height: 300px; }
>+  .item { height: 50px; width: 50px; border: 1px solid blue; }
>+
>+  .container { height: 100px; border: 5px solid pink; }
>+  .table { border: 2px solid red; display: table; border-spacing: 2px; }
>+  .td { border: 2px solid green; display: table-cell; }
>+</style>
>+
>+<div class="table big max-height-min-content">
>+  <div class="td">
>+    <div class="item"></div>
>+  </div>
>+</div>
>+
>+<table>
>+  <div class="td small min-height-min-content">
>+    <div class="item"></div>
>+  </div>
>+</div>
>+
>+<div class="container">
>+  <div class="table small min-height-fill-available">
>+    <div class="td">
>+      <div class="item"></div>
>+    </div>
>+  </div>
>+</div>
>+
>+
>+<div class="table container">
>+  <div class="td small min-height-fill-available">
>+    <div class="item"></div>
>+  </div>
>+</div>
>diff --git a/LayoutTests/fast/css-intrinsic-dimensions/height-expected.html b/LayoutTests/fast/css-intrinsic-dimensions/height-expected.html
>new file mode 100644
>index 0000000000000000000000000000000000000000..ad7a977bae2b22c334f073a7ce8348a8d376a818
>--- /dev/null
>+++ b/LayoutTests/fast/css-intrinsic-dimensions/height-expected.html
>@@ -0,0 +1,80 @@
>+<!DOCTYPE html>
>+<style>
>+    body * {
>+        border: 2px solid red;
>+        padding: 5px;
>+        clear: both;
>+    }
>+
>+    .container {
>+        height: 300px;
>+        border-color: blue;
>+
>+        display: inline-block;
>+        width: 100px;
>+    }
>+
>+    .fill-available {
>+      height: 100%;
>+      box-sizing: border-box;
>+    }
>+</style>
>+<div class="container">
>+  <div>
>+    height: min-content<br>on this box.
>+  </div>
>+
>+  <div>
>+    height: max-content<br>on this box.
>+  </div>
>+
>+  <div>
>+    height: fit-content<br>on this box.
>+  </div>
>+</div>
>+
>+<div class="container">
>+  <div class="fill-available">
>+    height: fill-available<br> on this box.
>+  </div>
>+</div>
>+
>+<div class="container">
>+  <div>
>+    min-height: min-content<br>on this box.
>+  </div>
>+
>+  <div>
>+    min-height: max-content<br>on this box.
>+  </div>
>+
>+  <div>
>+    min-height: fit-content<br>on this box.
>+  </div>
>+</div>
>+
>+<div class="container">
>+  <div class="fill-available">
>+    min-height: fill-available<br> on this box.
>+  </div>
>+</div>
>+
>+<div class="container">
>+  <div>
>+    max-height: min-content<br>on this box.
>+  </div>
>+
>+  <div>
>+    max-height: max-content<br>on this box.
>+  </div>
>+
>+  <div>
>+    max-height: fit-content<br>on this box.
>+  </div>
>+</div>
>+
>+<div class="container">
>+  <div class="fill-available">
>+    max-height: fill-available<br> on this box.
>+  </div>
>+</div>
>diff --git a/LayoutTests/fast/css-intrinsic-dimensions/height-flexbox-expected.html b/LayoutTests/fast/css-intrinsic-dimensions/height-flexbox-expected.html
>new file mode 100644
>index 0000000000000000000000000000000000000000..384e1a126d538c2aae88a06055aa3bf63f418f25
>--- /dev/null
>+++ b/LayoutTests/fast/css-intrinsic-dimensions/height-flexbox-expected.html
>@@ -0,0 +1,27 @@
>+<!DOCTYPE html>
>+<style>
>+  .container {
>+    border: 2px solid blue;
>+  }
>+
>+  .item {
>+    border: 2px solid red;
>+  }
>+</style>
>+
>+<div class="container">
>+  <div class="item">
>+    Line 1<br>
>+    Line 2
>+  </div>
>+</div>
>+
>+<div class="container">
>+  <div class="item">
>+    Line 1
>+  </div>
>+  <div class="item">
>+    Line 1<br>
>+    Line 2
>+  </div>
>+</div>
>diff --git a/LayoutTests/fast/css-intrinsic-dimensions/height-flexbox.html b/LayoutTests/fast/css-intrinsic-dimensions/height-flexbox.html
>new file mode 100644
>index 0000000000000000000000000000000000000000..2d4675c1337a90bd5c441dc855f6443c8ed0bd55
>--- /dev/null
>+++ b/LayoutTests/fast/css-intrinsic-dimensions/height-flexbox.html
>@@ -0,0 +1,37 @@
>+<!DOCTYPE html>
>+<style>
>+  @import "resources/height-keyword-classes.css";
>+
>+  .container {
>+    display: -webkit-flex;
>+    display: flex;
>+    -webkit-flex-direction: column;
>+    flex-direction: column;
>+
>+    border: 2px solid blue;
>+  }
>+
>+  .item {
>+    height: 1px;
>+    border: 2px solid red;
>+    -webkit-flex: 1;
>+    flex: 1;
>+  }
>+</style>
>+
>+<div class="container">
>+  <div class="item min-height-min-content">
>+    Line 1<br>
>+    Line 2
>+  </div>
>+</div>
>+
>+<div class="container">
>+  <div class="item min-height-min-content">
>+    Line 1
>+  </div>
>+  <div class="item min-height-min-content">
>+    Line 1<br>
>+    Line 2
>+  </div>
>+</div>
>diff --git a/LayoutTests/fast/css-intrinsic-dimensions/height-positioned-expected.html b/LayoutTests/fast/css-intrinsic-dimensions/height-positioned-expected.html
>new file mode 100644
>index 0000000000000000000000000000000000000000..cb861f5a001d03e049f9a44aac2c81a5c6f00032
>--- /dev/null
>+++ b/LayoutTests/fast/css-intrinsic-dimensions/height-positioned-expected.html
>@@ -0,0 +1,120 @@
>+<!DOCTYPE html>
>+
>+<style>
>+    body * {
>+      border: 2px solid red;
>+      padding: 5px;
>+      clear: both;
>+    }
>+
>+    .container {
>+      height: 400px;
>+      border-color: blue;
>+
>+      display: inline-block;
>+      width: 100px;
>+    }
>+
>+    .position-container {
>+      border-color: green;
>+      position: relative;
>+      height: 100px;
>+    }
>+
>+    .position-container > * {
>+      position: absolute;
>+    }
>+
>+    .f-a-container {
>+      height: 100%;
>+      box-sizing: border-box;
>+    }
>+
>+    .fill-available {
>+      height: 386px;
>+      box-sizing: border-box;
>+    }
>+</style>
>+<div class="container">
>+  <div class="position-container">
>+    <div>
>+      height: min-content<br>on this box.
>+    </div>
>+  </div>
>+  <div class="position-container">
>+    <div>
>+      height: max-content<br>on this box.
>+    </div>
>+  </div>
>+  <div class="position-container">
>+    <div>
>+      height: fit-content<br>on this box.
>+    </div>
>+  </div>
>+</div>
>+
>+<div class="container">
>+  <div class="position-container f-a-container">
>+    <div class="fill-available">
>+      height: fill-available<br> on this box.
>+    </div>
>+  </div>
>+</div>
>+
>+<div class="container">
>+  <div class="position-container">
>+    <div>
>+      min-height: min-content<br>on this box.
>+    </div>
>+
>+  </div>
>+  <div class="position-container">
>+    <div>
>+      min-height: max-content<br>on this box.
>+    </div>
>+
>+  </div>
>+  <div class="position-container">
>+    <div>
>+      min-height: fit-content<br>on this box.
>+    </div>
>+  </div>
>+</div>
>+
>+<div class="container">
>+  <div class="position-container f-a-container">
>+    <div class="fill-available">
>+      min-height: fill-available<br> on this box.
>+    </div>
>+  </div>
>+</div>
>+
>+<div class="container">
>+  <div class="position-container">
>+    <div>
>+      max-height: min-content<br>on this box.
>+    </div>
>+
>+  </div>
>+  <div class="position-container">
>+    <div>
>+      max-height: max-content<br>on this box.
>+    </div>
>+
>+  </div>
>+  <div class="position-container">
>+    <div>
>+      max-height: fit-content<br>on this box.
>+    </div>
>+  </div>
>+</div>
>+
>+<div class="container">
>+  <div class="position-container f-a-container">
>+    <div class="fill-available">
>+      max-height: fill-available<br> on this box.
>+    </div>
>+  </div>
>+</div>
>diff --git a/LayoutTests/fast/css-intrinsic-dimensions/height-positioned-replaced-expected.html b/LayoutTests/fast/css-intrinsic-dimensions/height-positioned-replaced-expected.html
>new file mode 100644
>index 0000000000000000000000000000000000000000..b3481800b73c722d5f34e2a88da47f52a34dcaab
>--- /dev/null
>+++ b/LayoutTests/fast/css-intrinsic-dimensions/height-positioned-replaced-expected.html
>@@ -0,0 +1,111 @@
>+<!DOCTYPE html>
>+
>+<style>
>+    body * {
>+      border: 2px solid red;
>+      padding: 5px;
>+      clear: both;
>+    }
>+
>+    .container {
>+      height: 600px;
>+      border-color: blue;
>+
>+      display: inline-block;
>+      width: 100px;
>+    }
>+
>+    .position-container {
>+      border-color: green;
>+      position: relative;
>+      height: 180px;
>+    }
>+
>+    .position-container > * {
>+      position: absolute;
>+      border: 5px solid pink;
>+      width: 50px;
>+    }
>+
>+    .f-a-container {
>+      height: 100%;
>+      box-sizing: border-box;
>+    }
>+
>+    .fill-available {
>+      height: 586px;
>+      width: 70px;
>+      box-sizing: border-box;
>+    }
>+</style>
>+<div class="container">
>+  <div class="position-container">
>+    <iframe>
>+    </iframe>
>+  </div>
>+  <div class="position-container">
>+    <iframe>
>+    </iframe>
>+  </div>
>+  <div class="position-container">
>+    <iframe>
>+    </iframe>
>+  </div>
>+</div>
>+
>+<div class="container">
>+  <div class="position-container f-a-container">
>+    <iframe class="fill-available">
>+    </iframe>
>+  </div>
>+</div>
>+
>+<div class="container">
>+  <div class="position-container">
>+    <iframe>
>+    </iframe>
>+
>+  </div>
>+  <div class="position-container">
>+    <iframe>
>+    </iframe>
>+
>+  </div>
>+  <div class="position-container">
>+    <iframe>
>+    </iframe>
>+  </div>
>+</div>
>+
>+<div class="container">
>+  <div class="position-container f-a-container">
>+    <iframe class="fill-available">
>+    </iframe>
>+  </div>
>+</div>
>+
>+<div class="container">
>+  <div class="position-container">
>+    <iframe>
>+    </iframe>
>+
>+  </div>
>+  <div class="position-container">
>+    <iframe>
>+    </iframe>
>+
>+  </div>
>+  <div class="position-container">
>+    <iframe>
>+    </iframe>
>+  </div>
>+</div>
>+
>+<div class="container">
>+  <div class="position-container f-a-container">
>+    <iframe class="fill-available">
>+    </iframe>
>+  </div>
>+</div>
>diff --git a/LayoutTests/fast/css-intrinsic-dimensions/height-positioned-replaced.html b/LayoutTests/fast/css-intrinsic-dimensions/height-positioned-replaced.html
>new file mode 100644
>index 0000000000000000000000000000000000000000..e4bca131152e2e9cdfa006a9318bdd09ebe2feaf
>--- /dev/null
>+++ b/LayoutTests/fast/css-intrinsic-dimensions/height-positioned-replaced.html
>@@ -0,0 +1,119 @@
>+<!DOCTYPE html>
>+
>+<style>
>+    @import "resources/height-keyword-classes.css";
>+
>+    body * {
>+      border: 2px solid red;
>+      padding: 5px;
>+      clear: both;
>+    }
>+
>+    .container {
>+      height: 600px;
>+      border-color: blue;
>+
>+      display: inline-block;
>+      width: 100px;
>+    }
>+
>+    .position-container {
>+      border-color: green;
>+      position: relative;
>+      height: 180px;
>+    }
>+
>+    .position-container > * {
>+      position: absolute;
>+      border: 5px solid pink;
>+      width: 50px;
>+    }
>+
>+    .f-a-container {
>+      height: 100%;
>+      box-sizing: border-box;
>+    }
>+
>+    .small {
>+      height: 1px;
>+    }
>+
>+    .big {
>+      height: 300px;
>+    }
>+
>+    .really-big {
>+      height: 1000px;
>+    }
>+</style>
>+<div class="container">
>+  <div class="position-container">
>+    <iframe class="min-content">
>+    </iframe>
>+  </div>
>+  <div class="position-container">
>+    <iframe class="max-content">
>+    </iframe>
>+  </div>
>+  <div class="position-container">
>+    <iframe class="fit-content">
>+    </iframe>
>+  </div>
>+</div>
>+
>+<div class="container">
>+  <div class="position-container f-a-container">
>+    <iframe class="fill-available">
>+    </iframe>
>+  </div>
>+</div>
>+
>+<div class="container">
>+  <div class="position-container">
>+    <iframe class="small min-height-min-content">
>+    </iframe>
>+
>+  </div>
>+  <div class="position-container">
>+    <iframe class="small min-height-max-content">
>+    </iframe>
>+
>+  </div>
>+  <div class="position-container">
>+    <iframe class="small min-height-fit-content">
>+    </iframe>
>+  </div>
>+</div>
>+
>+<div class="container">
>+  <div class="position-container f-a-container">
>+    <iframe class="small min-height-fill-available">
>+    </iframe>
>+  </div>
>+</div>
>+
>+<div class="container">
>+  <div class="position-container">
>+    <iframe class="big max-height-min-content">
>+    </iframe>
>+
>+  </div>
>+  <div class="position-container">
>+    <iframe class="big max-height-max-content">
>+    </iframe>
>+
>+  </div>
>+  <div class="position-container">
>+    <iframe class="big max-height-fit-content">
>+    </iframe>
>+  </div>
>+</div>
>+
>+<div class="container">
>+  <div class="position-container f-a-container">
>+    <iframe class="really-big max-height-fill-available">
>+    </iframe>
>+  </div>
>+</div>
>diff --git a/LayoutTests/fast/css-intrinsic-dimensions/height-positioned.html b/LayoutTests/fast/css-intrinsic-dimensions/height-positioned.html
>new file mode 100644
>index 0000000000000000000000000000000000000000..a749df6962dbbf7c2eb0c9dc582f907064b48797
>--- /dev/null
>+++ b/LayoutTests/fast/css-intrinsic-dimensions/height-positioned.html
>@@ -0,0 +1,129 @@
>+<!DOCTYPE html>
>+
>+<style>
>+    @import "resources/height-keyword-classes.css";
>+
>+    body * {
>+      border: 2px solid red;
>+      padding: 5px;
>+      clear: both;
>+    }
>+
>+    .container {
>+      height: 400px;
>+      border-color: blue;
>+
>+      display: inline-block;
>+      width: 100px;
>+    }
>+
>+    .position-container {
>+      border-color: green;
>+      position: relative;
>+      height: 100px;
>+    }
>+
>+    .position-container > * {
>+      position: absolute;
>+    }
>+
>+    .f-a-container {
>+      height: 100%;
>+      box-sizing: border-box;
>+    }
>+
>+    .small {
>+      height: 1px;
>+    }
>+
>+    .big {
>+      height: 200px;
>+    }
>+
>+    .really-big {
>+      height: 1000px;
>+    }
>+</style>
>+<div class="container">
>+  <div class="position-container">
>+    <div class="min-content">
>+      height: min-content<br>on this box.
>+    </div>
>+  </div>
>+  <div class="position-container">
>+    <div class="max-content">
>+      height: max-content<br>on this box.
>+    </div>
>+  </div>
>+  <div class="position-container">
>+    <div class="fit-content">
>+      height: fit-content<br>on this box.
>+    </div>
>+  </div>
>+</div>
>+
>+<div class="container">
>+  <div class="position-container f-a-container">
>+    <div class="fill-available">
>+      height: fill-available<br> on this box.
>+    </div>
>+  </div>
>+</div>
>+
>+<div class="container">
>+  <div class="position-container">
>+    <div class="small min-height-min-content">
>+      min-height: min-content<br>on this box.
>+    </div>
>+
>+  </div>
>+  <div class="position-container">
>+    <div class="small min-height-max-content">
>+      min-height: max-content<br>on this box.
>+    </div>
>+
>+  </div>
>+  <div class="position-container">
>+    <div class="small min-height-fit-content">
>+      min-height: fit-content<br>on this box.
>+    </div>
>+  </div>
>+</div>
>+
>+<div class="container">
>+  <div class="position-container f-a-container">
>+    <div class="small min-height-fill-available">
>+      min-height: fill-available<br> on this box.
>+    </div>
>+  </div>
>+</div>
>+
>+<div class="container">
>+  <div class="position-container">
>+    <div class="big max-height-min-content">
>+      max-height: min-content<br>on this box.
>+    </div>
>+
>+  </div>
>+  <div class="position-container">
>+    <div class="big max-height-max-content">
>+      max-height: max-content<br>on this box.
>+    </div>
>+
>+  </div>
>+  <div class="position-container">
>+    <div class="big max-height-fit-content">
>+      max-height: fit-content<br>on this box.
>+    </div>
>+  </div>
>+</div>
>+
>+<div class="container">
>+  <div class="position-container f-a-container">
>+    <div class="really-big max-height-fill-available">
>+      max-height: fill-available<br> on this box.
>+    </div>
>+  </div>
>+</div>
>diff --git a/LayoutTests/fast/css-intrinsic-dimensions/height-property-value-expected.txt b/LayoutTests/fast/css-intrinsic-dimensions/height-property-value-expected.txt
>index 107443f595d33d7690088f48bda6ec8e682b6619..2f99cec17a07eff8824912b928bd7032ee0c3dbf 100644
>--- a/LayoutTests/fast/css-intrinsic-dimensions/height-property-value-expected.txt
>+++ b/LayoutTests/fast/css-intrinsic-dimensions/height-property-value-expected.txt
>@@ -1,35 +1,20 @@
>-Tests that the height keywords are not exposed yet.
>+Tests that the height keywords are parsed.
> 
> On success, you will see a series of "PASS" messages, followed by "TEST COMPLETE".
> 
> 
>-PASS divs[i].style.height is ""
>-PASS divs[i].style.minHeight is ""
>-PASS divs[i].style.maxHeight is ""
>-PASS divs[i].style.height is ""
>-PASS divs[i].style.minHeight is ""
>-PASS divs[i].style.maxHeight is ""
>-PASS divs[i].style.height is ""
>-PASS divs[i].style.minHeight is ""
>-PASS divs[i].style.maxHeight is ""
>-PASS divs[i].style.height is ""
>-PASS divs[i].style.minHeight is ""
>-PASS divs[i].style.maxHeight is ""
>-PASS divs[i].style.height is ""
>-PASS divs[i].style.minHeight is ""
>-PASS divs[i].style.maxHeight is ""
>-PASS div.style.height is ""
>-PASS div.style.minHeight is ""
>-PASS div.style.maxHeight is ""
>-PASS div.style.height is ""
>-PASS div.style.minHeight is ""
>-PASS div.style.maxHeight is ""
>-PASS div.style.height is ""
>-PASS div.style.minHeight is ""
>-PASS div.style.maxHeight is ""
>-PASS div.style.height is ""
>-PASS div.style.minHeight is ""
>-PASS div.style.maxHeight is ""
>+PASS div.style.height is "-webkit-min-content"
>+PASS div.style.minHeight is "-webkit-min-content"
>+PASS div.style.maxHeight is "-webkit-min-content"
>+PASS div.style.height is "-webkit-max-content"
>+PASS div.style.minHeight is "-webkit-max-content"
>+PASS div.style.maxHeight is "-webkit-max-content"
>+PASS div.style.height is "-webkit-fill-available"
>+PASS div.style.minHeight is "-webkit-fill-available"
>+PASS div.style.maxHeight is "-webkit-fill-available"
>+PASS div.style.height is "-webkit-fit-content"
>+PASS div.style.minHeight is "-webkit-fit-content"
>+PASS div.style.maxHeight is "-webkit-fit-content"
> PASS successfullyParsed is true
> 
> TEST COMPLETE
>diff --git a/LayoutTests/fast/css-intrinsic-dimensions/height-property-value.html b/LayoutTests/fast/css-intrinsic-dimensions/height-property-value.html
>index 145cd21546d6eceda8e61421f4602e70ca23e608..9fa7ff04b9bb8d70226e67874a231eccb0688b3c 100644
>--- a/LayoutTests/fast/css-intrinsic-dimensions/height-property-value.html
>+++ b/LayoutTests/fast/css-intrinsic-dimensions/height-property-value.html
>@@ -4,22 +4,22 @@
> -->
> <script src="../../resources/js-test-pre.js"></script>
> 
>-<div style="height: -webkit-min-content; min-height: -webkit-min-content; max-height: -webkit-min-content;"></div>
>-<div style="height: -webkit-max-content; min-height: -webkit-max-content; max-height: -webkit-max-content;"></div>
>-<div style="height: -webkit-fill-available; min-height: -webkit-fill-available; max-height: -webkit-fill-available;"></div>
>-<div style="height: -webkit-fit-content; min-height: -webkit-fit-content; max-height: -webkit-fit-content;"></div>
>+<div style="height: -webkit-min-content; min-height: -webkit-min-content; max-height: -webkit-min-content;" expected-data="min-content"></div>
>+<div style="height: -webkit-max-content; min-height: -webkit-max-content; max-height: -webkit-max-content;" expected-data="max-content"></div>
>+<div style="height: -webkit-fill-available; min-height: -webkit-fill-available; max-height: -webkit-fill-available;" expected-data="fill-available"></div>
>+<div style="height: -webkit-fit-content; min-height: -webkit-fit-content; max-height: -webkit-fit-content;" expected-data="fit-content"></div>
> 
> <script>
>-    description('Tests that the height keywords are not exposed yet.');
>+    description('Tests that the height keywords are parsed.');
>+    var PREFIX = '-webkit-';
> 
>-    var divs = document.querySelectorAll('div');
>+    var divs = document.querySelectorAll('div.expected-data');
>     for (var i = 0; i < divs.length; ++i) {
>-        shouldBeEmptyString('divs[i].style.height');
>-        shouldBeEmptyString('divs[i].style.minHeight');
>-        shouldBeEmptyString('divs[i].style.maxHeight');
>+        shouldBe('divs[i].style.height', 'PREFIX + divs[i].getAttribute("expected-data")');
>+        shouldBe('divs[i].style.minHeight', 'PREFIX + divs[i].getAttribute("expected-data")');
>+        shouldBe('divs[i].style.maxHeight', 'PREFIX + divs[i].getAttribute("expected-data")');
>     }
> 
>-    var PREFIX = '-webkit-';
>     var KEYWORDS = ['min-content', 'max-content', 'fill-available',  'fit-content'];
>     var div;
> 
>@@ -28,9 +28,9 @@
>         div.style.height = PREFIX + keyword;
>         div.style.minHeight = PREFIX + keyword;
>         div.style.maxHeight = PREFIX + keyword;
>-        shouldBeEmptyString('div.style.height');
>-        shouldBeEmptyString('div.style.minHeight');
>-        shouldBeEmptyString('div.style.maxHeight');
>+        shouldBe('div.style.height', '"' + PREFIX + keyword + '"');
>+        shouldBe('div.style.minHeight', '"' + PREFIX + keyword + '"');
>+        shouldBe('div.style.maxHeight', '"' + PREFIX + keyword + '"');
>     });
> </script>
> 
>diff --git a/LayoutTests/fast/css-intrinsic-dimensions/height-property-value.html.orig b/LayoutTests/fast/css-intrinsic-dimensions/height-property-value.html.orig
>new file mode 100644
>index 0000000000000000000000000000000000000000..145cd21546d6eceda8e61421f4602e70ca23e608
>--- /dev/null
>+++ b/LayoutTests/fast/css-intrinsic-dimensions/height-property-value.html.orig
>@@ -0,0 +1,37 @@
>+<!doctype html>
>+
>+<script src="../../resources/js-test-pre.js"></script>
>+
>+<div style="height: -webkit-min-content; min-height: -webkit-min-content; max-height: -webkit-min-content;"></div>
>+<div style="height: -webkit-max-content; min-height: -webkit-max-content; max-height: -webkit-max-content;"></div>
>+<div style="height: -webkit-fill-available; min-height: -webkit-fill-available; max-height: -webkit-fill-available;"></div>
>+<div style="height: -webkit-fit-content; min-height: -webkit-fit-content; max-height: -webkit-fit-content;"></div>
>+
>+<script>
>+    description('Tests that the height keywords are not exposed yet.');
>+
>+    var divs = document.querySelectorAll('div');
>+    for (var i = 0; i < divs.length; ++i) {
>+        shouldBeEmptyString('divs[i].style.height');
>+        shouldBeEmptyString('divs[i].style.minHeight');
>+        shouldBeEmptyString('divs[i].style.maxHeight');
>+    }
>+
>+    var PREFIX = '-webkit-';
>+    var KEYWORDS = ['min-content', 'max-content', 'fill-available',  'fit-content'];
>+    var div;
>+
>+    KEYWORDS.forEach(function(keyword) {
>+        div = document.createElement('div');
>+        div.style.height = PREFIX + keyword;
>+        div.style.minHeight = PREFIX + keyword;
>+        div.style.maxHeight = PREFIX + keyword;
>+        shouldBeEmptyString('div.style.height');
>+        shouldBeEmptyString('div.style.minHeight');
>+        shouldBeEmptyString('div.style.maxHeight');
>+    });
>+</script>
>+
>+<script src="../../resources/js-test-post.js"></script>
>diff --git a/LayoutTests/fast/css-intrinsic-dimensions/height-replaced-expected.html b/LayoutTests/fast/css-intrinsic-dimensions/height-replaced-expected.html
>new file mode 100644
>index 0000000000000000000000000000000000000000..ea6fb393d83a2e59b18e675686f66c9b60cff98e
>--- /dev/null
>+++ b/LayoutTests/fast/css-intrinsic-dimensions/height-replaced-expected.html
>@@ -0,0 +1,85 @@
>+<!DOCTYPE html>
>+<style>
>+    body * {
>+        border: 2px solid red;
>+        padding: 5px;
>+        clear: both;
>+    }
>+
>+    .container {
>+        height: 500px;
>+        border-color: blue;
>+
>+        display: inline-block;
>+        width: 100px;
>+    }
>+
>+    iframe {
>+      width: 50px;
>+    }
>+
>+    .fill-available {
>+      height: 100%;
>+      width: 64px;
>+      box-sizing: border-box;
>+    }
>+</style>
>+<div class="container">
>+  <iframe>
>+    height: min-content<br>on this box.
>+  </iframe>
>+
>+  <iframe>
>+    height: max-content<br>on this box.
>+  </iframe>
>+
>+  <iframe>
>+    height: fit-content<br>on this box.
>+  </iframe>
>+</div>
>+
>+<div class="container">
>+  <iframe class="fill-available">
>+    height: fill-available<br> on this box.
>+  </iframe>
>+</div>
>+
>+<div class="container">
>+  <iframe>
>+    min-height: min-content<br>on this box.
>+  </iframe>
>+
>+  <iframe>
>+    min-height: max-content<br>on this box.
>+  </iframe>
>+
>+  <iframe>
>+    min-height: fit-content<br>on this box.
>+  </iframe>
>+</div>
>+
>+<div class="container">
>+  <iframe class="fill-available">
>+    min-height: fill-available<br> on this box.
>+  </iframe>
>+</div>
>+
>+<div class="container">
>+  <iframe>
>+    max-height: min-content<br>on this box.
>+  </iframe>
>+
>+  <iframe>
>+    max-height: max-content<br>on this box.
>+  </iframe>
>+
>+  <iframe>
>+    max-height: fit-content<br>on this box.
>+  </iframe>
>+</div>
>+
>+<div class="container">
>+  <iframe class="fill-available">
>+    max-height: fill-available<br> on this box.
>+  </iframe>
>+</div>
>diff --git a/LayoutTests/fast/css-intrinsic-dimensions/height-replaced.html b/LayoutTests/fast/css-intrinsic-dimensions/height-replaced.html
>new file mode 100644
>index 0000000000000000000000000000000000000000..596407a5b9d944cd87c3969bba4a846346b07af6
>--- /dev/null
>+++ b/LayoutTests/fast/css-intrinsic-dimensions/height-replaced.html
>@@ -0,0 +1,84 @@
>+<!DOCTYPE html>
>+
>+<style>
>+    @import "resources/height-keyword-classes.css";
>+
>+    body * {
>+        border: 2px solid red;
>+        padding: 5px;
>+        clear: both;
>+    }
>+
>+    .container {
>+        height: 500px;
>+        border-color: blue;
>+
>+        display: inline-block;
>+        width: 100px;
>+    }
>+
>+    iframe {
>+      width: 50px;
>+    }
>+
>+    .small {
>+      height: 1px;
>+    }
>+
>+    .big {
>+      height: 300px;
>+    }
>+
>+    .really-big {
>+      height: 1000px;
>+    }
>+</style>
>+<div class="container">
>+  <iframe class="min-content">
>+  </iframe>
>+
>+  <iframe class="max-content">
>+  </iframe>
>+
>+  <iframe class="fit-content">
>+  </iframe>
>+</div>
>+
>+<div class="container">
>+  <iframe class="fill-available">
>+  </iframe>
>+</div>
>+
>+<div class="container">
>+  <iframe class="small min-height-min-content">
>+  </iframe>
>+
>+  <iframe class="small min-height-max-content">
>+  </iframe>
>+
>+  <iframe class="small min-height-fit-content">
>+  </iframe>
>+</div>
>+
>+<div class="container">
>+  <iframe class="small min-height-fill-available">
>+  </iframe>
>+</div>
>+
>+<div class="container">
>+  <iframe class="big max-height-min-content">
>+  </iframe>
>+
>+  <iframe class="big max-height-max-content">
>+  </iframe>
>+
>+  <iframe class="big max-height-fit-content">
>+  </iframe>
>+</div>
>+
>+<div class="container">
>+  <iframe class="really-big max-height-fill-available">
>+  </iframe>
>+</div>
>diff --git a/LayoutTests/fast/css-intrinsic-dimensions/height-tables-collapsed-expected.html b/LayoutTests/fast/css-intrinsic-dimensions/height-tables-collapsed-expected.html
>new file mode 100644
>index 0000000000000000000000000000000000000000..5ebfbc5ddc202f7658d2d44259097ea140514d7d
>--- /dev/null
>+++ b/LayoutTests/fast/css-intrinsic-dimensions/height-tables-collapsed-expected.html
>@@ -0,0 +1,36 @@
>+<!DOCTYPE html>
>+
>+<style>
>+  .item { height: 50px; width: 50px; border: 1px solid blue; }
>+
>+  .container { height: 100px; border: 5px solid pink; }
>+  table { border: 2px solid red; border-collapse: collapse; }
>+  td { border: 2px solid green; }
>+</style>
>+
>+<table>
>+  <td>
>+    <div class="item"></div>
>+  </td>
>+</table>
>+
>+<table>
>+  <td>
>+    <div class="item"></div>
>+  </td>
>+</table>
>+
>+<div class="container">
>+  <table style="height: 100%; box-sizing: border-box;">
>+    <td>
>+      <div class="item"></div>
>+    </td>
>+  </table>
>+</div>
>+
>+
>+<table class="container">
>+  <td style="height: 79px;">
>+    <div class="item"></div>
>+  </td>
>+</table>
>diff --git a/LayoutTests/fast/css-intrinsic-dimensions/height-tables-collapsed.html b/LayoutTests/fast/css-intrinsic-dimensions/height-tables-collapsed.html
>new file mode 100644
>index 0000000000000000000000000000000000000000..596a5d3460c9d5d7d915717656633fa4c3f30d7f
>--- /dev/null
>+++ b/LayoutTests/fast/css-intrinsic-dimensions/height-tables-collapsed.html
>@@ -0,0 +1,40 @@
>+<!DOCTYPE html>
>+
>+<style>
>+  @import "resources/height-keyword-classes.css";
>+
>+  .small { height: 1px; }
>+  .big { height: 300px; }
>+  .item { height: 50px; width: 50px; border: 1px solid blue; }
>+
>+  .container { height: 100px; border: 5px solid pink; }
>+  table { border: 2px solid red; border-collapse: collapse; }
>+  td { border: 2px solid green; }
>+</style>
>+
>+<table class="big max-height-min-content">
>+  <td>
>+    <div class="item"></div>
>+  </td>
>+</table>
>+
>+<table>
>+  <td class="small min-height-min-content">
>+    <div class="item"></div>
>+  </td>
>+</table>
>+
>+<div class="container">
>+  <table class="small min-height-fill-available">
>+    <td>
>+      <div class="item"></div>
>+    </td>
>+  </table>
>+</div>
>+
>+
>+<table class="container">
>+  <td class="small min-height-fill-available">
>+    <div class="item"></div>
>+  </td>
>+</table>
>diff --git a/LayoutTests/fast/css-intrinsic-dimensions/height-tables-expected.html b/LayoutTests/fast/css-intrinsic-dimensions/height-tables-expected.html
>new file mode 100644
>index 0000000000000000000000000000000000000000..fa27589ecbfc28ce127ae3816a4629d9637535dd
>--- /dev/null
>+++ b/LayoutTests/fast/css-intrinsic-dimensions/height-tables-expected.html
>@@ -0,0 +1,36 @@
>+<!DOCTYPE html>
>+
>+<style>
>+  .item { height: 50px; width: 50px; border: 1px solid blue; }
>+
>+  .container { height: 100px; border: 5px solid pink; }
>+  table { border: 2px solid red; }
>+  td { border: 2px solid green; }
>+</style>
>+
>+<table>
>+  <td>
>+    <div class="item"></div>
>+  </td>
>+</table>
>+
>+<table>
>+  <td>
>+    <div class="item"></div>
>+  </td>
>+</table>
>+
>+<div class="container">
>+  <table style="height: 100%; box-sizing: border-box;">
>+    <td>
>+      <div class="item"></div>
>+    </td>
>+  </table>
>+</div>
>+
>+
>+<table class="container">
>+  <td style="height: 79px;">
>+    <div class="item"></div>
>+  </td>
>+</table>
>diff --git a/LayoutTests/fast/css-intrinsic-dimensions/height-tables.html b/LayoutTests/fast/css-intrinsic-dimensions/height-tables.html
>new file mode 100644
>index 0000000000000000000000000000000000000000..99c922e63df19ffdc59d98d78f408def4a79a618
>--- /dev/null
>+++ b/LayoutTests/fast/css-intrinsic-dimensions/height-tables.html
>@@ -0,0 +1,40 @@
>+<!DOCTYPE html>
>+
>+<style>
>+  @import "resources/height-keyword-classes.css";
>+
>+  .small { height: 1px; }
>+  .big { height: 300px; }
>+  .item { height: 50px; width: 50px; border: 1px solid blue; }
>+
>+  .container { height: 100px; border: 5px solid pink; }
>+  table { border: 2px solid red; }
>+  td { border: 2px solid green; }
>+</style>
>+
>+<table class="big max-height-min-content">
>+  <td>
>+    <div class="item"></div>
>+  </td>
>+</table>
>+
>+<table>
>+  <td class="small min-height-min-content">
>+    <div class="item"></div>
>+  </td>
>+</table>
>+
>+<div class="container">
>+  <table class="small min-height-fill-available">
>+    <td>
>+      <div class="item"></div>
>+    </td>
>+  </table>
>+</div>
>+
>+
>+<table class="container">
>+  <td class="small min-height-fill-available">
>+    <div class="item"></div>
>+  </td>
>+</table>
>diff --git a/LayoutTests/fast/css-intrinsic-dimensions/height.html b/LayoutTests/fast/css-intrinsic-dimensions/height.html
>new file mode 100644
>index 0000000000000000000000000000000000000000..35ff3b6386faf822e8677794d962c8fb177218ad
>--- /dev/null
>+++ b/LayoutTests/fast/css-intrinsic-dimensions/height.html
>@@ -0,0 +1,92 @@
>+<!DOCTYPE html>
>+
>+<style>
>+    @import "resources/height-keyword-classes.css";
>+
>+    body * {
>+        border: 2px solid red;
>+        padding: 5px;
>+        clear: both;
>+    }
>+
>+    .container {
>+        height: 300px;
>+        border-color: blue;
>+
>+        display: inline-block;
>+        width: 100px;
>+    }
>+
>+    .small {
>+      height: 1px;
>+    }
>+
>+    .big {
>+      height: 100px;
>+    }
>+
>+    .really-big {
>+      height: 1000px;
>+    }
>+</style>
>+<div class="container">
>+  <div class="min-content">
>+    height: min-content<br>on this box.
>+  </div>
>+
>+  <div class="max-content">
>+    height: max-content<br>on this box.
>+  </div>
>+
>+  <div class="fit-content">
>+    height: fit-content<br>on this box.
>+  </div>
>+</div>
>+
>+<div class="container">
>+  <div class="fill-available">
>+    height: fill-available<br> on this box.
>+  </div>
>+</div>
>+
>+<div class="container">
>+  <div class="small min-height-min-content">
>+    min-height: min-content<br>on this box.
>+  </div>
>+
>+  <div class="small min-height-max-content">
>+    min-height: max-content<br>on this box.
>+  </div>
>+
>+  <div class="small min-height-fit-content">
>+    min-height: fit-content<br>on this box.
>+  </div>
>+</div>
>+
>+<div class="container">
>+  <div class="small min-height-fill-available">
>+    min-height: fill-available<br> on this box.
>+  </div>
>+</div>
>+
>+<div class="container">
>+  <div class="big max-height-min-content">
>+    max-height: min-content<br>on this box.
>+  </div>
>+
>+  <div class="big max-height-max-content">
>+    max-height: max-content<br>on this box.
>+  </div>
>+
>+  <div class="big max-height-fit-content">
>+    max-height: fit-content<br>on this box.
>+  </div>
>+</div>
>+
>+<div class="container">
>+  <div class="really-big max-height-fill-available">
>+    max-height: fill-available<br> on this box.
>+  </div>
>+</div>
>diff --git a/LayoutTests/fast/css-intrinsic-dimensions/resources/height-keyword-classes.css b/LayoutTests/fast/css-intrinsic-dimensions/resources/height-keyword-classes.css
>new file mode 100644
>index 0000000000000000000000000000000000000000..9cbfaa149811fc67873faaf4bcff60f9ed105d55
>--- /dev/null
>+++ b/LayoutTests/fast/css-intrinsic-dimensions/resources/height-keyword-classes.css
>@@ -0,0 +1,77 @@
>+/* In the current spec for heights, min-content, max-content and fit-content are
>+ * equivalent.
>+ * fill-available is different and similar to widths.
>+ */
>+
>+.min-content {
>+    height: -webkit-min-content;
>+    height: -moz-min-content;
>+    height: min-content;
>+}
>+
>+.max-content {
>+    height: -webkit-max-content;
>+    height: -moz-max-content;
>+    height: max-content;
>+}
>+
>+.fill-available {
>+    height: -webkit-fill-available;
>+    /* Firefox is missing the fill- prefix because they followed an older spec */
>+    height: -moz-available;
>+    height: fill-available;
>+}
>+
>+.fit-content {
>+    height: -webkit-fit-content;
>+    height: -moz-fit-content;
>+    height: fit-content;
>+}
>+
>+.max-height-min-content {
>+    max-height: -webkit-min-content;
>+    max-height: -moz-min-content;
>+    max-height: min-content;
>+}
>+
>+.max-height-max-content {
>+    max-height: -webkit-max-content;
>+    max-height: -moz-max-content;
>+    max-height: max-content;
>+}
>+
>+.max-height-fill-available {
>+    max-height: -webkit-fill-available;
>+    max-height: -moz-available;
>+    max-height: fill-available;
>+}
>+
>+.max-height-fit-content {
>+    max-height: -webkit-fit-content;
>+    max-height: -moz-fit-content;
>+    max-height: fit-content;
>+}
>+
>+.min-height-min-content {
>+    min-height: -webkit-min-content;
>+    min-height: -moz-min-content;
>+    min-height: min-content;
>+}
>+
>+.min-height-max-content {
>+    min-height: -webkit-max-content;
>+    min-height: -moz-max-content;
>+    min-height: max-content;
>+}
>+
>+.min-height-fill-available {
>+    min-height: -webkit-fill-available;
>+    min-height: -moz-available;
>+    min-height: fill-available;
>+}
>+
>+.min-height-fit-content {
>+    min-height: -webkit-fit-content;
>+    min-height: -moz-fit-content;
>+    min-height: fit-content;
>+}

Flags:

darin: review+

Actions: View | Formatted Diff | Diff

Attachments on bug 113610: 254721