Changeset 215463 in webkit


Ignore:
Timestamp:
Apr 18, 2017 9:27:53 AM (7 years ago)
Author:
Manuel Rego Casasnovas
Message:

[css-grid] Add support for percentage gaps
​https://bugs.webkit.org/show_bug.cgi?id=170764

Reviewed by Sergio Villar Senin.

Source/WebCore:

Part of the code to support percentage gaps was already imported
from Blink in r213149 (bug #168657). However parsing was not enabled yet,
so some pieces were missing.

This patch accepts percentages in the parsing of grid-column-gap and
grid-row-gap properties, and the grid-gap shorthand.
On top of that it gets rid of GridTrackSizingAlgorithm::sizingOperation()
method as it's not needed. And instead it passes the specific operation
to each call to RenderGrid::guttersSize(), otherwise we would be getting
wrong results.

Test: fast/css-grid-layout/grid-gutters-as-percentage.html

  • css/parser/CSSPropertyParser.cpp:

(WebCore::CSSPropertyParser::parseSingleValue): Add support for
percentage values.
(WebCore::CSSPropertyParser::parseShorthand): Ditto.

  • rendering/GridTrackSizingAlgorithm.cpp:

(WebCore::IndefiniteSizeStrategy::recomputeUsedFlexFractionIfNeeded):
Pass the specific sizing operation.

  • rendering/GridTrackSizingAlgorithm.h: Remove sizingOperation().
  • rendering/RenderGrid.cpp:

(WebCore::RenderGrid::computeTrackBasedLogicalHeight): Pass the specific
sizing operation.
(WebCore::RenderGrid::computeTrackSizesForDefiniteSize): Ditto.
(WebCore::RenderGrid::computeTrackSizesForIndefiniteSize): Ditto.
(WebCore::RenderGrid::populateGridPositionsForDirection): Ditto.

LayoutTests:

Import tests from Blink.

  • fast/css-grid-layout/grid-gutters-as-percentage-expected.txt: Added.
  • fast/css-grid-layout/grid-gutters-as-percentage.html: Added.
  • fast/css-grid-layout/grid-gutters-get-set-expected.txt:
  • fast/css-grid-layout/grid-gutters-get-set.html:
Location:
trunk
Files:
2 added
8 edited

Legend:

Unmodified
Added
Removed

  • trunk/LayoutTests/ChangeLog

    r215458 r215463  
     12017-04-18  Manuel Rego Casasnovas  <rego@igalia.com>
     2
     3        [css-grid] Add support for percentage gaps
     4        https://bugs.webkit.org/show_bug.cgi?id=170764
     5
     6        Reviewed by Sergio Villar Senin.
     7
     8        Import tests from Blink.
     9
     10        * fast/css-grid-layout/grid-gutters-as-percentage-expected.txt: Added.
     11        * fast/css-grid-layout/grid-gutters-as-percentage.html: Added.
     12        * fast/css-grid-layout/grid-gutters-get-set-expected.txt:
     13        * fast/css-grid-layout/grid-gutters-get-set.html:
     14
    1152017-04-18  Miguel Gomez  <magomez@igalia.com>
    216

  • trunk/LayoutTests/fast/css-grid-layout/grid-gutters-get-set-expected.txt

    r200510 r215463  
    99PASS window.getComputedStyle(gridGap, '').getPropertyValue('grid-row-gap') is "20px"
    1010PASS window.getComputedStyle(gridGap, '').getPropertyValue('grid-column-gap') is "15px"
     11PASS window.getComputedStyle(gridPercentGap, '').getPropertyValue('grid-row-gap') is "10%"
     12PASS window.getComputedStyle(gridPercentGap, '').getPropertyValue('grid-column-gap') is "15%"
    1113PASS window.getComputedStyle(gridSimpleGap, '').getPropertyValue('grid-row-gap') is "25px"
    1214PASS window.getComputedStyle(gridSimpleGap, '').getPropertyValue('grid-column-gap') is "25px"
     15PASS window.getComputedStyle(gridSimplePercentGap, '').getPropertyValue('grid-row-gap') is "10%"
     16PASS window.getComputedStyle(gridSimplePercentGap, '').getPropertyValue('grid-column-gap') is "10%"
    1317PASS window.getComputedStyle(gridColumnGap, '').getPropertyValue('grid-row-gap') is "0px"
    1418PASS window.getComputedStyle(gridColumnGap, '').getPropertyValue('grid-column-gap') is "16px"
    … …  
    2125PASS window.getComputedStyle(gridRowColumnGaps, '').getPropertyValue('grid-row-gap') is "12px"
    2226PASS window.getComputedStyle(gridRowColumnGaps, '').getPropertyValue('grid-column-gap') is "16px"
     27PASS window.getComputedStyle(gridRowColumnPercentGaps, '').getPropertyValue('grid-row-gap') is "10%"
     28PASS window.getComputedStyle(gridRowColumnPercentGaps, '').getPropertyValue('grid-column-gap') is "15%"
    2329PASS window.getComputedStyle(gridRowColumnInheritGaps, '').getPropertyValue('grid-row-gap') is "25px"
    2430PASS window.getComputedStyle(gridRowColumnInheritGaps, '').getPropertyValue('grid-column-gap') is "25px"

  • trunk/LayoutTests/fast/css-grid-layout/grid-gutters-get-set.html

    r213831 r215463  
    55<style>
    66.gridGap { grid-gap: 20px 15px; }
     7.gridPercentGap { grid-gap: 10% 15%; }
    78.gridSimpleGap { grid-gap: 25px; }
     9.gridSimplePercentGap { grid-gap: 10%; }
    810.gridColumnGap { grid-column-gap: 2vw; }
    911.gridRowGap { grid-row-gap: 2em; }
    … …  
    1113    grid-row-gap: 12px;
    1214    grid-column-gap: 1rem;
     15}
     16.gridRowColumnPercentGaps {
     17    grid-row-gap: 10%;
     18    grid-column-gap: 15%;
    1319}
    1420.gridRowColumnInheritGaps {
    … …  
    2430    grid-column-gap: calc(2px + 1vw);
    2531}
    26 .gridInvalidRowGap { grid-row-gap: 10%; }
     32.gridInvalidRowGap { grid-row-gap: -10px; }
    2733.gridInvalidColumnGap { grid-column-gap: max-content; }
    2834.gridInvalidMultipleRowColumnGaps {
    … …  
    4551<div class="grid" id="defaultGrid"></div>
    4652<div class="grid gridGap" id="gridGap"></div>
     53<div class="grid gridPercentGap" id="gridPercentGap"></div>
    4754<div class="grid gridSimpleGap" id="gridSimpleGap"></div>
     55<div class="grid gridSimplePercentGap" id="gridSimplePercentGap"></div>
    4856<div class="grid gridColumnGap" id="gridColumnGap"></div>
    4957<div class="grid gridRowGap" id="gridRowGap"></div>
    5058<div class="grid gridCalcGaps" id="gridCalcGaps"></div>
    5159<div class="grid gridRowColumnGaps" id="gridRowColumnGaps"></div>
     60<div class="grid gridRowColumnPercentGaps" id="gridRowColumnPercentGaps"></div>
    5261<div class="grid gridSimpleGap">
    5362    <div class="grid gridRowColumnInheritGaps" id="gridRowColumnInheritGaps"></div>
    … …  
    7382testGridGapDefinitionsValues("defaultGrid", "0px", "0px");
    7483testGridGapDefinitionsValues("gridGap", "20px", "15px");
     84testGridGapDefinitionsValues("gridPercentGap", "10%", "15%");
    7585testGridGapDefinitionsValues("gridSimpleGap", "25px", "25px");
     86testGridGapDefinitionsValues("gridSimplePercentGap", "10%", "10%");
    7687testGridGapDefinitionsValues("gridColumnGap", "0px", "16px");
    7788testGridGapDefinitionsValues("gridRowGap", "32px", "0px");
    … …  
    7990testGridGapDefinitionsValues("gridRowColumnGaps", "12px", "16px");
    8091testGridGapDefinitionsValues("gridRowColumnGaps", "12px", "16px");
     92testGridGapDefinitionsValues("gridRowColumnPercentGaps", "10%", "15%");
    8193testGridGapDefinitionsValues("gridRowColumnInheritGaps", "25px", "25px");
    8294testGridGapDefinitionsValues("gridRowColumnInitialGaps", "0px", "0px");

  • trunk/Source/WebCore/ChangeLog

    r215461 r215463  
     12017-04-18  Manuel Rego Casasnovas  <rego@igalia.com>
     2
     3        [css-grid] Add support for percentage gaps
     4        https://bugs.webkit.org/show_bug.cgi?id=170764
     5
     6        Reviewed by Sergio Villar Senin.
     7
     8        Part of the code to support percentage gaps was already imported
     9        from Blink in r213149 (bug #168657). However parsing was not enabled yet,
     10        so some pieces were missing.
     11
     12        This patch accepts percentages in the parsing of grid-column-gap and
     13        grid-row-gap properties, and the grid-gap shorthand.
     14        On top of that it gets rid of GridTrackSizingAlgorithm::sizingOperation()
     15        method as it's not needed. And instead it passes the specific operation
     16        to each call to RenderGrid::guttersSize(), otherwise we would be getting
     17        wrong results.
     18
     19        Test: fast/css-grid-layout/grid-gutters-as-percentage.html
     20
     21        * css/parser/CSSPropertyParser.cpp:
     22        (WebCore::CSSPropertyParser::parseSingleValue): Add support for
     23        percentage values.
     24        (WebCore::CSSPropertyParser::parseShorthand): Ditto.
     25        * rendering/GridTrackSizingAlgorithm.cpp:
     26        (WebCore::IndefiniteSizeStrategy::recomputeUsedFlexFractionIfNeeded):
     27        Pass the specific sizing operation.
     28        * rendering/GridTrackSizingAlgorithm.h: Remove sizingOperation().
     29        * rendering/RenderGrid.cpp:
     30        (WebCore::RenderGrid::computeTrackBasedLogicalHeight): Pass the specific
     31        sizing operation.
     32        (WebCore::RenderGrid::computeTrackSizesForDefiniteSize): Ditto.
     33        (WebCore::RenderGrid::computeTrackSizesForIndefiniteSize): Ditto.
     34        (WebCore::RenderGrid::populateGridPositionsForDirection): Ditto.
     35
    1362017-04-18  Per Arne Vollan  <pvollan@apple.com>
    237

  • trunk/Source/WebCore/css/parser/CSSPropertyParser.cpp

    r215261 r215463  
    39903990    case CSSPropertyGridColumnGap:
    39913991    case CSSPropertyGridRowGap:
    3992         return consumeLength(m_range, m_context.mode, ValueRangeNonNegative);
     3992        return consumeLengthOrPercent(m_range, m_context.mode, ValueRangeNonNegative);
    39933993    case CSSPropertyShapeMargin:
    39943994        return consumeLengthOrPercent(m_range, m_context.mode, ValueRangeNonNegative);
    … …  
    57085708        return consumePerspectiveOrigin(important);
    57095709    case CSSPropertyGridGap: {
    5710         RefPtr<CSSValue> rowGap = consumeLength(m_range, m_context.mode, ValueRangeNonNegative);
    5711         RefPtr<CSSValue> columnGap = consumeLength(m_range, m_context.mode, ValueRangeNonNegative);
     5710        RefPtr<CSSValue> rowGap = consumeLengthOrPercent(m_range, m_context.mode, ValueRangeNonNegative);
     5711        RefPtr<CSSValue> columnGap = consumeLengthOrPercent(m_range, m_context.mode, ValueRangeNonNegative);
    57125712        if (!rowGap || !m_range.atEnd())
    57135713            return false;

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

    r213480 r215463  
    916916    LayoutUnit freeSpace = checkMaxSize ? maxSize.value() : LayoutUnit(-1);
    917917    const Grid& grid = m_algorithm.grid();
    918     freeSpace = std::max(freeSpace, minSize.value()) - renderGrid->guttersSize(grid, ForRows, 0, grid.numTracks(ForRows), m_algorithm.sizingOperation());
     918    freeSpace = std::max(freeSpace, minSize.value()) - renderGrid->guttersSize(grid, ForRows, 0, grid.numTracks(ForRows), IntrinsicSizeComputation);
    919919
    920920    size_t numberOfTracks = m_algorithm.tracks(ForRows).size();

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

    r213149 r215463  
    118118#endif
    119119
    120     SizingOperation sizingOperation() const { return m_sizingOperation; }
    121 
    122120private:
    123121    GridTrackSize gridTrackSize(GridTrackSizingDirection direction, unsigned translatedIndex) const { return gridTrackSize(direction, translatedIndex, m_sizingOperation); }

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

    r214604 r215463  
    129129        logicalHeight += row.baseSize();
    130130
    131     logicalHeight += guttersSize(m_grid, ForRows, 0, allRows.size(), m_trackSizingAlgorithm.sizingOperation());
     131    logicalHeight += guttersSize(m_grid, ForRows, 0, allRows.size(), TrackSizing);
    132132
    133133    return logicalHeight;
    … …  
    136136void RenderGrid::computeTrackSizesForDefiniteSize(GridTrackSizingDirection direction, LayoutUnit availableSpace)
    137137{
    138     LayoutUnit totalGuttersSize = guttersSize(m_grid, direction, 0, m_grid.numTracks(direction), m_trackSizingAlgorithm.sizingOperation());
     138    LayoutUnit totalGuttersSize = guttersSize(m_grid, direction, 0, m_grid.numTracks(direction), TrackSizing);
    139139    LayoutUnit freeSpace = availableSpace - totalGuttersSize;
    140140
    … …  
    384384
    385385    size_t numberOfTracks = algorithm.tracks(direction).size();
    386     LayoutUnit totalGuttersSize = guttersSize(grid, direction, 0, numberOfTracks, algorithm.sizingOperation());
     386    LayoutUnit totalGuttersSize = guttersSize(grid, direction, 0, numberOfTracks, IntrinsicSizeComputation);
    387387
    388388    minIntrinsicSize = algorithm.minContentSize() + totalGuttersSize;
    … …  
    10781078        // compute the gap between two consecutive tracks without examining the surrounding ones.
    10791079        bool hasCollapsedTracks = m_grid.hasAutoRepeatEmptyTracks(direction);
    1080         LayoutUnit gap = !hasCollapsedTracks ? gridGapForDirection(direction, m_trackSizingAlgorithm.sizingOperation()) : LayoutUnit();
     1080        LayoutUnit gap = !hasCollapsedTracks ? gridGapForDirection(direction, TrackSizing) : LayoutUnit();
    10811081        unsigned nextToLastLine = numberOfLines - 2;
    10821082        for (unsigned i = 0; i < nextToLastLine; ++i)
    … …  
    10871087        // coincide exactly) except on the edges of the grid where they become 0.
    10881088        if (hasCollapsedTracks) {
    1089             gap = gridGapForDirection(direction, m_trackSizingAlgorithm.sizingOperation());
     1089            gap = gridGapForDirection(direction, TrackSizing);
    10901090            unsigned remainingEmptyTracks = m_grid.autoRepeatEmptyTracks(direction)->size();
    10911091            LayoutUnit gapAccumulator;
Note: See TracChangeset for help on using the changeset viewer.