Changeset 276293 in webkit


Ignore:
Timestamp:
Apr 20, 2021 2:14:49 AM (15 months ago)
Author:
commit-queue@webkit.org
Message:

Implement CSS display property 2-value syntax
​https://bugs.webkit.org/show_bug.cgi?id=224574

Patch by Tim Nguyen <​ntim@apple.com> on 2021-04-20
Reviewed by Darin Adler.

Except for list-item which doesn't have layout support for different variants.
Also fix a WPT to expect the most backwards-compatible form for display: flow computed value.

Test: web-platform-tests/css/css-display/parsing/display-valid.html

LayoutTests/imported/w3c:

  • web-platform-tests/css/css-display/parsing/display-valid-expected.txt:
  • web-platform-tests/html/rendering/widgets/button-layout/computed-style-expected.txt:
  • web-platform-tests/html/rendering/widgets/button-layout/computed-style.html:
  • web-platform-tests/html/rendering/widgets/button-layout/display-other-expected.txt:

Source/WebCore:

  • css/CSSValueKeywords.in:
  • css/parser/CSSParserFastPaths.cpp:

(WebCore::CSSParserFastPaths::isValidKeywordPropertyAndValue):
(WebCore::CSSParserFastPaths::isKeywordPropertyID):

  • css/parser/CSSPropertyParser.cpp:

(WebCore::consumeDisplay):
(WebCore::CSSPropertyParser::parseSingleValue):

LayoutTests:

  • platform/mac-wk1/imported/w3c/web-platform-tests/html/rendering/widgets/button-layout/computed-style-expected.txt:
Location:
trunk
Files:
11 edited

Legend:

Unmodified
Added
Removed

  • trunk/LayoutTests/ChangeLog

    r276291 r276293  
     12021-04-20  Tim Nguyen  <ntim@apple.com>
     2
     3        Implement CSS display property 2-value syntax
     4        https://bugs.webkit.org/show_bug.cgi?id=224574
     5
     6        Reviewed by Darin Adler.
     7
     8        Except for list-item which doesn't have layout support for different variants.
     9        Also fix a WPT to expect the most backwards-compatible form for `display: flow` computed value.
     10
     11        Test: web-platform-tests/css/css-display/parsing/display-valid.html
     12
     13        * platform/mac-wk1/imported/w3c/web-platform-tests/html/rendering/widgets/button-layout/computed-style-expected.txt:
     14
    1152021-04-20  Diego Pino Garcia  <dpino@igalia.com>
    216

  • trunk/LayoutTests/imported/w3c/ChangeLog

    r276264 r276293  
     12021-04-20  Tim Nguyen  <ntim@apple.com>
     2
     3        Implement CSS display property 2-value syntax
     4        https://bugs.webkit.org/show_bug.cgi?id=224574
     5
     6        Reviewed by Darin Adler.
     7
     8        Except for list-item which doesn't have layout support for different variants.
     9        Also fix a WPT to expect the most backwards-compatible form for `display: flow` computed value.
     10
     11        Test: web-platform-tests/css/css-display/parsing/display-valid.html
     12
     13        * web-platform-tests/css/css-display/parsing/display-valid-expected.txt:
     14        * web-platform-tests/html/rendering/widgets/button-layout/computed-style-expected.txt:
     15        * web-platform-tests/html/rendering/widgets/button-layout/computed-style.html:
     16        * web-platform-tests/html/rendering/widgets/button-layout/display-other-expected.txt:
     17
    1182021-04-19  Manuel Rego Casasnovas  <rego@igalia.com>
    219

  • trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-display/parsing/display-valid-expected.txt

    r267650 r276293  
    1818PASS e.style['display'] = "none" should set the property value
    1919FAIL e.style['display'] = "run-in" should set the property value assert_not_equals: property should be set got disallowed value ""
    20 FAIL e.style['display'] = "flow" should set the property value assert_not_equals: property should be set got disallowed value ""
     20PASS e.style['display'] = "flow" should set the property value
    2121PASS e.style['display'] = "flow-root" should set the property value
    2222FAIL e.style['display'] = "ruby" should set the property value assert_not_equals: property should be set got disallowed value ""
    … …  
    2525FAIL e.style['display'] = "flow-root list-item" should set the property value assert_not_equals: property should be set got disallowed value ""
    2626FAIL e.style['display'] = "list-item flow-root" should set the property value assert_not_equals: property should be set got disallowed value ""
    27 FAIL e.style['display'] = "block flow" should set the property value assert_not_equals: property should be set got disallowed value ""
    28 FAIL e.style['display'] = "flow block" should set the property value assert_not_equals: property should be set got disallowed value ""
    29 FAIL e.style['display'] = "flow-root block" should set the property value assert_not_equals: property should be set got disallowed value ""
    30 FAIL e.style['display'] = "block flow-root" should set the property value assert_not_equals: property should be set got disallowed value ""
    31 FAIL e.style['display'] = "flex block" should set the property value assert_not_equals: property should be set got disallowed value ""
    32 FAIL e.style['display'] = "block flex" should set the property value assert_not_equals: property should be set got disallowed value ""
    33 FAIL e.style['display'] = "grid block" should set the property value assert_not_equals: property should be set got disallowed value ""
    34 FAIL e.style['display'] = "block grid" should set the property value assert_not_equals: property should be set got disallowed value ""
    35 FAIL e.style['display'] = "table block" should set the property value assert_not_equals: property should be set got disallowed value ""
    36 FAIL e.style['display'] = "block table" should set the property value assert_not_equals: property should be set got disallowed value ""
     27PASS e.style['display'] = "block flow" should set the property value
     28PASS e.style['display'] = "flow block" should set the property value
     29PASS e.style['display'] = "flow-root block" should set the property value
     30PASS e.style['display'] = "block flow-root" should set the property value
     31PASS e.style['display'] = "flex block" should set the property value
     32PASS e.style['display'] = "block flex" should set the property value
     33PASS e.style['display'] = "grid block" should set the property value
     34PASS e.style['display'] = "block grid" should set the property value
     35PASS e.style['display'] = "table block" should set the property value
     36PASS e.style['display'] = "block table" should set the property value
    3737FAIL e.style['display'] = "block ruby" should set the property value assert_not_equals: property should be set got disallowed value ""
    3838FAIL e.style['display'] = "ruby block" should set the property value assert_not_equals: property should be set got disallowed value ""
    … …  
    5151FAIL e.style['display'] = "list-item block flow-root" should set the property value assert_not_equals: property should be set got disallowed value ""
    5252FAIL e.style['display'] = "list-item flow-root block" should set the property value assert_not_equals: property should be set got disallowed value ""
    53 FAIL e.style['display'] = "inline flow" should set the property value assert_not_equals: property should be set got disallowed value ""
    54 FAIL e.style['display'] = "flow inline" should set the property value assert_not_equals: property should be set got disallowed value ""
    55 FAIL e.style['display'] = "flow-root inline" should set the property value assert_not_equals: property should be set got disallowed value ""
    56 FAIL e.style['display'] = "inline flow-root" should set the property value assert_not_equals: property should be set got disallowed value ""
    57 FAIL e.style['display'] = "flex inline" should set the property value assert_not_equals: property should be set got disallowed value ""
    58 FAIL e.style['display'] = "inline flex" should set the property value assert_not_equals: property should be set got disallowed value ""
    59 FAIL e.style['display'] = "grid inline" should set the property value assert_not_equals: property should be set got disallowed value ""
    60 FAIL e.style['display'] = "inline grid" should set the property value assert_not_equals: property should be set got disallowed value ""
    61 FAIL e.style['display'] = "table inline" should set the property value assert_not_equals: property should be set got disallowed value ""
    62 FAIL e.style['display'] = "inline table" should set the property value assert_not_equals: property should be set got disallowed value ""
     53PASS e.style['display'] = "inline flow" should set the property value
     54PASS e.style['display'] = "flow inline" should set the property value
     55PASS e.style['display'] = "flow-root inline" should set the property value
     56PASS e.style['display'] = "inline flow-root" should set the property value
     57PASS e.style['display'] = "flex inline" should set the property value
     58PASS e.style['display'] = "inline flex" should set the property value
     59PASS e.style['display'] = "grid inline" should set the property value
     60PASS e.style['display'] = "inline grid" should set the property value
     61PASS e.style['display'] = "table inline" should set the property value
     62PASS e.style['display'] = "inline table" should set the property value
    6363FAIL e.style['display'] = "inline ruby" should set the property value assert_not_equals: property should be set got disallowed value ""
    6464FAIL e.style['display'] = "ruby inline" should set the property value assert_not_equals: property should be set got disallowed value ""

  • trunk/LayoutTests/imported/w3c/web-platform-tests/html/rendering/widgets/button-layout/computed-style-expected.txt

    r267646 r276293  
    8181PASS computed display of <input type=color> with display: contents
    8282PASS computed display of <button type=submit> with display: contents
    83 FAIL computed display of <input type=reset> with display: flow assert_not_equals: display: flow is not supported got disallowed value ""
    84 FAIL computed display of <input type=button> with display: flow assert_not_equals: display: flow is not supported got disallowed value ""
    85 FAIL computed display of <input type=submit> with display: flow assert_not_equals: display: flow is not supported got disallowed value ""
    86 FAIL computed display of <input type=color> with display: flow assert_not_equals: display: flow is not supported got disallowed value ""
    87 FAIL computed display of <button type=submit> with display: flow assert_not_equals: display: flow is not supported got disallowed value ""
     83PASS computed display of <input type=reset> with display: flow
     84PASS computed display of <input type=button> with display: flow
     85PASS computed display of <input type=submit> with display: flow
     86PASS computed display of <input type=color> with display: flow
     87PASS computed display of <button type=submit> with display: flow
    8888PASS computed display of <input type=reset> with display: flow-root
    8989PASS computed display of <input type=button> with display: flow-root

  • trunk/LayoutTests/imported/w3c/web-platform-tests/html/rendering/widgets/button-layout/computed-style.html

    r249886 r276293  
    2525        expectedVal = 'none'; // https://drafts.csswg.org/css-display/#unbox-html
    2626      }
     27      if (val == 'flow') {
     28        // Use the more backwards-compatible form, `block` is better than `flow`
     29        // https://drafts.csswg.org/cssom/#serializing-css-values
     30        expectedVal = 'block';
     31      }
    2732      assert_equals(getComputedStyle(el).display, expectedVal);
    2833    }, `computed display of ${tag} with display: ${val}`);

  • trunk/LayoutTests/imported/w3c/web-platform-tests/html/rendering/widgets/button-layout/display-other-expected.txt

    r267646 r276293  
    33FAIL display: block assert_equals: buttonTop expected 0 but got 2
    44FAIL display: run-in assert_true: display: run-in is not supported expected true got false
    5 FAIL display: flow assert_true: display: flow is not supported expected true got false
     5PASS display: flow
    66PASS display: flow-root
    77PASS display: table

  • trunk/LayoutTests/platform/mac-wk1/imported/w3c/web-platform-tests/html/rendering/widgets/button-layout/computed-style-expected.txt

    r267658 r276293  
    8181PASS computed display of <input type=text> with display: contents
    8282PASS computed display of <button type=submit> with display: contents
    83 FAIL computed display of <input type=reset> with display: flow assert_not_equals: display: flow is not supported got disallowed value ""
    84 FAIL computed display of <input type=button> with display: flow assert_not_equals: display: flow is not supported got disallowed value ""
    85 FAIL computed display of <input type=submit> with display: flow assert_not_equals: display: flow is not supported got disallowed value ""
    86 FAIL computed display of <input type=text> with display: flow assert_not_equals: display: flow is not supported got disallowed value ""
    87 FAIL computed display of <button type=submit> with display: flow assert_not_equals: display: flow is not supported got disallowed value ""
     83PASS computed display of <input type=reset> with display: flow
     84PASS computed display of <input type=button> with display: flow
     85PASS computed display of <input type=submit> with display: flow
     86PASS computed display of <input type=text> with display: flow
     87PASS computed display of <button type=submit> with display: flow
    8888PASS computed display of <input type=reset> with display: flow-root
    8989PASS computed display of <input type=button> with display: flow-root

  • trunk/Source/WebCore/ChangeLog

    r276287 r276293  
     12021-04-20  Tim Nguyen  <ntim@apple.com>
     2
     3        Implement CSS display property 2-value syntax
     4        https://bugs.webkit.org/show_bug.cgi?id=224574
     5
     6        Reviewed by Darin Adler.
     7
     8        Except for list-item which doesn't have layout support for different variants.
     9        Also fix a WPT to expect the most backwards-compatible form for `display: flow` computed value.
     10
     11        Test: web-platform-tests/css/css-display/parsing/display-valid.html
     12
     13        * css/CSSValueKeywords.in:
     14        * css/parser/CSSParserFastPaths.cpp:
     15        (WebCore::CSSParserFastPaths::isValidKeywordPropertyAndValue):
     16        (WebCore::CSSParserFastPaths::isKeywordPropertyID):
     17        * css/parser/CSSPropertyParser.cpp:
     18        (WebCore::consumeDisplay):
     19        (WebCore::CSSPropertyParser::parseSingleValue):
     20
    1212021-04-19  Antti Koivisto  <antti@apple.com>
    222

  • trunk/Source/WebCore/css/CSSValueKeywords.in

    r276216 r276293  
    474474inline-grid
    475475flow-root
     476flow
    476477//none
    477478//

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

    r276216 r276293  
    632632    case CSSPropertyDirection: // ltr | rtl
    633633        return valueID == CSSValueLtr || valueID == CSSValueRtl;
    634     case CSSPropertyDisplay:
    635         // inline | block | list-item | inline-block | table |
    636         // inline-table | table-row-group | table-header-group | table-footer-group | table-row |
    637         // table-column-group | table-column | table-cell | table-caption | -webkit-box | -webkit-inline-box | none
    638         // flex | inline-flex | -webkit-flex | -webkit-inline-flex | grid | inline-grid
    639         return (valueID >= CSSValueInline && valueID <= CSSValueContents) || valueID == CSSValueNone
    640             || valueID == CSSValueGrid || valueID == CSSValueInlineGrid || valueID == CSSValueFlowRoot;
    641634    case CSSPropertyDominantBaseline:
    642635        // auto | use-script | no-change | reset-size | ideographic |
    … …  
    930923    case CSSPropertyColumnRuleStyle:
    931924    case CSSPropertyDirection:
    932     case CSSPropertyDisplay:
    933925    case CSSPropertyEmptyCells:
    934926    case CSSPropertyFlexDirection:

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

    r276152 r276293  
    381381
    382382// Methods for consuming non-shorthand properties starts here.
     383static RefPtr<CSSValue> consumeDisplay(CSSParserTokenRange& range)
     384{
     385    // Parse single keyword values
     386    auto singleKeyword = consumeIdent<
     387        // <display-box>
     388        CSSValueContents,
     389        CSSValueNone,
     390        // <display-internal>
     391        CSSValueTableCaption,
     392        CSSValueTableCell,
     393        CSSValueTableColumnGroup,
     394        CSSValueTableColumn,
     395        CSSValueTableHeaderGroup,
     396        CSSValueTableFooterGroup,
     397        CSSValueTableRow,
     398        CSSValueTableRowGroup,
     399        // <display-legacy>
     400        CSSValueInlineBlock,
     401        CSSValueInlineFlex,
     402        CSSValueInlineGrid,
     403        CSSValueInlineTable,
     404        // Prefixed values
     405        CSSValueWebkitInlineBox,
     406        CSSValueWebkitBox,
     407        CSSValueWebkitInlineFlex,
     408        CSSValueWebkitFlex,
     409        // No layout support for the full <display-listitem> syntax, so treat it as <display-legacy>
     410        CSSValueListItem
     411    >(range);
     412
     413    if (singleKeyword)
     414        return singleKeyword;
     415
     416    // Empty value, stop parsing
     417    if (range.atEnd())
     418        return nullptr;
     419
     420    // Parse [ <display-outside> || <display-inside> ]
     421    Optional<CSSValueID> parsedDisplayOutside;
     422    Optional<CSSValueID> parsedDisplayInside;
     423    while (!range.atEnd()) {
     424        auto nextValueID = range.peek().id();
     425        switch (nextValueID) {
     426        // <display-outside>
     427        case CSSValueBlock:
     428        case CSSValueInline:
     429            if (parsedDisplayOutside)
     430                return nullptr;
     431            parsedDisplayOutside = nextValueID;
     432            break;
     433        // <display-inside>
     434        case CSSValueFlex:
     435        case CSSValueFlow:
     436        case CSSValueFlowRoot:
     437        case CSSValueGrid:
     438        case CSSValueTable:
     439            if (parsedDisplayInside)
     440                return nullptr;
     441            parsedDisplayInside = nextValueID;
     442            break;
     443        default:
     444            return nullptr;
     445        }
     446        consumeIdent(range);
     447    }
     448
     449    // Set defaults when one of the two values are unspecified
     450    CSSValueID displayOutside = parsedDisplayOutside.valueOr(CSSValueBlock);
     451    CSSValueID displayInside = parsedDisplayInside.valueOr(CSSValueFlow);
     452
     453    auto selectShortValue = [&]() -> CSSValueID {
     454        if (displayOutside == CSSValueBlock) {
     455            // Alias display: flow to display: block
     456            return displayInside == CSSValueFlow ? CSSValueBlock : displayInside;
     457        }
     458
     459        // Convert `display: inline <display-inside>` to the equivalent short value
     460        switch (displayInside) {
     461        case CSSValueFlex:
     462            return CSSValueInlineFlex;
     463        case CSSValueFlow:
     464            return CSSValueInline;
     465        case CSSValueFlowRoot:
     466            return CSSValueInlineBlock;
     467        case CSSValueGrid:
     468            return CSSValueInlineGrid;
     469        case CSSValueTable:
     470            return CSSValueInlineTable;
     471        default:
     472            ASSERT_NOT_REACHED();
     473            return CSSValueInline;
     474        }
     475    };
     476
     477    return CSSValuePool::singleton().createValue(selectShortValue());
     478}
     479
    383480static RefPtr<CSSValue> consumeWillChange(CSSParserTokenRange& range)
    384481{
    … …  
    38853982    }
    38863983    switch (property) {
     3984    case CSSPropertyDisplay:
     3985        return consumeDisplay(m_range);
    38873986    case CSSPropertyWillChange:
    38883987        return consumeWillChange(m_range);
Note: See TracChangeset for help on using the changeset viewer.