Source/WebCore/ChangeLog

112013-02-19 Julien Chaffraix <jchaffraix@webkit.org>
22
 3 [CSS Grid Layout] Refactor the code in preparation of auto placement support
 4 https://bugs.webkit.org/show_bug.cgi?id=110244
 5
 6 Reviewed by NOBODY (OOPS!).
 7
 8 Test: fast/css-grid-layout/grid-auto-flow-resolution.html
 9
 10 In order to support auto placement, we need to iterate over the grid items with
 11 auto row / column several times. This changes makes us do that in a very simple,
 12 not-yet-conformant way. While touching this code, the distinction between grid-auto-flow
 13 none and row / column was better drawn (and enforced).
 14
 15 * rendering/RenderGrid.cpp:
 16 (WebCore::RenderGrid::resolveGridPositionFromStyle):
 17 Made it illegal to call resolveGridPositionFromStyle if the grid track is auto and
 18 grid-auto-flow is not none. This would catch bad use of the function.
 19
 20 (WebCore::RenderGrid::maximumIndexInDirection):
 21 Updated to bail out if the grid track is auto. Also improved the comment.
 22
 23 (WebCore::RenderGrid::placeItemsOnGrid):
 24 Updated the function to do several iterations. Also handled the grid-auto-flow: none
 25 case differently as it shouldn't need the extra iteration(s).
 26
 272013-02-19 Julien Chaffraix <jchaffraix@webkit.org>
 28
329 RenderGrid::computedUsedBreadthOfGridTracks can read past m_grid's size
430 https://bugs.webkit.org/show_bug.cgi?id=110126
531

Source/WebCore/rendering/RenderGrid.cpp

@@size_t RenderGrid::maximumIndexInDirection(TrackSizingDirection direction) const
317317
318318 for (RenderBox* child = firstChildBox(); child; child = child->nextSiblingBox()) {
319319 const GridPosition& position = (direction == ForColumns) ? child->style()->gridItemColumn() : child->style()->gridItemRow();
320  // This function bypasses the cache as it is used to build it. Also 'auto' items will need to be resolved in seperate phases anyway.
 320 // 'auto' items will need to be resolved in seperate phases anyway. Note that because maximumIndex is at least 1,
 321 // the grid-auto-flow == none case is automatically handled.
 322 if (position.isAuto())
 323 continue;
 324
 325 // This function bypasses the cache (cachedGridCoordinate()) as it is used to build it.
321326 maximumIndex = std::max(maximumIndex, resolveGridPositionFromStyle(position) + 1);
322327 }
323328

@@void RenderGrid::placeItemsOnGrid()
486491 for (size_t i = 0; i < m_grid.size(); ++i)
487492 m_grid[i].grow(maximumColumnIndex);
488493
 494 Vector<RenderBox*> autoGridItems;
 495 GridAutoFlow autoFlow = style()->gridAutoFlow();
489496 for (RenderBox* child = firstChildBox(); child; child = child->nextSiblingBox()) {
490  size_t columnTrack = resolveGridPositionFromStyle(child->style()->gridItemColumn());
491  size_t rowTrack = resolveGridPositionFromStyle(child->style()->gridItemRow());
 497 const GridPosition& columnPosition = child->style()->gridItemColumn();
 498 const GridPosition& rowPosition = child->style()->gridItemRow();
 499 if (autoFlow != AutoFlowNone && (columnPosition.isAuto() || rowPosition.isAuto())) {
 500 autoGridItems.append(child);
 501 continue;
 502 }
 503 size_t columnTrack = resolveGridPositionFromStyle(columnPosition);
 504 size_t rowTrack = resolveGridPositionFromStyle(rowPosition);
492505 insertItemIntoGrid(child, rowTrack, columnTrack);
493506 }
494507
495508 ASSERT(gridRowCount() >= style()->gridRows().size());
496509 ASSERT(gridColumnCount() >= style()->gridColumns().size());
 510
 511 if (autoFlow == AutoFlowNone) {
 512 // If we did collect some grid items, they won't be placed thus never laid out.
 513 ASSERT(!autoGridItems.size());
 514 return;
 515 }
 516
 517 // FIXME: This should implement the auto flow algorithm (https://bugs.webkit.org/b/103316).
 518 // To keep our tests passing, we just insert them in the grid as if grid-auto-flow was none.
 519 for (size_t i = 0; i < autoGridItems.size(); ++i) {
 520 const GridPosition& columnPosition = autoGridItems[i]->style()->gridItemColumn();
 521 const GridPosition& rowPosition = autoGridItems[i]->style()->gridItemRow();
 522 size_t columnTrack = columnPosition.isAuto() ? 0 : resolveGridPositionFromStyle(columnPosition);
 523 size_t rowTrack = rowPosition.isAuto() ? 0 : resolveGridPositionFromStyle(rowPosition);
 524
 525 insertItemIntoGrid(autoGridItems[i], rowTrack, columnTrack);
 526 }
497527}
498528
499529void RenderGrid::clearGrid()

@@size_t RenderGrid::resolveGridPositionFromStyle(const GridPosition& position) co
566596
567597 return position.integerPosition() - 1;
568598 case AutoPosition:
569  // FIXME: We should follow 'grid-auto-flow' for resolution.
570  // Until then, we use the 'grid-auto-flow: none' behavior (which is the default)
571  // and resolve 'auto' as the first row / column.
 599 // We cannot resolve grid positions if grid-auto-flow != none as it requires several iterations.
 600 ASSERT(style()->gridAutoFlow() == AutoFlowNone);
572601 return 0;
573602 }
574603 ASSERT_NOT_REACHED();

LayoutTests/ChangeLog

112013-02-19 Julien Chaffraix <jchaffraix@webkit.org>
22
 3 [CSS Grid Layout] Refactor the code in preparation of auto placement support
 4 https://bugs.webkit.org/show_bug.cgi?id=110244
 5
 6 Reviewed by NOBODY (OOPS!).
 7
 8 * fast/css-grid-layout/grid-auto-flow-resolution-expected.txt: Added.
 9 * fast/css-grid-layout/grid-auto-flow-resolution.html: Added.
 10 * fast/css-grid-layout/implicit-position-dynamic-change.html:
 11 * fast/css-grid-layout/resources/grid.css:
 12 (.autoRowAutoColumn):
 13 (.firstRowAutoColumn):
 14 (.secondRowAutoColumn):
 15 (.thirdRowAutoColumn):
 16 (.autoRowFirstColumn):
 17 (.autoRowSecondColumn):
 18 (.autoRowThirdColumn):
 19 Added these helper classes, some will be used in a follow-up patch.
 20
 21 (.sizedToGridArea):
 22 Hoisted this class into the common style.
 23
 242013-02-19 Julien Chaffraix <jchaffraix@webkit.org>
 25
326 RenderGrid::computedUsedBreadthOfGridTracks can read past m_grid's size
427 https://bugs.webkit.org/show_bug.cgi?id=110126
528

LayoutTests/fast/css-grid-layout/grid-auto-flow-resolution-expected.txt

 1This test checks that the tracks' auto position are properly resolved on a static grid.
 2
 3XXXXX XXXXX XXXXX
 4XXXXX XXXXX XXXXX
 5XXXXX XXXXX XXXXX
 6XXXXX XXXXX XXXXX
 7XXXXX XXXXX XXXXX
 8XXXXX XXXXX XXXXX
 9PASS

LayoutTests/fast/css-grid-layout/grid-auto-flow-resolution.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.smallGrid {
 10 -webkit-grid-columns: 50px 100px;
 11 -webkit-grid-rows: 50px 100px;
 12}
 13</style>
 14<script src="../../resources/check-layout.js"></script>
 15<body onload="checkLayout('.grid')">
 16
 17<p>This test checks that the tracks' auto position are properly resolved on a static grid.</p>
 18
 19<div class="unconstrainedContainer">
 20 <div class="grid smallGrid gridAutoFlowNone" id="gridAutoFlowNone">
 21 <div class="sizedToGridArea autoRowAutoColumn" data-expected-width="50" data-expected-height="50">XXXXX XXXXX XXXXX</div>
 22 <div class="sizedToGridArea secondRowAutoColumn" data-expected-width="50" data-expected-height="100">XXXXX XXXXX XXXXX</div>
 23 <div class="sizedToGridArea autoRowSecondColumn" data-expected-width="100" data-expected-height="50">XXXXX XXXXX XXXXX</div>
 24 <div class="sizedToGridArea secondRowSecondColumn" data-expected-width="100" data-expected-height="100">XXXXX XXXXX XXXXX</div>
 25 <div class="sizedToGridArea thirdRowAutoColumn" data-expected-width="50" data-expected-height="30">XXXXX XXXXX XXXXX</div>
 26 <div class="sizedToGridArea autoRowThirdColumn" data-expected-width="170" data-expected-height="50">XXXXX XXXXX XXXXX</div>
 27 </div>
 28</div>
 29
 30</body>
 31</html>

LayoutTests/fast/css-grid-layout/implicit-position-dynamic-change.html

@@if (window.testRunner)
1010 -webkit-grid-columns: 50px minmax(-webkit-min-content, 50px) minmax(-webkit-max-content, 50px) minmax(50px, -webkit-min-content);
1111 -webkit-grid-rows: 70px minmax(-webkit-max-content, 70px) minmax(50px, -webkit-min-content) minmax(65px, -webkit-max-content);
1212}
13 
14 .sizedToGridArea {
15  font: 10px/1 Ahem;
16  /* Make us fit our grid area. */
17  width: 100%;
18  height: 100%;
19 }
2013</style>
2114<script src="../../resources/check-layout.js"></script>
2215<script>

LayoutTests/fast/css-grid-layout/resources/grid.css

3232 -webkit-grid-row: 2;
3333}
3434
 35/* Auto column / row. */
 36.autoRowAutoColumn {
 37 background-color: pink;
 38 -webkit-grid-column: auto;
 39 -webkit-grid-row: auto;
 40}
 41
 42.firstRowAutoColumn {
 43 background-color: blue;
 44 -webkit-grid-column: auto;
 45 -webkit-grid-row: 1;
 46}
 47
 48.secondRowAutoColumn {
 49 background-color: purple;
 50 -webkit-grid-column: auto;
 51 -webkit-grid-row: 2;
 52}
 53
 54.thirdRowAutoColumn {
 55 background-color: navy;
 56 -webkit-grid-column: auto;
 57 -webkit-grid-row: 3;
 58}
 59
 60.autoRowFirstColumn {
 61 background-color: lime;
 62 -webkit-grid-column: 1;
 63 -webkit-grid-row: auto;
 64}
 65
 66.autoRowSecondColumn {
 67 background-color: orange;
 68 -webkit-grid-column: 2;
 69 -webkit-grid-row: auto;
 70}
 71
 72.autoRowThirdColumn {
 73 background-color: magenta;
 74 -webkit-grid-column: 3;
 75 -webkit-grid-row: auto;
 76}
 77
 78/* Grid element flow. */
3579.gridAutoFlowNone {
3680 -webkit-grid-auto-flow: none;
3781}

5599 height: 1000px;
56100}
57101
 102.sizedToGridArea {
 103 font: 10px/1 Ahem;
 104 /* Make us fit our grid area. */
 105 width: 100%;
 106 height: 100%;
 107}
 108
58109.verticalRL {
59110 -webkit-writing-mode: vertical-rl;
60111}