Source/WebCore/ChangeLog

112013-08-28 Sergio Villar Senin <svillar@igalia.com>
22
 3 [CSS Grid Layout] Handle 'span' positions during layout
 4 https://bugs.webkit.org/show_bug.cgi?id=119756
 5
 6 Reviewed by NOBODY (OOPS!).
 7
 8 From Blink r149133 by <jchaffraix@chromium.org>
 9
 10 Properly handle the 'span' keyword during layout. We only had
 11 parsing support so far but with this change we are able to
 12 recognize these positions and act accordingly.
 13
 14 * rendering/RenderGrid.cpp:
 15 (WebCore::RenderGrid::resolveGridPositionsFromStyle):
 16 (WebCore::RenderGrid::resolveGridPositionAgainstOppositePosition):
 17 * rendering/RenderGrid.h:
 18 * rendering/style/GridPosition.h:
 19 (WebCore::GridPosition::shouldBeResolvedAgainstOppositePosition):
 20
 212013-08-28 Sergio Villar Senin <svillar@igalia.com>
 22
323 WorkerGlobalScopeWebDatabase requires ENABLE(WORKERS)
424 https://bugs.webkit.org/show_bug.cgi?id=120395
525

Source/WebCore/rendering/RenderGrid.cpp

@@PassOwnPtr<RenderGrid::GridSpan> RenderGrid::resolveGridPositionsFromStyle(const
720720 const GridPosition& finalPosition = (direction == ForColumns) ? gridItem->style()->gridItemColumnEnd() : gridItem->style()->gridItemRowEnd();
721721 const GridPositionSide finalPositionSide = (direction == ForColumns) ? ColumnEndSide : RowEndSide;
722722
 723 // We should NEVER see both spans as they should have been handled during style resolve.
 724 ASSERT(!initialPosition.isSpan() || !finalPosition.isSpan());
 725
723726 if (initialPosition.isAuto() && finalPosition.isAuto()) {
724727 if (style()->gridAutoFlow() == AutoFlowNone)
725728 return adoptPtr(new GridSpan(0, 0));

@@PassOwnPtr<RenderGrid::GridSpan> RenderGrid::resolveGridPositionsFromStyle(const
728731 return nullptr;
729732 }
730733
731  if (initialPosition.isAuto()) {
732  // Infer the position from the final position ('auto / 1' case).
 734 if (initialPosition.shouldBeResolvedAgainstOppositePosition()) {
 735 // Infer the position from the final position ('auto / 1' or 'span 2 / 3' case).
733736 const size_t finalResolvedPosition = resolveGridPositionFromStyle(finalPosition, finalPositionSide);
734  return adoptPtr(new GridSpan(finalResolvedPosition, finalResolvedPosition));
 737 return resolveGridPositionAgainstOppositePosition(finalResolvedPosition, initialPosition, initialPositionSide);
735738 }
736739
737  if (finalPosition.isAuto()) {
738  // Infer our position from the initial position ('1 / auto' case).
 740 if (finalPosition.shouldBeResolvedAgainstOppositePosition()) {
 741 // Infer our position from the initial position ('1 / auto' or '3 / span 2' case).
739742 const size_t initialResolvedPosition = resolveGridPositionFromStyle(initialPosition, initialPositionSide);
740  return adoptPtr(new GridSpan(initialResolvedPosition, initialResolvedPosition));
 743 return resolveGridPositionAgainstOppositePosition(initialResolvedPosition, finalPosition, finalPositionSide);
741744 }
742745
743746 size_t resolvedInitialPosition = resolveGridPositionFromStyle(initialPosition, initialPositionSide);

@@size_t RenderGrid::resolveGridPositionFromStyle(const GridPosition& position, Gr
790793 return 0;
791794}
792795
 796PassOwnPtr<RenderGrid::GridSpan> RenderGrid::resolveGridPositionAgainstOppositePosition(size_t resolvedOppositePosition, const GridPosition& position, GridPositionSide side) const
 797{
 798 if (position.isAuto())
 799 return GridSpan::create(resolvedOppositePosition, resolvedOppositePosition);
 800
 801 ASSERT(position.isSpan());
 802 ASSERT(position.spanPosition() > 0);
 803
 804 // 'span 1' is contained inside a single grid track regardless of the direction.
 805 // That's why the CSS span value is one more than the offset we apply.
 806 size_t positionOffset = position.spanPosition() - 1;
 807 if (side == ColumnStartSide || side == RowStartSide) {
 808 size_t initialResolvedPosition = std::max<int>(0, resolvedOppositePosition - positionOffset);
 809 return GridSpan::create(initialResolvedPosition, resolvedOppositePosition);
 810 }
 811
 812 return GridSpan::create(resolvedOppositePosition, resolvedOppositePosition + positionOffset);
 813}
 814
793815LayoutUnit RenderGrid::gridAreaBreadthForChild(const RenderBox* child, TrackSizingDirection direction, const Vector<GridTrack>& tracks) const
794816{
795817 const GridCoordinate& coordinate = cachedGridCoordinate(child);

Source/WebCore/rendering/RenderGrid.h

@@private:
5959 LayoutUnit computePreferredTrackWidth(const Length&, size_t) const;
6060
6161 struct GridSpan {
 62 static PassOwnPtr<GridSpan> create(size_t initialPosition, size_t finalPosition)
 63 {
 64 return adoptPtr(new GridSpan(initialPosition, finalPosition));
 65 }
 66
6267 GridSpan(size_t initialPosition, size_t finalPosition)
6368 : initialPositionIndex(initialPosition)
6469 , finalPositionIndex(finalPosition)

@@private:
130135 GridSpan resolveGridPositionsFromAutoPlacementPosition(const RenderBox*, TrackSizingDirection, size_t) const;
131136 PassOwnPtr<GridSpan> resolveGridPositionsFromStyle(const RenderBox*, TrackSizingDirection) const;
132137 size_t resolveGridPositionFromStyle(const GridPosition&, GridPositionSide) const;
 138 PassOwnPtr<GridSpan> resolveGridPositionAgainstOppositePosition(size_t resolvedOppositePosition, const GridPosition&, GridPositionSide) const;
133139
134140 LayoutUnit gridAreaBreadthForChild(const RenderBox* child, TrackSizingDirection, const Vector<GridTrack>&) const;
135141

Source/WebCore/rendering/style/GridPosition.h

@@public:
8686 return m_type == other.m_type && m_integerPosition == other.m_integerPosition;
8787 }
8888
 89 bool shouldBeResolvedAgainstOppositePosition() const
 90 {
 91 return isAuto() || isSpan();
 92 }
8993private:
9094 GridPositionType m_type;
9195 int m_integerPosition;

LayoutTests/ChangeLog

112013-08-28 Sergio Villar Senin <svillar@igalia.com>
22
 3 [CSS Grid Layout] Handle 'span' positions during layout
 4 https://bugs.webkit.org/show_bug.cgi?id=119756
 5
 6 Reviewed by NOBODY (OOPS!).
 7
 8 From Blink r149133 by <jchaffraix@chromium.org>
 9
 10 Added some new test cases to verify that we properly resolve
 11 'span' positions.
 12
 13 * fast/css-grid-layout/grid-item-negative-position-resolution-expected.txt:
 14 * fast/css-grid-layout/grid-item-negative-position-resolution.html:
 15 * fast/css-grid-layout/grid-item-spanning-resolution-expected.txt:
 16 * fast/css-grid-layout/grid-item-spanning-resolution.html:
 17
 182013-08-28 Sergio Villar Senin <svillar@igalia.com>
 19
320 [CSS Grid Layout] Fix grid position resolution
421 https://bugs.webkit.org/show_bug.cgi?id=119801
522

LayoutTests/fast/css-grid-layout/grid-item-negative-position-resolution-expected.txt

@@PASS
44PASS
55PASS
66PASS
 7PASS
 8PASS
 9PASS
 10PASS

LayoutTests/fast/css-grid-layout/grid-item-negative-position-resolution.html

@@if (window.testRunner)
2727 -webkit-grid-row: -1 / auto;
2828}
2929
 30.endSpanGrowGridInColumnDirection {
 31 -webkit-grid-column: -2 / span 3;
 32 -webkit-grid-row: 1;
 33}
 34
 35.endSpanGrowGridInRowDirection {
 36 -webkit-grid-column: 1;
 37 -webkit-grid-row: -2 / span 3;
 38}
 39
 40.negativeEndPositionStartSpanInColumnDirection {
 41 -webkit-grid-column: span / -1;
 42 -webkit-grid-row: 1;
 43}
 44
 45.negativeEndPositionStartSpanInRowDirection {
 46 -webkit-grid-column: 1;
 47 -webkit-grid-row: span 5 / -1;
 48}
 49
3050.negativeEndPositionStartNegativeInColumnDirection {
3151 -webkit-grid-column: -3 / -1;
3252 -webkit-grid-row: 1;

@@if (window.testRunner)
5575</div>
5676
5777<div style="position: relative">
 78<div class="grid" data-expected-width="550" data-expected-height="150">
 79 <div class="sizedToGridArea endSpanGrowGridInColumnDirection" data-offset-x="50" data-offset-y="0" data-expected-width="500" data-expected-height="50"></div>
 80</div>
 81</div>
 82
 83<div style="position: relative">
 84<div class="grid" data-expected-width="150" data-expected-height="550">
 85 <div class="sizedToGridArea endSpanGrowGridInRowDirection" data-offset-x="0" data-offset-y="50" data-expected-width="50" data-expected-height="500"></div>
 86</div>
 87</div>
 88
 89<div style="position: relative">
 90<div class="grid" data-expected-width="150" data-expected-height="150">
 91 <div class="sizedToGridArea negativeEndPositionStartSpanInColumnDirection" data-offset-x="50" data-offset-y="0" data-expected-width="100" data-expected-height="50"></div>
 92</div>
 93</div>
 94
 95<div style="position: relative">
 96<div class="grid" data-expected-width="150" data-expected-height="150">
 97 <div class="sizedToGridArea negativeEndPositionStartSpanInRowDirection" data-offset-x="0" data-offset-y="0" data-expected-width="50" data-expected-height="150"></div>
 98</div>
 99</div>
 100
 101<div style="position: relative">
58102<div class="grid" data-expected-width="150" data-expected-height="150">
59103 <div class="sizedToGridArea negativeEndPositionStartNegativeInColumnDirection" data-offset-x="0" data-offset-y="0" data-expected-width="150" data-expected-height="50"></div>
60104</div>

LayoutTests/fast/css-grid-layout/grid-item-spanning-resolution-expected.txt

@@PASS
1212PASS
1313PASS
1414PASS
 15PASS
 16PASS
 17PASS
 18PASS
 19PASS

LayoutTests/fast/css-grid-layout/grid-item-spanning-resolution.html

@@if (window.testRunner)
4949 -webkit-grid-column: 3 / 4;
5050 -webkit-grid-row: 3 / 4;
5151}
 52
 53.firstRowSpanning3SecondColumn {
 54 -webkit-grid-column: 2;
 55 -webkit-grid-row: 1 / span 3;
 56}
 57
 58.thirdRowSecondColumnSpanning2 {
 59 -webkit-grid-column: 2 / span 2;
 60 -webkit-grid-row: 3;
 61}
 62
 63.spanning3Row5SecondColumn {
 64 -webkit-grid-column: 2;
 65 -webkit-grid-row: span 3 / 5;
 66}
 67
 68.thirdRowSpanning2Column3 {
 69 -webkit-grid-column: span 2 / 3;
 70 -webkit-grid-row: 3;
 71}
 72
 73.underflowSpanning {
 74 -webkit-grid-column: span 3 / 3;
 75 -webkit-grid-row: span 8 / 4;
 76}
5277</style>
5378<script src="../../resources/check-layout.js"></script>
5479<body onload="checkLayout('.grid');">

@@if (window.testRunner)
126151 <div class="sizedToGridArea secondRowSecondColumnNoSpan" data-offset-x="50" data-offset-y="25" data-expected-width="50" data-expected-height="25"></div>
127152 <div class="sizedToGridArea thirdRowThirdColumnNoSpan" data-offset-x="100" data-offset-y="50" data-expected-width="50" data-expected-height="25"></div>
128153</div>
 154
 155<div style="position: relative">
 156<div class="grid" id="bigGrid" data-expected-width="200" data-expected-height="100">
 157 <div class="sizedToGridArea firstRowSpanning3SecondColumn" data-offset-x="50" data-offset-y="0" data-expected-width="50" data-expected-height="75"></div>
 158</div>
 159</div>
 160
 161<div style="position: relative">
 162<div class="grid" id="bigGrid" data-expected-width="200" data-expected-height="100">
 163 <div class="sizedToGridArea thirdRowSecondColumnSpanning2" data-offset-x="50" data-offset-y="50" data-expected-width="100" data-expected-height="25"></div>
 164</div>
 165
 166<div style="position: relative">
 167<div class="grid" id="bigGrid" data-expected-width="200" data-expected-height="100">
 168 <div class="sizedToGridArea spanning3Row5SecondColumn" data-offset-x="50" data-offset-y="25" data-expected-width="50" data-expected-height="75"></div>
 169</div>
 170</div>
 171
 172<div style="position: relative">
 173<div class="grid" id="bigGrid" data-expected-width="200" data-expected-height="100">
 174 <div class="sizedToGridArea thirdRowSpanning2Column3" data-offset-x="0" data-offset-y="50" data-expected-width="100" data-expected-height="25"></div>
 175</div>
 176
 177<div style="position: relative">
 178<div class="grid" id="bigGrid" data-expected-width="200" data-expected-height="100">
 179 <div class="sizedToGridArea underflowSpanning" data-offset-x="0" data-offset-y="0" data-expected-width="100" data-expected-height="75"></div>
 180</div>
 181
129182</body>
130183</html>