WebKit Bugzilla
New
Browse
Search+
Log In
×
Sign in with GitHub
or
Remember my login
Create Account
·
Forgot Password
Forgotten password account recovery
[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:
Patch
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> >+<!-- >+All divs here should shrinkwrap to fit their content, except for fill-available >+--> >+<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> >+<!-- >+iframes have an intrinsic size of 300x150 >+--> >+<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> >+<!-- >+iframes have an intrinsic size of 300x150 >+--> >+<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> >+<!-- >+All divs here should shrinkwrap to fit their content, except for fill-available >+--> >+<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> >+<!-- >+ Tests that the height keywords are not respected by the parser yet. >+--> >+<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> >+<!-- >+All divs here should shrinkwrap to fit their content, except for fill-available >+--> >+<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> >+<!-- >+All divs here should shrinkwrap to fit their content, except for fill-available >+--> >+<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; >+}
You cannot view the attachment while viewing its details because your browser does not support IFRAMEs.
View the attachment on a separate page
.
View Attachment As Diff
View Attachment As Raw
Flags:
darin
:
review+
Actions:
View
|
Formatted Diff
|
Diff
Attachments on
bug 113610
: 254721