Source/WebCore/ChangeLog

 12013-09-16 Sergio Villar Senin <svillar@igalia.com>
 2
 3 [CSS Grid Layout] Implement support for <flex>
 4 https://bugs.webkit.org/show_bug.cgi?id=115362
 5
 6 Reviewed by NOBODY (OOPS!).
 7
 8 From Blink r149134, r149480, r149532, r150287 and r156127 by <jchaffraix@chromium.org>
 9 From Blink r157820 by <svillar@igalia.com>
 10
 11 Added support for flexible lengths ('fr' unit) in CSS Grid Layout
 12 code. This requires the addition of GridLength class to
 13 encapsulate the knowledge of <flex> to the grid layout code.
 14
 15 Also updated the algorithm that computes the layout. It increases
 16 the value of 1fr based on the grid tracks' usedBreath to fraction
 17 ratio (called normalizedFractionValue). This enables increasing
 18 the fraction value while updating the available space to account
 19 for processed grid tracks. The algorithm stops when we run out of
 20 grid tracks or available space (one grid item has an intrinsic
 21 size too big). This matches the specs to the letter for the known
 22 available space case (both the unknown case and the interaction
 23 with 'span' are left out of this patch).
 24
 25 Tests: fast/css-grid-layout/flex-and-minmax-content-resolution-columns.html
 26 fast/css-grid-layout/flex-and-minmax-content-resolution-rows.html
 27 fast/css-grid-layout/flex-content-resolution-columns.html
 28 fast/css-grid-layout/flex-content-resolution-rows.html
 29
 30 * GNUmakefile.list.am: Added GridLength.h to the build system.
 31 * Target.pri: Ditto.
 32 * WebCore.vcxproj/WebCore.vcxproj: Ditto.
 33 * WebCore.vcxproj/WebCore.vcxproj.filters: Ditto.
 34 * WebCore.xcodeproj/project.pbxproj: Ditto.
 35 * css/CSSComputedStyleDeclaration.cpp:
 36 (WebCore::valueForGridTrackBreadth): Replace Length by GridLength.
 37 * css/CSSGrammar.y.in: Added FR support.
 38 * css/CSSParser.cpp: Ditto.
 39 (WebCore::CSSParser::parseGridBreadth):
 40 (WebCore::CSSParser::detectNumberToken):
 41 * css/CSSParserValues.cpp: Added FR support.
 42 (WebCore::CSSParserValue::createCSSValue):
 43 * css/CSSParserValues.h:
 44 (WebCore::CSSParserString::operator[]):
 45 (WebCore::CSSParserString::equalIgnoringCase):
 46 * css/CSSPrimitiveValue.cpp: Added FR support.
 47 (WebCore::isValidCSSUnitTypeForDoubleConversion):
 48 (WebCore::CSSPrimitiveValue::cleanup):
 49 (WebCore::CSSPrimitiveValue::customCSSText):
 50 (WebCore::CSSPrimitiveValue::cloneForCSSOM):
 51 (WebCore::CSSPrimitiveValue::equals):
 52 * css/CSSPrimitiveValue.h: Added a couple of missing const.
 53 (WebCore::CSSPrimitiveValue::isFlex):
 54 * css/StyleResolver.cpp: Added FR support.
 55 (WebCore::createGridTrackBreadth):
 56 (WebCore::createGridTrackSize):
 57 * rendering/RenderGrid.cpp:
 58 (WebCore::GridTrackForNormalization::GridTrackForNormalization):
 59 New helper struct to ease the computation of track breadths with
 60 flexible lengths.
 61 (WebCore::GridTrackForNormalization::operator=):
 62 (WebCore::RenderGrid::computePreferredTrackWidth): Replaced Length by GridLength.
 63 (WebCore::RenderGrid::computedUsedBreadthOfGridTracks): Grow grid lines
 64 having a fraction as the MaxTrackSizingFunction.
 65 (WebCore::RenderGrid::computeUsedBreadthOfMinLength): Replaced Length by GridLength.
 66 (WebCore::RenderGrid::computeUsedBreadthOfMaxLength): Ditto.
 67 (WebCore::sortByGridNormalizedFlexValue):
 68 (WebCore::RenderGrid::computeNormalizedFractionBreadth): Increase
 69 the fraction value while updating the available space to account
 70 for processed grid tracks.
 71 (WebCore::RenderGrid::resolveContentBasedTrackSizingFunctions):
 72 (WebCore::RenderGrid::distributeSpaceToTracks): Never shrink track sizes.
 73 (WebCore::RenderGrid::tracksAreWiderThanMinTrackBreadth):
 74 * rendering/RenderGrid.h:
 75 * rendering/style/GridLength.h: Added.
 76 (WebCore::GridLength::GridLength):
 77 (WebCore::GridLength::isLength):
 78 (WebCore::GridLength::isFlex):
 79 (WebCore::GridLength::length):
 80 (WebCore::GridLength::flex):
 81 (WebCore::GridLength::setFlex):
 82 (WebCore::GridLength::operator==):
 83 * rendering/style/GridTrackSize.h: Replaced Length by GridLength.
 84 (WebCore::GridTrackSize::length):
 85 (WebCore::GridTrackSize::setLength):
 86 (WebCore::GridTrackSize::minTrackBreadth):
 87 (WebCore::GridTrackSize::maxTrackBreadth):
 88 (WebCore::GridTrackSize::setMinMax):
 89 (WebCore::GridTrackSize::hasMinOrMaxContentMinTrackBreadth):
 90 (WebCore::GridTrackSize::hasMaxContentMinTrackBreadth):
 91 (WebCore::GridTrackSize::hasMinOrMaxContentMaxTrackBreadth):
 92 (WebCore::GridTrackSize::hasMaxContentMaxTrackBreadth):
 93
1942013-09-15 Andreas Kling <akling@apple.com>
295
396 CTTE: RenderCombineText always has a Text node.

Source/WebCore/GNUmakefile.list.am

@@webcore_sources += \
46064606 Source/WebCore/rendering/style/DataRef.h \
46074607 Source/WebCore/rendering/style/FillLayer.cpp \
46084608 Source/WebCore/rendering/style/FillLayer.h \
 4609 Source/WebCore/rendering/style/GridLength.h \
46094610 Source/WebCore/rendering/style/GridPosition.h \
 4611 Source/WebCore/rendering/style/GridTrackSize.h \
46104612 Source/WebCore/rendering/style/KeyframeList.cpp \
46114613 Source/WebCore/rendering/style/KeyframeList.h \
46124614 Source/WebCore/rendering/style/LineClampValue.h \

@@webcore_sources += \
46704672 Source/WebCore/rendering/style/StyleVariableData.h \
46714673 Source/WebCore/rendering/style/StyleVisualData.cpp \
46724674 Source/WebCore/rendering/style/StyleVisualData.h \
4673  Source/WebCore/rendering/style/GridTrackSize.h \
46744675 Source/WebCore/rendering/TableLayout.h \
46754676 Source/WebCore/rendering/TrailingFloatsRootInlineBox.h \
46764677 Source/WebCore/storage/StorageThread.cpp \

Source/WebCore/Target.pri

@@HEADERS += \
25392539 rendering/style/StyleTransformData.h \
25402540 rendering/style/StyleVariableData.h \
25412541 rendering/style/StyleVisualData.h \
 2542 rendering/style/GridLength.h \
25422543 rendering/style/GridTrackSize.h \
25432544 rendering/style/SVGRenderStyleDefs.h \
25442545 rendering/style/SVGRenderStyle.h \

Source/WebCore/WebCore.vcxproj/WebCore.vcxproj

2011320113 <ClInclude Include="..\rendering\style\CursorList.h" />
2011420114 <ClInclude Include="..\rendering\style\DataRef.h" />
2011520115 <ClInclude Include="..\rendering\style\FillLayer.h" />
 20116 <ClInclude Include="..\rendering\style\GridLength.h" />
2011620117 <ClInclude Include="..\rendering\style\GridPosition.h" />
2011720118 <ClInclude Include="..\rendering\style\GridTrackSize.h" />
2011820119 <ClInclude Include="..\rendering\style\KeyframeList.h" />

Source/WebCore/WebCore.vcxproj/WebCore.vcxproj.filters

98799879 <ClInclude Include="..\rendering\style\FillLayer.h">
98809880 <Filter>rendering\style</Filter>
98819881 </ClInclude>
 9882 <ClInclude Include="..\rendering\style\GridLength.h">
 9883 <Filter>rendering\style</Filter>
 9884 </ClInclude>
98829885 <ClInclude Include="..\rendering\style\GridPosition.h">
98839886 <Filter>rendering\style</Filter>
98849887 </ClInclude>

Source/WebCore/WebCore.xcodeproj/project.pbxproj

34333433 A110DB9D14F5DF8700A03B93 /* StyleGridItemData.cpp in Sources */ = {isa = PBXBuildFile; fileRef = A110DB9C14F5DF8700A03B93 /* StyleGridItemData.cpp */; };
34343434 A120ACA413F998CA00FE4AC7 /* LayoutRepainter.cpp in Sources */ = {isa = PBXBuildFile; fileRef = A120ACA113F9984600FE4AC7 /* LayoutRepainter.cpp */; };
34353435 A12538D413F9B60A00024754 /* LayoutRepainter.h in Headers */ = {isa = PBXBuildFile; fileRef = A120ACA013F9983700FE4AC7 /* LayoutRepainter.h */; settings = {ATTRIBUTES = (Private, ); }; };
 3436 AA279D501B4939EB0105B4D6 /* GridLength.h in Headers */ = {isa = PBXBuildFile; fileRef = AA279D501B4939EB0105B4D6 /* GridLength.h */; settings = {ATTRIBUTES = (Private, ); }; };
34363437 A12705C31656BD6500C2E27C /* GridPosition.h in Headers */ = {isa = PBXBuildFile; fileRef = A12705C21656BD6500C2E27C /* GridPosition.h */; settings = {ATTRIBUTES = (Private, ); }; };
34373438 A12A1050166444FD008FA311 /* GridTrackSize.h in Headers */ = {isa = PBXBuildFile; fileRef = A12A104E166444DC008FA311 /* GridTrackSize.h */; settings = {ATTRIBUTES = (Private, ); }; };
34383439 A136A00C1134DBD200CC8D50 /* XMLHttpRequestProgressEventThrottle.cpp in Sources */ = {isa = PBXBuildFile; fileRef = A136A00A1134DBD200CC8D50 /* XMLHttpRequestProgressEventThrottle.cpp */; };

1002310024 A110DB9C14F5DF8700A03B93 /* StyleGridItemData.cpp */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.cpp.cpp; name = StyleGridItemData.cpp; path = style/StyleGridItemData.cpp; sourceTree = "<group>"; };
1002410025 A120ACA013F9983700FE4AC7 /* LayoutRepainter.h */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.h; path = LayoutRepainter.h; sourceTree = "<group>"; };
1002510026 A120ACA113F9984600FE4AC7 /* LayoutRepainter.cpp */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.cpp.cpp; path = LayoutRepainter.cpp; sourceTree = "<group>"; };
 10027 AA279D501B4939EB0105B4D6 /* GridLength.h */ = {isa = PBXFileReference; fileEncondig = 4; lastKnownFileType = sourcecode.c.h; name = GridLength.h; path = style/GriLength.h; sourceTree = "<group>"; };
1002610028 A12705C21656BD6500C2E27C /* GridPosition.h */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.h; name = GridPosition.h; path = style/GridPosition.h; sourceTree = "<group>"; };
1002710029 A12A104E166444DC008FA311 /* GridTrackSize.h */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.h; name = GridTrackSize.h; path = style/GridTrackSize.h; sourceTree = "<group>"; };
1002810030 A136A00A1134DBD200CC8D50 /* XMLHttpRequestProgressEventThrottle.cpp */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.cpp.cpp; path = XMLHttpRequestProgressEventThrottle.cpp; sourceTree = "<group>"; };

1936719369 BC22746E0E83664500E7F975 /* DataRef.h */,
1936819370 BC5EB69C0E81DAEB00B25965 /* FillLayer.cpp */,
1936919371 BC5EB69D0E81DAEB00B25965 /* FillLayer.h */,
 19372 AA279D501B4939EB0105B4D6 /* GridLength.h */,
1937019373 A12705C21656BD6500C2E27C /* GridPosition.h */,
1937119374 A12A104E166444DC008FA311 /* GridTrackSize.h */,
1937219375 BC5EBA0E0E823E4700B25965 /* KeyframeList.cpp */,

2238122384 0FA24D7A162DF91900A3F4C0 /* GraphicsLayerUpdater.h in Headers */,
2238222385 B2A015AB0AF6CD53006BCE0E /* GraphicsTypes.h in Headers */,
2238322386 77A17A7B12F2890B004E02F6 /* GraphicsTypes3D.h in Headers */,
 22387 AA279D501B4939EB0105B4D6 /* GridLength.h in Headers */,
2238422388 A12705C31656BD6500C2E27C /* GridPosition.h in Headers */,
2238522389 A12A1050166444FD008FA311 /* GridTrackSize.h in Headers */,
2238622390 C50B561712119D23008B46E0 /* GroupSettings.h in Headers */,

Source/WebCore/css/CSSComputedStyleDeclaration.cpp

@@PassRefPtr<CSSValue> ComputedStyleExtractor::valueForFilter(const RenderObject*
10911091}
10921092#endif
10931093
1094 static PassRefPtr<CSSValue> valueForGridTrackBreadth(const Length& trackBreadth, const RenderStyle* style, RenderView *renderView)
 1094static PassRefPtr<CSSValue> valueForGridTrackBreadth(const GridLength& trackBreadth, const RenderStyle* style, RenderView* renderView)
10951095{
1096  if (trackBreadth.isAuto())
 1096 if (!trackBreadth.isLength())
 1097 return cssValuePool().createValue(trackBreadth.flex(), CSSPrimitiveValue::CSS_FR);
 1098
 1099 const Length& trackBreadthLength = trackBreadth.length();
 1100 if (trackBreadthLength.isAuto())
10971101 return cssValuePool().createIdentifierValue(CSSValueAuto);
1098  if (trackBreadth.isViewportPercentage())
1099  return zoomAdjustedPixelValue(valueForLength(trackBreadth, 0, renderView), style);
1100  return zoomAdjustedPixelValueForLength(trackBreadth, style);
 1102 if (trackBreadthLength.isViewportPercentage())
 1103 return zoomAdjustedPixelValue(valueForLength(trackBreadthLength, 0, renderView), style);
 1104 return zoomAdjustedPixelValueForLength(trackBreadthLength, style);
11011105}
11021106
11031107static PassRefPtr<CSSValue> valueForGridTrackSize(const GridTrackSize& trackSize, const RenderStyle* style, RenderView* renderView)

Source/WebCore/css/CSSGrammar.y.in

@@static inline bool isCSSTokenAString(int yytype)
170170%token <number> DPPX
171171%token <number> DPI
172172%token <number> DPCM
 173%token <number> FR
173174
174175%token <string> URI
175176%token <string> FUNCTION

@@unary_term:
15351536 | DPPX { $$.id = CSSValueInvalid; $$.fValue = $1; $$.unit = CSSPrimitiveValue::CSS_DPPX; }
15361537 | DPI { $$.id = CSSValueInvalid; $$.fValue = $1; $$.unit = CSSPrimitiveValue::CSS_DPI; }
15371538 | DPCM { $$.id = CSSValueInvalid; $$.fValue = $1; $$.unit = CSSPrimitiveValue::CSS_DPCM; }
 1539 | FR { $$.id = CSSValueInvalid; $$.fValue = $1; $$.unit = CSSPrimitiveValue::CSS_FR; }
15381540 ;
15391541
15401542function:

Source/WebCore/css/CSSParser.cpp

@@PassRefPtr<CSSPrimitiveValue> CSSParser::parseGridBreadth(CSSParserValue* curren
49694969 if (currentValue->id == CSSValueWebkitMinContent || currentValue->id == CSSValueWebkitMaxContent)
49704970 return cssValuePool().createIdentifierValue(currentValue->id);
49714971
 4972 if (currentValue->unit == CSSPrimitiveValue::CSS_FR) {
 4973 double flexValue = currentValue->fValue;
 4974
 4975 // Fractional unit is a non-negative dimension.
 4976 if (flexValue <= 0)
 4977 return 0;
 4978
 4979 return cssValuePool().createValue(flexValue, CSSPrimitiveValue::CSS_FR);
 4980 }
 4981
49724982 if (!validUnit(currentValue, FNonNeg | FLength | FPercent))
49734983 return 0;
49744984

@@inline void CSSParser::detectNumberToken(CharacterType* type, int length)
1069210702 }
1069310703 return;
1069410704
 10705 case 'f':
 10706 if (length == 2 && isASCIIAlphaCaselessEqual(type[1], 'r'))
 10707 m_token = FR;
 10708 return;
1069510709 case 'g':
1069610710 if (length == 4 && isASCIIAlphaCaselessEqual(type[1], 'r')
1069710711 && isASCIIAlphaCaselessEqual(type[2], 'a') && isASCIIAlphaCaselessEqual(type[3], 'd'))

Source/WebCore/css/CSSParserValues.cpp

@@PassRefPtr<CSSValue> CSSParserValue::createCSSValue()
120120 case CSSPrimitiveValue::CSS_TURN:
121121 case CSSPrimitiveValue::CSS_REMS:
122122 case CSSPrimitiveValue::CSS_CHS:
 123 case CSSPrimitiveValue::CSS_FR:
123124 return CSSPrimitiveValue::create(fValue, primitiveUnit);
124125 case CSSPrimitiveValue::CSS_UNKNOWN:
125126 case CSSPrimitiveValue::CSS_DIMENSION:

Source/WebCore/css/CSSParserValues.h

@@struct CSSParserString {
7777
7878 void lower();
7979
80  UChar operator[](unsigned i)
 80 UChar operator[](unsigned i) const
8181 {
8282 ASSERT_WITH_SECURITY_IMPLICATION(i < m_length);
8383 if (is8Bit())

@@struct CSSParserString {
8585 return m_data.characters16[i];
8686 }
8787
88  bool equalIgnoringCase(const char* str)
 88 bool equalIgnoringCase(const char* str) const
8989 {
9090 if (is8Bit())
9191 return WTF::equalIgnoringCase(str, characters8(), length());

Source/WebCore/css/CSSPrimitiveValue.cpp

@@static inline bool isValidCSSUnitTypeForDoubleConversion(CSSPrimitiveValue::Unit
9494 case CSSPrimitiveValue::CSS_VH:
9595 case CSSPrimitiveValue::CSS_VMIN:
9696 case CSSPrimitiveValue::CSS_VMAX:
 97 case CSSPrimitiveValue::CSS_FR:
9798 return true;
9899 case CSSPrimitiveValue::CSS_ATTR:
99100 case CSSPrimitiveValue::CSS_COUNTER:

@@void CSSPrimitiveValue::cleanup()
473474 case CSS_DPPX:
474475 case CSS_DPI:
475476 case CSS_DPCM:
 477 case CSS_FR:
476478 case CSS_IDENT:
477479 case CSS_RGBCOLOR:
478480 case CSS_DIMENSION:

@@String CSSPrimitiveValue::customCSSText() const
997999 case CSS_TURN:
9981000 text = formatNumber(m_value.num, "turn");
9991001 break;
 1002 case CSS_FR:
 1003 text = formatNumber(m_value.num, "fr");
 1004 break;
10001005 case CSS_DIMENSION:
1001  // FIXME
 1006 // FIXME: We currently don't handle CSS_DIMENSION properly as we don't store
 1007 // the actual dimension, just the numeric value as a string.
10021008 break;
10031009 case CSS_STRING:
10041010 text = quoteCSSStringIfNeeded(m_value.string);

@@PassRefPtr<CSSPrimitiveValue> CSSPrimitiveValue::cloneForCSSOM() const
12981304 case CSS_DPI:
12991305 case CSS_DPCM:
13001306#endif
 1307 case CSS_FR:
13011308 result = CSSPrimitiveValue::create(m_value.num, static_cast<UnitTypes>(m_primitiveUnitType));
13021309 break;
13031310 case CSS_PROPERTY_ID:

@@bool CSSPrimitiveValue::equals(const CSSPrimitiveValue& other) const
13601367 case CSS_VH:
13611368 case CSS_VMIN:
13621369 case CSS_DIMENSION:
 1370 case CSS_FR:
13631371 return m_value.num == other.m_value.num;
13641372 case CSS_PROPERTY_ID:
13651373 return propertyName(m_value.propertyID) == propertyName(other.m_value.propertyID);

Source/WebCore/css/CSSPrimitiveValue.h

@@public:
101101 CSS_DPPX = 30,
102102 CSS_DPI = 31,
103103 CSS_DPCM = 32,
 104 CSS_FR = 33,
104105 CSS_PAIR = 100, // We envision this being exposed as a means of getting computed style values for pairs (border-spacing/radius, background-position, etc.)
105106#if ENABLE(DASHBOARD_SUPPORT)
106107 CSS_DASHBOARD_REGION = 101, // FIXME: Dashboard region should not be a primitive value.

@@public:
205206 bool isViewportPercentageWidth() const { return m_primitiveUnitType == CSS_VW; }
206207 bool isViewportPercentageHeight() const { return m_primitiveUnitType == CSS_VH; }
207208 bool isValueID() const { return m_primitiveUnitType == CSS_VALUE_ID; }
 209 bool isFlex() const { return primitiveType() == CSS_FR; }
208210
209211 static PassRefPtr<CSSPrimitiveValue> createIdentifier(CSSValueID valueID) { return adoptRef(new CSSPrimitiveValue(valueID)); }
210212 static PassRefPtr<CSSPrimitiveValue> createIdentifier(CSSPropertyID propertyID) { return adoptRef(new CSSPrimitiveValue(propertyID)); }

Source/WebCore/css/StyleResolver.cpp

@@bool StyleResolver::useSVGZoomRules()
18931893 return m_state.element() && m_state.element()->isSVGElement();
18941894}
18951895
1896 static bool createGridTrackBreadth(CSSPrimitiveValue* primitiveValue, const StyleResolver::State& state, Length& workingLength)
 1896static bool createGridTrackBreadth(CSSPrimitiveValue* primitiveValue, const StyleResolver::State& state, GridLength& workingLength)
18971897{
18981898 if (primitiveValue->getValueID() == CSSValueWebkitMinContent) {
18991899 workingLength = Length(MinContent);

@@static bool createGridTrackBreadth(CSSPrimitiveValue* primitiveValue, const Styl
19051905 return true;
19061906 }
19071907
 1908 if (primitiveValue->isFlex()) {
 1909 // Fractional unit.
 1910 workingLength.setFlex(primitiveValue->getDoubleValue());
 1911 return true;
 1912 }
 1913
19081914 workingLength = primitiveValue->convertToLength<FixedIntegerConversion | PercentConversion | ViewportPercentageConversion | AutoConversion>(state.style(), state.rootElementStyle(), state.style()->effectiveZoom());
1909  if (workingLength.isUndefined())
 1915 if (workingLength.length().isUndefined())
19101916 return false;
19111917
19121918 if (primitiveValue->isLength())
1913  workingLength.setQuirk(primitiveValue->isQuirkValue());
 1919 workingLength.length().setQuirk(primitiveValue->isQuirkValue());
19141920
19151921 return true;
19161922}

@@static bool createGridTrackSize(CSSValue* value, GridTrackSize& trackSize, const
19231929 CSSPrimitiveValue* primitiveValue = static_cast<CSSPrimitiveValue*>(value);
19241930 Pair* minMaxTrackBreadth = primitiveValue->getPairValue();
19251931 if (!minMaxTrackBreadth) {
1926  Length workingLength;
 1932 GridLength workingLength;
19271933 if (!createGridTrackBreadth(primitiveValue, state, workingLength))
19281934 return false;
19291935

@@static bool createGridTrackSize(CSSValue* value, GridTrackSize& trackSize, const
19311937 return true;
19321938 }
19331939
1934  Length minTrackBreadth;
1935  Length maxTrackBreadth;
 1940 GridLength minTrackBreadth;
 1941 GridLength maxTrackBreadth;
19361942 if (!createGridTrackBreadth(minMaxTrackBreadth->first(), state, minTrackBreadth) || !createGridTrackBreadth(minMaxTrackBreadth->second(), state, maxTrackBreadth))
19371943 return false;
19381944

Source/WebCore/rendering/RenderGrid.cpp

@@public:
6666 LayoutUnit m_maxBreadth;
6767};
6868
 69struct GridTrackForNormalization {
 70 GridTrackForNormalization(const GridTrack& track, double flex)
 71 : m_track(&track)
 72 , m_flex(flex)
 73 , m_normalizedFlexValue(track.m_usedBreadth / flex)
 74 {
 75 }
 76
 77 // Required by std::sort.
 78 GridTrackForNormalization operator=(const GridTrackForNormalization& o)
 79 {
 80 m_track = o.m_track;
 81 m_flex = o.m_flex;
 82 m_normalizedFlexValue = o.m_normalizedFlexValue;
 83 return *this;
 84 }
 85
 86 const GridTrack* m_track;
 87 double m_flex;
 88 LayoutUnit m_normalizedFlexValue;
 89};
 90
6991class RenderGrid::GridIterator {
7092 WTF_MAKE_NONCOPYABLE(GridIterator);
7193public:

@@void RenderGrid::computePreferredLogicalWidths()
228250 setPreferredLogicalWidthsDirty(false);
229251}
230252
231 LayoutUnit RenderGrid::computePreferredTrackWidth(const Length& length, size_t trackIndex) const
 253LayoutUnit RenderGrid::computePreferredTrackWidth(const GridLength& gridLength, size_t trackIndex) const
232254{
 255 if (gridLength.isFlex())
 256 return 0;
 257
 258 const Length& length = gridLength.length();
 259
233260 if (length.isFixed()) {
234261 // Grid areas don't have borders, margins or paddings so we don't need to account for them.
235262 return length.intValue();

@@void RenderGrid::computedUsedBreadthOfGridTracks(TrackSizingDirection direction,
267294 for (size_t i = 0; i < tracks.size(); ++i) {
268295 GridTrack& track = tracks[i];
269296 const GridTrackSize& trackSize = gridTrackSize(direction, i);
270  const Length& minTrackBreadth = trackSize.minTrackBreadth();
271  const Length& maxTrackBreadth = trackSize.maxTrackBreadth();
 297 const GridLength& minTrackBreadth = trackSize.minTrackBreadth();
 298 const GridLength& maxTrackBreadth = trackSize.maxTrackBreadth();
272299
273300 track.m_usedBreadth = computeUsedBreadthOfMinLength(direction, minTrackBreadth);
274  track.m_maxBreadth = computeUsedBreadthOfMaxLength(direction, maxTrackBreadth);
 301 track.m_maxBreadth = computeUsedBreadthOfMaxLength(direction, maxTrackBreadth, track.m_usedBreadth);
275302
276303 track.m_maxBreadth = std::max(track.m_maxBreadth, track.m_usedBreadth);
277304 }

@@void RenderGrid::computedUsedBreadthOfGridTracks(TrackSizingDirection direction,
288315 tracksForDistribution[i] = tracks.data() + i;
289316
290317 distributeSpaceToTracks(tracksForDistribution, 0, &GridTrack::usedBreadth, &GridTrack::growUsedBreadth, availableLogicalSpace);
 318
 319 // 4. Grow all Grid tracks having a fraction as the MaxTrackSizingFunction.
 320
 321 // FIXME: Handle the case where RemainingSpace is not defined.
 322 double normalizedFractionBreadth = computeNormalizedFractionBreadth(tracks, direction, availableLogicalSpace);
 323 for (size_t i = 0; i < tracksSize; ++i) {
 324 const GridTrackSize& trackSize = gridTrackSize(direction, i);
 325 if (!trackSize.maxTrackBreadth().isFlex())
 326 continue;
 327
 328 tracks[i].m_usedBreadth = std::max<LayoutUnit>(tracks[i].m_usedBreadth, normalizedFractionBreadth * trackSize.maxTrackBreadth().flex());
 329 }
291330}
292331
293 LayoutUnit RenderGrid::computeUsedBreadthOfMinLength(TrackSizingDirection direction, const Length& trackLength) const
 332LayoutUnit RenderGrid::computeUsedBreadthOfMinLength(TrackSizingDirection direction, const GridLength& gridLength) const
294333{
 334 if (gridLength.isFlex())
 335 return 0;
 336
 337 const Length& trackLength = gridLength.length();
 338 ASSERT(!trackLength.isAuto());
295339 if (trackLength.isFixed() || trackLength.isPercent() || trackLength.isViewportPercentage())
296340 return computeUsedBreadthOfSpecifiedLength(direction, trackLength);
297341
298  ASSERT(trackLength.isMinContent() || trackLength.isMaxContent() || trackLength.isAuto());
 342 ASSERT(trackLength.isMinContent() || trackLength.isMaxContent());
299343 return 0;
300344}
301345
302 LayoutUnit RenderGrid::computeUsedBreadthOfMaxLength(TrackSizingDirection direction, const Length& trackLength) const
 346LayoutUnit RenderGrid::computeUsedBreadthOfMaxLength(TrackSizingDirection direction, const GridLength& gridLength, LayoutUnit usedBreadth) const
303347{
 348 if (gridLength.isFlex())
 349 return usedBreadth;
 350
 351 const Length& trackLength = gridLength.length();
 352 ASSERT(!trackLength.isAuto());
304353 if (trackLength.isFixed() || trackLength.isPercent() || trackLength.isViewportPercentage()) {
305354 LayoutUnit computedBreadth = computeUsedBreadthOfSpecifiedLength(direction, trackLength);
306355 ASSERT(computedBreadth != infinity);
307356 return computedBreadth;
308357 }
309358
310  ASSERT(trackLength.isMinContent() || trackLength.isMaxContent() || trackLength.isAuto());
 359 ASSERT(trackLength.isMinContent() || trackLength.isMaxContent());
311360 return infinity;
312361}
313362

@@LayoutUnit RenderGrid::computeUsedBreadthOfSpecifiedLength(TrackSizingDirection
318367 return valueForLength(trackLength, direction == ForColumns ? logicalWidth() : computeContentLogicalHeight(style()->logicalHeight()), &view());
319368}
320369
 370static bool sortByGridNormalizedFlexValue(const GridTrackForNormalization& track1, const GridTrackForNormalization& track2)
 371{
 372 return track1.m_normalizedFlexValue < track2.m_normalizedFlexValue;
 373}
 374
 375double RenderGrid::computeNormalizedFractionBreadth(Vector<GridTrack>& tracks, TrackSizingDirection direction, LayoutUnit availableLogicalSpace) const
 376{
 377 // |availableLogicalSpace| already accounts for the used breadths so no need to remove it here.
 378
 379 Vector<GridTrackForNormalization> tracksForNormalization;
 380 for (size_t i = 0; i < tracks.size(); ++i) {
 381 const GridTrackSize& trackSize = gridTrackSize(direction, i);
 382 if (!trackSize.maxTrackBreadth().isFlex())
 383 continue;
 384
 385 tracksForNormalization.append(GridTrackForNormalization(tracks[i], trackSize.maxTrackBreadth().flex()));
 386 }
 387
 388 // FIXME: Ideally we shouldn't come here without any <flex> grid track.
 389 if (tracksForNormalization.isEmpty())
 390 return LayoutUnit();
 391
 392 std::sort(tracksForNormalization.begin(), tracksForNormalization.end(), sortByGridNormalizedFlexValue);
 393
 394 // These values work together: as we walk over our grid tracks, we increase fractionValueBasedOnGridItemsRatio
 395 // to match a grid track's usedBreadth to <flex> ratio until the total fractions sized grid tracks wouldn't
 396 // fit into availableLogicalSpaceIgnoringFractionTracks.
 397 double accumulatedFractions = 0;
 398 LayoutUnit fractionValueBasedOnGridItemsRatio = 0;
 399 LayoutUnit availableLogicalSpaceIgnoringFractionTracks = availableLogicalSpace;
 400
 401 for (size_t i = 0; i < tracksForNormalization.size(); ++i) {
 402 const GridTrackForNormalization& track = tracksForNormalization[i];
 403 if (track.m_normalizedFlexValue > fractionValueBasedOnGridItemsRatio) {
 404 // If the normalized flex value (we ordered |tracksForNormalization| by increasing normalized flex value)
 405 // will make us overflow our container, then stop. We have the previous step's ratio is the best fit.
 406 if (track.m_normalizedFlexValue * accumulatedFractions > availableLogicalSpaceIgnoringFractionTracks)
 407 break;
 408
 409 fractionValueBasedOnGridItemsRatio = track.m_normalizedFlexValue;
 410 }
 411
 412 accumulatedFractions += track.m_flex;
 413 // This item was processed so we re-add its used breadth to the available space to accurately count the remaining space.
 414 availableLogicalSpaceIgnoringFractionTracks += track.m_track->m_usedBreadth;
 415 }
 416
 417 return availableLogicalSpaceIgnoringFractionTracks / accumulatedFractions;
 418}
 419
321420const GridTrackSize& RenderGrid::gridTrackSize(TrackSizingDirection direction, size_t i) const
322421{
323422 const Vector<GridTrackSize>& trackStyles = (direction == ForColumns) ? style()->gridColumns() : style()->gridRows();

@@LayoutUnit RenderGrid::maxContentForChild(RenderBox* child, TrackSizingDirection
411510
412511void RenderGrid::resolveContentBasedTrackSizingFunctions(TrackSizingDirection direction, Vector<GridTrack>& columnTracks, Vector<GridTrack>& rowTracks, LayoutUnit& availableLogicalSpace)
413512{
414  // FIXME: Split the grid tracks once we support fractions (step 1 of the algorithm).
 513 // FIXME: Split the grid tracks into groups that doesn't overlap a <flex> grid track.
415514
416515 Vector<GridTrack>& tracks = (direction == ForColumns) ? columnTracks : rowTracks;
417516

@@void RenderGrid::distributeSpaceToTracks(Vector<GridTrack*>& tracks, Vector<Grid
474573 GridTrack& track = *tracks[i];
475574 LayoutUnit availableLogicalSpaceShare = availableLogicalSpace / (tracksSize - i);
476575 LayoutUnit trackBreadth = (tracks[i]->*trackGetter)();
477  LayoutUnit growthShare = std::min(availableLogicalSpaceShare, track.m_maxBreadth - trackBreadth);
 576 LayoutUnit growthShare = std::max(LayoutUnit(), std::min(availableLogicalSpaceShare, track.m_maxBreadth - trackBreadth));
 577 // We should never shrink any grid track or else we can't guarantee we abide by our min-sizing function.
478578 updatedTrackBreadths[i] = trackBreadth + growthShare;
479579 availableLogicalSpace -= growthShare;
480580 }

@@bool RenderGrid::tracksAreWiderThanMinTrackBreadth(TrackSizingDirection directio
500600{
501601 for (size_t i = 0; i < tracks.size(); ++i) {
502602 const GridTrackSize& trackSize = gridTrackSize(direction, i);
503  const Length& minTrackBreadth = trackSize.minTrackBreadth();
 603 const GridLength& minTrackBreadth = trackSize.minTrackBreadth();
504604 if (computeUsedBreadthOfMinLength(direction, minTrackBreadth) > tracks[i].m_usedBreadth)
505605 return false;
506606 }

Source/WebCore/rendering/RenderGrid.h

@@private:
5959 virtual void computeIntrinsicLogicalWidths(LayoutUnit& minLogicalWidth, LayoutUnit& maxLogicalWidth) const OVERRIDE;
6060 virtual void computePreferredLogicalWidths() OVERRIDE;
6161
62  LayoutUnit computePreferredTrackWidth(const Length&, size_t) const;
 62 LayoutUnit computePreferredTrackWidth(const GridLength&, size_t) const;
6363
6464 struct GridSpan {
6565 static PassOwnPtr<GridSpan> create(size_t initialPosition, size_t finalPosition)

@@private:
9999 class GridIterator;
100100 enum TrackSizingDirection { ForColumns, ForRows };
101101 void computedUsedBreadthOfGridTracks(TrackSizingDirection, Vector<GridTrack>& columnTracks, Vector<GridTrack>& rowTracks);
102  LayoutUnit computeUsedBreadthOfMinLength(TrackSizingDirection, const Length&) const;
103  LayoutUnit computeUsedBreadthOfMaxLength(TrackSizingDirection, const Length&) const;
 102 LayoutUnit computeUsedBreadthOfMinLength(TrackSizingDirection, const GridLength&) const;
 103 LayoutUnit computeUsedBreadthOfMaxLength(TrackSizingDirection, const GridLength&, LayoutUnit usedBreadth) const;
104104 LayoutUnit computeUsedBreadthOfSpecifiedLength(TrackSizingDirection, const Length&) const;
105105 void resolveContentBasedTrackSizingFunctions(TrackSizingDirection, Vector<GridTrack>& columnTracks, Vector<GridTrack>& rowTracks, LayoutUnit& availableLogicalSpace);
106106

@@private:
124124 void resolveContentBasedTrackSizingFunctionsForItems(TrackSizingDirection, Vector<GridTrack>& columnTracks, Vector<GridTrack>& rowTracks, RenderBox*, FilterFunction, SizingFunction, AccumulatorGetter, AccumulatorGrowFunction);
125125 void distributeSpaceToTracks(Vector<GridTrack*>&, Vector<GridTrack*>* tracksForGrowthAboveMaxBreadth, AccumulatorGetter, AccumulatorGrowFunction, LayoutUnit& availableLogicalSpace);
126126
 127 double computeNormalizedFractionBreadth(Vector<GridTrack>&, TrackSizingDirection, LayoutUnit availableLogicalSpace) const;
 128
127129 const GridTrackSize& gridTrackSize(TrackSizingDirection, size_t) const;
128130 size_t explicitGridColumnCount() const;
129131 size_t explicitGridRowCount() const;

Source/WebCore/rendering/style/GridLength.h

 1/*
 2 * Copyright (C) 2013 Google Inc. All rights reserved.
 3 *
 4 * Redistribution and use in source and binary forms, with or without
 5 * modification, are permitted provided that the following conditions are
 6 * met:
 7 *
 8 * * Redistributions of source code must retain the above copyright
 9 * notice, this list of conditions and the following disclaimer.
 10 * * Redistributions in binary form must reproduce the above
 11 * copyright notice, this list of conditions and the following disclaimer
 12 * in the documentation and/or other materials provided with the
 13 * distribution.
 14 * * Neither the name of Google Inc. nor the names of its
 15 * contributors may be used to endorse or promote products derived from
 16 * this software without specific prior written permission.
 17 *
 18 * THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
 19 * "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
 20 * LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
 21 * A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
 22 * OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
 23 * SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
 24 * LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
 25 * DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
 26 * THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
 27 * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
 28 * OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
 29 */
 30
 31#ifndef GridLength_h
 32#define GridLength_h
 33
 34#include "Length.h"
 35
 36namespace WebCore {
 37
 38// This class wraps the <track-breadth> which can be either a <percentage>, <length>, min-content, max-content
 39// or <flex>. This class avoids spreading the knowledge of <flex> throughout the rendering directory by adding
 40// an new unit to Length.h.
 41class GridLength {
 42public:
 43 GridLength()
 44 : m_length(Undefined)
 45 , m_flex(0)
 46 , m_type(LengthType)
 47 {
 48 }
 49
 50 GridLength(const Length& length)
 51 : m_length(length)
 52 , m_flex(0)
 53 , m_type(LengthType)
 54 {
 55 }
 56
 57 bool isLength() const { return m_type == LengthType; }
 58 bool isFlex() const { return m_type == FlexType; }
 59
 60 const Length& length() const { ASSERT(isLength()); return m_length; }
 61 Length& length() { ASSERT(isLength()); return m_length; }
 62
 63 double flex() const { ASSERT(isFlex()); return m_flex; }
 64 void setFlex(double flex)
 65 {
 66 m_type = FlexType;
 67 m_flex = flex;
 68 }
 69
 70 bool operator==(const GridLength& o) const
 71 {
 72 return m_length == o.m_length && m_flex == o.m_flex && m_type == o.m_type;
 73 }
 74
 75private:
 76 // Ideally we would put the 2 following fields in a union, but Length has a constructor,
 77 // a destructor and a copy assignment which isn't allowed.
 78 Length m_length;
 79 double m_flex;
 80 enum GridLengthType {
 81 LengthType,
 82 FlexType
 83 };
 84 GridLengthType m_type;
 85};
 86
 87} // namespace WebCore
 88
 89#endif // GridLength_h

Source/WebCore/rendering/style/GridTrackSize.h

3131#ifndef GridTrackSize_h
3232#define GridTrackSize_h
3333
34 #include "Length.h"
 34#include "GridLength.h"
3535
3636namespace WebCore {
3737

@@public:
4949 {
5050 }
5151
52  const Length& length() const
 52 const GridLength& length() const
5353 {
5454 ASSERT(m_type == LengthTrackSizing);
55  ASSERT(!m_minTrackBreadth.isUndefined());
5655 ASSERT(m_minTrackBreadth == m_maxTrackBreadth);
57  return m_minTrackBreadth;
 56 const GridLength& minTrackBreadth = m_minTrackBreadth;
 57 ASSERT(!minTrackBreadth.isLength() || !minTrackBreadth.length().isUndefined());
 58 return minTrackBreadth;
5859 }
5960
60  void setLength(const Length& length)
 61 void setLength(const GridLength& length)
6162 {
6263 m_type = LengthTrackSizing;
6364 m_minTrackBreadth = length;
6465 m_maxTrackBreadth = length;
6566 }
6667
67  const Length& minTrackBreadth() const
 68 const GridLength& minTrackBreadth() const
6869 {
69  ASSERT(!m_minTrackBreadth.isUndefined());
70  if (m_minTrackBreadth.isAuto()) {
71  DEFINE_STATIC_LOCAL(Length, minContent, (MinContent));
 70 ASSERT(!m_minTrackBreadth.isLength() || !m_minTrackBreadth.length().isUndefined());
 71 if (m_minTrackBreadth.isLength() && m_minTrackBreadth.length().isAuto()) {
 72 DEFINE_STATIC_LOCAL(GridLength, minContent, (MinContent));
7273 return minContent;
7374 }
7475 return m_minTrackBreadth;
7576 }
7677
77  const Length& maxTrackBreadth() const
 78 const GridLength& maxTrackBreadth() const
7879 {
79  ASSERT(!m_maxTrackBreadth.isUndefined());
80  if (m_maxTrackBreadth.isAuto()) {
81  DEFINE_STATIC_LOCAL(Length, maxContent, (MaxContent));
 80 ASSERT(!m_maxTrackBreadth.isLength() || !m_maxTrackBreadth.length().isUndefined());
 81 if (m_maxTrackBreadth.isLength() && m_maxTrackBreadth.length().isAuto()) {
 82 DEFINE_STATIC_LOCAL(GridLength, maxContent, (MaxContent));
8283 return maxContent;
8384 }
8485 return m_maxTrackBreadth;
8586 }
8687
87  void setMinMax(const Length& minTrackBreadth, const Length& maxTrackBreadth)
 88 void setMinMax(const GridLength& minTrackBreadth, const GridLength& maxTrackBreadth)
8889 {
8990 m_type = MinMaxTrackSizing;
9091 m_minTrackBreadth = minTrackBreadth;

@@public:
9899 return m_type == other.m_type && m_minTrackBreadth == other.m_minTrackBreadth && m_maxTrackBreadth == other.m_maxTrackBreadth;
99100 }
100101
101  bool hasMinOrMaxContentMinTrackBreadth() const { return minTrackBreadth().isMinContent() || minTrackBreadth().isMaxContent(); }
102  bool hasMaxContentMinTrackBreadth() const { return minTrackBreadth().isMaxContent(); }
103  bool hasMinOrMaxContentMaxTrackBreadth() const { return maxTrackBreadth().isMinContent() || maxTrackBreadth().isMaxContent(); }
104  bool hasMaxContentMaxTrackBreadth() const { return maxTrackBreadth().isMaxContent(); }
 102 bool hasMinOrMaxContentMinTrackBreadth() const { return minTrackBreadth().isLength() && (minTrackBreadth().length().isMinContent() || minTrackBreadth().length().isMaxContent()); }
 103 bool hasMaxContentMinTrackBreadth() const { return minTrackBreadth().isLength() && minTrackBreadth().length().isMaxContent(); }
 104 bool hasMinOrMaxContentMaxTrackBreadth() const { return maxTrackBreadth().isLength() && (maxTrackBreadth().length().isMinContent() || maxTrackBreadth().length().isMaxContent()); }
 105 bool hasMaxContentMaxTrackBreadth() const { return maxTrackBreadth().isLength() && maxTrackBreadth().length().isMaxContent(); }
105106
106107private:
107108 GridTrackSizeType m_type;
108  Length m_minTrackBreadth;
109  Length m_maxTrackBreadth;
 109 GridLength m_minTrackBreadth;
 110 GridLength m_maxTrackBreadth;
110111};
111112
112113} // namespace WebCore

LayoutTests/ChangeLog

 12013-09-16 Sergio Villar Senin <svillar@igalia.com>
 2
 3 [CSS Grid Layout] Implement support for <flex>
 4 https://bugs.webkit.org/show_bug.cgi?id=115362
 5
 6 Reviewed by NOBODY (OOPS!).
 7
 8 From Blink r149134, r149480, r149532, r150287 and r156127 by <jchaffraix@chromium.org>
 9 From Blink r157820 by <svillar@igalia.com>
 10
 11 Added 4 new test cases to test the support for <flex> in CSS Grid
 12 Layout code. Also updated some of the existing ones to check the
 13 support for 'fr' units.
 14
 15 * fast/css-grid-layout/flex-and-minmax-content-resolution-columns-expected.txt: Added.
 16 * fast/css-grid-layout/flex-and-minmax-content-resolution-columns.html: Added.
 17 * fast/css-grid-layout/flex-and-minmax-content-resolution-rows-expected.txt: Added.
 18 * fast/css-grid-layout/flex-and-minmax-content-resolution-rows.html: Added.
 19 * fast/css-grid-layout/flex-content-resolution-columns-expected.txt: Added.
 20 * fast/css-grid-layout/flex-content-resolution-columns.html: Added.
 21 * fast/css-grid-layout/flex-content-resolution-rows-expected.txt: Added.
 22 * fast/css-grid-layout/flex-content-resolution-rows.html: Added.
 23 * fast/css-grid-layout/grid-columns-rows-get-set-expected.txt:
 24 * fast/css-grid-layout/grid-columns-rows-get-set-multiple-expected.txt:
 25 * fast/css-grid-layout/grid-columns-rows-get-set-multiple.html:
 26 * fast/css-grid-layout/grid-columns-rows-get-set.html:
 27 * fast/css-grid-layout/grid-dynamic-updates-relayout-expected.txt:
 28 * fast/css-grid-layout/grid-dynamic-updates-relayout.html:
 29 * fast/css-grid-layout/resources/grid-columns-rows-get-set-multiple.js:
 30 * fast/css-grid-layout/resources/grid-columns-rows-get-set.js:
 31
1322013-09-16 Wojciech Bielawski <w.bielawski@samsung.com>
233
334 [WKTR] Add implementation of click() method of objects returned by eventSender.contextClick().

LayoutTests/fast/css-grid-layout/flex-and-minmax-content-resolution-columns-expected.txt

 1Test that resolving auto tracks on grid items works properly.
 2
 3XXXXX
 4PASS
 5XXXXX
 6PASS
 7XXXXX
 8PASS
 9XX XX
 10XX XX
 11PASS
 12XX XX
 13XX XX
 14PASS
 15XX XX
 16XX XX
 17PASS
 18 PASS
 19XXXXXXXXXX
 20PASS
 21XXXXXXXXXX XXXXXXXXX
 22PASS
 23XXXXXXXXXX XXXXXXXXX
 24PASS
 25XXXXXXXXXX XXXXXXXXX
 26PASS

LayoutTests/fast/css-grid-layout/flex-and-minmax-content-resolution-columns.html

 1<!DOCTYPE html>
 2<html>
 3<script>
 4if (window.testRunner)
 5 testRunner.overridePreference("WebKitCSSGridLayoutEnabled", 1);
 6</script>
 7<link href="resources/grid.css" rel="stylesheet">
 8<style>
 9.gridMaxMaxContent {
 10 -webkit-grid-definition-columns: minmax(10px, -webkit-max-content) minmax(10px, 1fr);
 11 -webkit-grid-definition-rows: 50px;
 12}
 13
 14.gridMinMinContent {
 15 -webkit-grid-definition-columns: minmax(10px, 1fr) minmax(-webkit-min-content, 50px);
 16 -webkit-grid-definition-rows: 50px;
 17}
 18
 19.gridWithIntrinsicSizeBiggerThanFlex {
 20 -webkit-grid-definition-columns: minmax(-webkit-min-content, 0.5fr) minmax(18px, 2fr);
 21 -webkit-grid-definition-rows: 50px;
 22}
 23
 24.gridShrinkBelowItemsIntrinsicSize {
 25 -webkit-grid-definition-columns: minmax(0px, 1fr) minmax(0px, 2fr);
 26 -webkit-grid-definition-rows: 50px;
 27}
 28
 29.gridWithNonFlexingItems {
 30 -webkit-grid-definition-columns: 40px minmax(-webkit-min-content, 1fr) auto minmax(20px, 2fr);
 31 -webkit-grid-definition-rows: 50px;
 32}
 33
 34.firstRowThirdColumn {
 35 -webkit-grid-column: 3;
 36 -webkit-grid-row: 1;
 37}
 38.firstRowFourthColumn {
 39 -webkit-grid-column: 4;
 40 -webkit-grid-row: 1;
 41}
 42</style>
 43<script src="../../resources/check-layout.js"></script>
 44<body onload="checkLayout('.grid');">
 45
 46<p>Test that resolving auto tracks on grid items works properly.</p>
 47
 48<div class="constrainedContainer">
 49 <div class="grid gridMaxMaxContent">
 50 <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="10" data-expected-height="50">XXXXX</div>
 51 <div class="sizedToGridArea firstRowSecondColumn" data-expected-width="10" data-expected-height="50"></div>
 52 </div>
 53</div>
 54
 55<!-- Allow the extra logical space distribution to occur. -->
 56<div style="width: 40px; height: 10px">
 57 <div class="grid gridMaxMaxContent">
 58 <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="30" data-expected-height="50">XXXXX</div>
 59 <div class="sizedToGridArea firstRowSecondColumn" data-expected-width="10" data-expected-height="50"></div>
 60 </div>
 61</div>
 62
 63<div style="width: 110px; height: 10px;">
 64 <div class="grid gridMaxMaxContent">
 65 <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="50">XXXXX</div>
 66 <div class="sizedToGridArea firstRowSecondColumn" data-expected-width="60" data-expected-height="50"></div>
 67 </div>
 68</div>
 69
 70
 71<div class="constrainedContainer">
 72 <div class="grid gridMinMinContent">
 73 <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="10" data-expected-height="50">XX XX</div>
 74 <div class="sizedToGridArea firstRowSecondColumn" data-expected-width="20" data-expected-height="50">XX XX</div>
 75 </div>
 76</div>
 77
 78<!-- Allow the extra logical space distribution to occur. -->
 79<div style="width: 40px; height: 10px">
 80 <div class="grid gridMinMinContent">
 81 <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="10" data-expected-height="50">XX XX</div>
 82 <div class="sizedToGridArea firstRowSecondColumn" data-expected-width="30" data-expected-height="50">XX XX</div>
 83 </div>
 84</div>
 85
 86<div style="width: 110px; height: 10px;">
 87 <div class="grid gridMinMinContent">
 88 <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="60" data-expected-height="50">XX XX</div>
 89 <div class="sizedToGridArea firstRowSecondColumn" data-expected-width="50" data-expected-height="50">XX XX</div>
 90 </div>
 91</div>
 92
 93
 94<div style="width: 220px; height: 10px;">
 95 <div class="grid gridWithIntrinsicSizeBiggerThanFlex">
 96 <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="200" data-expected-height="50">
 97 <div style="display: inline-block; width: 200px;"></div>
 98 </div>
 99 <div class="sizedToGridArea firstRowSecondColumn" data-expected-width="20" data-expected-height="50"></div>
 100 </div>
 101</div>
 102
 103
 104<div style="width: 120px; height: 10px;">
 105 <div class="grid gridShrinkBelowItemsIntrinsicSize">
 106 <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="40" data-expected-height="50">
 107 <div style="display: inline-block; width: 200px;"></div>
 108 </div>
 109 <div class="sizedToGridArea firstRowSecondColumn" data-expected-width="80" data-expected-height="50">XXXXXXXXXX</div>
 110 </div>
 111</div>
 112
 113
 114<!-- No space available for the <flex> -->
 115<div style="width: 220px; height: 10px;">
 116 <div class="grid gridWithNonFlexingItems">
 117 <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="40" data-expected-height="50"></div>
 118 <div class="sizedToGridArea firstRowSecondColumn" data-expected-width="100" data-expected-height="50">
 119 <div style="display: inline-block; width: 100px;"></div>
 120 </div>
 121 <div class="sizedToGridArea firstRowThirdColumn" data-expected-width="100" data-expected-height="50">XXXXXXXXXX XXXXXXXXX</div>
 122 <div class="sizedToGridArea firstRowFourthColumn" data-expected-width="20" data-expected-height="50"></div>
 123 </div>
 124</div>
 125
 126<!-- The second track should be sized after the min-content as the <flex> value should be too small. -->
 127<div style="width: 380px; height: 10px;">
 128 <div class="grid gridWithNonFlexingItems">
 129 <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="40" data-expected-height="50"></div>
 130 <div class="sizedToGridArea firstRowSecondColumn" data-expected-width="100" data-expected-height="50">
 131 <div style="display: inline-block; width: 100px;"></div>
 132 </div>
 133 <div class="sizedToGridArea firstRowThirdColumn" data-expected-width="200" data-expected-height="50">XXXXXXXXXX XXXXXXXXX</div>
 134 <div class="sizedToGridArea firstRowFourthColumn" data-expected-width="40" data-expected-height="50"></div>
 135 </div>
 136</div>
 137
 138<div style="width: 400px; height: 10px;">
 139 <div class="grid gridWithNonFlexingItems">
 140 <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="40" data-expected-height="50"></div>
 141 <div class="sizedToGridArea firstRowSecondColumn" data-expected-width="100" data-expected-height="50">
 142 <div style="display: inline-block; width: 100px;"></div>
 143 </div>
 144 <div class="sizedToGridArea firstRowThirdColumn" data-expected-width="200" data-expected-height="50">XXXXXXXXXX XXXXXXXXX</div>
 145 <div class="sizedToGridArea firstRowFourthColumn" data-expected-width="60" data-expected-height="50"></div>
 146 </div>
 147</div>
 148
 149</body>
 150</html>

LayoutTests/fast/css-grid-layout/flex-and-minmax-content-resolution-rows-expected.txt

 1Test that resolving auto tracks on grid items works properly.
 2
 3XXXXX
 4PASS
 5XXXXX
 6PASS
 7XXXXX
 8PASS
 9XXXXX XXXX
 10XXXXX XXXX
 11PASS
 12XXXXX XXXX
 13XXXXX XXXX
 14PASS
 15XXXXX XXXX
 16XXXXX XXXX
 17PASS
 18XXXXX XXXXX XXXXX XXXXX
 19PASS
 20XXXXX XXXXX XXXXX XXXXX XXXXX
 21XXXXX XXXXX XXXXX XXXXX XXXXX XXXXX
 22PASS
 23XXXXX XXXXX XXXXX XXXXX
 24XXXXX XXXXX XXXXX XXXXX XXXXX XXXXX
 25PASS
 26XXXXX XXXXX XXXXX XXXXX
 27XXXXX XXXXX XXXXX XXXXX XXXXX XXXXX
 28PASS
 29XXXXX XXXXX XXXXX XXXXX
 30XXXXX XXXXX XXXXX XXXXX XXXXX XXXXX
 31PASS

LayoutTests/fast/css-grid-layout/flex-and-minmax-content-resolution-rows.html

 1<!DOCTYPE html>
 2<html>
 3<script>
 4if (window.testRunner)
 5 testRunner.overridePreference("WebKitCSSGridLayoutEnabled", 1);
 6</script>
 7<link href="resources/grid.css" rel="stylesheet">
 8<style>
 9.gridMaxMaxContent {
 10 -webkit-grid-definition-columns: 50px;
 11 -webkit-grid-definition-rows: minmax(10px, -webkit-max-content) minmax(10px, 1fr);
 12}
 13
 14.gridMinMinContent {
 15 -webkit-grid-definition-columns: 50px;
 16 -webkit-grid-definition-rows: minmax(10px, 1fr) minmax(-webkit-min-content, 50px);
 17}
 18
 19.gridWithIntrinsicSizeBiggerThanFlex {
 20 -webkit-grid-definition-columns: 50px;
 21 -webkit-grid-definition-rows: minmax(-webkit-min-content, 0.5fr) minmax(18px, 2fr);
 22}
 23
 24.gridShrinkBelowItemsIntrinsicSize {
 25 -webkit-grid-definition-columns: 50px;
 26 -webkit-grid-definition-rows: minmax(0px, 1fr) minmax(0px, 2fr);
 27}
 28
 29.gridWithNonFlexingItems {
 30 -webkit-grid-definition-columns: 50px;
 31 -webkit-grid-definition-rows: 40px minmax(-webkit-min-content, 1fr) auto minmax(20px, 2fr);
 32}
 33
 34.thirdRowFirstColumn {
 35 -webkit-grid-column: 1;
 36 -webkit-grid-row: 3;
 37}
 38.fourthRowFirstColumn {
 39 -webkit-grid-column: 1;
 40 -webkit-grid-row: 4;
 41}
 42</style>
 43<script src="../../resources/check-layout.js"></script>
 44<body onload="checkLayout('.grid');">
 45
 46<p>Test that resolving auto tracks on grid items works properly.</p>
 47
 48<div class="constrainedContainer">
 49 <div class="grid gridMaxMaxContent">
 50 <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="10">XXXXX</div>
 51 <div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="10"></div>
 52 </div>
 53</div>
 54
 55<!-- Allow the extra logical space distribution to occur. -->
 56<div style="width: 10px; height: 40px">
 57 <div class="grid gridMaxMaxContent">
 58 <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="10">XXXXX</div>
 59 <div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="30"></div>
 60 </div>
 61</div>
 62
 63<div style="width: 10px; height: 110px;">
 64 <div class="grid gridMaxMaxContent">
 65 <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="10">XXXXX</div>
 66 <div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="100"></div>
 67 </div>
 68</div>
 69
 70
 71<div class="constrainedContainer">
 72 <div class="grid gridMinMinContent">
 73 <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="10">XXXXX XXXX</div>
 74 <div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="20">XXXXX XXXX</div>
 75 </div>
 76</div>
 77
 78<!-- Allow the extra logical space distribution to occur. -->
 79<div style="width: 10px; height: 40px">
 80 <div class="grid gridMinMinContent">
 81 <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="10">XXXXX XXXX</div>
 82 <div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="30">XXXXX XXXX</div>
 83 </div>
 84</div>
 85
 86<div style="width: 10px; height: 110px;">
 87 <div class="grid gridMinMinContent">
 88 <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="60">XXXXX XXXX</div>
 89 <div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="50">XXXXX XXXX</div>
 90 </div>
 91</div>
 92
 93
 94<div style="width: 10px; height: 60px;">
 95 <div class="grid gridWithIntrinsicSizeBiggerThanFlex">
 96 <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="40">XXXXX XXXXX XXXXX XXXXX</div>
 97 <div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="20"></div>
 98 </div>
 99</div>
 100
 101
 102<div style="width: 10px; height: 60px;">
 103 <div class="grid gridShrinkBelowItemsIntrinsicSize">
 104 <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="20">XXXXX XXXXX XXXXX XXXXX XXXXX</div>
 105 <div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="40">XXXXX XXXXX XXXXX XXXXX XXXXX XXXXX</div>
 106 </div>
 107</div>
 108
 109
 110<!-- No space available for the <flex> -->
 111<div style="width: 10px; height: 100px;">
 112 <div class="grid gridWithNonFlexingItems">
 113 <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="40"></div>
 114 <div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="40">XXXXX XXXXX XXXXX XXXXX</div>
 115 <div class="sizedToGridArea thirdRowFirstColumn" data-expected-width="50" data-expected-height="60">XXXXX XXXXX XXXXX XXXXX XXXXX XXXXX</div>
 116 <div class="sizedToGridArea fourthRowFirstColumn" data-expected-width="50" data-expected-height="20"></div>
 117 </div>
 118</div>
 119
 120<!-- The second track should be sized after the min-content as the <flex> value should be too small. -->
 121<div style="width: 10px; height: 180px;">
 122 <div class="grid gridWithNonFlexingItems">
 123 <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="40"></div>
 124 <div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="40">XXXXX XXXXX XXXXX XXXXX</div>
 125 <div class="sizedToGridArea thirdRowFirstColumn" data-expected-width="50" data-expected-height="60">XXXXX XXXXX XXXXX XXXXX XXXXX XXXXX</div>
 126 <div class="sizedToGridArea fourthRowFirstColumn" data-expected-width="50" data-expected-height="40"></div>
 127 </div>
 128</div>
 129
 130<div style="width: 10px; height: 400px;">
 131 <div class="grid gridWithNonFlexingItems">
 132 <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="40"></div>
 133 <div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="100">XXXXX XXXXX XXXXX XXXXX</div>
 134 <div class="sizedToGridArea thirdRowFirstColumn" data-expected-width="50" data-expected-height="60">XXXXX XXXXX XXXXX XXXXX XXXXX XXXXX</div>
 135 <div class="sizedToGridArea fourthRowFirstColumn" data-expected-width="50" data-expected-height="200"></div>
 136 </div>
 137</div>
 138
 139</body>
 140</html>

LayoutTests/fast/css-grid-layout/flex-content-resolution-columns-expected.txt

 1Test that resolving auto tracks on grid items works properly.
 2
 3PASS
 4PASS
 5PASS
 6PASS
 7PASS
 8PASS
 9PASS
 10PASS
 11PASS
 12PASS
 13PASS
 14PASS
 15PASS

LayoutTests/fast/css-grid-layout/flex-content-resolution-columns.html

 1<!DOCTYPE html>
 2<html>
 3<script>
 4if (window.testRunner)
 5 testRunner.overridePreference("WebKitCSSGridLayoutEnabled", 1);
 6</script>
 7<link href="resources/grid.css" rel="stylesheet">
 8<style>
 9.gridMinFlexContent {
 10 -webkit-grid-definition-columns: minmax(1fr, 50px);
 11 -webkit-grid-definition-rows: 50px;
 12}
 13.gridMaxFlexContent {
 14 -webkit-grid-definition-columns: minmax(30px, 2fr);
 15 -webkit-grid-definition-rows: 50px;
 16}
 17.gridTwoMaxFlexContent {
 18 -webkit-grid-definition-columns: minmax(10px, 1fr) minmax(10px, 2fr);
 19 -webkit-grid-definition-rows: 50px;
 20}
 21.gridTwoDoubleMaxFlexContent {
 22 -webkit-grid-definition-columns: minmax(10px, 0.5fr) minmax(10px, 2fr);
 23 -webkit-grid-definition-rows: 50px;
 24}
 25.gridIgnoreSecondGridItem {
 26 -webkit-grid-definition-columns: minmax(300px, 3fr) minmax(150px, 1fr);
 27 -webkit-grid-definition-rows: 50px;
 28}
 29</style>
 30<script src="../../resources/check-layout.js"></script>
 31<body onload="checkLayout('.grid');">
 32
 33<p>Test that resolving auto tracks on grid items works properly.</p>
 34
 35<div style="width: 0px">
 36 <div class="grid gridMinFlexContent">
 37 <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="0" data-expected-height="50"></div>
 38 </div>
 39</div>
 40
 41<!-- Allow the extra logical space distribution to occur. -->
 42<div style="width: 40px; height: 10px">
 43 <div class="grid gridMinFlexContent">
 44 <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="40" data-expected-height="50"></div>
 45 </div>
 46</div>
 47
 48<div style="width: 100px; height: 10px;">
 49 <div class="grid gridMinFlexContent">
 50 <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="50"></div>
 51 </div>
 52</div>
 53
 54<div class="constrainedContainer">
 55 <div class="grid gridMaxFlexContent">
 56 <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="30" data-expected-height="50"></div>
 57 </div>
 58</div>
 59
 60<!-- Allow the extra logical space distribution to occur. -->
 61<div style="width: 40px; height: 10px">
 62 <div class="grid gridMaxFlexContent">
 63 <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="40" data-expected-height="50"></div>
 64 </div>
 65</div>
 66
 67<div style="width: 100px; height: 10px;">
 68 <div class="grid gridMaxFlexContent">
 69 <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="100" data-expected-height="50"></div>
 70 </div>
 71</div>
 72
 73
 74<div class="constrainedContainer">
 75 <div class="grid gridTwoMaxFlexContent">
 76 <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="10" data-expected-height="50"></div>
 77 <div class="sizedToGridArea firstRowSecondColumn" data-expected-width="10" data-expected-height="50"></div>
 78 </div>
 79</div>
 80
 81<!-- Allow the extra logical space distribution to occur. -->
 82<div style="width: 60px; height: 10px">
 83 <div class="grid gridTwoMaxFlexContent">
 84 <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="20" data-expected-height="50"></div>
 85 <div class="sizedToGridArea firstRowSecondColumn" data-expected-width="40" data-expected-height="50"></div>
 86 </div>
 87</div>
 88
 89<div style="width: 120px; height: 10px;">
 90 <div class="grid gridTwoMaxFlexContent">
 91 <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="40" data-expected-height="50"></div>
 92 <div class="sizedToGridArea firstRowSecondColumn" data-expected-width="80" data-expected-height="50"></div>
 93 </div>
 94</div>
 95
 96
 97<div class="constrainedContainer">
 98 <div class="grid gridTwoDoubleMaxFlexContent">
 99 <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="10" data-expected-height="50"></div>
 100 <div class="sizedToGridArea firstRowSecondColumn" data-expected-width="10" data-expected-height="50"></div>
 101 </div>
 102</div>
 103
 104<!-- Allow the extra logical space distribution to occur. -->
 105<div style="width: 60px; height: 10px">
 106 <div class="grid gridTwoDoubleMaxFlexContent">
 107 <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="12" data-expected-height="50"></div>
 108 <div class="sizedToGridArea firstRowSecondColumn" data-expected-width="48" data-expected-height="50"></div>
 109 </div>
 110</div>
 111
 112<div style="width: 120px; height: 10px;">
 113 <div class="grid gridTwoDoubleMaxFlexContent">
 114 <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="24" data-expected-height="50"></div>
 115 <div class="sizedToGridArea firstRowSecondColumn" data-expected-width="96" data-expected-height="50"></div>
 116 </div>
 117</div>
 118
 119
 120<!-- Custom test for a corner case. -->
 121<div style="width: 570px; height: 10px;">
 122 <div class="grid gridIgnoreSecondGridItem">
 123 <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="420" data-expected-height="50"></div>
 124 <div class="sizedToGridArea firstRowSecondColumn" data-expected-width="150" data-expected-height="50"></div>
 125 </div>
 126</div>
 127
 128</body>
 129</html>

LayoutTests/fast/css-grid-layout/flex-content-resolution-rows-expected.txt

 1Test that resolving auto tracks on grid items works properly.
 2
 3PASS
 4PASS
 5PASS
 6PASS
 7PASS
 8PASS
 9PASS
 10PASS
 11PASS
 12PASS
 13PASS
 14PASS

LayoutTests/fast/css-grid-layout/flex-content-resolution-rows.html

 1<!DOCTYPE html>
 2<html>
 3<script>
 4if (window.testRunner)
 5 testRunner.overridePreference("WebKitCSSGridLayoutEnabled", 1);
 6</script>
 7<link href="resources/grid.css" rel="stylesheet">
 8<style>
 9.gridMinFlexContent {
 10 -webkit-grid-definition-columns: 50px;
 11 -webkit-grid-definition-rows: minmax(1fr, 50px);
 12}
 13.gridMaxFlexContent {
 14 -webkit-grid-definition-columns: 50px;
 15 -webkit-grid-definition-rows: minmax(30px, 2fr);
 16}
 17.gridTwoMaxFlexContent {
 18 -webkit-grid-definition-columns: 50px;
 19 -webkit-grid-definition-rows: minmax(10px, 1fr) minmax(10px, 2fr);
 20}
 21.gridTwoDoubleMaxFlexContent {
 22 -webkit-grid-definition-columns: 50px;
 23 -webkit-grid-definition-rows: minmax(10px, 0.5fr) minmax(10px, 2fr);
 24}
 25</style>
 26<script src="../../resources/check-layout.js"></script>
 27<body onload="checkLayout('.grid');">
 28
 29<p>Test that resolving auto tracks on grid items works properly.</p>
 30
 31<div style="height: 0px">
 32 <div class="grid gridMinFlexContent">
 33 <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="0"></div>
 34 </div>
 35</div>
 36
 37<!-- Allow the extra logical space distribution to occur. -->
 38<div style="width: 10px; height: 40px">
 39 <div class="grid gridMinFlexContent">
 40 <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="40"></div>
 41 </div>
 42</div>
 43
 44<div style="width: 10px; height: 100px;">
 45 <div class="grid gridMinFlexContent">
 46 <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="50"></div>
 47 </div>
 48</div>
 49
 50
 51<div class="constrainedContainer">
 52 <div class="grid gridMaxFlexContent">
 53 <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="30"></div>
 54 </div>
 55</div>
 56
 57<!-- Allow the extra logical space distribution to occur. -->
 58<div style="width: 10px; height: 40px">
 59 <div class="grid gridMaxFlexContent">
 60 <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="40"></div>
 61 </div>
 62</div>
 63
 64<div style="width: 10px; height: 100px;">
 65 <div class="grid gridMaxFlexContent">
 66 <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="100"></div>
 67 </div>
 68</div>
 69
 70
 71<div class="constrainedContainer">
 72 <div class="grid gridTwoMaxFlexContent">
 73 <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="10"></div>
 74 <div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="10"></div>
 75 </div>
 76</div>
 77
 78<!-- Allow the extra logical space distribution to occur. -->
 79<div style="width: 10px; height: 60px">
 80 <div class="grid gridTwoMaxFlexContent">
 81 <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="20"></div>
 82 <div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="40"></div>
 83 </div>
 84</div>
 85
 86<div style="width: 10px; height: 120px;">
 87 <div class="grid gridTwoMaxFlexContent">
 88 <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="40"></div>
 89 <div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="80"></div>
 90 </div>
 91</div>
 92
 93
 94<div class="constrainedContainer">
 95 <div class="grid gridTwoDoubleMaxFlexContent">
 96 <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="10"></div>
 97 <div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="10"></div>
 98 </div>
 99</div>
 100
 101<!-- Allow the extra logical space distribution to occur. -->
 102<div style="width: 10px; height: 60px">
 103 <div class="grid gridTwoDoubleMaxFlexContent">
 104 <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="12"></div>
 105 <div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="48"></div>
 106 </div>
 107</div>
 108
 109<div style="width: 10px; height: 120px;">
 110 <div class="grid gridTwoDoubleMaxFlexContent">
 111 <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="24"></div>
 112 <div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="96"></div>
 113 </div>
 114</div>
 115
 116</body>
 117</html>

LayoutTests/fast/css-grid-layout/grid-columns-rows-get-set-expected.txt

@@PASS getComputedStyle(gridWithMinContent, '').getPropertyValue('-webkit-grid-def
2222PASS getComputedStyle(gridWithMinContent, '').getPropertyValue('-webkit-grid-definition-rows') is '-webkit-min-content'
2323PASS getComputedStyle(gridWithMaxContent, '').getPropertyValue('-webkit-grid-definition-columns') is '-webkit-max-content'
2424PASS getComputedStyle(gridWithMaxContent, '').getPropertyValue('-webkit-grid-definition-rows') is '-webkit-max-content'
 25PASS getComputedStyle(gridWithFraction, '').getPropertyValue('-webkit-grid-definition-columns') is '1fr'
 26PASS getComputedStyle(gridWithFraction, '').getPropertyValue('-webkit-grid-definition-rows') is '2fr'
2527
2628Test getting wrong values for -webkit-grid-definition-columns and -webkit-grid-definition-rows through CSS (they should resolve to the default: 'none')
2729PASS getComputedStyle(gridWithFitContentElement, '').getPropertyValue('-webkit-grid-definition-columns') is 'none'

@@PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-definition-col
6062PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-definition-rows') is 'minmax(-webkit-max-content, 50px)'
6163PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-definition-columns') is 'minmax(-webkit-min-content, -webkit-max-content)'
6264PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-definition-rows') is 'minmax(-webkit-max-content, -webkit-min-content)'
 65PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-definition-columns') is '3600fr'
 66PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-definition-rows') is '154fr'
 67PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-definition-columns') is '3.1459fr'
 68PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-definition-rows') is '2.718fr'
 69PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-definition-columns') is '3fr'
 70PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-definition-rows') is '4fr'
6371
64 Test setting grid-definition-columns and grid-definition-rows to bad minmax value through JS
 72Test setting grid-definition-columns and grid-definition-rows to bad values through JS
 73PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-definition-columns') is 'none'
 74PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-definition-rows') is 'none'
 75PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-definition-columns') is 'none'
 76PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-definition-rows') is 'none'
 77PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-definition-columns') is 'none'
 78PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-definition-rows') is 'none'
 79PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-definition-columns') is 'none'
 80PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-definition-rows') is 'none'
 81PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-definition-columns') is 'none'
 82PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-definition-rows') is 'none'
6583PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-definition-columns') is 'none'
6684PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-definition-rows') is 'none'
6785PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-definition-columns') is 'none'

LayoutTests/fast/css-grid-layout/grid-columns-rows-get-set-multiple-expected.txt

@@PASS getComputedStyle(gridWithMinMaxAndFixed, '').getPropertyValue('-webkit-grid
2424PASS getComputedStyle(gridWithMinMaxAndFixed, '').getPropertyValue('-webkit-grid-definition-rows') is '120px minmax(35%, 10px)'
2525PASS getComputedStyle(gridWithMinMaxAndMinMaxContent, '').getPropertyValue('-webkit-grid-definition-columns') is 'minmax(-webkit-min-content, 30%) 15px'
2626PASS getComputedStyle(gridWithMinMaxAndMinMaxContent, '').getPropertyValue('-webkit-grid-definition-rows') is '120px minmax(35%, -webkit-max-content)'
 27PASS getComputedStyle(gridWithFractionFraction, '').getPropertyValue('-webkit-grid-definition-columns') is '1fr 2fr'
 28PASS getComputedStyle(gridWithFractionFraction, '').getPropertyValue('-webkit-grid-definition-rows') is '3fr 4fr'
 29PASS getComputedStyle(gridWithFractionMinMax, '').getPropertyValue('-webkit-grid-definition-columns') is 'minmax(-webkit-min-content, 45px) 2fr'
 30PASS getComputedStyle(gridWithFractionMinMax, '').getPropertyValue('-webkit-grid-definition-rows') is '3fr minmax(14px, -webkit-max-content)'
2731
2832Test the initial value
2933PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-definition-columns') is 'none'

@@PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-definition-col
4044PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-definition-rows') is '56% 100px auto'
4145PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-definition-columns') is '160px minmax(16px, 20px)'
4246PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-definition-rows') is 'minmax(10%, 15%) auto'
 47PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-definition-columns') is '160px 2fr'
 48PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-definition-rows') is '14fr auto'
4349
4450Test getting wrong values set from CSS
4551PASS getComputedStyle(gridWithNoneAndAuto, '').getPropertyValue('-webkit-grid-definition-columns') is 'none'

LayoutTests/fast/css-grid-layout/grid-columns-rows-get-set-multiple.html

@@if (window.testRunner)
6060 -webkit-grid-definition-rows: 12em minmax(35%, -webkit-max-content);
6161 font: 10px Ahem;
6262}
 63.gridWithFractionFraction {
 64 -webkit-grid-definition-columns: 1fr 2fr;
 65 -webkit-grid-definition-rows: 3fr 4fr;
 66}
 67.gridWithFractionMinMax {
 68 -webkit-grid-definition-columns: minmax(-webkit-min-content, 45px) 2fr;
 69 -webkit-grid-definition-rows: 3fr minmax(14px, -webkit-max-content);
 70}
6371</style>
6472<script src="../../resources/js-test-pre.js"></script>
6573</head>

@@if (window.testRunner)
7684<div class="grid gridWithMinMaxContent" id="gridWithMinMaxContent"></div>
7785<div class="grid gridWithMinMaxAndFixed" id="gridWithMinMaxAndFixed"></div>
7886<div class="grid gridWithMinMaxAndMinMaxContent" id="gridWithMinMaxAndMinMaxContent"></div>
 87<div class="grid gridWithFractionFraction" id="gridWithFractionFraction"></div>
 88<div class="grid gridWithFractionMinMax" id="gridWithFractionMinMax"></div>
7989<script src="resources/grid-columns-rows-get-set-multiple.js"></script>
8090<script src="../../resources/js-test-post.js"></script>
8191</body>

LayoutTests/fast/css-grid-layout/grid-columns-rows-get-set.html

@@if (window.testRunner)
5252 -webkit-grid-definition-columns: -webkit-max-content;
5353 -webkit-grid-definition-rows: -webkit-max-content;
5454}
 55.gridWithFraction {
 56 -webkit-grid-definition-columns: 1fr;
 57 -webkit-grid-definition-rows: 2fr;
 58}
5559</style>
5660<script src="../../resources/js-test-pre.js"></script>
5761</head>

@@if (window.testRunner)
6771<div class="grid gridWithMinMax" id="gridWithMinMax"></div>
6872<div class="grid gridWithMinContent" id="gridWithMinContent"></div>
6973<div class="grid gridWithMaxContent" id="gridWithMaxContent"></div>
 74<div class="grid gridWithFraction" id="gridWithFraction"></div>
7075<script src="resources/grid-columns-rows-get-set.js"></script>
7176<script src="../../resources/js-test-post.js"></script>
7277</body>

LayoutTests/fast/css-grid-layout/grid-dynamic-updates-relayout-expected.txt

@@PASS
1414PASS
1515PASS
1616PASS
 17PASS
 18PASS

LayoutTests/fast/css-grid-layout/grid-dynamic-updates-relayout.html

@@function updateRowsColumns()
3535 testLayout("unconstrainedGrid", { 'rows': 'auto', 'columns': 'minmax(20px, -webkit-max-content)' }, { 'width': '120', 'height': '10' });
3636 testLayout("unconstrainedGrid", { 'rows': 'auto', 'columns': 'minmax(150px, -webkit-max-content)' }, { 'width': '150', 'height': '10' });
3737 testLayout("unconstrainedGrid", { 'rows': 'auto', 'columns': 'auto' }, { 'width': '120', 'height': '10' });
 38 testLayout("unconstrainedGrid", { 'rows': 'auto', 'columns': 'minmax(-webkit-min-content, 1fr) 3fr' }, { 'width': '250', 'height': '10' });
 39 testLayout("unconstrainedGrid", { 'rows': 'auto', 'columns': 'minmax(-webkit-min-content, 3fr) 3fr' }, { 'width': '500', 'height': '10' });
3840}
3941
4042window.addEventListener("load", updateRowsColumns, false);

LayoutTests/fast/css-grid-layout/resources/grid-columns-rows-get-set-multiple.js

@@var gridWithMinMaxAndMinMaxContent = document.getElementById("gridWithMinMaxAndM
4141shouldBe("getComputedStyle(gridWithMinMaxAndMinMaxContent, '').getPropertyValue('-webkit-grid-definition-columns')", "'minmax(-webkit-min-content, 30%) 15px'");
4242shouldBe("getComputedStyle(gridWithMinMaxAndMinMaxContent, '').getPropertyValue('-webkit-grid-definition-rows')", "'120px minmax(35%, -webkit-max-content)'");
4343
 44var gridWithFractionFraction = document.getElementById("gridWithFractionFraction");
 45shouldBe("getComputedStyle(gridWithFractionFraction, '').getPropertyValue('-webkit-grid-definition-columns')", "'1fr 2fr'");
 46shouldBe("getComputedStyle(gridWithFractionFraction, '').getPropertyValue('-webkit-grid-definition-rows')", "'3fr 4fr'");
 47
 48var gridWithFractionMinMax = document.getElementById("gridWithFractionMinMax");
 49shouldBe("getComputedStyle(gridWithFractionMinMax, '').getPropertyValue('-webkit-grid-definition-columns')", "'minmax(-webkit-min-content, 45px) 2fr'");
 50shouldBe("getComputedStyle(gridWithFractionMinMax, '').getPropertyValue('-webkit-grid-definition-rows')", "'3fr minmax(14px, -webkit-max-content)'");
 51
4452debug("");
4553debug("Test the initial value");
4654var element = document.createElement("div");

@@element.style.webkitGridDefinitionRows = "minmax(10%, 15%) auto";
8593shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-definition-columns')", "'160px minmax(16px, 20px)'");
8694shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-definition-rows')", "'minmax(10%, 15%) auto'");
8795
 96element = document.createElement("div");
 97document.body.appendChild(element);
 98element.style.font = "10px Ahem";
 99element.style.webkitGridDefinitionColumns = "16em 2fr";
 100element.style.webkitGridDefinitionRows = "14fr auto";
 101shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-definition-columns')", "'160px 2fr'");
 102shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-definition-rows')", "'14fr auto'");
 103
88104debug("");
89105debug("Test getting wrong values set from CSS");
90106var gridWithNoneAndAuto = document.getElementById("gridWithNoneAndAuto");

LayoutTests/fast/css-grid-layout/resources/grid-columns-rows-get-set.js

@@var gridWithMaxContent = document.getElementById("gridWithMaxContent");
3737shouldBe("getComputedStyle(gridWithMaxContent, '').getPropertyValue('-webkit-grid-definition-columns')", "'-webkit-max-content'");
3838shouldBe("getComputedStyle(gridWithMaxContent, '').getPropertyValue('-webkit-grid-definition-rows')", "'-webkit-max-content'");
3939
 40var gridWithFraction = document.getElementById("gridWithFraction");
 41shouldBe("getComputedStyle(gridWithFraction, '').getPropertyValue('-webkit-grid-definition-columns')", "'1fr'");
 42shouldBe("getComputedStyle(gridWithFraction, '').getPropertyValue('-webkit-grid-definition-rows')", "'2fr'");
 43
4044debug("");
4145debug("Test getting wrong values for -webkit-grid-definition-columns and -webkit-grid-definition-rows through CSS (they should resolve to the default: 'none')");
4246var gridWithFitContentElement = document.getElementById("gridWithFitContentElement");

@@element.style.webkitGridDefinitionRows = "minmax(-webkit-max-content, -webkit-mi
143147shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-definition-columns')", "'minmax(-webkit-min-content, -webkit-max-content)'");
144148shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-definition-rows')", "'minmax(-webkit-max-content, -webkit-min-content)'");
145149
 150// Unit comparison should be case-insensitive.
 151element = document.createElement("div");
 152document.body.appendChild(element);
 153element.style.webkitGridDefinitionColumns = "3600Fr";
 154element.style.webkitGridDefinitionRows = "154fR";
 155shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-definition-columns')", "'3600fr'");
 156shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-definition-rows')", "'154fr'");
 157
 158// Float values are allowed.
 159element = document.createElement("div");
 160document.body.appendChild(element);
 161element.style.webkitGridDefinitionColumns = "3.1459fr";
 162element.style.webkitGridDefinitionRows = "2.718fr";
 163shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-definition-columns')", "'3.1459fr'");
 164shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-definition-rows')", "'2.718fr'");
 165
 166// A leading '+' is allowed.
 167element = document.createElement("div");
 168document.body.appendChild(element);
 169element.style.webkitGridDefinitionColumns = "+3fr";
 170element.style.webkitGridDefinitionRows = "+4fr";
 171shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-definition-columns')", "'3fr'");
 172shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-definition-rows')", "'4fr'");
 173
146174debug("");
147 debug("Test setting grid-definition-columns and grid-definition-rows to bad minmax value through JS");
 175debug("Test setting grid-definition-columns and grid-definition-rows to bad values through JS");
148176element = document.createElement("div");
149177document.body.appendChild(element);
150178// No comma.

@@element.style.webkitGridDefinitionRows = "minmax(2vw, -6em)";
191219shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-definition-columns')", "'none'");
192220shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-definition-rows')", "'none'");
193221
 222element = document.createElement("div");
 223document.body.appendChild(element);
 224element.style.webkitGridDefinitionColumns = "-2fr";
 225element.style.webkitGridDefinitionRows = "3ffr";
 226shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-definition-columns')", "'none'");
 227shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-definition-rows')", "'none'");
 228
 229element = document.createElement("div");
 230document.body.appendChild(element);
 231element.style.webkitGridDefinitionColumns = "-2.05fr";
 232element.style.webkitGridDefinitionRows = "+-3fr";
 233shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-definition-columns')", "'none'");
 234shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-definition-rows')", "'none'");
 235
 236element = document.createElement("div");
 237document.body.appendChild(element);
 238element.style.webkitGridDefinitionColumns = "0fr";
 239element.style.webkitGridDefinitionRows = "1r";
 240shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-definition-columns')", "'none'");
 241shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-definition-rows')", "'none'");
 242
 243element = document.createElement("div");
 244document.body.appendChild(element);
 245element.style.webkitGridDefinitionColumns = ".0000fr";
 246element.style.webkitGridDefinitionRows = "13 fr"; // A dimension doesn't allow spaces between the number and the unit.
 247shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-definition-columns')", "'none'");
 248shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-definition-rows')", "'none'");
 249
 250element.style.webkitGridDefinitionColumns = "7.-fr";
 251element.style.webkitGridDefinitionRows = "-8,0fr";
 252shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-definition-columns')", "'none'");
 253shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-definition-rows')", "'none'");
 254
194255debug("");
195256debug("Test setting grid-definition-columns and grid-definition-rows back to 'none' through JS");
196257element.style.webkitGridDefinitionColumns = "18px";