Changeset 285915 in webkit


Ignore:
Timestamp:
Nov 16, 2021, 9:53:07 PM (4 years ago)
Author:
jh718.park@samsung.com
Message:

border-radius inline style should serialize with valid syntax
​https://bugs.webkit.org/show_bug.cgi?id=183994

This patch have border-radius property serializes in canonical order
as specified in ​https://drafts.csswg.org/css-backgrounds/#border-radius.

Reviewed by Darin Adler.

LayoutTests/imported/w3c:

  • web-platform-tests/css/css-backgrounds/parsing/border-radius-valid-expected.txt: Add css wide keywords test case results.
  • web-platform-tests/css/css-backgrounds/parsing/border-radius-valid.html: Add css wide keywords test cases.

Source/WebCore:

  • css/StyleProperties.cpp:

(WebCore::StyleProperties::getPropertyValue const):
(WebCore::StyleProperties::borderRadiusValue const):

  • css/StyleProperties.h:
Location:
trunk
Files:
6 edited

Legend:

Unmodified
Added
Removed

  • trunk/LayoutTests/imported/w3c/ChangeLog

    r285912 r285915  
     12021-11-16  Joonghun Park  <jh718.park@samsung.com>
     2
     3        border-radius inline style should serialize with valid syntax
     4        https://bugs.webkit.org/show_bug.cgi?id=183994
     5
     6        This patch have border-radius property serializes in canonical order
     7        as specified in https://drafts.csswg.org/css-backgrounds/#border-radius.
     8
     9        Reviewed by Darin Adler.
     10
     11        * web-platform-tests/css/css-backgrounds/parsing/border-radius-valid-expected.txt: Add css wide keywords test case results.
     12        * web-platform-tests/css/css-backgrounds/parsing/border-radius-valid.html: Add css wide keywords test cases.
     13
    1142021-11-16  Sihui Liu  <sihui_liu@apple.com>
    215

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

    r285827 r285915  
    11
     2PASS e.style['border-radius'] = "initial" should set the property value
     3PASS e.style['border-radius'] = "inherit" should set the property value
     4PASS e.style['border-radius'] = "unset" should set the property value
     5PASS e.style['border-radius'] = "revert" should set the property value
    26PASS e.style['border-radius'] = "1px" should set the property value
    37PASS e.style['border-radius'] = "1px 5%" should set the property value
    48PASS e.style['border-radius'] = "1px 2% 3px" should set the property value
    59PASS e.style['border-radius'] = "1px 2% 3px 4%" should set the property value
    6 FAIL e.style['border-radius'] = "1px / 2px" should set the property value assert_equals: serialization should be canonical expected "1px / 2px" but got "1px 2px"
    7 FAIL e.style['border-radius'] = "5em / 1px 2% 3px 4%" should set the property value assert_equals: serialization should be canonical expected "5em / 1px 2% 3px 4%" but got "5em 1px 5em 2% 5em 3px 5em 4%"
    8 FAIL e.style['border-radius'] = "1px 2% / 3px 4px" should set the property value assert_equals: serialization should be canonical expected "1px 2% / 3px 4px" but got "1px 3px 2% 4px"
    9 FAIL e.style['border-radius'] = "1px 2px 3em / 1px 2px 3%" should set the property value assert_equals: serialization should be canonical expected "1px 2px 3em / 1px 2px 3%" but got "1px 2px 3em 3%"
    10 FAIL e.style['border-radius'] = "1px 2% / 2px 3em 4px 5em" should set the property value assert_equals: serialization should be canonical expected "1px 2% / 2px 3em 4px 5em" but got "1px 2px 2% 3em 1px 4px 2% 5em"
    11 FAIL e.style['border-radius'] = "1px 2% 3px 4% / 5em" should set the property value assert_equals: serialization should be canonical expected "1px 2% 3px 4% / 5em" but got "1px 5em 2% 5em 3px 5em 4% 5em"
    12 FAIL e.style['border-radius'] = "1px 1px 1px 2% / 1px 2% 1px 2%" should set the property value assert_equals: serialization should be canonical expected "1px 1px 1px 2% / 1px 2%" but got "1px 1px 2% 1px 2%"
    13 FAIL e.style['border-radius'] = "1px 1px 1px 1px / 1px 1px 2% 1px" should set the property value assert_equals: serialization should be canonical expected "1px / 1px 1px 2%" but got "1px 1px 1px 2%"
     10PASS e.style['border-radius'] = "1px / 2px" should set the property value
     11PASS e.style['border-radius'] = "5em / 1px 2% 3px 4%" should set the property value
     12PASS e.style['border-radius'] = "1px 2% / 3px 4px" should set the property value
     13PASS e.style['border-radius'] = "1px 2px 3em / 1px 2px 3%" should set the property value
     14PASS e.style['border-radius'] = "1px 2% / 2px 3em 4px 5em" should set the property value
     15PASS e.style['border-radius'] = "1px 2% 3px 4% / 5em" should set the property value
     16PASS e.style['border-radius'] = "1px 1px 1px 2% / 1px 2% 1px 2%" should set the property value
     17PASS e.style['border-radius'] = "1px 1px 1px 1px / 1px 1px 2% 1px" should set the property value
    1418PASS e.style['border-radius'] = "1px 1px 2% 2%" should set the property value
    1519PASS e.style['border-radius'] = "1px 2% 1px 1px" should set the property value
    16 FAIL e.style['border-radius'] = "1px 2% 2% 2% / 1px 2% 3px 2%" should set the property value assert_equals: serialization should be canonical expected "1px 2% 2% / 1px 2% 3px" but got "1px 2% 2% 3px"
     20PASS e.style['border-radius'] = "1px 2% 2% 2% / 1px 2% 3px 2%" should set the property value
    1721PASS e.style['border-top-left-radius'] = "10px" should set the property value
    1822PASS e.style['border-top-right-radius'] = "20%" should set the property value

  • trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-backgrounds/parsing/border-radius-valid.html

    r285235 r285915  
    55<title>CSS Backgrounds and Borders Module Level 3: parsing border-radius with valid values</title>
    66<link rel="help" href="https://drafts.csswg.org/css-backgrounds/#border-radius">
    7 <meta name="assert" content="border-radius supports the full grammar '<length-percentage>{1,4} [ / <length-percentage>{1,4} ]?'.">
     7<meta name="assert" content="border-radius supports CSS Wide keywords and the full grammar '<length-percentage>{1,4} [ / <length-percentage>{1,4} ]?'.">
    88<script src="/resources/testharness.js"></script>
    99<script src="/resources/testharnessreport.js"></script>
    … …  
    1212<body>
    1313<script>
     14test_valid_value("border-radius", "initial");
     15test_valid_value("border-radius", "inherit");
     16test_valid_value("border-radius", "unset");
     17test_valid_value("border-radius", "revert");
     18
    1419test_valid_value("border-radius", "1px");
    1520test_valid_value("border-radius", "1px 5%");

  • trunk/Source/WebCore/ChangeLog

    r285912 r285915  
     12021-11-16  Joonghun Park  <jh718.park@samsung.com>
     2
     3        border-radius inline style should serialize with valid syntax
     4        https://bugs.webkit.org/show_bug.cgi?id=183994
     5
     6        This patch have border-radius property serializes in canonical order
     7        as specified in https://drafts.csswg.org/css-backgrounds/#border-radius.
     8
     9        Reviewed by Darin Adler.
     10
     11        * css/StyleProperties.cpp:
     12        (WebCore::StyleProperties::getPropertyValue const):
     13        (WebCore::StyleProperties::borderRadiusValue const):
     14        * css/StyleProperties.h:
     15
    1162021-11-16  Sihui Liu  <sihui_liu@apple.com>
    217

  • trunk/Source/WebCore/css/StyleProperties.cpp

    r285827 r285915  
    3636#include "Color.h"
    3737#include "Document.h"
     38#include "Pair.h"
    3839#include "PropertySetCSSStyleDeclaration.h"
    3940#include "StylePropertyShorthand.h"
    … …  
    320321        return String();
    321322    case CSSPropertyBorderRadius:
    322         return get4Values(borderRadiusShorthand());
     323        return borderRadiusValue(borderRadiusShorthand());
    323324    case CSSPropertyGap:
    324325        return get2Values(gapShorthand());
    … …  
    362363        return value->cssText();
    363364    return String();
     365}
     366
     367String StyleProperties::borderRadiusValue(const StylePropertyShorthand& shorthand) const
     368{
     369    auto serialize = [](const CSSValue* topLeft, const CSSValue* topRight, const CSSValue* bottomRight, const CSSValue* bottomLeft) -> String {
     370        bool showBottomLeft = !(*topRight == *bottomLeft);
     371        bool showBottomRight = !(*topLeft == *bottomRight) || showBottomLeft;
     372        bool showTopRight = !(*topLeft == *topRight) || showBottomRight;
     373
     374        return makeString(topLeft->cssText(), showTopRight ? " " : "", showTopRight ? topRight->cssText() : "", showBottomRight ? " " : "", showBottomRight ? bottomRight->cssText() : "", showBottomLeft ? " " : "", showBottomLeft ? bottomLeft->cssText() : "");
     375    };
     376
     377    int topLeftValueIndex = findPropertyIndex(shorthand.properties()[0]);
     378    int topRightValueIndex = findPropertyIndex(shorthand.properties()[1]);
     379    int bottomRightValueIndex = findPropertyIndex(shorthand.properties()[2]);
     380    int bottomLeftValueIndex = findPropertyIndex(shorthand.properties()[3]);
     381
     382    if (topLeftValueIndex == -1 || topRightValueIndex == -1 || bottomRightValueIndex == -1 || bottomLeftValueIndex == -1)
     383        return String();
     384
     385    PropertyReference topLeft = propertyAt(topLeftValueIndex);
     386    PropertyReference topRight = propertyAt(topRightValueIndex);
     387    PropertyReference bottomRight = propertyAt(bottomRightValueIndex);
     388    PropertyReference bottomLeft = propertyAt(bottomLeftValueIndex);
     389
     390    auto* topLeftValue = topLeft.value();
     391    if (!topLeftValue)
     392        return String();
     393    if (topLeftValue->isCSSWideKeyword())
     394        return topLeftValue->cssText();
     395
     396    auto* topRightValue = topRight.value();
     397    auto* bottomRightValue = bottomRight.value();
     398    auto* bottomLeftValue = bottomLeft.value();
     399
     400    // All 4 properties must be specified and the remaining ones other than topLeftValue are checked here.
     401    if (!topRightValue || !bottomRightValue || !bottomLeftValue)
     402        return String();
     403
     404    // Important flags must be the same
     405    bool isImportant = topLeft.isImportant();
     406    if (topRight.isImportant() != isImportant || bottomRight.isImportant() != isImportant || bottomLeft.isImportant() != isImportant)
     407        return String();
     408
     409    auto& topLeftPair = *downcast<CSSPrimitiveValue>(*topLeftValue).pairValue();
     410    auto& topRightPair = *downcast<CSSPrimitiveValue>(*topRightValue).pairValue();
     411    auto& bottomRightPair = *downcast<CSSPrimitiveValue>(*bottomRightValue).pairValue();
     412    auto& bottomLeftPair = *downcast<CSSPrimitiveValue>(*bottomLeftValue).pairValue();
     413
     414    auto first = serialize(topLeftPair.first(), topRightPair.first(), bottomRightPair.first(), bottomLeftPair.first());
     415    auto second = serialize(topLeftPair.second(), topRightPair.second(), bottomRightPair.second(), bottomLeftPair.second());
     416    if (first == second)
     417        return first;
     418
     419    return makeString(first, " / ", second);
    364420}
    365421

  • trunk/Source/WebCore/css/StyleProperties.h

    r285827 r285915  
    171171    String get2Values(const StylePropertyShorthand&) const;
    172172    String get4Values(const StylePropertyShorthand&) const;
     173    String borderRadiusValue(const StylePropertyShorthand&) const;
    173174    String borderSpacingValue(const StylePropertyShorthand&) const;
    174175    String fontValue() const;
Note: See TracChangeset for help on using the changeset viewer.