Changeset 154753 in webkit


Ignore:
Timestamp:
Aug 28, 2013 9:48:53 AM (11 years ago)
Author:
sergio@webkit.org
Message:

[CSS Grid Layout] Handle 'span' positions during layout
https://bugs.webkit.org/show_bug.cgi?id=119756

Reviewed by Andreas Kling.

From Blink r149133 by <jchaffraix@chromium.org>

Source/WebCore:

Properly handle the 'span' keyword during layout. We only had
parsing support so far but with this change we are able to
recognize these positions and act accordingly.

  • rendering/RenderGrid.cpp:

(WebCore::RenderGrid::resolveGridPositionsFromStyle):
(WebCore::RenderGrid::resolveGridPositionAgainstOppositePosition):

  • rendering/RenderGrid.h:
  • rendering/style/GridPosition.h:

(WebCore::GridPosition::shouldBeResolvedAgainstOppositePosition):

LayoutTests:

Added some new test cases to verify that we properly resolve
'span' positions.

  • fast/css-grid-layout/grid-item-negative-position-resolution-expected.txt:
  • fast/css-grid-layout/grid-item-negative-position-resolution.html:
  • fast/css-grid-layout/grid-item-spanning-resolution-expected.txt:
  • fast/css-grid-layout/grid-item-spanning-resolution.html:
Location:
trunk
Files:
9 edited

Legend:

Unmodified
Added
Removed
  • trunk/LayoutTests/ChangeLog

    r154749 r154753  
     12013-08-28  Sergio Villar Senin  <svillar@igalia.com>
     2
     3        [CSS Grid Layout] Handle 'span' positions during layout
     4        https://bugs.webkit.org/show_bug.cgi?id=119756
     5
     6        Reviewed by Andreas Kling.
     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
    1182013-08-28  Ádám Kallai  <kadam@inf.u-szeged.hu>
    219
  • trunk/LayoutTests/fast/css-grid-layout/grid-item-negative-position-resolution-expected.txt

    r154731 r154753  
    55PASS
    66PASS
     7PASS
     8PASS
     9PASS
     10PASS
  • trunk/LayoutTests/fast/css-grid-layout/grid-item-negative-position-resolution.html

    r154731 r154753  
    2626    -webkit-grid-column: 1;
    2727    -webkit-grid-row: -1 / auto;
     28}
     29
     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;
    2848}
    2949
     
    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>
  • trunk/LayoutTests/fast/css-grid-layout/grid-item-spanning-resolution-expected.txt

    r154731 r154753  
    1313PASS
    1414PASS
     15PASS
     16PASS
     17PASS
     18PASS
     19PASS
  • trunk/LayoutTests/fast/css-grid-layout/grid-item-spanning-resolution.html

    r154731 r154753  
    4949    -webkit-grid-column: 3 / 4;
    5050    -webkit-grid-row: 3 / 4;
     51}
     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;
    5176}
    5277</style>
     
    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>
  • trunk/Source/WebCore/ChangeLog

    r154751 r154753  
     12013-08-28  Sergio Villar Senin  <svillar@igalia.com>
     2
     3        [CSS Grid Layout] Handle 'span' positions during layout
     4        https://bugs.webkit.org/show_bug.cgi?id=119756
     5
     6        Reviewed by Andreas Kling.
     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
    1212013-08-28  Antti Koivisto  <antti@apple.com>
    222
  • trunk/Source/WebCore/rendering/RenderGrid.cpp

    r154731 r154753  
    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)
     
    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));
    735     }
    736 
    737     if (finalPosition.isAuto()) {
    738         // Infer our position from the initial position ('1 / auto' case).
     737        return resolveGridPositionAgainstOppositePosition(finalResolvedPosition, initialPosition, initialPositionSide);
     738    }
     739
     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
     
    789792    ASSERT_NOT_REACHED();
    790793    return 0;
     794}
     795
     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);
    791813}
    792814
  • trunk/Source/WebCore/rendering/RenderGrid.h

    r154731 r154753  
    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)
     
    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;
  • trunk/Source/WebCore/rendering/style/GridPosition.h

    r154044 r154753  
    8787    }
    8888
     89    bool shouldBeResolvedAgainstOppositePosition() const
     90    {
     91        return isAuto() || isSpan();
     92    }
    8993private:
    9094    GridPositionType m_type;
Note: See TracChangeset for help on using the changeset viewer.