Changeset 122747 in webkit


Ignore:
Timestamp:
Jul 16, 2012 12:09:57 PM (12 years ago)
Author:
tony@chromium.org
Message:

Position grid items by row/column index
​https://bugs.webkit.org/show_bug.cgi?id=91293

Reviewed by Ojan Vafai.

Source/WebCore:

Do some initial grid positioning. Only handle the simple case where tracks are
fixed values and don't properly size the grid items. This gives us something to
work with and starts implementing the "Grid Track Sizing Algorithm":
​http://dev.w3.org/csswg/css3-grid-layout/#grid-track-sizing-algorithm0

Test: fast/css-grid-layout/place-cell-by-index.html

  • rendering/RenderGrid.cpp:

(RenderGrid::GridTrack): Data structure for holding the track size. UsedBreadth matches the terminology
used in the spec.
(WebCore::RenderGrid::layoutBlock): Pull in some boiler plate code and put the
grid specific code in layoutGridItems.
(WebCore::RenderGrid::computedUsedBreadthOfGridTracks): Implement part of the grid track sizing algorithm.
(WebCore::RenderGrid::layoutGridItems): Compute the size of grid tracks, layout and position children.
(WebCore::RenderGrid::findChildLogicalPosition): Map track sizes to the actual position of the child.

  • rendering/RenderGrid.h:
  • rendering/style/RenderStyle.h: Just return a copy of Length rather than a reference to Length. This seems

more consistent with other getters that return a Length.

LayoutTests:

Add a test for grid layout in each writing mode direction. The height in vertical writing mode is incorrect for now.

  • fast/css-grid-layout/containing-block-grids-expected.html: Scope <p> around text only.
  • fast/css-grid-layout/containing-block-grids.html: Fix missing closing </div>.
  • fast/css-grid-layout/place-cell-by-index-expected.txt: Added.
  • fast/css-grid-layout/place-cell-by-index.html: Added.
Location:
trunk
Files:
2 added
7 edited

Legend:

Unmodified
Added
Removed

  • trunk/LayoutTests/ChangeLog

    r122741 r122747  
     12012-07-16  Tony Chang  <tony@chromium.org>
     2
     3        Position grid items by row/column index
     4        https://bugs.webkit.org/show_bug.cgi?id=91293
     5
     6        Reviewed by Ojan Vafai.
     7
     8        Add a test for grid layout in each writing mode direction.  The height in vertical writing mode is incorrect for now.
     9
     10        * fast/css-grid-layout/containing-block-grids-expected.html: Scope <p> around text only.
     11        * fast/css-grid-layout/containing-block-grids.html: Fix missing closing </div>.
     12        * fast/css-grid-layout/place-cell-by-index-expected.txt: Added.
     13        * fast/css-grid-layout/place-cell-by-index.html: Added.
     14
    1152012-07-16  Mike West  <mkwst@chromium.org>
    216

  • trunk/LayoutTests/fast/css-grid-layout/containing-block-grids-expected.html

    r121063 r122747  
    77</head>
    88<body>
    9 <p>Grids can act as containing blocks for positioned content.
     9<p>Grids can act as containing blocks for positioned content.</p>
    1010<div style="width: 100px; height: 200px; background-color: green;"></div>
    11 </p>
    1211</body>
    1312</html>

  • trunk/LayoutTests/fast/css-grid-layout/containing-block-grids.html

    r121464 r122747  
    1313</head>
    1414<body>
    15 <p>Grids can act as containing blocks for positioned content.
    16 <div class="relative-positioned-grid" style="display: -webkit-grid"><div style="background-color: green; left: 0; top: 0"></div>
    17 <div class="relative-positioned-inline-grid" style="display: -webkit-inline-grid"><div style="background-color:green; left: 0; top: 0"></div>
    18 </p>
     15<p>Grids can act as containing blocks for positioned content.</p>
     16<div class="relative-positioned-grid" style="display: -webkit-grid"><div style="background-color: green; left: 0; top: 0"></div></div>
     17<div class="relative-positioned-inline-grid" style="display: -webkit-inline-grid"><div style="background-color:green; left: 0; top: 0"></div></div>
    1918</body>
    2019</html>

  • trunk/Source/WebCore/ChangeLog

    r122746 r122747  
     12012-07-16  Tony Chang  <tony@chromium.org>
     2
     3        Position grid items by row/column index
     4        https://bugs.webkit.org/show_bug.cgi?id=91293
     5
     6        Reviewed by Ojan Vafai.
     7
     8        Do some initial grid positioning. Only handle the simple case where tracks are
     9        fixed values and don't properly size the grid items. This gives us something to
     10        work with and starts implementing the "Grid Track Sizing Algorithm":
     11        http://dev.w3.org/csswg/css3-grid-layout/#grid-track-sizing-algorithm0
     12
     13        Test: fast/css-grid-layout/place-cell-by-index.html
     14
     15        * rendering/RenderGrid.cpp:
     16        (RenderGrid::GridTrack): Data structure for holding the track size. UsedBreadth matches the terminology
     17        used in the spec.
     18        (WebCore::RenderGrid::layoutBlock): Pull in some boiler plate code and put the
     19        grid specific code in layoutGridItems.
     20        (WebCore::RenderGrid::computedUsedBreadthOfGridTracks): Implement part of the grid track sizing algorithm.
     21        (WebCore::RenderGrid::layoutGridItems): Compute the size of grid tracks, layout and position children.
     22        (WebCore::RenderGrid::findChildLogicalPosition): Map track sizes to the actual position of the child.
     23        * rendering/RenderGrid.h:
     24        * rendering/style/RenderStyle.h: Just return a copy of Length rather than a reference to Length. This seems
     25        more consistent with other getters that return a Length.
     26
    1272012-07-16  Sami Kyostila  <skyostil@chromium.org>
    228

  • trunk/Source/WebCore/rendering/RenderGrid.cpp

    r121123 r122747  
    2525
    2626#include "config.h"
    27 
    2827#include "RenderGrid.h"
    2928
     29#include "LayoutRepainter.h"
     30#include "NotImplemented.h"
     31#include "RenderLayer.h"
     32#include "RenderView.h"
     33
    3034namespace WebCore {
     35
     36class RenderGrid::GridTrack {
     37public:
     38    GridTrack()
     39        : m_usedBreadth(0)
     40    {
     41    }
     42
     43    LayoutUnit m_usedBreadth;
     44};
    3145
    3246RenderGrid::RenderGrid(Node* node)
    … …  
    4155}
    4256
    43 void RenderGrid::layoutBlock(bool relayoutChildren, LayoutUnit pageLogicalHeight)
     57void RenderGrid::layoutBlock(bool relayoutChildren, LayoutUnit)
    4458{
    45     // For now just call the base class.
    46     RenderBlock::layoutBlock(relayoutChildren, pageLogicalHeight);
     59    ASSERT(needsLayout());
     60
     61    if (!relayoutChildren && simplifiedLayout())
     62        return;
     63
     64    // FIXME: Much of this method is boiler plate that matches RenderBox::layoutBlock and Render*FlexibleBox::layoutBlock.
     65    // It would be nice to refactor some of the duplicate code.
     66    LayoutRepainter repainter(*this, checkForRepaintDuringLayout());
     67    LayoutStateMaintainer statePusher(view(), this, locationOffset(), hasTransform() || hasReflection() || style()->isFlippedBlocksWritingMode());
     68
     69    if (inRenderFlowThread()) {
     70        // Regions changing widths can force us to relayout our children.
     71        if (logicalWidthChangedInRegions())
     72            relayoutChildren = true;
     73    }
     74    computeInitialRegionRangeForBlock();
     75
     76    LayoutSize previousSize = size();
     77
     78    setLogicalHeight(0);
     79    computeLogicalWidth();
     80
     81    m_overflow.clear();
     82
     83    if (scrollsOverflow()) {
     84        if (style()->overflowX() == OSCROLL)
     85            layer()->setHasHorizontalScrollbar(true);
     86        if (style()->overflowY() == OSCROLL)
     87            layer()->setHasVerticalScrollbar(true);
     88    }
     89
     90    layoutGridItems();
     91
     92    LayoutUnit oldClientAfterEdge = clientLogicalBottom();
     93    computeLogicalHeight();
     94
     95    if (size() != previousSize)
     96        relayoutChildren = true;
     97
     98    layoutPositionedObjects(relayoutChildren || isRoot());
     99
     100    computeRegionRangeForBlock();
     101
     102    computeOverflow(oldClientAfterEdge);
     103    statePusher.pop();
     104
     105    updateLayerTransform();
     106
     107    // Update our scroll information if we're overflow:auto/scroll/hidden now that we know if
     108    // we overflow or not.
     109    if (hasOverflowClip())
     110        layer()->updateScrollInfoAfterLayout();
     111
     112    repainter.repaintAfterLayout();
     113
     114    setNeedsLayout(false);
     115}
     116
     117void RenderGrid::computedUsedBreadthOfGridTracks(TrackSizingDirection direction, Vector<GridTrack>& tracks)
     118{
     119    const Vector<Length>& trackStyles = (direction == ForColumns) ? style()->gridColumns() : style()->gridRows();
     120    for (size_t i = 0; i < trackStyles.size(); ++i) {
     121        GridTrack track;
     122        if (trackStyles[i].isFixed())
     123            track.m_usedBreadth = trackStyles[i].getFloatValue();
     124        else
     125            notImplemented();
     126
     127        tracks.append(track);
     128    }
     129}
     130
     131void RenderGrid::layoutGridItems()
     132{
     133    Vector<GridTrack> columnTracks, rowTracks;
     134    computedUsedBreadthOfGridTracks(ForColumns, columnTracks);
     135    // FIXME: The logical width of Grid Columns from the prior step is used in
     136    // the formatting of Grid items in content-sized Grid Rows to determine
     137    // their required height. We will probably need to pass columns through.
     138    computedUsedBreadthOfGridTracks(ForRows, rowTracks);
     139
     140    for (RenderBox* child = firstChildBox(); child; child = child->nextSiblingBox()) {
     141        LayoutPoint childPosition = findChildLogicalPosition(child, columnTracks, rowTracks);
     142        // FIXME: Grid items should stretch to fill their cells. Once we
     143        // implement grid-{column,row}-align, we can also shrink to fit. For
     144        // now, just size as if we were a regular child.
     145        child->layoutIfNeeded();
     146
     147        // FIXME: Handle border & padding on the grid element.
     148        child->setLogicalLocation(childPosition);
     149    }
     150
     151    // FIXME: Handle border & padding on the grid element.
     152    for (size_t i = 0; i < rowTracks.size(); ++i)
     153        setLogicalHeight(logicalHeight() + rowTracks[i].m_usedBreadth);
     154}
     155
     156LayoutPoint RenderGrid::findChildLogicalPosition(RenderBox* child, const Vector<GridTrack>& columnTracks, const Vector<GridTrack>& rowTracks)
     157{
     158    Length column = child->style()->gridItemColumn();
     159    Length row = child->style()->gridItemRow();
     160
     161    // FIXME: What does a non-positive integer mean for a column/row?
     162    if (!column.isPositive() || !row.isPositive())
     163        return LayoutPoint();
     164
     165    // FIXME: Handle other values for grid-{row,column} like ranges or line names.
     166    if (!column.isFixed() || !row.isFixed())
     167        return LayoutPoint();
     168
     169    size_t columnTrack = static_cast<size_t>(column.intValue()) - 1;
     170    size_t rowTrack = static_cast<size_t>(row.intValue()) - 1;
     171
     172    LayoutPoint offset;
     173    for (size_t i = 0; i < columnTrack && i < columnTracks.size(); ++i)
     174        offset.setX(offset.x() + columnTracks[i].m_usedBreadth);
     175    for (size_t i = 0; i < rowTrack && i < rowTracks.size(); ++i)
     176        offset.setY(offset.y() + rowTracks[i].m_usedBreadth);
     177
     178    // FIXME: Handle margins on the grid item.
     179    return offset;
    47180}
    48181

  • trunk/Source/WebCore/rendering/RenderGrid.h

    r120984 r122747  
    4141
    4242    virtual bool avoidsFloats() const OVERRIDE { return true; }
     43
     44private:
     45    class GridTrack;
     46    enum TrackSizingDirection { ForColumns, ForRows };
     47    void computedUsedBreadthOfGridTracks(TrackSizingDirection, Vector<GridTrack>&);
     48    void layoutGridItems();
     49
     50    LayoutPoint findChildLogicalPosition(RenderBox*, const Vector<GridTrack>& columnTracks, const Vector<GridTrack>& rowTracks);
    4351};
    4452

  • trunk/Source/WebCore/rendering/style/RenderStyle.h

    r122641 r122747  
    815815    const Vector<Length>& gridRows() const { return rareNonInheritedData->m_grid->m_gridRows; }
    816816
    817     const Length& gridItemColumn() const { return rareNonInheritedData->m_gridItem->m_gridColumn; }
    818     const Length& gridItemRow() const { return rareNonInheritedData->m_gridItem->m_gridRow; }
     817    Length gridItemColumn() const { return rareNonInheritedData->m_gridItem->m_gridColumn; }
     818    Length gridItemRow() const { return rareNonInheritedData->m_gridItem->m_gridRow; }
    819819
    820820    const ShadowData* boxShadow() const { return rareNonInheritedData->m_boxShadow.get(); }
Note: See TracChangeset for help on using the changeset viewer.