<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>[285235] trunk</title>
</head>
<body>

<style type="text/css"><!--
#msg dl.meta { border: 1px #006 solid; background: #369; padding: 6px; color: #fff; }
#msg dl.meta dt { float: left; width: 6em; font-weight: bold; }
#msg dt:after { content:':';}
#msg dl, #msg dt, #msg ul, #msg li, #header, #footer, #logmsg { font-family: verdana,arial,helvetica,sans-serif; font-size: 10pt;  }
#msg dl a { font-weight: bold}
#msg dl a:link    { color:#fc3; }
#msg dl a:active  { color:#ff0; }
#msg dl a:visited { color:#cc6; }
h3 { font-family: verdana,arial,helvetica,sans-serif; font-size: 10pt; font-weight: bold; }
#msg pre { overflow: auto; background: #ffc; border: 1px #fa0 solid; padding: 6px; }
#logmsg { background: #ffc; border: 1px #fa0 solid; padding: 1em 1em 0 1em; }
#logmsg p, #logmsg pre, #logmsg blockquote { margin: 0 0 1em 0; }
#logmsg p, #logmsg li, #logmsg dt, #logmsg dd { line-height: 14pt; }
#logmsg h1, #logmsg h2, #logmsg h3, #logmsg h4, #logmsg h5, #logmsg h6 { margin: .5em 0; }
#logmsg h1:first-child, #logmsg h2:first-child, #logmsg h3:first-child, #logmsg h4:first-child, #logmsg h5:first-child, #logmsg h6:first-child { margin-top: 0; }
#logmsg ul, #logmsg ol { padding: 0; list-style-position: inside; margin: 0 0 0 1em; }
#logmsg ul { text-indent: -1em; padding-left: 1em; }#logmsg ol { text-indent: -1.5em; padding-left: 1.5em; }
#logmsg > ul, #logmsg > ol { margin: 0 0 1em 0; }
#logmsg pre { background: #eee; padding: 1em; }
#logmsg blockquote { border: 1px solid #fa0; border-left-width: 10px; padding: 1em 1em 0 1em; background: white;}
#logmsg dl { margin: 0; }
#logmsg dt { font-weight: bold; }
#logmsg dd { margin: 0; padding: 0 0 0.5em 0; }
#logmsg dd:before { content:'\00bb';}
#logmsg table { border-spacing: 0px; border-collapse: collapse; border-top: 4px solid #fa0; border-bottom: 1px solid #fa0; background: #fff; }
#logmsg table th { text-align: left; font-weight: normal; padding: 0.2em 0.5em; border-top: 1px dotted #fa0; }
#logmsg table td { text-align: right; border-top: 1px dotted #fa0; padding: 0.2em 0.5em; }
#logmsg table thead th { text-align: center; border-bottom: 1px solid #fa0; }
#logmsg table th.Corner { text-align: left; }
#logmsg hr { border: none 0; border-top: 2px dashed #fa0; height: 1px; }
#header, #footer { color: #fff; background: #636; border: 1px #300 solid; padding: 6px; }
#patch { width: 100%; }
#patch h4 {font-family: verdana,arial,helvetica,sans-serif;font-size:10pt;padding:8px;background:#369;color:#fff;margin:0;}
#patch .propset h4, #patch .binary h4 {margin:0;}
#patch pre {padding:0;line-height:1.2em;margin:0;}
#patch .diff {width:100%;background:#eee;padding: 0 0 10px 0;overflow:auto;}
#patch .propset .diff, #patch .binary .diff  {padding:10px 0;}
#patch span {display:block;padding:0 10px;}
#patch .modfile, #patch .addfile, #patch .delfile, #patch .propset, #patch .binary, #patch .copfile {border:1px solid #ccc;margin:10px 0;}
#patch ins {background:#dfd;text-decoration:none;display:block;padding:0 10px;}
#patch del {background:#fdd;text-decoration:none;display:block;padding:0 10px;}
#patch .lines, .info {color:#888;background:#fff;}
--></style>
<div id="msg">
<dl class="meta">
<dt>Revision</dt> <dd><a href="http://trac.webkit.org/projects/webkit/changeset/285235">285235</a></dd>
<dt>Author</dt> <dd>jh718.park@samsung.com</dd>
<dt>Date</dt> <dd>2021-11-03 15:18:37 -0700 (Wed, 03 Nov 2021)</dd>
</dl>

<h3>Log Message</h3>
<pre>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 more test case results.
* web-platform-tests/css/css-backgrounds/parsing/border-radius-valid.html: Add more test cases.

Source/WebCore:

* css/StyleProperties.cpp:
(WebCore::StyleProperties::getPropertyValue const):
(WebCore::StyleProperties::borderRadiusValue const):
* css/StyleProperties.h:
* css/parser/CSSPropertyParser.cpp:</pre>

<h3>Modified Paths</h3>
<ul>
<li><a href="#trunkLayoutTestsimportedw3cChangeLog">trunk/LayoutTests/imported/w3c/ChangeLog</a></li>
<li><a href="#trunkLayoutTestsimportedw3cwebplatformtestscsscssbackgroundsparsingborderradiusvalidexpectedtxt">trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-backgrounds/parsing/border-radius-valid-expected.txt</a></li>
<li><a href="#trunkLayoutTestsimportedw3cwebplatformtestscsscssbackgroundsparsingborderradiusvalidhtml">trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-backgrounds/parsing/border-radius-valid.html</a></li>
<li><a href="#trunkSourceWebCoreChangeLog">trunk/Source/WebCore/ChangeLog</a></li>
<li><a href="#trunkSourceWebCorecssStylePropertiescpp">trunk/Source/WebCore/css/StyleProperties.cpp</a></li>
<li><a href="#trunkSourceWebCorecssStylePropertiesh">trunk/Source/WebCore/css/StyleProperties.h</a></li>
<li><a href="#trunkSourceWebCorecssparserCSSPropertyParsercpp">trunk/Source/WebCore/css/parser/CSSPropertyParser.cpp</a></li>
</ul>

</div>
<div id="patch">
<h3>Diff</h3>
<a id="trunkLayoutTestsimportedw3cChangeLog"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/imported/w3c/ChangeLog (285234 => 285235)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/imported/w3c/ChangeLog 2021-11-03 22:07:25 UTC (rev 285234)
+++ trunk/LayoutTests/imported/w3c/ChangeLog    2021-11-03 22:18:37 UTC (rev 285235)
</span><span class="lines">@@ -1,3 +1,16 @@
</span><ins>+2021-11-03  Joonghun Park  <jh718.park@samsung.com>
+
+        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 more test case results.
+        * web-platform-tests/css/css-backgrounds/parsing/border-radius-valid.html: Add more test cases.
+
</ins><span class="cx"> 2021-11-03  Chris Dumez  <cdumez@apple.com>
</span><span class="cx"> 
</span><span class="cx">         Javascript URLs do not run in the right context when using frame targeting
</span></span></pre></div>
<a id="trunkLayoutTestsimportedw3cwebplatformtestscsscssbackgroundsparsingborderradiusvalidexpectedtxt"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-backgrounds/parsing/border-radius-valid-expected.txt (285234 => 285235)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-backgrounds/parsing/border-radius-valid-expected.txt   2021-11-03 22:07:25 UTC (rev 285234)
+++ trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-backgrounds/parsing/border-radius-valid-expected.txt      2021-11-03 22:18:37 UTC (rev 285235)
</span><span class="lines">@@ -1,13 +1,19 @@
</span><span class="cx"> 
</span><span class="cx"> PASS e.style['border-radius'] = "1px" should set the property value
</span><ins>+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
</ins><span class="cx"> PASS e.style['border-radius'] = "1px 2% 3px 4%" should set the property value
</span><del>-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 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%"
</del><ins>+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
</ins><span class="cx"> PASS e.style['border-radius'] = "1px 1px 2% 2%" should set the property value
</span><span class="cx"> PASS e.style['border-radius'] = "1px 2% 1px 1px" should set the property value
</span><del>-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"
</del><ins>+PASS e.style['border-radius'] = "1px 2% 2% 2% / 1px 2% 3px 2%" should set the property value
</ins><span class="cx"> PASS e.style['border-top-left-radius'] = "10px" should set the property value
</span><span class="cx"> PASS e.style['border-top-right-radius'] = "20%" should set the property value
</span><span class="cx"> PASS e.style['border-bottom-right-radius'] = "30px 40%" should set the property value
</span></span></pre></div>
<a id="trunkLayoutTestsimportedw3cwebplatformtestscsscssbackgroundsparsingborderradiusvalidhtml"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-backgrounds/parsing/border-radius-valid.html (285234 => 285235)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-backgrounds/parsing/border-radius-valid.html   2021-11-03 22:07:25 UTC (rev 285234)
+++ trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-backgrounds/parsing/border-radius-valid.html      2021-11-03 22:18:37 UTC (rev 285235)
</span><span class="lines">@@ -12,8 +12,14 @@
</span><span class="cx"> <body>
</span><span class="cx"> <script>
</span><span class="cx"> test_valid_value("border-radius", "1px");
</span><ins>+test_valid_value("border-radius", "1px 5%");
+test_valid_value("border-radius", "1px 2% 3px");
</ins><span class="cx"> test_valid_value("border-radius", "1px 2% 3px 4%");
</span><ins>+test_valid_value("border-radius", "1px / 2px");
</ins><span class="cx"> test_valid_value("border-radius", "5em / 1px 2% 3px 4%");
</span><ins>+test_valid_value("border-radius", "1px 2% / 3px 4px");
+test_valid_value("border-radius", "1px 2px 3em / 1px 2px 3%");
+test_valid_value("border-radius", "1px 2% / 2px 3em 4px 5em");
</ins><span class="cx"> test_valid_value("border-radius", "1px 2% 3px 4% / 5em");
</span><span class="cx"> 
</span><span class="cx"> test_valid_value("border-radius", "1px 1px 1px 2% / 1px 2% 1px 2%", "1px 1px 1px 2% / 1px 2%");
</span></span></pre></div>
<a id="trunkSourceWebCoreChangeLog"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebCore/ChangeLog (285234 => 285235)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebCore/ChangeLog   2021-11-03 22:07:25 UTC (rev 285234)
+++ trunk/Source/WebCore/ChangeLog      2021-11-03 22:18:37 UTC (rev 285235)
</span><span class="lines">@@ -1,3 +1,19 @@
</span><ins>+2021-11-03  Joonghun Park  <jh718.park@samsung.com>
+
+        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:
+        * css/parser/CSSPropertyParser.cpp:
+
</ins><span class="cx"> 2021-11-03  David Kilzer  <ddkilzer@apple.com>
</span><span class="cx"> 
</span><span class="cx">         Fix consistency issues with localized strings and regenerate localizable.strings
</span></span></pre></div>
<a id="trunkSourceWebCorecssStylePropertiescpp"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebCore/css/StyleProperties.cpp (285234 => 285235)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebCore/css/StyleProperties.cpp     2021-11-03 22:07:25 UTC (rev 285234)
+++ trunk/Source/WebCore/css/StyleProperties.cpp        2021-11-03 22:18:37 UTC (rev 285235)
</span><span class="lines">@@ -35,6 +35,7 @@
</span><span class="cx"> #include "CSSValuePool.h"
</span><span class="cx"> #include "Color.h"
</span><span class="cx"> #include "Document.h"
</span><ins>+#include "Pair.h"
</ins><span class="cx"> #include "PropertySetCSSStyleDeclaration.h"
</span><span class="cx"> #include "StylePropertyShorthand.h"
</span><span class="cx"> #include "StylePropertyShorthandFunctions.h"
</span><span class="lines">@@ -319,7 +320,7 @@
</span><span class="cx">             return value->cssText();
</span><span class="cx">         return String();
</span><span class="cx">     case CSSPropertyBorderRadius:
</span><del>-        return get4Values(borderRadiusShorthand());
</del><ins>+        return borderRadiusValue(borderRadiusShorthand());
</ins><span class="cx">     case CSSPropertyGap:
</span><span class="cx">         return get2Values(gapShorthand());
</span><span class="cx">     case CSSPropertyScrollMargin:
</span><span class="lines">@@ -363,6 +364,66 @@
</span><span class="cx">     return String();
</span><span class="cx"> }
</span><span class="cx"> 
</span><ins>+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();
+    auto* topRightValue = topRight.value();
+    auto* bottomRightValue = bottomRight.value();
+    auto* bottomLeftValue = bottomLeft.value();
+
+    // All 4 properties must be specified.
+    if (!topLeftValue || !topRightValue || !bottomRightValue || !bottomLeftValue)
+        return String();
+
+    // Important flags must be the same
+    if (topLeft.isImportant() != topRight.isImportant() || topRight.isImportant() != bottomRight.isImportant() || bottomRight.isImportant() != bottomLeft.isImportant())
+        return String();
+
+    if (topLeftValue->isInheritedValue() && topRightValue->isInheritedValue() && bottomRightValue->isInheritedValue() && bottomLeftValue->isInheritedValue())
+        return getValueName(CSSValueInherit);
+
+    if (topLeftValue->isInitialValue() || topRightValue->isInitialValue() || bottomRightValue->isInitialValue() || bottomLeftValue->isInitialValue()) {
+        if (topLeftValue->isInitialValue() && topRightValue->isInitialValue() && bottomRightValue->isInitialValue() && bottomLeftValue->isInitialValue() && !topLeft.isImplicit()) {
+            // All components are "initial" and "topLeft" is not implicit.
+            return getValueName(CSSValueInitial);
+        }
+        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);
+}
+
</ins><span class="cx"> String StyleProperties::borderSpacingValue(const StylePropertyShorthand& shorthand) const
</span><span class="cx"> {
</span><span class="cx">     auto horizontalValue = getPropertyCSSValue(shorthand.properties()[0]);
</span></span></pre></div>
<a id="trunkSourceWebCorecssStylePropertiesh"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebCore/css/StyleProperties.h (285234 => 285235)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebCore/css/StyleProperties.h       2021-11-03 22:07:25 UTC (rev 285234)
+++ trunk/Source/WebCore/css/StyleProperties.h  2021-11-03 22:18:37 UTC (rev 285235)
</span><span class="lines">@@ -170,6 +170,7 @@
</span><span class="cx">     String getLayeredShorthandValue(const StylePropertyShorthand&) const;
</span><span class="cx">     String get2Values(const StylePropertyShorthand&) const;
</span><span class="cx">     String get4Values(const StylePropertyShorthand&) const;
</span><ins>+    String borderRadiusValue(const StylePropertyShorthand&) const;
</ins><span class="cx">     String borderSpacingValue(const StylePropertyShorthand&) const;
</span><span class="cx">     String fontValue() const;
</span><span class="cx">     String fontVariantValue() const;
</span></span></pre></div>
<a id="trunkSourceWebCorecssparserCSSPropertyParsercpp"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebCore/css/parser/CSSPropertyParser.cpp (285234 => 285235)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebCore/css/parser/CSSPropertyParser.cpp    2021-11-03 22:07:25 UTC (rev 285234)
+++ trunk/Source/WebCore/css/parser/CSSPropertyParser.cpp       2021-11-03 22:18:37 UTC (rev 285235)
</span><span class="lines">@@ -63,6 +63,10 @@
</span><span class="cx"> #include "Counter.h"
</span><span class="cx"> #include "FontFace.h"
</span><span class="cx"> #include "HashTools.h"
</span><ins>+// FIXME-NEWPARSER: CSSPrimitiveValue is a large class that holds many unrelated objects,
+// switching behavior on the type of the object it is holding.
+// Since CSSValue is already a class hierarchy, this adds an unnecessary second level to the hierarchy that complicates code.
+// So we need to remove the various behaviors from CSSPrimitiveValue and split them into separate subclasses of CSSValue.
</ins><span class="cx"> // FIXME-NEWPARSER: Replace Pair and Rect with actual CSSValue subclasses (CSSValuePair and CSSQuadValue).
</span><span class="cx"> #include "Pair.h"
</span><span class="cx"> #include "Rect.h"
</span></span></pre>
</div>
</div>

</body>
</html>