Source/WebCore/ChangeLog

 12014-06-19 Manuel Rego Casasnovas <rego@igalia.com>
 2
 3 [CSS Grid Layout] Interaction between auto-placement and column / row spanning
 4 https://bugs.webkit.org/show_bug.cgi?id=110633
 5
 6 Reviewed by NOBODY (OOPS!).
 7
 8 Modify auto-placement algorithm in order to support span in both
 9 definite and automatic positions.
 10
 11 This patch fixes examples like:
 12 grid-row: auto;
 13 grid-column: 2 / span 3;
 14
 15 And also:
 16 grid-row: auto;
 17 grid-column: span 3;
 18
 19 Tests: fast/css-grid-layout/grid-item-auto-placement-automatic-span.html
 20 fast/css-grid-layout/grid-item-auto-placement-definite-span.html
 21
 22 * rendering/RenderGrid.cpp:
 23 (WebCore::RenderGrid::GridIterator::checkEmptyCells): New method that
 24 checks if a grid area is or not empty.
 25 (WebCore::RenderGrid::GridIterator::nextEmptyGridArea): Updated method
 26 that now receives two arguments with the span value in both directions.
 27 (WebCore::RenderGrid::ensureGridSize): Renamed from gridRow(). Adapted
 28 method to grow in both directions at the same time if needed. It ensures
 29 that the grid is big enough to insert a new item.
 30 (WebCore::RenderGrid::insertItemIntoGrid): Only leave the method that
 31 receives a GridCoordinate. It uses ensureGridSize() before inserting the
 32 item in the grid.
 33 (WebCore::RenderGrid::populateExplicitGridAndOrderIterator): Ensure that
 34 the grid is big enough to place the largest span for auto-positioned
 35 items.
 36 (WebCore::RenderGrid::createEmptyGridAreaAtSpecifiedPositionsOutsideGrid):
 37 New method that returns a GridCoordinate outside current grid with the
 38 requested dimensions.
 39 (WebCore::RenderGrid::placeSpecifiedMajorAxisItemsOnGrid): Adapted
 40 method to calculate the item's span and use the new version of
 41 nextEmptyGridArea(). If an empty area is not found it uses
 42 createEmptyGridAreaAtSpecifiedPositionsOutsideGrid() to place the item.
 43 (WebCore::RenderGrid::placeAutoMajorAxisItemOnGrid): Ditto.
 44 (WebCore::RenderGrid::growGrid): Deleted. Renamed to ensureGridSize().
 45 * rendering/RenderGrid.h: Modify methods headers and add new method
 46 signature.
 47 * rendering/style/GridCoordinate.h:
 48 (WebCore::GridSpan::integerSpan): Add new simple method to return the
 49 span value of a position.
 50 * rendering/style/GridResolvedPosition.cpp:
 51 (WebCore::GridResolvedPosition::resolveGridPositionsFromAutoPlacementPosition):
 52 Implement method to take into account span in auto-placement algorithm.
 53 (WebCore::GridResolvedPosition::adjustGridPositionsFromStyle): Add new
 54 checks related with named grid line spans in auto-positioned items,
 55 which is not allowed according to the spec.
 56 * rendering/style/GridResolvedPosition.h: Update method header.
 57
1582014-06-24 Carlos Garcia Campos <cgarcia@igalia.com>
259
360 Unreviewed. Fix GTK+ build after r170309.

Source/WebCore/rendering/RenderGrid.cpp

@@public:
117117 return 0;
118118 }
119119
120  std::unique_ptr<GridCoordinate> nextEmptyGridArea()
 120 bool checkEmptyCells(size_t rowSpan, size_t columnSpan) const
121121 {
 122 // Ignore cells outside current grid as we will grow it later if needed.
 123 size_t maxRows = std::min(m_rowIndex + rowSpan, m_grid.size());
 124 size_t maxColumns = std::min(m_columnIndex + columnSpan, m_grid[0].size());
 125
 126 // This adds a O(N^2) behavior that shouldn't be a big deal as we expect spanning areas to be small.
 127 for (size_t row = m_rowIndex; row < maxRows; ++row) {
 128 for (size_t column = m_columnIndex; column < maxColumns; ++column) {
 129 const Vector<RenderBox*>& children = m_grid[row][column];
 130 if (!children.isEmpty())
 131 return false;
 132 }
 133 }
 134
 135 return true;
 136 }
 137
 138 std::unique_ptr<GridCoordinate> nextEmptyGridArea(size_t fixedTrackSpan, size_t varyingTrackSpan)
 139 {
 140 ASSERT(fixedTrackSpan >= 1 && varyingTrackSpan >= 1);
 141
122142 if (m_grid.isEmpty())
123143 return nullptr;
124144
 145 size_t rowSpan = (m_direction == ForColumns) ? varyingTrackSpan : fixedTrackSpan;
 146 size_t columnSpan = (m_direction == ForColumns) ? fixedTrackSpan : varyingTrackSpan;
 147
125148 size_t& varyingTrackIndex = (m_direction == ForColumns) ? m_rowIndex : m_columnIndex;
126149 const size_t endOfVaryingTrackIndex = (m_direction == ForColumns) ? m_grid.size() : m_grid[0].size();
127150 for (; varyingTrackIndex < endOfVaryingTrackIndex; ++varyingTrackIndex) {
128  const Vector<RenderBox*>& children = m_grid[m_rowIndex][m_columnIndex];
129  if (children.isEmpty()) {
130  std::unique_ptr<GridCoordinate> result = std::make_unique<GridCoordinate>(GridSpan(m_rowIndex, m_rowIndex), GridSpan(m_columnIndex, m_columnIndex));
 151 if (checkEmptyCells(rowSpan, columnSpan)) {
 152 std::unique_ptr<GridCoordinate> result = std::make_unique<GridCoordinate>(GridSpan(m_rowIndex, m_rowIndex + rowSpan - 1), GridSpan(m_columnIndex, m_columnIndex + columnSpan - 1));
131153 // Advance the iterator to avoid an infinite loop where we would return the same grid area over and over.
132154 ++varyingTrackIndex;
133155 return result;

@@bool RenderGrid::tracksAreWiderThanMinTrackBreadth(GridTrackSizingDirection dire
608630}
609631#endif
610632
611 void RenderGrid::growGrid(GridTrackSizingDirection direction)
 633void RenderGrid::ensureGridSize(size_t maximumRowIndex, size_t maximumColumnIndex)
612634{
613  if (direction == ForColumns) {
614  const size_t oldColumnSize = gridColumnCount();
 635 const size_t oldRowSize = gridRowCount();
 636 if (maximumRowIndex >= oldRowSize) {
 637 m_grid.grow(maximumRowIndex + 1);
 638 for (size_t row = oldRowSize; row < gridRowCount(); ++row)
 639 m_grid[row].grow(gridColumnCount());
 640 }
 641
 642 if (maximumColumnIndex >= gridColumnCount()) {
615643 for (size_t row = 0; row < gridRowCount(); ++row)
616  m_grid[row].grow(oldColumnSize + 1);
617  } else {
618  const size_t oldRowSize = gridRowCount();
619  m_grid.grow(oldRowSize + 1);
620  m_grid[oldRowSize].grow(gridColumnCount());
 644 m_grid[row].grow(maximumColumnIndex + 1);
621645 }
622646}
623647
624648void RenderGrid::insertItemIntoGrid(RenderBox* child, const GridCoordinate& coordinate)
625649{
 650 ensureGridSize(coordinate.rows.resolvedFinalPosition.toInt(), coordinate.columns.resolvedFinalPosition.toInt());
 651
626652 for (auto row : coordinate.rows) {
627653 for (auto column : coordinate.columns)
628654 m_grid[row.toInt()][column.toInt()].append(child);

@@void RenderGrid::insertItemIntoGrid(RenderBox* child, const GridCoordinate& coor
630656 m_gridItemCoordinate.set(child, coordinate);
631657}
632658
633 void RenderGrid::insertItemIntoGrid(RenderBox* child, const GridResolvedPosition& rowTrack, const GridResolvedPosition& columnTrack)
634 {
635  const GridSpan& rowSpan = GridResolvedPosition::resolveGridPositionsFromAutoPlacementPosition(*child, ForRows, rowTrack);
636  const GridSpan& columnSpan = GridResolvedPosition::resolveGridPositionsFromAutoPlacementPosition(*child, ForColumns, columnTrack);
637  insertItemIntoGrid(child, GridCoordinate(rowSpan, columnSpan));
638 }
639 
640659void RenderGrid::placeItemsOnGrid()
641660{
642661 ASSERT(!gridWasPopulated());

@@void RenderGrid::populateExplicitGridAndOrderIterator()
690709 std::unique_ptr<GridSpan> rowPositions = GridResolvedPosition::resolveGridPositionsFromStyle(style(), *child, ForRows);
691710 std::unique_ptr<GridSpan> columnPositions = GridResolvedPosition::resolveGridPositionsFromStyle(style(), *child, ForColumns);
692711
693  // |positions| is 0 if we need to run the auto-placement algorithm. Our estimation ignores
694  // this case as the auto-placement algorithm will grow the grid as needed.
 712 // |positions| is 0 if we need to run the auto-placement algorithm.
695713 if (rowPositions)
696714 maximumRowIndex = std::max(maximumRowIndex, rowPositions->resolvedFinalPosition.next().toInt());
 715 else {
 716 // Grow the grid for items with a definite row span, getting the largest such span.
 717 GridSpan positions = GridResolvedPosition::resolveGridPositionsFromAutoPlacementPosition(style(), *child, ForRows, GridResolvedPosition(0));
 718 maximumRowIndex = std::max<size_t>(maximumRowIndex, positions.resolvedFinalPosition.next().toInt());
 719 }
 720
697721 if (columnPositions)
698722 maximumColumnIndex = std::max(maximumColumnIndex, columnPositions->resolvedFinalPosition.next().toInt());
 723 else {
 724 // Grow the grid for items with a definite column span, getting the largest such span.
 725 GridSpan positions = GridResolvedPosition::resolveGridPositionsFromAutoPlacementPosition(style(), *child, ForColumns, GridResolvedPosition(0));
 726 maximumColumnIndex = std::max<size_t>(maximumColumnIndex, positions.resolvedFinalPosition.next().toInt());
 727 }
699728 }
700729
701730 m_grid.grow(maximumRowIndex);

@@void RenderGrid::populateExplicitGridAndOrderIterator()
703732 m_grid[i].grow(maximumColumnIndex);
704733}
705734
 735std::unique_ptr<GridCoordinate> RenderGrid::createEmptyGridAreaAtSpecifiedPositionsOutsideGrid(const RenderBox* gridItem, GridTrackSizingDirection specifiedDirection, const GridSpan& specifiedPositions) const
 736{
 737 GridTrackSizingDirection crossDirection = specifiedDirection == ForColumns ? ForRows : ForColumns;
 738 const size_t endOfCrossDirection = crossDirection == ForColumns ? gridColumnCount() : gridRowCount();
 739 GridSpan crossDirectionPositions = GridResolvedPosition::resolveGridPositionsFromAutoPlacementPosition(style(), *gridItem, crossDirection, GridResolvedPosition(endOfCrossDirection));
 740 return std::make_unique<GridCoordinate>(specifiedDirection == ForColumns ? crossDirectionPositions : specifiedPositions, specifiedDirection == ForColumns ? specifiedPositions : crossDirectionPositions);
 741}
 742
706743void RenderGrid::placeSpecifiedMajorAxisItemsOnGrid(const Vector<RenderBox*>& autoGridItems)
707744{
708745 for (auto& autoGridItem : autoGridItems) {
709746 std::unique_ptr<GridSpan> majorAxisPositions = GridResolvedPosition::resolveGridPositionsFromStyle(style(), *autoGridItem, autoPlacementMajorAxisDirection());
710  GridIterator iterator(m_grid, autoPlacementMajorAxisDirection(), majorAxisPositions->resolvedInitialPosition.toInt());
711  if (std::unique_ptr<GridCoordinate> emptyGridArea = iterator.nextEmptyGridArea()) {
712  insertItemIntoGrid(autoGridItem, emptyGridArea->rows.resolvedInitialPosition, emptyGridArea->columns.resolvedInitialPosition);
713  continue;
714  }
 747 GridSpan minorAxisPositions = GridResolvedPosition::resolveGridPositionsFromAutoPlacementPosition(style(), *autoGridItem, autoPlacementMinorAxisDirection(), GridResolvedPosition(0));
715748
716  growGrid(autoPlacementMinorAxisDirection());
717  std::unique_ptr<GridCoordinate> emptyGridArea = iterator.nextEmptyGridArea();
718  ASSERT(emptyGridArea);
719  insertItemIntoGrid(autoGridItem, emptyGridArea->rows.resolvedInitialPosition, emptyGridArea->columns.resolvedInitialPosition);
 749 GridIterator iterator(m_grid, autoPlacementMajorAxisDirection(), majorAxisPositions->resolvedInitialPosition.toInt());
 750 std::unique_ptr<GridCoordinate> emptyGridArea = iterator.nextEmptyGridArea(majorAxisPositions->integerSpan(), minorAxisPositions.integerSpan());
 751 if (!emptyGridArea)
 752 emptyGridArea = createEmptyGridAreaAtSpecifiedPositionsOutsideGrid(autoGridItem, autoPlacementMajorAxisDirection(), *majorAxisPositions);
 753 insertItemIntoGrid(autoGridItem, *emptyGridArea);
720754 }
721755}
722756

@@void RenderGrid::placeAutoMajorAxisItemOnGrid(RenderBox* gridItem)
730764{
731765 std::unique_ptr<GridSpan> minorAxisPositions = GridResolvedPosition::resolveGridPositionsFromStyle(style(), *gridItem, autoPlacementMinorAxisDirection());
732766 ASSERT(!GridResolvedPosition::resolveGridPositionsFromStyle(style(), *gridItem, autoPlacementMajorAxisDirection()));
733  size_t minorAxisIndex = 0;
 767 GridSpan majorAxisPositions = GridResolvedPosition::resolveGridPositionsFromAutoPlacementPosition(style(), *gridItem, autoPlacementMajorAxisDirection(), GridResolvedPosition(0));
 768 std::unique_ptr<GridCoordinate> emptyGridArea;
734769 if (minorAxisPositions) {
735  minorAxisIndex = minorAxisPositions->resolvedInitialPosition.toInt();
736  GridIterator iterator(m_grid, autoPlacementMinorAxisDirection(), minorAxisIndex);
737  if (std::unique_ptr<GridCoordinate> emptyGridArea = iterator.nextEmptyGridArea()) {
738  insertItemIntoGrid(gridItem, emptyGridArea->rows.resolvedInitialPosition, emptyGridArea->columns.resolvedInitialPosition);
739  return;
740  }
 770 GridIterator iterator(m_grid, autoPlacementMinorAxisDirection(), minorAxisPositions->resolvedInitialPosition.toInt());
 771 emptyGridArea = iterator.nextEmptyGridArea(minorAxisPositions->integerSpan(), majorAxisPositions.integerSpan());
 772 if (!emptyGridArea)
 773 emptyGridArea = createEmptyGridAreaAtSpecifiedPositionsOutsideGrid(gridItem, autoPlacementMinorAxisDirection(), *minorAxisPositions);
741774 } else {
 775 GridSpan minorAxisPositions = GridResolvedPosition::resolveGridPositionsFromAutoPlacementPosition(style(), *gridItem, autoPlacementMinorAxisDirection(), GridResolvedPosition(0));
 776
742777 const size_t endOfMajorAxis = (autoPlacementMajorAxisDirection() == ForColumns) ? gridColumnCount() : gridRowCount();
743778 for (size_t majorAxisIndex = 0; majorAxisIndex < endOfMajorAxis; ++majorAxisIndex) {
744779 GridIterator iterator(m_grid, autoPlacementMajorAxisDirection(), majorAxisIndex);
745  if (std::unique_ptr<GridCoordinate> emptyGridArea = iterator.nextEmptyGridArea()) {
746  insertItemIntoGrid(gridItem, emptyGridArea->rows.resolvedInitialPosition, emptyGridArea->columns.resolvedInitialPosition);
747  return;
 780 emptyGridArea = iterator.nextEmptyGridArea(majorAxisPositions.integerSpan(), minorAxisPositions.integerSpan());
 781
 782 if (emptyGridArea) {
 783 // Check that it fits in the minor axis direction, as we shouldn't grow in that direction here (it was already managed in populateExplicitGridAndOrderIterator()).
 784 GridResolvedPosition minorAxisFinalPositionIndex = autoPlacementMinorAxisDirection() == ForColumns ? emptyGridArea->columns.resolvedFinalPosition : emptyGridArea->rows.resolvedFinalPosition;
 785 const size_t endOfMinorAxis = autoPlacementMinorAxisDirection() == ForColumns ? gridColumnCount() : gridRowCount();
 786 if (minorAxisFinalPositionIndex.toInt() < endOfMinorAxis)
 787 break;
 788
 789 // Discard empty grid area as it does not fit in the minor axis direction.
 790 // We don't need to create a new empty grid area yet as we might find a valid one in the next iteration.
 791 emptyGridArea = nullptr;
748792 }
749793 }
 794
 795 if (!emptyGridArea)
 796 emptyGridArea = createEmptyGridAreaAtSpecifiedPositionsOutsideGrid(gridItem, autoPlacementMinorAxisDirection(), minorAxisPositions);
750797 }
751798
752  // We didn't find an empty grid area so we need to create an extra major axis line and insert our gridItem in it.
753  const size_t columnIndex = (autoPlacementMajorAxisDirection() == ForColumns) ? gridColumnCount() : minorAxisIndex;
754  const size_t rowIndex = (autoPlacementMajorAxisDirection() == ForColumns) ? minorAxisIndex : gridRowCount();
755  growGrid(autoPlacementMajorAxisDirection());
756  insertItemIntoGrid(gridItem, rowIndex, columnIndex);
 799 insertItemIntoGrid(gridItem, *emptyGridArea);
757800}
758801
759802GridTrackSizingDirection RenderGrid::autoPlacementMajorAxisDirection() const

Source/WebCore/rendering/RenderGrid.h

@@private:
7070 LayoutUnit computeUsedBreadthOfSpecifiedLength(GridTrackSizingDirection, const Length&) const;
7171 void resolveContentBasedTrackSizingFunctions(GridTrackSizingDirection, GridSizingData&);
7272
73  void growGrid(GridTrackSizingDirection);
74  void insertItemIntoGrid(RenderBox*, const GridResolvedPosition& rowTrack, const GridResolvedPosition& columnTrack);
 73 void ensureGridSize(size_t maximumRowIndex, size_t maximumColumnIndex);
7574 void insertItemIntoGrid(RenderBox*, const GridCoordinate&);
7675 void placeItemsOnGrid();
7776 void populateExplicitGridAndOrderIterator();
 77 std::unique_ptr<GridCoordinate> createEmptyGridAreaAtSpecifiedPositionsOutsideGrid(const RenderBox*, GridTrackSizingDirection, const GridSpan&) const;
7878 void placeSpecifiedMajorAxisItemsOnGrid(const Vector<RenderBox*>&);
7979 void placeAutoMajorAxisItemsOnGrid(const Vector<RenderBox*>&);
8080 void placeAutoMajorAxisItemOnGrid(RenderBox*);

Source/WebCore/rendering/style/GridCoordinate.h

@@public:
5757 return resolvedInitialPosition == o.resolvedInitialPosition && resolvedFinalPosition == o.resolvedFinalPosition;
5858 }
5959
 60 size_t integerSpan() const
 61 {
 62 return resolvedFinalPosition.toInt() - resolvedInitialPosition.toInt() + 1;
 63 }
 64
6065 GridResolvedPosition resolvedInitialPosition;
6166 GridResolvedPosition resolvedFinalPosition;
6267

Source/WebCore/rendering/style/GridResolvedPosition.cpp

@@static size_t explicitGridSizeForSide(const RenderStyle& gridContainerStyle, Gri
5353 return isColumnSide(side) ? gridContainerStyle.gridColumns().size() : gridContainerStyle.gridRows().size();
5454}
5555
56 GridSpan GridResolvedPosition::resolveGridPositionsFromAutoPlacementPosition(const RenderBox&, GridTrackSizingDirection, const GridResolvedPosition& initialPosition)
 56GridSpan GridResolvedPosition::resolveGridPositionsFromAutoPlacementPosition(const RenderStyle& gridContainerStyle, const RenderBox& gridItem, GridTrackSizingDirection direction, const GridResolvedPosition& resolvedInitialPosition)
5757{
58  // FIXME: We don't support spanning with auto positions yet. Once we do, this is wrong. Also we should make
59  // sure the grid can accomodate the new item as we only grow 1 position in a given direction.
60  return GridSpan(initialPosition, initialPosition);
 58 GridPosition initialPosition = (direction == ForColumns) ? gridItem.style().gridItemColumnStart() : gridItem.style().gridItemRowStart();
 59 const GridPositionSide initialPositionSide = (direction == ForColumns) ? ColumnStartSide : RowStartSide;
 60 GridPosition finalPosition = (direction == ForColumns) ? gridItem.style().gridItemColumnEnd() : gridItem.style().gridItemRowEnd();
 61 const GridPositionSide finalPositionSide = (direction == ForColumns) ? ColumnEndSide : RowEndSide;
 62
 63 adjustGridPositionsFromStyle(gridContainerStyle, initialPosition, finalPosition, initialPositionSide, finalPositionSide);
 64
 65
 66 // This method will only be used when both positions need to be resolved against the opposite one.
 67 ASSERT(initialPosition.shouldBeResolvedAgainstOppositePosition() && finalPosition.shouldBeResolvedAgainstOppositePosition());
 68
 69 GridResolvedPosition resolvedFinalPosition = resolvedInitialPosition;
 70
 71 if (initialPosition.isSpan())
 72 resolvedFinalPosition = resolveGridPositionAgainstOppositePosition(gridContainerStyle, resolvedInitialPosition, initialPosition, finalPositionSide)->resolvedFinalPosition;
 73 else if (finalPosition.isSpan())
 74 resolvedFinalPosition = resolveGridPositionAgainstOppositePosition(gridContainerStyle, resolvedInitialPosition, finalPosition, finalPositionSide)->resolvedFinalPosition;
 75
 76 return GridSpan(resolvedInitialPosition, resolvedFinalPosition);
6177}
6278
6379static inline const NamedGridLinesMap& gridLinesForSide(const RenderStyle& style, GridPositionSide side)

@@void GridResolvedPosition::adjustGridPositionsFromStyle(const RenderStyle& gridC
93109
94110 if (finalPosition.isNamedGridArea() && isNonExistentNamedLineOrArea(finalPosition.namedGridLine(), gridContainerStyle, finalPositionSide))
95111 finalPosition.setAutoPosition();
 112
 113 // If the grid item has an automatic position and a grid span for a named line in a given dimension, instead treat the grid span as one.
 114 if (initialPosition.isAuto() && finalPosition.isSpan() && !finalPosition.namedGridLine().isNull())
 115 finalPosition.setSpanPosition(1, String());
 116 if (finalPosition.isAuto() && initialPosition.isSpan() && !initialPosition.namedGridLine().isNull())
 117 initialPosition.setSpanPosition(1, String());
96118}
97119
98120std::unique_ptr<GridSpan> GridResolvedPosition::resolveGridPositionsFromStyle(const RenderStyle& gridContainerStyle, const RenderBox& gridItem, GridTrackSizingDirection direction)

Source/WebCore/rendering/style/GridResolvedPosition.h

@@public:
7171 return GridResolvedPosition(resolvedPosition);
7272 }
7373
74  static GridSpan resolveGridPositionsFromAutoPlacementPosition(const RenderBox&, GridTrackSizingDirection, const GridResolvedPosition&);
 74 static GridSpan resolveGridPositionsFromAutoPlacementPosition(const RenderStyle&, const RenderBox&, GridTrackSizingDirection, const GridResolvedPosition&);
7575 static void adjustNamedGridItemPosition(const RenderStyle&, GridPosition&, GridPositionSide);
7676 static void adjustGridPositionsFromStyle(const RenderStyle&, GridPosition& initialPosition, GridPosition& finalPosition, GridPositionSide initialPositionSide, GridPositionSide finalPositionSide);
7777 static std::unique_ptr<GridSpan> resolveGridPositionsFromStyle(const RenderStyle&, const RenderBox&, GridTrackSizingDirection);

LayoutTests/ChangeLog

 12014-06-19 Manuel Rego Casasnovas <rego@igalia.com>
 2
 3 [CSS Grid Layout] Interaction between auto-placement and column / row spanning
 4 https://bugs.webkit.org/show_bug.cgi?id=110633
 5
 6 Reviewed by NOBODY (OOPS!).
 7
 8 Add new specific test cases for span in auto-placement algorithm.
 9
 10 * fast/css-grid-layout/grid-item-auto-placement-automatic-span-expected.txt: Added.
 11 * fast/css-grid-layout/grid-item-auto-placement-automatic-span.html: Added.
 12 * fast/css-grid-layout/grid-item-auto-placement-definite-span-expected.txt: Added.
 13 * fast/css-grid-layout/grid-item-auto-placement-definite-span.html: Added.
 14 * fast/css-grid-layout/grid-item-spanning-resolution.html: Update test
 15 case now that span in auto-positioned items is supported.
 16
1172014-06-20 Jer Noble <jer.noble@apple.com>
218
319 HTMLMediaElement seek algorithm should allow cancelling previous seeks.

LayoutTests/fast/css-grid-layout/grid-item-auto-placement-automatic-span-expected.txt

 1Thist test checks that span is supported in auto-placement for automatic positions.
 2
 3PASS
 4PASS
 5PASS
 6PASS
 7PASS
 8PASS
 9PASS
 10PASS

LayoutTests/fast/css-grid-layout/grid-item-auto-placement-automatic-span.html

 1<!DOCTYPE html>
 2<html>
 3<link href="resources/grid.css" rel="stylesheet">
 4<style>
 5.grid {
 6 -webkit-grid-auto-rows: 50px;
 7 -webkit-grid-auto-columns: 100px;
 8}
 9
 10.gridNamedGridLinesColumns {
 11 -webkit-grid-template-columns: 50px 100px (line) 200px (line);
 12}
 13
 14.gridNamedGridLinesRows {
 15 -webkit-grid-template-rows: 50px 100px (line) 200px (line);
 16}
 17
 18.autoRowAutoColumnSpanning2 {
 19 background-color: maroon;
 20 -webkit-grid-column: span 2;
 21 -webkit-grid-row: auto;
 22}
 23
 24.autoRowAutoColumnSpanning3 {
 25 background-color: teal;
 26 -webkit-grid-column: span 3;
 27 -webkit-grid-row: auto;
 28}
 29
 30.autoRowSpanning2AutoColumn {
 31 background-color: aqua;
 32 -webkit-grid-column: auto;
 33 -webkit-grid-row: span 2;
 34}
 35
 36.autoRowSpanning3AutoColumn {
 37 background-color: salmon;
 38 -webkit-grid-column: auto;
 39 -webkit-grid-row: span 3;
 40}
 41
 42.autoRowSpanning2AutoColumnSpanning2 {
 43 background-color: olive;
 44 -webkit-grid-column: span 2;
 45 -webkit-grid-row: span 2;
 46}
 47
 48.autoRowAutoColumnSpanningLine {
 49 background-color: indigo;
 50 -webkit-grid-column: span line; /* This is treated as "span 1". */
 51 -webkit-grid-row: auto;
 52}
 53
 54.autoRowSpanningLineAutoColumn {
 55 background-color: moccasin;
 56 -webkit-grid-column: auto;
 57 -webkit-grid-row: span line; /* This is treated as "span 1". */
 58}
 59
 60.autoRowAutoColumnSpanning2Line {
 61 background-color: sienna;
 62 -webkit-grid-column: span 2 line; /* This is treated as "span 1". */
 63 -webkit-grid-row: auto;
 64}
 65
 66.autoRowSpanning2LineAutoColumn {
 67 background-color: tomato;
 68 -webkit-grid-column: auto;
 69 -webkit-grid-row: span 2 line; /* This is treated as "span 1". */
 70}
 71</style>
 72<script src="../../resources/check-layout.js"></script>
 73<body onload="checkLayout('.grid');">
 74
 75<p>Thist test checks that span is supported in auto-placement for automatic positions.</p>
 76
 77<div style="position: relative">
 78 <div class="grid gridAutoFlowRow">
 79 <div class="sizedToGridArea autoRowAutoColumnSpanning2" data-offset-x="0" data-offset-y="0" data-expected-width="200" data-expected-height="50"></div>
 80 <div class="sizedToGridArea autoRowAutoColumn" data-offset-x="200" data-offset-y="0" data-expected-width="100" data-expected-height="50"></div>
 81 <div class="sizedToGridArea autoRowAutoColumn" data-offset-x="0" data-offset-y="50" data-expected-width="100" data-expected-height="50"></div>
 82 <div class="sizedToGridArea autoRowAutoColumnSpanning2" data-offset-x="100" data-offset-y="50" data-expected-width="200" data-expected-height="50"></div>
 83 <div class="sizedToGridArea autoRowAutoColumnSpanning3" data-offset-x="0" data-offset-y="100" data-expected-width="300" data-expected-height="50"></div>
 84 <div class="sizedToGridArea autoRowSpanning2AutoColumnSpanning2" data-offset-x="0" data-offset-y="150" data-expected-width="200" data-expected-height="100"></div>
 85 <div class="sizedToGridArea autoRowAutoColumn" data-offset-x="200" data-offset-y="150" data-expected-width="100" data-expected-height="50"></div>
 86 <div class="sizedToGridArea autoRowAutoColumn" data-offset-x="200" data-offset-y="200" data-expected-width="100" data-expected-height="50"></div>
 87 <div class="sizedToGridArea autoRowAutoColumn" data-offset-x="0" data-offset-y="250" data-expected-width="100" data-expected-height="50"></div>
 88 <div class="sizedToGridArea autoRowSpanning2AutoColumnSpanning2" data-offset-x="100" data-offset-y="250" data-expected-width="200" data-expected-height="100"></div>
 89 <div class="sizedToGridArea autoRowAutoColumn" data-offset-x="0" data-offset-y="300" data-expected-width="100" data-expected-height="50"></div>
 90 </div>
 91</div>
 92
 93<div style="position: relative">
 94 <div class="grid gridAutoFlowRow">
 95 <div class="sizedToGridArea autoRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="100" data-expected-height="50"></div>
 96 <div class="sizedToGridArea autoRowSecondColumn" data-offset-x="100" data-offset-y="0" data-expected-width="100" data-expected-height="50"></div>
 97 <div class="sizedToGridArea autoRowThirdColumn" data-offset-x="200" data-offset-y="0" data-expected-width="100" data-expected-height="50"></div>
 98 <div class="sizedToGridArea autoRowFirstColumn" data-offset-x="0" data-offset-y="50" data-expected-width="100" data-expected-height="50"></div>
 99 <div class="sizedToGridArea autoRowAutoColumnSpanning3" data-offset-x="0" data-offset-y="100" data-expected-width="300" data-expected-height="50"></div>
 100 <div class="sizedToGridArea autoRowSecondColumn" data-offset-x="100" data-offset-y="50" data-expected-width="100" data-expected-height="50"></div>
 101 <div class="sizedToGridArea autoRowAutoColumnSpanning2" data-offset-x="0" data-offset-y="150" data-expected-width="200" data-expected-height="50"></div>
 102 <div class="sizedToGridArea autoRowAutoColumnSpanning2" data-offset-x="0" data-offset-y="200" data-expected-width="200" data-expected-height="50"></div>
 103 <div class="sizedToGridArea autoRowFirstColumn" data-offset-x="0" data-offset-y="250" data-expected-width="100" data-expected-height="50"></div>
 104 <div class="sizedToGridArea autoRowAutoColumnSpanning3" data-offset-x="0" data-offset-y="300" data-expected-width="300" data-expected-height="50"></div>
 105 <div class="sizedToGridArea autoRowAutoColumnSpanning2" data-offset-x="100" data-offset-y="250" data-expected-width="200" data-expected-height="50"></div>
 106 <div class="sizedToGridArea autoRowSpanning2AutoColumnSpanning2" data-offset-x="0" data-offset-y="350" data-expected-width="200" data-expected-height="100"></div>
 107 </div>
 108</div>
 109
 110<div style="position: relative">
 111 <div class="grid gridAutoFlowRow">
 112 <div class="sizedToGridArea autoRowSpanning2AutoColumn" data-offset-x="0" data-offset-y="0" data-expected-width="100" data-expected-height="100"></div>
 113 <div class="sizedToGridArea autoRowSecondColumn" data-offset-x="100" data-offset-y="0" data-expected-width="100" data-expected-height="50"></div>
 114 <div class="sizedToGridArea autoRowThirdColumn" data-offset-x="200" data-offset-y="0" data-expected-width="100" data-expected-height="50"></div>
 115 <div class="sizedToGridArea autoRowSpanning2AutoColumnSpanning2" data-offset-x="100" data-offset-y="50" data-expected-width="200" data-expected-height="100"></div>
 116 <div class="sizedToGridArea autoRowSpanning3AutoColumn" data-offset-x="0" data-offset-y="100" data-expected-width="100" data-expected-height="150"></div>
 117 <div class="sizedToGridArea autoRowSpanning2AutoColumnSpanning2" data-offset-x="100" data-offset-y="150" data-expected-width="200" data-expected-height="100"></div>
 118 </div>
 119</div>
 120
 121<div style="position: relative">
 122 <div class="grid gridAutoFlowRow gridNamedGridLinesColumns">
 123 <div class="sizedToGridArea autoRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="50" data-expected-height="50"></div>
 124 <div class="sizedToGridArea autoRowAutoColumnSpanning2Line" data-offset-x="50" data-offset-y="0" data-expected-width="100" data-expected-height="50"></div>
 125 <div class="sizedToGridArea autoRowSecondColumn" data-offset-x="50" data-offset-y="50" data-expected-width="100" data-expected-height="50"></div>
 126 <div class="sizedToGridArea autoRowAutoColumnSpanning2Line" data-offset-x="150" data-offset-y="0" data-expected-width="200" data-expected-height="50"></div>
 127 <div class="sizedToGridArea autoRowThirdColumn" data-offset-x="150" data-offset-y="50" data-expected-width="200" data-expected-height="50"></div>
 128 <div class="sizedToGridArea autoRowAutoColumnSpanningLine" data-offset-x="0" data-offset-y="50" data-expected-width="50" data-expected-height="50"></div>
 129 <div class="sizedToGridArea autoRowAutoColumnSpanning2Line" data-offset-x="0" data-offset-y="100" data-expected-width="50" data-expected-height="50"></div>
 130 <div class="sizedToGridArea autoRowFirstColumn" data-offset-x="0" data-offset-y="150" data-expected-width="50" data-expected-height="50"></div>
 131 <div class="sizedToGridArea autoRowAutoColumnSpanningLine" data-offset-x="50" data-offset-y="100" data-expected-width="100" data-expected-height="50"></div>
 132 <div class="sizedToGridArea autoRowThirdColumn" data-offset-x="150" data-offset-y="100" data-expected-width="200" data-expected-height="50"></div>
 133 <div class="sizedToGridArea autoRowAutoColumnSpanningLine" data-offset-x="50" data-offset-y="150" data-expected-width="100" data-expected-height="50"></div>
 134 <div class="sizedToGridArea autoRowAutoColumnSpanningLine" data-offset-x="150" data-offset-y="150" data-expected-width="200" data-expected-height="50"></div>
 135 </div>
 136</div>
 137
 138<div style="position: relative">
 139 <div class="grid gridAutoFlowColumn">
 140 <div class="sizedToGridArea autoRowSpanning2AutoColumn" data-offset-x="0" data-offset-y="0" data-expected-width="100" data-expected-height="100"></div>
 141 <div class="sizedToGridArea autoRowAutoColumn" data-offset-x="0" data-offset-y="100" data-expected-width="100" data-expected-height="50"></div>
 142 <div class="sizedToGridArea autoRowAutoColumn" data-offset-x="100" data-offset-y="0" data-expected-width="100" data-expected-height="50"></div>
 143 <div class="sizedToGridArea autoRowSpanning2AutoColumn" data-offset-x="100" data-offset-y="50" data-expected-width="100" data-expected-height="100"></div>
 144 <div class="sizedToGridArea autoRowSpanning3AutoColumn" data-offset-x="200" data-offset-y="0" data-expected-width="100" data-expected-height="150"></div>
 145 <div class="sizedToGridArea autoRowSpanning2AutoColumnSpanning2" data-offset-x="300" data-offset-y="0" data-expected-width="200" data-expected-height="100"></div>
 146 <div class="sizedToGridArea autoRowAutoColumn" data-offset-x="300" data-offset-y="100" data-expected-width="100" data-expected-height="50"></div>
 147 <div class="sizedToGridArea autoRowAutoColumn" data-offset-x="400" data-offset-y="100" data-expected-width="100" data-expected-height="50"></div>
 148 <div class="sizedToGridArea autoRowAutoColumn" data-offset-x="500" data-offset-y="0" data-expected-width="100" data-expected-height="50"></div>
 149 <div class="sizedToGridArea autoRowSpanning2AutoColumnSpanning2" data-offset-x="500" data-offset-y="50" data-expected-width="200" data-expected-height="100"></div>
 150 <div class="sizedToGridArea autoRowAutoColumn" data-offset-x="600" data-offset-y="0" data-expected-width="100" data-expected-height="50"></div>
 151 </div>
 152</div>
 153
 154<div style="position: relative">
 155 <div class="grid gridAutoFlowColumn">
 156 <div class="sizedToGridArea firstRowAutoColumn" data-offset-x="0" data-offset-y="0" data-expected-width="100" data-expected-height="50"></div>
 157 <div class="sizedToGridArea secondRowAutoColumn" data-offset-x="0" data-offset-y="50" data-expected-width="100" data-expected-height="50"></div>
 158 <div class="sizedToGridArea thirdRowAutoColumn" data-offset-x="0" data-offset-y="100" data-expected-width="100" data-expected-height="50"></div>
 159 <div class="sizedToGridArea firstRowAutoColumn" data-offset-x="100" data-offset-y="0" data-expected-width="100" data-expected-height="50"></div>
 160 <div class="sizedToGridArea autoRowSpanning3AutoColumn" data-offset-x="200" data-offset-y="0" data-expected-width="100" data-expected-height="150"></div>
 161 <div class="sizedToGridArea secondRowAutoColumn" data-offset-x="100" data-offset-y="50" data-expected-width="100" data-expected-height="50"></div>
 162 <div class="sizedToGridArea autoRowSpanning2AutoColumn" data-offset-x="300" data-offset-y="0" data-expected-width="100" data-expected-height="100"></div>
 163 <div class="sizedToGridArea autoRowSpanning2AutoColumn" data-offset-x="400" data-offset-y="0" data-expected-width="100" data-expected-height="100"></div>
 164 <div class="sizedToGridArea firstRowAutoColumn" data-offset-x="500" data-offset-y="0" data-expected-width="100" data-expected-height="50"></div>
 165 <div class="sizedToGridArea autoRowSpanning3AutoColumn" data-offset-x="600" data-offset-y="0" data-expected-width="100" data-expected-height="150"></div>
 166 <div class="sizedToGridArea autoRowSpanning2AutoColumn" data-offset-x="500" data-offset-y="50" data-expected-width="100" data-expected-height="100"></div>
 167 <div class="sizedToGridArea autoRowSpanning2AutoColumnSpanning2" data-offset-x="700" data-offset-y="0" data-expected-width="200" data-expected-height="100"></div>
 168 </div>
 169</div>
 170
 171<div style="position: relative">
 172 <div class="grid gridAutoFlowColumn">
 173 <div class="sizedToGridArea autoRowAutoColumnSpanning2" data-offset-x="0" data-offset-y="0" data-expected-width="200" data-expected-height="50"></div>
 174 <div class="sizedToGridArea secondRowAutoColumn" data-offset-x="0" data-offset-y="50" data-expected-width="100" data-expected-height="50"></div>
 175 <div class="sizedToGridArea thirdRowAutoColumn" data-offset-x="0" data-offset-y="100" data-expected-width="100" data-expected-height="50"></div>
 176 <div class="sizedToGridArea autoRowSpanning2AutoColumnSpanning2" data-offset-x="100" data-offset-y="50" data-expected-width="200" data-expected-height="100"></div>
 177 <div class="sizedToGridArea autoRowAutoColumnSpanning3" data-offset-x="200" data-offset-y="0" data-expected-width="300" data-expected-height="50"></div>
 178 <div class="sizedToGridArea autoRowSpanning2AutoColumnSpanning2" data-offset-x="300" data-offset-y="50" data-expected-width="200" data-expected-height="100"></div>
 179 </div>
 180</div>
 181
 182<div style="position: relative">
 183 <div class="grid gridAutoFlowColumn gridNamedGridLinesRows">
 184 <div class="sizedToGridArea firstRowAutoColumn" data-offset-x="0" data-offset-y="0" data-expected-width="100" data-expected-height="50"></div>
 185 <div class="sizedToGridArea autoRowSpanning2LineAutoColumn" data-offset-x="0" data-offset-y="50" data-expected-width="100" data-expected-height="100"></div>
 186 <div class="sizedToGridArea secondRowAutoColumn" data-offset-x="100" data-offset-y="50" data-expected-width="100" data-expected-height="100"></div>
 187 <div class="sizedToGridArea autoRowSpanning2LineAutoColumn" data-offset-x="0" data-offset-y="150" data-expected-width="100" data-expected-height="200"></div>
 188 <div class="sizedToGridArea thirdRowAutoColumn" data-offset-x="100" data-offset-y="150" data-expected-width="100" data-expected-height="200"></div>
 189 <div class="sizedToGridArea autoRowSpanningLineAutoColumn" data-offset-x="100" data-offset-y="0" data-expected-width="100" data-expected-height="50"></div>
 190 <div class="sizedToGridArea autoRowSpanning2LineAutoColumn" data-offset-x="200" data-offset-y="0" data-expected-width="100" data-expected-height="50"></div>
 191 <div class="sizedToGridArea firstRowAutoColumn" data-offset-x="300" data-offset-y="0" data-expected-width="100" data-expected-height="50"></div>
 192 <div class="sizedToGridArea autoRowSpanningLineAutoColumn" data-offset-x="200" data-offset-y="50" data-expected-width="100" data-expected-height="100"></div>
 193 <div class="sizedToGridArea thirdRowAutoColumn" data-offset-x="200" data-offset-y="150" data-expected-width="100" data-expected-height="200"></div>
 194 <div class="sizedToGridArea autoRowSpanningLineAutoColumn" data-offset-x="300" data-offset-y="50" data-expected-width="100" data-expected-height="100"></div>
 195 <div class="sizedToGridArea autoRowSpanningLineAutoColumn" data-offset-x="300" data-offset-y="150" data-expected-width="100" data-expected-height="200"></div-->
 196 </div>
 197</div>
 198
 199</body>
 200</html>

LayoutTests/fast/css-grid-layout/grid-item-auto-placement-definite-span-expected.txt

 1Thist test checks that span is supported in auto-placement for definite positions.
 2
 3PASS
 4PASS
 5PASS
 6PASS

LayoutTests/fast/css-grid-layout/grid-item-auto-placement-definite-span.html

 1<!DOCTYPE html>
 2<html>
 3<link href="resources/grid.css" rel="stylesheet">
 4<style>
 5.grid {
 6 -webkit-grid-auto-rows: 50px;
 7 -webkit-grid-auto-columns: 100px;
 8}
 9
 10.autoRowFirstColumnSpanning2 {
 11 background-color: maroon;
 12 -webkit-grid-column: 1 / span 2;
 13 -webkit-grid-row: auto;
 14}
 15
 16.autoRowSecondColumnSpanning2 {
 17 background-color: olive;
 18 -webkit-grid-column: 2 / span 2;
 19 -webkit-grid-row: auto;
 20}
 21
 22.autoRowFirstColumnSpanning3 {
 23 background-color: teal;
 24 -webkit-grid-column: 1 / span 3;
 25 -webkit-grid-row: auto;
 26}
 27
 28.firstRowSpanning2AutoColumn {
 29 background-color: maroon;
 30 -webkit-grid-column: auto;
 31 -webkit-grid-row: 1 / span 2;
 32 height: 100%;
 33}
 34
 35.secondRowSpanning2AutoColumn {
 36 background-color: olive;
 37 -webkit-grid-column: auto;
 38 -webkit-grid-row: 2 / span 2;
 39 height: 100%;
 40}
 41
 42.firstRowSpanning3AutoColumn {
 43 background-color: teal;
 44 -webkit-grid-column: auto;
 45 -webkit-grid-row: 1 / span 3;
 46 height: 100%;
 47}
 48</style>
 49<script src="../../resources/check-layout.js"></script>
 50<body onload="checkLayout('.grid');">
 51
 52<p>Thist test checks that span is supported in auto-placement for definite positions.</p>
 53
 54<div style="position: relative">
 55 <div class="grid gridAutoFlowRow">
 56 <div class="sizedToGridArea autoRowFirstColumnSpanning2" data-offset-x="0" data-offset-y="0" data-expected-width="200" data-expected-height="50"></div>
 57 <div class="sizedToGridArea autoRowSecondColumnSpanning2" data-offset-x="100" data-offset-y="50" data-expected-width="200" data-expected-height="50"></div>
 58 <div class="sizedToGridArea autoRowFirstColumnSpanning3" data-offset-x="0" data-offset-y="100" data-expected-width="300" data-expected-height="50"></div>
 59 <div class="sizedToGridArea autoRowAutoColumn" data-offset-x="200" data-offset-y="0" data-expected-width="100" data-expected-height="50"></div>
 60 <div class="sizedToGridArea autoRowAutoColumn" data-offset-x="0" data-offset-y="50" data-expected-width="100" data-expected-height="50"></div>
 61 </div>
 62</div>
 63
 64<div style="position: relative">
 65 <div class="grid gridAutoFlowRow">
 66 <div class="sizedToGridArea firstRowSpanning2AutoColumn" data-offset-x="0" data-offset-y="0" data-expected-width="100" data-expected-height="100"></div>
 67 <div class="sizedToGridArea secondRowSpanning2AutoColumn" data-offset-x="100" data-offset-y="50" data-expected-width="100" data-expected-height="100"></div>
 68 <div class="sizedToGridArea firstRowSpanning3AutoColumn" data-offset-x="200" data-offset-y="0" data-expected-width="100" data-expected-height="150"></div>
 69 <div class="sizedToGridArea autoRowAutoColumn" data-offset-x="100" data-offset-y="0" data-expected-width="100" data-expected-height="50"></div>
 70 <div class="sizedToGridArea autoRowAutoColumn" data-offset-x="0" data-offset-y="100" data-expected-width="100" data-expected-height="50"></div>
 71 </div>
 72</div>
 73
 74<div style="position: relative">
 75 <div class="grid gridAutoFlowColumn">
 76 <div class="sizedToGridArea firstRowSpanning2AutoColumn" data-offset-x="0" data-offset-y="0" data-expected-width="100" data-expected-height="100"></div>
 77 <div class="sizedToGridArea secondRowSpanning2AutoColumn" data-offset-x="100" data-offset-y="50" data-expected-width="100" data-expected-height="100"></div>
 78 <div class="sizedToGridArea firstRowSpanning3AutoColumn" data-offset-x="200" data-offset-y="0" data-expected-width="100" data-expected-height="150"></div>
 79 <div class="sizedToGridArea autoRowAutoColumn" data-offset-x="0" data-offset-y="100" data-expected-width="100" data-expected-height="50"></div>
 80 <div class="sizedToGridArea autoRowAutoColumn" data-offset-x="100" data-offset-y="0" data-expected-width="100" data-expected-height="50"></div>
 81 </div>
 82</div>
 83
 84<div style="position: relative">
 85 <div class="grid gridAutoFlowColumn">
 86 <div class="sizedToGridArea autoRowFirstColumnSpanning2" data-offset-x="0" data-offset-y="0" data-expected-width="200" data-expected-height="50"></div>
 87 <div class="sizedToGridArea autoRowSecondColumnSpanning2" data-offset-x="100" data-offset-y="50" data-expected-width="200" data-expected-height="50"></div>
 88 <div class="sizedToGridArea autoRowFirstColumnSpanning3" data-offset-x="0" data-offset-y="100" data-expected-width="300" data-expected-height="50"></div>
 89 <div class="sizedToGridArea autoRowAutoColumn" data-offset-x="0" data-offset-y="50" data-expected-width="100" data-expected-height="50"></div>
 90 <div class="sizedToGridArea autoRowAutoColumn" data-offset-x="200" data-offset-y="0" data-expected-width="100" data-expected-height="50"></div>
 91 </div>
 92</div>
 93
 94</body>
 95</html>

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

195195<div style="position: relative">
196196<div class="grid" id="fixedGrid" style="-webkit-grid-auto-flow: row;">
197197 <div class="sizedToGridArea" style="-webkit-grid-column: 1; -webkit-grid-row: 1;" data-offset-x="0" data-offset-y="0" data-expected-width="10" data-expected-height="15"></div>
198  <div class="sizedToGridArea doubleSpan" data-offset-x="10" data-offset-y="0" data-expected-width="20" data-expected-height="15"></div>
 198 <div class="sizedToGridArea doubleSpan" data-offset-x="10" data-offset-y="0" data-expected-width="60" data-expected-height="105"></div>
199199</div>
200200
201201<div style="position: relative">
202202<div class="grid" id="fixedGrid" style="-webkit-grid-auto-flow: column;">
203203 <div class="sizedToGridArea" style="-webkit-grid-column: 1; -webkit-grid-row: 1;" data-offset-x="0" data-offset-y="0" data-expected-width="10" data-expected-height="15"></div>
204  <div class="sizedToGridArea doubleSpan" data-offset-x="0" data-offset-y="15" data-expected-width="10" data-expected-height="30"></div>
 204 <div class="sizedToGridArea doubleSpan" data-offset-x="0" data-offset-y="15" data-expected-width="30" data-expected-height="210"></div>
205205</div>
206206</body>
207207</html>