Diff
Modified: trunk/LayoutTests/imported/w3c/ChangeLog (285914 => 285915)
--- trunk/LayoutTests/imported/w3c/ChangeLog 2021-11-17 04:27:08 UTC (rev 285914)
+++ trunk/LayoutTests/imported/w3c/ChangeLog 2021-11-17 05:53:07 UTC (rev 285915)
@@ -1,3 +1,16 @@
+2021-11-16 Joonghun Park <[email protected]>
+
+ 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.
+
+ * 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.
+
2021-11-16 Sihui Liu <[email protected]>
Implement FileSystemFileHandle.getFile()
Modified: trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-backgrounds/parsing/border-radius-valid-expected.txt (285914 => 285915)
--- trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-backgrounds/parsing/border-radius-valid-expected.txt 2021-11-17 04:27:08 UTC (rev 285914)
+++ trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-backgrounds/parsing/border-radius-valid-expected.txt 2021-11-17 05:53:07 UTC (rev 285915)
@@ -1,19 +1,23 @@
+PASS e.style['border-radius'] = "initial" should set the property value
+PASS e.style['border-radius'] = "inherit" should set the property value
+PASS e.style['border-radius'] = "unset" should set the property value
+PASS e.style['border-radius'] = "revert" should set the property value
PASS e.style['border-radius'] = "1px" should set the property value
PASS e.style['border-radius'] = "1px 5%" should set the property value
PASS e.style['border-radius'] = "1px 2% 3px" should set the property value
PASS e.style['border-radius'] = "1px 2% 3px 4%" should set the property value
-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"
-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%"
-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"
-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%"
-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"
-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"
-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%"
-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%"
+PASS e.style['border-radius'] = "1px / 2px" should set the property value
+PASS e.style['border-radius'] = "5em / 1px 2% 3px 4%" should set the property value
+PASS e.style['border-radius'] = "1px 2% / 3px 4px" should set the property value
+PASS e.style['border-radius'] = "1px 2px 3em / 1px 2px 3%" should set the property value
+PASS e.style['border-radius'] = "1px 2% / 2px 3em 4px 5em" should set the property value
+PASS e.style['border-radius'] = "1px 2% 3px 4% / 5em" should set the property value
+PASS e.style['border-radius'] = "1px 1px 1px 2% / 1px 2% 1px 2%" should set the property value
+PASS e.style['border-radius'] = "1px 1px 1px 1px / 1px 1px 2% 1px" should set the property value
PASS e.style['border-radius'] = "1px 1px 2% 2%" should set the property value
PASS e.style['border-radius'] = "1px 2% 1px 1px" should set the property value
-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"
+PASS e.style['border-radius'] = "1px 2% 2% 2% / 1px 2% 3px 2%" should set the property value
PASS e.style['border-top-left-radius'] = "10px" should set the property value
PASS e.style['border-top-right-radius'] = "20%" should set the property value
PASS e.style['border-bottom-right-radius'] = "30px 40%" should set the property value
Modified: trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-backgrounds/parsing/border-radius-valid.html (285914 => 285915)
--- trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-backgrounds/parsing/border-radius-valid.html 2021-11-17 04:27:08 UTC (rev 285914)
+++ trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-backgrounds/parsing/border-radius-valid.html 2021-11-17 05:53:07 UTC (rev 285915)
@@ -4,7 +4,7 @@
<meta charset="utf-8">
<title>CSS Backgrounds and Borders Module Level 3: parsing border-radius with valid values</title>
<link rel="help" href=""
-<meta name="assert" content="border-radius supports the full grammar '<length-percentage>{1,4} [ / <length-percentage>{1,4} ]?'.">
+<meta name="assert" content="border-radius supports CSS Wide keywords and the full grammar '<length-percentage>{1,4} [ / <length-percentage>{1,4} ]?'.">
<script src=""
<script src=""
<script src=""
@@ -11,6 +11,11 @@
</head>
<body>
<script>
+test_valid_value("border-radius", "initial");
+test_valid_value("border-radius", "inherit");
+test_valid_value("border-radius", "unset");
+test_valid_value("border-radius", "revert");
+
test_valid_value("border-radius", "1px");
test_valid_value("border-radius", "1px 5%");
test_valid_value("border-radius", "1px 2% 3px");
Modified: trunk/Source/WebCore/ChangeLog (285914 => 285915)
--- trunk/Source/WebCore/ChangeLog 2021-11-17 04:27:08 UTC (rev 285914)
+++ trunk/Source/WebCore/ChangeLog 2021-11-17 05:53:07 UTC (rev 285915)
@@ -1,3 +1,18 @@
+2021-11-16 Joonghun Park <[email protected]>
+
+ 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.
+
+ * css/StyleProperties.cpp:
+ (WebCore::StyleProperties::getPropertyValue const):
+ (WebCore::StyleProperties::borderRadiusValue const):
+ * css/StyleProperties.h:
+
2021-11-16 Sihui Liu <[email protected]>
Implement FileSystemFileHandle.getFile()
Modified: trunk/Source/WebCore/css/StyleProperties.cpp (285914 => 285915)
--- trunk/Source/WebCore/css/StyleProperties.cpp 2021-11-17 04:27:08 UTC (rev 285914)
+++ trunk/Source/WebCore/css/StyleProperties.cpp 2021-11-17 05:53:07 UTC (rev 285915)
@@ -35,6 +35,7 @@
#include "CSSValuePool.h"
#include "Color.h"
#include "Document.h"
+#include "Pair.h"
#include "PropertySetCSSStyleDeclaration.h"
#include "StylePropertyShorthand.h"
#include "StylePropertyShorthandFunctions.h"
@@ -319,7 +320,7 @@
return value->cssText();
return String();
case CSSPropertyBorderRadius:
- return get4Values(borderRadiusShorthand());
+ return borderRadiusValue(borderRadiusShorthand());
case CSSPropertyGap:
return get2Values(gapShorthand());
case CSSPropertyScrollMargin:
@@ -363,6 +364,61 @@
return String();
}
+String StyleProperties::borderRadiusValue(const StylePropertyShorthand& shorthand) const
+{
+ auto serialize = [](const CSSValue* topLeft, const CSSValue* topRight, const CSSValue* bottomRight, const CSSValue* bottomLeft) -> String {
+ bool showBottomLeft = !(*topRight == *bottomLeft);
+ bool showBottomRight = !(*topLeft == *bottomRight) || showBottomLeft;
+ bool showTopRight = !(*topLeft == *topRight) || showBottomRight;
+
+ return makeString(topLeft->cssText(), showTopRight ? " " : "", showTopRight ? topRight->cssText() : "", showBottomRight ? " " : "", showBottomRight ? bottomRight->cssText() : "", showBottomLeft ? " " : "", showBottomLeft ? bottomLeft->cssText() : "");
+ };
+
+ int topLeftValueIndex = findPropertyIndex(shorthand.properties()[0]);
+ int topRightValueIndex = findPropertyIndex(shorthand.properties()[1]);
+ int bottomRightValueIndex = findPropertyIndex(shorthand.properties()[2]);
+ int bottomLeftValueIndex = findPropertyIndex(shorthand.properties()[3]);
+
+ if (topLeftValueIndex == -1 || topRightValueIndex == -1 || bottomRightValueIndex == -1 || bottomLeftValueIndex == -1)
+ return String();
+
+ PropertyReference topLeft = propertyAt(topLeftValueIndex);
+ PropertyReference topRight = propertyAt(topRightValueIndex);
+ PropertyReference bottomRight = propertyAt(bottomRightValueIndex);
+ PropertyReference bottomLeft = propertyAt(bottomLeftValueIndex);
+
+ auto* topLeftValue = topLeft.value();
+ if (!topLeftValue)
+ return String();
+ if (topLeftValue->isCSSWideKeyword())
+ return topLeftValue->cssText();
+
+ auto* topRightValue = topRight.value();
+ auto* bottomRightValue = bottomRight.value();
+ auto* bottomLeftValue = bottomLeft.value();
+
+ // All 4 properties must be specified and the remaining ones other than topLeftValue are checked here.
+ if (!topRightValue || !bottomRightValue || !bottomLeftValue)
+ return String();
+
+ // Important flags must be the same
+ bool isImportant = topLeft.isImportant();
+ if (topRight.isImportant() != isImportant || bottomRight.isImportant() != isImportant || bottomLeft.isImportant() != isImportant)
+ return String();
+
+ auto& topLeftPair = *downcast<CSSPrimitiveValue>(*topLeftValue).pairValue();
+ auto& topRightPair = *downcast<CSSPrimitiveValue>(*topRightValue).pairValue();
+ auto& bottomRightPair = *downcast<CSSPrimitiveValue>(*bottomRightValue).pairValue();
+ auto& bottomLeftPair = *downcast<CSSPrimitiveValue>(*bottomLeftValue).pairValue();
+
+ auto first = serialize(topLeftPair.first(), topRightPair.first(), bottomRightPair.first(), bottomLeftPair.first());
+ auto second = serialize(topLeftPair.second(), topRightPair.second(), bottomRightPair.second(), bottomLeftPair.second());
+ if (first == second)
+ return first;
+
+ return makeString(first, " / ", second);
+}
+
String StyleProperties::borderSpacingValue(const StylePropertyShorthand& shorthand) const
{
auto horizontalValue = getPropertyCSSValue(shorthand.properties()[0]);
Modified: trunk/Source/WebCore/css/StyleProperties.h (285914 => 285915)
--- trunk/Source/WebCore/css/StyleProperties.h 2021-11-17 04:27:08 UTC (rev 285914)
+++ trunk/Source/WebCore/css/StyleProperties.h 2021-11-17 05:53:07 UTC (rev 285915)
@@ -170,6 +170,7 @@
String getLayeredShorthandValue(const StylePropertyShorthand&) const;
String get2Values(const StylePropertyShorthand&) const;
String get4Values(const StylePropertyShorthand&) const;
+ String borderRadiusValue(const StylePropertyShorthand&) const;
String borderSpacingValue(const StylePropertyShorthand&) const;
String fontValue() const;
String fontVariantValue() const;
