Changeset 185246 in webkit


Ignore:
Timestamp:
Jun 5, 2015 8:19:43 AM (9 years ago)
Author:
Manuel Rego Casasnovas
Message:

[CSS Grid Layout] Support dots sequences in grid-template-areas
https://bugs.webkit.org/show_bug.cgi?id=145693

Reviewed by Sergio Villar Senin.

Source/WebCore:

The CSS WG agreed to consider a sequence of "." characters a single null
cell token for grid-template-areas. That way authors can match the
number of dots to the width of the column.

For more information see:
https://lists.w3.org/Archives/Public/www-style/2015May/0175.html

Added new test cases to check the new behavior.

  • css/CSSParser.cpp:

(WebCore::containsOnlyDots): New helper function to check that the grid
area name is composed by only dots.
(WebCore::CSSParser::parseGridTemplateAreasRow): Use the new helper
function to look for unnamed areas.

LayoutTests:

Added new test cases to check the new behavior.

  • fast/css-grid-layout/grid-template-areas-get-set-expected.txt:
  • fast/css-grid-layout/grid-template-areas-get-set.html:
Location:
trunk
Files:
5 edited

Legend:

Unmodified
Added
Removed
  • trunk/LayoutTests/ChangeLog

    r185239 r185246  
     12015-06-05  Manuel Rego Casasnovas  <rego@igalia.com>
     2
     3        [CSS Grid Layout] Support dots sequences in grid-template-areas
     4        https://bugs.webkit.org/show_bug.cgi?id=145693
     5
     6        Reviewed by Sergio Villar Senin.
     7
     8        Added new test cases to check the new behavior.
     9
     10        * fast/css-grid-layout/grid-template-areas-get-set-expected.txt:
     11        * fast/css-grid-layout/grid-template-areas-get-set.html:
     12
    1132015-06-03  Filip Pizlo  <fpizlo@apple.com>
    214
  • trunk/LayoutTests/fast/css-grid-layout/grid-template-areas-get-set-expected.txt

    r183850 r185246  
    1111PASS getComputedStyle(gridWithSpanningColumnsTemplate).getPropertyValue('-webkit-grid-template-areas') is "\"span span\""
    1212PASS getComputedStyle(gridWithSpanningRowsDotTemplate).getPropertyValue('-webkit-grid-template-areas') is "\"span\" \".\""
     13PASS getComputedStyle(gridWithSpanningRowsDotsTemplate).getPropertyValue('-webkit-grid-template-areas') is "\"span\" \".\""
    1314PASS getComputedStyle(gridWithDotColumn).getPropertyValue('-webkit-grid-template-areas') is "\"header .\" \"footer .\""
     15PASS getComputedStyle(gridWithDotsColumn).getPropertyValue('-webkit-grid-template-areas') is "\"header .\" \"footer .\""
     16PASS getComputedStyle(gridWithDotCells).getPropertyValue('-webkit-grid-template-areas') is "\"first .\" \". second\""
     17PASS getComputedStyle(gridWithDotsCells).getPropertyValue('-webkit-grid-template-areas') is "\"first .\" \". second\""
     18PASS getComputedStyle(gridWithComplexDotAreas).getPropertyValue('-webkit-grid-template-areas') is "\". header header .\" \". . . .\" \"nav main main aside\" \"nav main main aside\" \". . . aside\" \". footer footer aside\""
     19PASS getComputedStyle(gridWithComplexDotsAreas).getPropertyValue('-webkit-grid-template-areas') is "\". header header .\" \". . . .\" \"nav main main aside\" \"nav main main aside\" \". . . aside\" \". footer footer aside\""
     20PASS getComputedStyle(gridWithMixedDotAndDotsAreas).getPropertyValue('-webkit-grid-template-areas') is "\". title .\" \". main main\" \"nav . aside\" \". footer .\""
    1421PASS getComputedStyle(gridWithHorizontalRectangle).getPropertyValue('-webkit-grid-template-areas') is "\"a a a\" \"a a a\""
    1522PASS getComputedStyle(gridWithVerticalRectangle).getPropertyValue('-webkit-grid-template-areas') is "\"a a\" \"a a\" \"a a\""
  • trunk/LayoutTests/fast/css-grid-layout/grid-template-areas-get-set.html

    r183850 r185246  
    1 <!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN">
     1<!DOCTYPE html>
    22<html>
    33<head>
     
    2626}
    2727
     28#gridWithSpanningRowsDotsTemplate {
     29    -webkit-grid-template-areas: "span"
     30                                 "....";
     31}
     32
    2833#gridWithDotColumn {
    2934    -webkit-grid-template-areas: "header ."
    3035                                 "footer .";
     36}
     37
     38#gridWithDotsColumn {
     39    -webkit-grid-template-areas: "header ......"
     40                                 "footer ......";
     41}
     42
     43#gridWithDotCells {
     44    -webkit-grid-template-areas: "first ."
     45                                 ". second";
     46}
     47
     48#gridWithDotsCells {
     49    -webkit-grid-template-areas: "first ......"
     50                                 "..... second";
     51}
     52
     53#gridWithComplexDotAreas {
     54    -webkit-grid-template-areas: ". header header ."
     55                                 ". . . ."
     56                                 "nav main main aside"
     57                                 "nav main main aside"
     58                                 ". . . aside"
     59                                 ". footer footer aside";
     60}
     61
     62#gridWithComplexDotsAreas {
     63    -webkit-grid-template-areas: "... header header ....."
     64                                 "... ...... ...... ....."
     65                                 "nav main   main   aside"
     66                                 "nav main   main   aside"
     67                                 "... ...... ...... aside"
     68                                 "... footer footer aside";
     69}
     70
     71#gridWithMixedDotAndDotsAreas {
     72    -webkit-grid-template-areas: "... title ."
     73                                 "..  main main"
     74                                 "nav ................... aside"
     75                                 ". footer ......";
    3176}
    3277
     
    5297<div class="grid" id="gridWithSpanningColumnsTemplate"></div>
    5398<div class="grid" id="gridWithSpanningRowsDotTemplate"></div>
     99<div class="grid" id="gridWithSpanningRowsDotsTemplate"></div>
    54100<div class="grid" id="gridWithDotColumn"></div>
     101<div class="grid" id="gridWithDotsColumn"></div>
     102<div class="grid" id="gridWithDotCells"></div>
     103<div class="grid" id="gridWithDotsCells"></div>
     104<div class="grid" id="gridWithComplexDotAreas"></div>
     105<div class="grid" id="gridWithComplexDotsAreas"></div>
     106<div class="grid" id="gridWithMixedDotAndDotsAreas"></div>
    55107<div class="grid" id="gridWithHorizontalRectangle"></div>
    56108<div class="grid" id="gridWithVerticalRectangle"></div>
     
    74126    testGridTemplateAreas("gridWithSpanningColumnsTemplate", '"span span"');
    75127    testGridTemplateAreas("gridWithSpanningRowsDotTemplate", '"span" "."');
     128    testGridTemplateAreas("gridWithSpanningRowsDotsTemplate", '"span" "."');
    76129    testGridTemplateAreas("gridWithDotColumn", '"header ." "footer ."');
     130    testGridTemplateAreas("gridWithDotsColumn", '"header ." "footer ."');
     131    testGridTemplateAreas("gridWithDotCells", '"first ." ". second"');
     132    testGridTemplateAreas("gridWithDotsCells", '"first ." ". second"');
     133    testGridTemplateAreas("gridWithComplexDotAreas", '". header header ." ". . . ." "nav main main aside" "nav main main aside" ". . . aside" ". footer footer aside"');
     134    testGridTemplateAreas("gridWithComplexDotsAreas", '". header header ." ". . . ." "nav main main aside" "nav main main aside" ". . . aside" ". footer footer aside"');
     135    testGridTemplateAreas("gridWithMixedDotAndDotsAreas", '". title ." ". main main" "nav . aside" ". footer ."');
    77136    testGridTemplateAreas("gridWithHorizontalRectangle", '"a a a" "a a a"');
    78137    testGridTemplateAreas("gridWithVerticalRectangle", '"a a" "a a" "a a"');
  • trunk/Source/WebCore/ChangeLog

    r185238 r185246  
     12015-06-05  Manuel Rego Casasnovas  <rego@igalia.com>
     2
     3        [CSS Grid Layout] Support dots sequences in grid-template-areas
     4        https://bugs.webkit.org/show_bug.cgi?id=145693
     5
     6        Reviewed by Sergio Villar Senin.
     7
     8        The CSS WG agreed to consider a sequence of "." characters a single null
     9        cell token for grid-template-areas. That way authors can match the
     10        number of dots to the width of the column.
     11
     12        For more information see:
     13        https://lists.w3.org/Archives/Public/www-style/2015May/0175.html
     14
     15        Added new test cases to check the new behavior.
     16
     17        * css/CSSParser.cpp:
     18        (WebCore::containsOnlyDots): New helper function to check that the grid
     19        area name is composed by only dots.
     20        (WebCore::CSSParser::parseGridTemplateAreasRow): Use the new helper
     21        function to look for unnamed areas.
     22
    1232015-06-04  Joonghun Park  <jh718.park@samsung.com>
    224
  • trunk/Source/WebCore/css/CSSParser.cpp

    r185238 r185246  
    59625962
    59635963#if ENABLE(CSS_GRID_LAYOUT)
     5964static bool containsOnlyDots(const String& string)
     5965{
     5966    ASSERT(!string.isEmpty());
     5967    StringImpl& text = *string.impl();
     5968    for (unsigned i = 0; i < text.length(); ++i) {
     5969        if (text[i] != '.')
     5970            return false;
     5971    }
     5972    return true;
     5973}
     5974
    59645975bool CSSParser::parseGridTemplateAreasRow(NamedGridAreaMap& gridAreaMap, const unsigned rowCount, unsigned& columnCount)
    59655976{
     
    59875998
    59885999        // Unamed areas are always valid (we consider them to be 1x1).
    5989         if (gridAreaName == ".")
     6000        if (containsOnlyDots(gridAreaName))
    59906001            continue;
    59916002
Note: See TracChangeset for help on using the changeset viewer.