Source/WebCore/ChangeLog

 12016-06-29 Manuel Rego Casasnovas <rego@igalia.com>
 2
 3 [css-grid] Inline size is never indefinite during layout
 4 https://bugs.webkit.org/show_bug.cgi?id=159253
 5
 6 Reviewed by NOBODY (OOPS!).
 7
 8 The issue is that the inline size of the grid container
 9 is only indefinite while we're computing the intrinsic sizes.
 10 During layout we should be able to resolve the percentage tracks
 11 against that size.
 12 This makes Grid Layout compatible with regular blocks regarding
 13 how inline percentages are resolved.
 14
 15 The patch passes the SizingOperation enum to RenderGrid::gridTrackSize().
 16 That way we can know if we're computing the intrinsic sizes or not.
 17
 18 Test: fast/css-grid-layout/grid-container-percentage-columns.html
 19
 20 * rendering/RenderGrid.cpp:
 21 (WebCore::RenderGrid::computeTrackSizesForDirection):
 22 (WebCore::RenderGrid::computeIntrinsicLogicalWidths):
 23 (WebCore::RenderGrid::computeIntrinsicLogicalHeight):
 24 (WebCore::RenderGrid::computeUsedBreadthOfGridTracks):
 25 (WebCore::RenderGrid::gridTrackSize):
 26 (WebCore::RenderGrid::minSizeForChild):
 27 (WebCore::RenderGrid::spanningItemCrossesFlexibleSizedTracks):
 28 (WebCore::RenderGrid::resolveContentBasedTrackSizingFunctions):
 29 (WebCore::RenderGrid::resolveContentBasedTrackSizingFunctionsForNonSpanningItems):
 30 (WebCore::RenderGrid::tracksAreWiderThanMinTrackBreadth):
 31 (WebCore::RenderGrid::rawGridTrackSize): Deleted.
 32 * rendering/RenderGrid.h:
 33
1342016-06-28 Youenn Fablet <youenn@apple.com>
235
336 Binding generator should generate accessors for constructors safely accessed from JS builtin

Source/WebCore/rendering/RenderGrid.cpp

@@public:
238238 Optional<LayoutUnit> freeSpaceForDirection(GridTrackSizingDirection direction) { return direction == ForColumns ? freeSpaceForColumns : freeSpaceForRows; }
239239 void setFreeSpaceForDirection(GridTrackSizingDirection, Optional<LayoutUnit> freeSpace);
240240
241  enum SizingOperation { TrackSizing, IntrinsicSizeComputation };
242241 SizingOperation sizingOperation { TrackSizing };
243242
244243private:

@@void RenderGrid::computeTrackSizesForDirection(GridTrackSizingDirection directio
360359{
361360 LayoutUnit totalGuttersSize = guttersSize(direction, direction == ForRows ? gridRowCount() : gridColumnCount());
362361 sizingData.setFreeSpaceForDirection(direction, freeSpace - totalGuttersSize);
363  sizingData.sizingOperation = GridSizingData::TrackSizing;
 362 sizingData.sizingOperation = TrackSizing;
364363
365364 LayoutUnit baseSizes, growthLimits;
366365 computeUsedBreadthOfGridTracks(direction, sizingData, baseSizes, growthLimits);

@@void RenderGrid::computeIntrinsicLogicalWidths(LayoutUnit& minLogicalWidth, Layo
465464
466465 GridSizingData sizingData(gridColumnCount(), gridRowCount());
467466 sizingData.setFreeSpaceForDirection(ForColumns, Nullopt);
468  sizingData.sizingOperation = GridSizingData::IntrinsicSizeComputation;
 467 sizingData.sizingOperation = IntrinsicSizeComputation;
469468 const_cast<RenderGrid*>(this)->computeUsedBreadthOfGridTracks(ForColumns, sizingData, minLogicalWidth, maxLogicalWidth);
470469
471470 LayoutUnit totalGuttersSize = guttersSize(ForColumns, sizingData.columnTracks.size());

@@void RenderGrid::computeIntrinsicLogicalHeight(GridSizingData& sizingData)
484483{
485484 ASSERT(tracksAreWiderThanMinTrackBreadth(ForColumns, sizingData));
486485 sizingData.setFreeSpaceForDirection(ForRows, Nullopt);
487  sizingData.sizingOperation = GridSizingData::IntrinsicSizeComputation;
 486 sizingData.sizingOperation = IntrinsicSizeComputation;
488487 LayoutUnit minHeight, maxHeight;
489488 computeUsedBreadthOfGridTracks(ForRows, sizingData, minHeight, maxHeight);
490489

@@void RenderGrid::computeUsedBreadthOfGridTracks(GridTrackSizingDirection directi
547546 // 1. Initialize per Grid track variables.
548547 for (unsigned i = 0; i < tracks.size(); ++i) {
549548 GridTrack& track = tracks[i];
550  const GridTrackSize& trackSize = gridTrackSize(direction, i);
 549 const GridTrackSize& trackSize = gridTrackSize(direction, i, sizingData.sizingOperation);
551550 const GridLength& minTrackBreadth = trackSize.minTrackBreadth();
552551 const GridLength& maxTrackBreadth = trackSize.maxTrackBreadth();
553552

@@double RenderGrid::findFlexFactorUnitSize(const Vector<GridTrack>& tracks, const
721720 return computeFlexFactorUnitSize(tracks, direction, flexFactorSum, leftOverSpace, flexibleTracksIndexes);
722721}
723722
724 bool RenderGrid::hasDefiniteLogicalSize(GridTrackSizingDirection direction) const
725 {
726  return (direction == ForRows) ? hasDefiniteLogicalHeight() : hasDefiniteLogicalWidth();
727 }
728 
729723const GridTrackSize& RenderGrid::rawGridTrackSize(GridTrackSizingDirection direction, unsigned translatedIndex) const
730724{
731725 bool isRowAxis = direction == ForColumns;

@@const GridTrackSize& RenderGrid::rawGridTrackSize(GridTrackSizingDirection direc
757751 return trackStyles[untranslatedIndex - repetitions];
758752}
759753
760 GridTrackSize RenderGrid::gridTrackSize(GridTrackSizingDirection direction, unsigned translatedIndex) const
 754GridTrackSize RenderGrid::gridTrackSize(GridTrackSizingDirection direction, unsigned translatedIndex, SizingOperation sizingOperation) const
761755{
762756 auto& trackSize = rawGridTrackSize(direction, translatedIndex);
763757

@@GridTrackSize RenderGrid::gridTrackSize(GridTrackSizingDirection direction, unsi
765759 GridLength maxTrackBreadth = trackSize.maxTrackBreadth();
766760
767761 if (minTrackBreadth.isPercentage() || maxTrackBreadth.isPercentage()) {
768  if (!hasDefiniteLogicalSize(direction)) {
 762 // If the logical width/height of the grid container is indefinite, percentage values are treated as <auto>.
 763 // For the inline axis this only happens when we're computing the intrinsic sizes (AvailableSpaceIndefinite).
 764 if (sizingOperation == IntrinsicSizeComputation || (direction == ForRows && !hasDefiniteLogicalHeight())) {
769765 if (minTrackBreadth.isPercentage())
770766 minTrackBreadth = Length(Auto);
771767 if (maxTrackBreadth.isPercentage())

@@LayoutUnit RenderGrid::minSizeForChild(RenderBox& child, GridTrackSizingDirectio
816812
817813 bool overrideLogicalWidthHasChanged = updateOverrideContainingBlockContentLogicalWidthForChild(child, sizingData);
818814 if (isRowAxis) {
819  LayoutUnit marginLogicalWidth = sizingData.sizingOperation == GridSizingData::TrackSizing ? computeMarginLogicalSizeForChild(ForColumns, child) : marginIntrinsicLogicalWidthForChild(child);
 815 LayoutUnit marginLogicalWidth = sizingData.sizingOperation == TrackSizing ? computeMarginLogicalSizeForChild(ForColumns, child) : marginIntrinsicLogicalWidthForChild(child);
820816 return child.computeLogicalWidthInRegionUsing(MinSize, childMinSize, child.overrideContainingBlockContentLogicalWidth().valueOr(0), *this, nullptr) + marginLogicalWidth;
821817 }
822818

@@private:
903899 GridSpan m_span;
904900};
905901
906 bool RenderGrid::spanningItemCrossesFlexibleSizedTracks(const GridSpan& itemSpan, GridTrackSizingDirection direction) const
 902bool RenderGrid::spanningItemCrossesFlexibleSizedTracks(const GridSpan& itemSpan, GridTrackSizingDirection direction, SizingOperation sizingOperation) const
907903{
908904 for (auto trackPosition : itemSpan) {
909  const GridTrackSize& trackSize = gridTrackSize(direction, trackPosition);
 905 const GridTrackSize& trackSize = gridTrackSize(direction, trackPosition, sizingOperation);
910906 if (trackSize.minTrackBreadth().isFlex() || trackSize.maxTrackBreadth().isFlex())
911907 return true;
912908 }

@@void RenderGrid::resolveContentBasedTrackSizingFunctions(GridTrackSizingDirectio
933929 GridSpan span = cachedGridSpan(*gridItem, direction);
934930 if (span.integerSpan() == 1)
935931 resolveContentBasedTrackSizingFunctionsForNonSpanningItems(direction, span, *gridItem, track, sizingData);
936  else if (!spanningItemCrossesFlexibleSizedTracks(span, direction))
 932 else if (!spanningItemCrossesFlexibleSizedTracks(span, direction, sizingData.sizingOperation))
937933 sizingData.itemsSortedByIncreasingSpan.append(GridItemWithSpan(*gridItem, span));
938934 }
939935 }

@@void RenderGrid::resolveContentBasedTrackSizingFunctions(GridTrackSizingDirectio
963959void RenderGrid::resolveContentBasedTrackSizingFunctionsForNonSpanningItems(GridTrackSizingDirection direction, const GridSpan& span, RenderBox& gridItem, GridTrack& track, GridSizingData& sizingData)
964960{
965961 unsigned trackPosition = span.startLine();
966  GridTrackSize trackSize = gridTrackSize(direction, trackPosition);
 962 GridTrackSize trackSize = gridTrackSize(direction, trackPosition, sizingData.sizingOperation);
967963
968964 if (trackSize.hasMinContentMinTrackBreadth())
969965 track.setBaseSize(std::max(track.baseSize(), minContentForChild(gridItem, direction, sizingData)));

@@bool RenderGrid::tracksAreWiderThanMinTrackBreadth(GridTrackSizingDirection dire
12091205 const Vector<GridTrack>& tracks = (direction == ForColumns) ? sizingData.columnTracks : sizingData.rowTracks;
12101206 const LayoutUnit maxSize = sizingData.freeSpaceForDirection(direction).valueOr(0);
12111207 for (unsigned i = 0; i < tracks.size(); ++i) {
1212  const GridTrackSize& trackSize = gridTrackSize(direction, i);
 1208 const GridTrackSize& trackSize = gridTrackSize(direction, i, sizingData.sizingOperation);
12131209 const GridLength& minTrackBreadth = trackSize.minTrackBreadth();
12141210 if (computeUsedBreadthOfMinLength(minTrackBreadth, maxSize) > tracks[i].baseSize())
12151211 return false;

Source/WebCore/rendering/RenderGrid.h

@@private:
7474
7575 class GridIterator;
7676 class GridSizingData;
 77 enum SizingOperation { TrackSizing, IntrinsicSizeComputation };
7778 void computeUsedBreadthOfGridTracks(GridTrackSizingDirection, GridSizingData&, LayoutUnit& baseSizesWithoutMaximization, LayoutUnit& growthLimitsWithoutMaximization);
7879 LayoutUnit computeUsedBreadthOfMinLength(const GridLength&, LayoutUnit maxSize) const;
7980 LayoutUnit computeUsedBreadthOfMaxLength(const GridLength&, LayoutUnit usedBreadth, LayoutUnit maxSize) const;

@@private:
135136 double findFlexFactorUnitSize(const Vector<GridTrack>&, const GridSpan&, GridTrackSizingDirection, LayoutUnit spaceToFill) const;
136137
137138 const GridTrackSize& rawGridTrackSize(GridTrackSizingDirection, unsigned) const;
138  GridTrackSize gridTrackSize(GridTrackSizingDirection, unsigned) const;
 139 GridTrackSize gridTrackSize(GridTrackSizingDirection, unsigned, SizingOperation = TrackSizing) const;
139140
140141 bool updateOverrideContainingBlockContentLogicalWidthForChild(RenderBox&, GridSizingData&);
141142 LayoutUnit logicalHeightForChild(RenderBox&, GridSizingData&);

@@private:
173174 bool tracksAreWiderThanMinTrackBreadth(GridTrackSizingDirection, GridSizingData&);
174175#endif
175176
176  bool spanningItemCrossesFlexibleSizedTracks(const GridSpan&, GridTrackSizingDirection) const;
 177 bool spanningItemCrossesFlexibleSizedTracks(const GridSpan&, GridTrackSizingDirection, SizingOperation) const;
177178
178179 unsigned gridColumnCount() const;
179180 unsigned gridRowCount() const;
180181
181  bool hasDefiniteLogicalSize(GridTrackSizingDirection) const;
182182 LayoutUnit translateRTLCoordinate(LayoutUnit) const;
183183
184184 Vector<Vector<Vector<RenderBox*, 1>>> m_grid;

LayoutTests/ChangeLog

 12016-06-29 Manuel Rego Casasnovas <rego@igalia.com>
 2
 3 [css-grid] Inline size is never indefinite during layout
 4 https://bugs.webkit.org/show_bug.cgi?id=159253
 5
 6 Reviewed by NOBODY (OOPS!).
 7
 8 Created a new test verifying the expected behavior. Updated the results
 9 in a few tests too.
 10
 11 * fast/css-grid-layout/grid-columns-rows-get-set-expected.txt:
 12 * fast/css-grid-layout/grid-columns-rows-get-set-multiple-expected.txt:
 13 * fast/css-grid-layout/grid-columns-rows-get-set-multiple.html:
 14 * fast/css-grid-layout/grid-columns-rows-get-set.html:
 15 * fast/css-grid-layout/grid-container-percentage-columns-expected.txt: Added.
 16 * fast/css-grid-layout/grid-container-percentage-columns.html: Added.
 17 * fast/css-grid-layout/named-grid-line-get-set-expected.txt:
 18 * fast/css-grid-layout/named-grid-line-get-set.html:
 19 * fast/css-grid-layout/percent-track-breadths-regarding-container-size-expected.txt:
 20 * fast/css-grid-layout/percent-track-breadths-regarding-container-size.html:
 21 The results of this test now show some FAIL messages becase of a bug in
 22 RenderBox::hasDefiniteLogicalHeight() (http://webkit.org/b/159251).
 23 * fast/css-grid-layout/resources/grid-columns-rows-get-set-multiple.js:
 24 * fast/css-grid-layout/resources/grid-columns-rows-get-set.js:
 25
1262016-06-28 Youenn Fablet <youenn@apple.com>
227
328 http/tests/media/hls/video-controller-getStartDate.html is failing on non-PDT time-based computers

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

@@PASS window.getComputedStyle(gridWithNoneElement, '').getPropertyValue('grid-tem
88PASS window.getComputedStyle(gridWithNoneElement, '').getPropertyValue('grid-template-rows') is "none"
99PASS window.getComputedStyle(gridWithFixedElement, '').getPropertyValue('grid-template-columns') is "10px"
1010PASS window.getComputedStyle(gridWithFixedElement, '').getPropertyValue('grid-template-rows') is "15px"
11 PASS window.getComputedStyle(gridWithPercentElement, '').getPropertyValue('grid-template-columns') is "424px"
 11PASS window.getComputedStyle(gridWithPercentElement, '').getPropertyValue('grid-template-columns') is "400px"
1212PASS window.getComputedStyle(gridWithPercentElement, '').getPropertyValue('grid-template-rows') is "162px"
1313PASS window.getComputedStyle(gridWithPercentWithoutSize, '').getPropertyValue('grid-template-columns') is "0px"
1414PASS window.getComputedStyle(gridWithPercentWithoutSize, '').getPropertyValue('grid-template-rows') is "0px"
15 PASS window.getComputedStyle(gridWithPercentWithoutSizeWithChildren, '').getPropertyValue('grid-template-columns') is "7px"
 15PASS window.getComputedStyle(gridWithPercentWithoutSizeWithChildren, '').getPropertyValue('grid-template-columns') is "3.5px"
1616PASS window.getComputedStyle(gridWithPercentWithoutSizeWithChildren, '').getPropertyValue('grid-template-rows') is "11px"
1717PASS window.getComputedStyle(gridWithAutoElement, '').getPropertyValue('grid-template-columns') is "0px"
1818PASS window.getComputedStyle(gridWithAutoElement, '').getPropertyValue('grid-template-rows') is "0px"

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

@@On success, you will see a series of "PASS" messages, followed by "TEST COMPLETE
66Test getting |grid-template-columns| and |grid-template-rows| set through CSS
77PASS window.getComputedStyle(gridWithFixedElement, '').getPropertyValue('grid-template-columns') is "7px 11px"
88PASS window.getComputedStyle(gridWithFixedElement, '').getPropertyValue('grid-template-rows') is "17px 2px"
9 PASS window.getComputedStyle(gridWithPercentElement, '').getPropertyValue('grid-template-columns') is "424px 792px"
 9PASS window.getComputedStyle(gridWithPercentElement, '').getPropertyValue('grid-template-columns') is "400px 800px"
1010PASS window.getComputedStyle(gridWithPercentElement, '').getPropertyValue('grid-template-rows') is "162px 312px"
11 PASS window.getComputedStyle(gridWithPercentWithoutSize, '').getPropertyValue('grid-template-columns') is "7px 0px"
 11PASS window.getComputedStyle(gridWithPercentWithoutSize, '').getPropertyValue('grid-template-columns') is "3.5px 7px"
1212PASS window.getComputedStyle(gridWithPercentWithoutSize, '').getPropertyValue('grid-template-rows') is "11px 0px"
1313PASS window.getComputedStyle(gridWithAutoElement, '').getPropertyValue('grid-template-columns') is "0px 17px"
1414PASS window.getComputedStyle(gridWithAutoElement, '').getPropertyValue('grid-template-rows') is "0px 3px"

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

2727 grid-template-rows: 17px 2px;
2828}
2929.gridWithPercent {
30  grid-template-columns: 53% 99%;
 30 grid-template-columns: 50% 100%;
3131 grid-template-rows: 27% 52%;
3232}
3333.gridWithAuto {

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

3131 grid-template-rows: 15px;
3232}
3333.gridWithPercent {
34  grid-template-columns: 53%;
 34 grid-template-columns: 50%;
3535 grid-template-rows: 27%;
3636}
3737.gridWithAuto {

LayoutTests/fast/css-grid-layout/grid-container-percentage-columns-expected.txt

 1This test checks that percentage columns are only indefinite during intrinsic size computation. Aftewards, they are properly resolved against the grid container intrinsic sizes.
 2
 3XX X
 4PASS
 5XX X
 6PASS
 7XX X
 8PASS
 9XX X
 10PASS
 11XX X
 12PASS
 13XX X
 14PASS
 15XX X
 16PASS
 17XX X
 18PASS
 19XX X
 20PASS
 21XX X
 22PASS
 23XX X
 24PASS
 25XX X
 26PASS
 27XX X
 28PASS
 29XX X
 30PASS
 31XX X
 32PASS
 33XX X
 34PASS
 35XX X
 36PASS
 37XX X
 38PASS
 39XX X
 40PASS
 41XX X
 42PASS

LayoutTests/fast/css-grid-layout/grid-container-percentage-columns.html

 1<!DOCTYPE html>
 2<link href="../css-intrinsic-dimensions/resources/width-keyword-classes.css" rel="stylesheet">
 3<link href="resources/grid.css" rel="stylesheet">
 4<style>
 5.wrapper {
 6 position: relative;
 7 clear: both;
 8}
 9
 10.grid {
 11 font: 10px/1 Ahem;
 12}
 13
 14.float {
 15 float: left;
 16}
 17
 18.abspos {
 19 position: absolute;
 20}
 21
 22.fixedSize {
 23 width: 200px;
 24 height: 200px;
 25}
 26
 27.oneColumn100 {
 28 grid-template-columns: 100%;
 29}
 30
 31.oneColumn50 {
 32 grid-template-columns: 50%;
 33}
 34
 35.twoColumns {
 36 grid-template-columns: 50% 100px;
 37}
 38</style>
 39<script src="../../resources/check-layout.js"></script>
 40<body onload="checkLayout('.grid')">
 41
 42<p>This test checks that percentage columns are only indefinite during intrinsic size computation. Aftewards, they are properly resolved against the grid container intrinsic sizes.</p>
 43
 44<div class="wrapper">
 45 <div class="grid float oneColumn100" data-expected-width="40" data-expected-height="10">
 46 <div class="firstRowFirstColumn"
 47 data-offset-x="0" data-offset-y="0" data-expected-width="40" data-expected-height="10">
 48 XX X
 49 </div>
 50 </div>
 51</div>
 52
 53<div class="wrapper">
 54 <div class="grid abspos oneColumn100" data-expected-width="40" data-expected-height="10">
 55 <div class="firstRowFirstColumn"
 56 data-offset-x="0" data-offset-y="0" data-expected-width="40" data-expected-height="10">
 57 XX X
 58 </div>
 59 </div>
 60</div>
 61
 62<div class="wrapper">
 63 <div class="grid max-content oneColumn100" data-expected-width="40" data-expected-height="10">
 64 <div class="firstRowFirstColumn"
 65 data-offset-x="0" data-offset-y="0" data-expected-width="40" data-expected-height="10">
 66 XX X
 67 </div>
 68 </div>
 69</div>
 70
 71<div class="wrapper">
 72 <div class="grid fit-content oneColumn100" data-expected-width="40" data-expected-height="10">
 73 <div class="firstRowFirstColumn"
 74 data-offset-x="0" data-offset-y="0" data-expected-width="40" data-expected-height="10">
 75 XX X
 76 </div>
 77 </div>
 78</div>
 79
 80<div class="wrapper">
 81 <div class="grid min-content oneColumn100" data-expected-width="20" data-expected-height="20">
 82 <div class="firstRowFirstColumn"
 83 data-offset-x="0" data-offset-y="0" data-expected-width="20" data-expected-height="20">
 84 XX X
 85 </div>
 86 </div>
 87</div>
 88
 89<div class="wrapper">
 90 <div class="grid float oneColumn50" data-expected-width="40" data-expected-height="20">
 91 <div class="firstRowFirstColumn"
 92 data-offset-x="0" data-offset-y="0" data-expected-width="20" data-expected-height="20">
 93 XX X
 94 </div>
 95 </div>
 96</div>
 97
 98<div class="wrapper">
 99 <div class="grid abspos oneColumn50" data-expected-width="40" data-expected-height="20">
 100 <div class="firstRowFirstColumn"
 101 data-offset-x="0" data-offset-y="0" data-expected-width="20" data-expected-height="20">
 102 XX X
 103 </div>
 104 </div>
 105</div>
 106
 107<div class="wrapper">
 108 <div class="grid max-content oneColumn50" data-expected-width="40" data-expected-height="20">
 109 <div class="firstRowFirstColumn"
 110 data-offset-x="0" data-offset-y="0" data-expected-width="20" data-expected-height="20">
 111 XX X
 112 </div>
 113 </div>
 114</div>
 115
 116<div class="wrapper">
 117 <div class="grid fit-content oneColumn50" data-expected-width="40" data-expected-height="20">
 118 <div class="firstRowFirstColumn"
 119 data-offset-x="0" data-offset-y="0" data-expected-width="20" data-expected-height="20">
 120 XX X
 121 </div>
 122 </div>
 123</div>
 124
 125<div class="wrapper">
 126 <div class="grid min-content oneColumn50" data-expected-width="20" data-expected-height="20">
 127 <div class="firstRowFirstColumn"
 128 data-offset-x="0" data-offset-y="0" data-expected-width="20" data-expected-height="20">
 129 XX X
 130 </div>
 131 </div>
 132</div>
 133
 134<div class="wrapper">
 135 <div class="grid float twoColumns" data-expected-width="140" data-expected-height="10">
 136 <div class="firstRowFirstColumn"
 137 data-offset-x="0" data-offset-y="0" data-expected-width="70" data-expected-height="10">
 138 XX X
 139 </div>
 140 <div class="firstRowSecondColumn"
 141 data-offset-x="70" data-offset-y="0" data-expected-width="100" data-expected-height="10">
 142 </div>
 143 </div>
 144</div>
 145
 146<div class="wrapper">
 147 <div class="grid abspos twoColumns" data-expected-width="140" data-expected-height="10">
 148 <div class="firstRowFirstColumn"
 149 data-offset-x="0" data-offset-y="0" data-expected-width="70" data-expected-height="10">
 150 XX X
 151 </div>
 152 <div class="firstRowSecondColumn"
 153 data-offset-x="70" data-offset-y="0" data-expected-width="100" data-expected-height="10">
 154 </div>
 155 </div>
 156</div>
 157
 158<div class="wrapper">
 159 <div class="grid max-content twoColumns" data-expected-width="140" data-expected-height="10">
 160 <div class="firstRowFirstColumn"
 161 data-offset-x="0" data-offset-y="0" data-expected-width="70" data-expected-height="10">
 162 XX X
 163 </div>
 164 <div class="firstRowSecondColumn"
 165 data-offset-x="70" data-offset-y="0" data-expected-width="100" data-expected-height="10">
 166 </div>
 167 </div>
 168</div>
 169
 170<div class="wrapper">
 171 <div class="grid fit-content twoColumns" data-expected-width="140" data-expected-height="10">
 172 <div class="firstRowFirstColumn"
 173 data-offset-x="0" data-offset-y="0" data-expected-width="70" data-expected-height="10">
 174 XX X
 175 </div>
 176 <div class="firstRowSecondColumn"
 177 data-offset-x="70" data-offset-y="0" data-expected-width="100" data-expected-height="10">
 178 </div>
 179 </div>
 180</div>
 181
 182<div class="wrapper">
 183 <div class="grid min-content twoColumns" data-expected-width="120" data-expected-height="10">
 184 <div class="firstRowFirstColumn"
 185 data-offset-x="0" data-offset-y="0" data-expected-width="60" data-expected-height="10">
 186 XX X
 187 </div>
 188 <div class="firstRowSecondColumn"
 189 data-offset-x="60" data-offset-y="0" data-expected-width="100" data-expected-height="10">
 190 </div>
 191 </div>
 192</div>
 193
 194<div class="wrapper">
 195 <div class="grid float twoColumns" data-expected-width="100" data-expected-height="10">
 196 <div class="firstRowFirstColumn"
 197 data-offset-x="0" data-offset-y="0" data-expected-width="50" data-expected-height="10">
 198 </div>
 199 <div class="firstRowSecondColumn"
 200 data-offset-x="50" data-offset-y="0" data-expected-width="100" data-expected-height="10">
 201 XX X
 202 </div>
 203 </div>
 204</div>
 205
 206<div class="wrapper">
 207 <div class="grid abspos twoColumns" data-expected-width="100" data-expected-height="10">
 208 <div class="firstRowFirstColumn"
 209 data-offset-x="0" data-offset-y="0" data-expected-width="50" data-expected-height="10">
 210 </div>
 211 <div class="firstRowSecondColumn"
 212 data-offset-x="50" data-offset-y="0" data-expected-width="100" data-expected-height="10">
 213 XX X
 214 </div>
 215 </div>
 216</div>
 217
 218<div class="wrapper">
 219 <div class="grid max-content twoColumns" data-expected-width="100" data-expected-height="10">
 220 <div class="firstRowFirstColumn"
 221 data-offset-x="0" data-offset-y="0" data-expected-width="50" data-expected-height="10">
 222 </div>
 223 <div class="firstRowSecondColumn"
 224 data-offset-x="50" data-offset-y="0" data-expected-width="100" data-expected-height="10">
 225 XX X
 226 </div>
 227 </div>
 228</div>
 229
 230<div class="wrapper">
 231 <div class="grid min-content twoColumns" data-expected-width="100" data-expected-height="10">
 232 <div class="firstRowFirstColumn"
 233 data-offset-x="0" data-offset-y="0" data-expected-width="50" data-expected-height="10">
 234 </div>
 235 <div class="firstRowSecondColumn"
 236 data-offset-x="50" data-offset-y="0" data-expected-width="100" data-expected-height="10">
 237 XX X
 238 </div>
 239 </div>
 240</div>
 241
 242<div class="wrapper">
 243 <div class="grid fit-content twoColumns" data-expected-width="100" data-expected-height="10">
 244 <div class="firstRowFirstColumn"
 245 data-offset-x="0" data-offset-y="0" data-expected-width="50" data-expected-height="10">
 246 </div>
 247 <div class="firstRowSecondColumn"
 248 data-offset-x="50" data-offset-y="0" data-expected-width="100" data-expected-height="10">
 249 XX X
 250 </div>
 251 </div>
 252</div>
 253
 254</body>

LayoutTests/fast/css-grid-layout/named-grid-line-get-set-expected.txt

@@On success, you will see a series of "PASS" messages, followed by "TEST COMPLETE
66Test getting grid-template-columns and grid-template-rows set through CSS
77PASS window.getComputedStyle(gridWithFixedElement, '').getPropertyValue('grid-template-columns') is "[first] 10px"
88PASS window.getComputedStyle(gridWithFixedElement, '').getPropertyValue('grid-template-rows') is "[first] 15px"
9 PASS window.getComputedStyle(gridWithPercentElement, '').getPropertyValue('grid-template-columns') is "424px [last]"
 9PASS window.getComputedStyle(gridWithPercentElement, '').getPropertyValue('grid-template-columns') is "400px [last]"
1010PASS window.getComputedStyle(gridWithPercentElement, '').getPropertyValue('grid-template-rows') is "162px [last]"
1111PASS window.getComputedStyle(gridWithPercentWithoutSize, '').getPropertyValue('grid-template-columns') is "0px [last]"
1212PASS window.getComputedStyle(gridWithPercentWithoutSize, '').getPropertyValue('grid-template-rows') is "0px [last]"
13 PASS window.getComputedStyle(gridWithPercentWithoutSizeWithChildren, '').getPropertyValue('grid-template-columns') is "77px [last]"
 13PASS window.getComputedStyle(gridWithPercentWithoutSizeWithChildren, '').getPropertyValue('grid-template-columns') is "38.5px [last]"
1414PASS window.getComputedStyle(gridWithPercentWithoutSizeWithChildren, '').getPropertyValue('grid-template-rows') is "22px [last]"
1515PASS window.getComputedStyle(gridWithAutoElement, '').getPropertyValue('grid-template-columns') is "[first] 0px"
1616PASS window.getComputedStyle(gridWithAutoElement, '').getPropertyValue('grid-template-rows') is "0px [last]"

LayoutTests/fast/css-grid-layout/named-grid-line-get-set.html

2121 grid-template-rows: [first] 15px;
2222}
2323.gridWithPercent {
24  grid-template-columns: 53% [last];
 24 grid-template-columns: 50% [last];
2525 grid-template-rows: 27% [last];
2626}
2727.gridWithAuto {

9999
100100 debug("Test getting grid-template-columns and grid-template-rows set through CSS");
101101 testGridTemplatesValues(document.getElementById("gridWithFixedElement"), "[first] 10px", "[first] 15px");
102  testGridTemplatesValues(document.getElementById("gridWithPercentElement"), "424px [last]", "162px [last]");
 102 testGridTemplatesValues(document.getElementById("gridWithPercentElement"), "400px [last]", "162px [last]");
103103 testGridTemplatesValues(document.getElementById("gridWithPercentWithoutSize"), "0px [last]", "0px [last]");
104  testGridTemplatesValues(document.getElementById("gridWithPercentWithoutSizeWithChildren"), "77px [last]", "22px [last]");
 104 testGridTemplatesValues(document.getElementById("gridWithPercentWithoutSizeWithChildren"), "38.5px [last]", "22px [last]");
105105 testGridTemplatesValues(document.getElementById("gridWithAutoElement"), "[first] 0px", "0px [last]");
106106 testGridTemplatesValues(document.getElementById("gridWithAutoWithChildrenElement"), "[first] 77px", "22px [last]");
107107 testGridTemplatesValues(document.getElementById("gridWithMinMax"), "[first] 80px", "300px [last]");

LayoutTests/fast/css-grid-layout/percent-track-breadths-regarding-container-size-expected.txt

@@PASS
3535XX
3636XXXXX
3737XXX
38 PASS
 38FAIL:
 39Expected 10 for height, but got 4.
 40Expected 10 for height, but got 4.
 41Expected 10 for height, but got 4.
 42
 43<div class="grid absolutelyPositioned">
 44 <div class="firstRowFirstColumn sizedToGridArea" data-expected-width="20" data-expected-height="10">XX</div>
 45 <div class="firstRowSecondColumn sizedToGridArea" data-expected-width="50" data-expected-height="10">XXXXX</div>
 46 <div class="firstRowThirdColumn sizedToGridArea" data-expected-width="30" data-expected-height="10">XXX</div>
 47 </div>
3948XX
4049XXXXX
4150XXX
42 PASS
 51FAIL:
 52Expected 10 for height, but got 4.
 53Expected 10 for height, but got 4.
 54Expected 10 for height, but got 4.
 55
 56<div class="grid absolutelyPositioned">
 57 <div class="firstRowFirstColumn sizedToGridArea" data-expected-width="20" data-expected-height="10">XX</div>
 58 <div class="firstRowSecondColumn sizedToGridArea" data-expected-width="50" data-expected-height="10">XXXXX</div>
 59 <div class="firstRowThirdColumn sizedToGridArea" data-expected-width="30" data-expected-height="10">XXX</div>
 60 </div>
4361XX
4462XXXXX
4563XXX

LayoutTests/fast/css-grid-layout/percent-track-breadths-regarding-container-size.html

8989
9090 <div class="fit-content indefiniteHeight">
9191 <div class="grid calculatedSize justifyContentStart">
92  <div class="firstRowFirstColumn sizedToGridArea" data-expected-width="20" data-expected-height="10">XX</div>
93  <div class="firstRowSecondColumn sizedToGridArea" data-expected-width="50" data-expected-height="10">XXXXX</div>
94  <div class="firstRowThirdColumn sizedToGridArea" data-expected-width="30" data-expected-height="10">XXX</div>
 92 <div class="firstRowFirstColumn sizedToGridArea" data-expected-width="44" data-expected-height="10">XX</div>
 93 <div class="firstRowSecondColumn sizedToGridArea" data-expected-width="110" data-expected-height="10">XXXXX</div>
 94 <div class="firstRowThirdColumn sizedToGridArea" data-expected-width="66" data-expected-height="10">XXX</div>
9595 </div>
9696 </div>
9797

105105
106106 <div class="fit-content indefiniteHeight">
107107 <div class="grid percentageSize">
108  <div class="firstRowFirstColumn sizedToGridArea" data-expected-width="20" data-expected-height="10">XX</div>
109  <div class="firstRowSecondColumn sizedToGridArea" data-expected-width="50" data-expected-height="10">XXXXX</div>
110  <div class="firstRowThirdColumn sizedToGridArea" data-expected-width="30" data-expected-height="10">XXX</div>
 108 <div class="firstRowFirstColumn sizedToGridArea" data-expected-width="10" data-expected-height="10">XX</div>
 109 <div class="firstRowSecondColumn sizedToGridArea" data-expected-width="25" data-expected-height="10">XXXXX</div>
 110 <div class="firstRowThirdColumn sizedToGridArea" data-expected-width="15" data-expected-height="10">XXX</div>
111111 </div>
112112 </div>
113113

119119 </div>
120120 </div>
121121
 122 <!-- The height of the row is wrong calculated in the following 2 examples because of a bug in
 123 RenderBox::hasDefiniteLogicalHeight() that considers that any positioned element has a definite height.
 124 See: https://bugs.webkit.org/show_bug.cgi?id=159251 -->
122125 <div class="fit-content indefiniteHeight">
123126 <div class="grid absolutelyPositioned">
124  <div class="firstRowFirstColumn sizedToGridArea" data-expected-width="0" data-expected-height="0">XX</div>
125  <div class="firstRowSecondColumn sizedToGridArea" data-expected-width="0" data-expected-height="0">XXXXX</div>
126  <div class="firstRowThirdColumn sizedToGridArea" data-expected-width="0" data-expected-height="0">XXX</div>
 127 <div class="firstRowFirstColumn sizedToGridArea" data-expected-width="20" data-expected-height="10">XX</div>
 128 <div class="firstRowSecondColumn sizedToGridArea" data-expected-width="50" data-expected-height="10">XXXXX</div>
 129 <div class="firstRowThirdColumn sizedToGridArea" data-expected-width="30" data-expected-height="10">XXX</div>
127130 </div>
128131 </div>
129132
130133 <div class="unconstrainedContainer">
131134 <div class="grid absolutelyPositioned">
132  <div class="firstRowFirstColumn sizedToGridArea" data-expected-width="0" data-expected-height="0">XX</div>
133  <div class="firstRowSecondColumn sizedToGridArea" data-expected-width="0" data-expected-height="0">XXXXX</div>
134  <div class="firstRowThirdColumn sizedToGridArea" data-expected-width="0" data-expected-height="0">XXX</div>
 135 <div class="firstRowFirstColumn sizedToGridArea" data-expected-width="20" data-expected-height="10">XX</div>
 136 <div class="firstRowSecondColumn sizedToGridArea" data-expected-width="50" data-expected-height="10">XXXXX</div>
 137 <div class="firstRowThirdColumn sizedToGridArea" data-expected-width="30" data-expected-height="10">XXX</div>
135138 </div>
136139 </div>
137140

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

@@description('Test that setting and getting grid-template-columns and grid-templa
22
33debug("Test getting |grid-template-columns| and |grid-template-rows| set through CSS");
44testGridTemplatesValues(document.getElementById("gridWithFixedElement"), "7px 11px", "17px 2px");
5 testGridTemplatesValues(document.getElementById("gridWithPercentElement"), "53% 99%", "27% 52%", "424px 792px", "162px 312px");
6 testGridTemplatesValues(document.getElementById("gridWithPercentWithoutSize"), "53% 99%", "27% 52%", "7px 0px", "11px 0px");
 5testGridTemplatesValues(document.getElementById("gridWithPercentElement"), "50% 100%", "27% 52%", "400px 800px", "162px 312px");
 6testGridTemplatesValues(document.getElementById("gridWithPercentWithoutSize"), "50% 100%", "27% 52%", "3.5px 7px", "11px 0px");
77testGridTemplatesValues(document.getElementById("gridWithAutoElement"), "auto auto", "auto auto", "0px 17px", "0px 3px");
88testGridTemplatesValues(document.getElementById("gridWithEMElement"), "100px 120px", "150px 170px");
99testGridTemplatesValues(document.getElementById("gridWithThreeItems"), "15px auto 100px", "120px 18px auto", "15px 0px 100px", "120px 18px 0px");

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

@@description('Test that setting and getting grid-template-columns and grid-templa
33debug("Test getting grid-template-columns and grid-template-rows set through CSS");
44testGridTemplatesValues(document.getElementById("gridWithNoneElement"), "none", "none");
55testGridTemplatesValues(document.getElementById("gridWithFixedElement"), "10px", "15px");
6 testGridTemplatesValues(document.getElementById("gridWithPercentElement"), "424px", "162px");
 6testGridTemplatesValues(document.getElementById("gridWithPercentElement"), "400px", "162px");
77testGridTemplatesValues(document.getElementById("gridWithPercentWithoutSize"), "0px", "0px");
8 testGridTemplatesValues(document.getElementById("gridWithPercentWithoutSizeWithChildren"), "7px", "11px");
 8testGridTemplatesValues(document.getElementById("gridWithPercentWithoutSizeWithChildren"), "3.5px", "11px");
99testGridTemplatesValues(document.getElementById("gridWithAutoElement"), "0px", "0px");
1010testGridTemplatesValues(document.getElementById("gridWithAutoWithChildrenElement"), "7px", "11px");
1111testGridTemplatesValues(document.getElementById("gridWithEMElement"), "100px", "150px");