Add support for '-webkit-appearance: auto'

https://bugs.webkit.org/show_bug.cgi?id=231203 rdar://83696133 Reviewed by Wenson Hsieh. LayoutTests/imported/w3c: * web-platform-tests/css/css-ui/appearance-cssom-001-expected.txt: Mark progression. Source/WebCore: The 'appearance' property allows authors to use the 'auto' keyword to opt widgets (any element that can have a native appearance) into a native appearance [1]. Elements other than widgets are rendered as if none had been specified. Since '-webkit-appearance' is a parse time alias of 'appearance', support '-webkit-appearance: auto' prior to unprefixing. The used-value for appearance (effectiveAppearance) is determined by the element tag and type. In the case of elements in the UA shadow tree, the pseudo id is used to determine the effective appearance. The used-values when specifying 'auto' match the default specified values in the UA style sheet. Note that additional test coverage exists in the form of web platform web platform tests, and is dependent on unprefixing. [1] https://www.w3.org/TR/css-ui-4/#valdef-appearance-auto * css/CSSPrimitiveValueMappings.h: (WebCore::CSSPrimitiveValue::CSSPrimitiveValue): (WebCore::CSSPrimitiveValue::operator ControlPart const): * css/CSSProperties.json: * css/parser/CSSParserFastPaths.cpp: (WebCore::CSSParserFastPaths::isValidKeywordPropertyAndValue): * platform/ThemeTypes.cpp: (WebCore::operator<<): * platform/ThemeTypes.h: * rendering/RenderTheme.cpp: (WebCore::RenderTheme::adjustStyle): (WebCore::RenderTheme::autoAppearanceForElement const): * rendering/RenderTheme.h: LayoutTests: * platform/gtk/imported/w3c/web-platform-tests/css/css-ui/appearance-cssom-001-expected.txt: * platform/ios-wk2/imported/w3c/web-platform-tests/css/css-ui/appearance-cssom-001-expected.txt: * platform/wpe/imported/w3c/web-platform-tests/css/css-ui/appearance-cssom-001-expected.txt: Canonical link: https://commits.webkit.org/242736@main git-svn-id: https://svn.webkit.org/repository/webkit/trunk@283858 268f45cc-cd09-0410-ab3c-d52691b4dbfc
WebKit · Oct 9, 2021 · 03ed097cc60e2063b45e3e566f1fa5954708a319 · 03ed097
1 parent a765be1
commit 03ed097cc60e2063b45e3e566f1fa5954708a319
Show file tree

Hide file tree

Showing 14 changed files with 207 additions and 10 deletions.
diff --git a/LayoutTests/ChangeLog b/LayoutTests/ChangeLog
@@ -1,3 +1,15 @@
+2021-10-08  Aditya Keerthi  <akeerthi@apple.com>
+
+        Add support for '-webkit-appearance: auto'
+        https://bugs.webkit.org/show_bug.cgi?id=231203
+        rdar://83696133
+
+        Reviewed by Wenson Hsieh.
+
+        * platform/gtk/imported/w3c/web-platform-tests/css/css-ui/appearance-cssom-001-expected.txt:
+        * platform/ios-wk2/imported/w3c/web-platform-tests/css/css-ui/appearance-cssom-001-expected.txt:
+        * platform/wpe/imported/w3c/web-platform-tests/css/css-ui/appearance-cssom-001-expected.txt:
+
 2021-10-08  Ayumi Kojima  <ayumi_kojima@apple.com>
 
         [ iOS 15 Debug ] ASSERTION FAILED: sockets.empty().

diff --git a/LayoutTests/imported/w3c/ChangeLog b/LayoutTests/imported/w3c/ChangeLog
@@ -1,3 +1,15 @@
+2021-10-08  Aditya Keerthi  <akeerthi@apple.com>
+
+        Add support for '-webkit-appearance: auto'
+        https://bugs.webkit.org/show_bug.cgi?id=231203
+        rdar://83696133
+
+        Reviewed by Wenson Hsieh.
+
+        * web-platform-tests/css/css-ui/appearance-cssom-001-expected.txt:
+
+        Mark progression.
+
 2021-10-08  Chris Dumez  <cdumez@apple.com>
 
         Merge optimizations to AudioParamTimeline::hasValues() from Blink

diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-ui/appearance-cssom-001-expected.txt b/LayoutTests/imported/w3c/web-platform-tests/css/css-ui/appearance-cssom-001-expected.txt
@@ -1,7 +1,7 @@
 Test
 
 PASS -webkit-appearance: none
-FAIL -webkit-appearance: auto assert_equals: style.WebkitAppearance (uppercase W) expected "auto" but got ""
+PASS -webkit-appearance: auto
 PASS -webkit-appearance: button
 PASS -webkit-appearance: checkbox
 PASS -webkit-appearance: listbox

diff --git a/...platform/gtk/imported/w3c/web-platform-tests/css/css-ui/appearance-cssom-001-expected.txt b/...platform/gtk/imported/w3c/web-platform-tests/css/css-ui/appearance-cssom-001-expected.txt
@@ -1,7 +1,7 @@
 Test
 
 PASS -webkit-appearance: none
-FAIL -webkit-appearance: auto assert_equals: style.WebkitAppearance (uppercase W) expected "auto" but got ""
+PASS -webkit-appearance: auto
 PASS -webkit-appearance: button
 PASS -webkit-appearance: checkbox
 PASS -webkit-appearance: listbox

diff --git a/...form/ios-wk2/imported/w3c/web-platform-tests/css/css-ui/appearance-cssom-001-expected.txt b/...form/ios-wk2/imported/w3c/web-platform-tests/css/css-ui/appearance-cssom-001-expected.txt
@@ -1,7 +1,7 @@
 Test
 
 PASS -webkit-appearance: none
-FAIL -webkit-appearance: auto assert_equals: style.WebkitAppearance (uppercase W) expected "auto" but got ""
+PASS -webkit-appearance: auto
 PASS -webkit-appearance: button
 PASS -webkit-appearance: checkbox
 PASS -webkit-appearance: listbox

diff --git a/...platform/wpe/imported/w3c/web-platform-tests/css/css-ui/appearance-cssom-001-expected.txt b/...platform/wpe/imported/w3c/web-platform-tests/css/css-ui/appearance-cssom-001-expected.txt
@@ -1,7 +1,7 @@
 Test
 
 PASS -webkit-appearance: none
-FAIL -webkit-appearance: auto assert_equals: style.WebkitAppearance (uppercase W) expected "auto" but got ""
+PASS -webkit-appearance: auto
 PASS -webkit-appearance: button
 PASS -webkit-appearance: checkbox
 PASS -webkit-appearance: listbox

diff --git a/Source/WebCore/ChangeLog b/Source/WebCore/ChangeLog
@@ -1,3 +1,44 @@
+2021-10-08  Aditya Keerthi  <akeerthi@apple.com>
+
+        Add support for '-webkit-appearance: auto'
+        https://bugs.webkit.org/show_bug.cgi?id=231203
+        rdar://83696133
+
+        Reviewed by Wenson Hsieh.
+
+        The 'appearance' property allows authors to use the 'auto' keyword
+        to opt widgets (any element that can have a native appearance) into
+        a native appearance [1]. Elements other than widgets are rendered
+        as if none had been specified.
+
+        Since '-webkit-appearance' is a parse time alias of 'appearance',
+        support '-webkit-appearance: auto' prior to unprefixing.
+
+        The used-value for appearance (effectiveAppearance) is determined by
+        the element tag and type. In the case of elements in the UA shadow
+        tree, the pseudo id is used to determine the effective appearance. The
+        used-values when specifying 'auto' match the default specified values
+        in the UA style sheet.
+
+        Note that additional test coverage exists in the form of web platform
+        web platform tests, and is dependent on unprefixing.
+
+        [1] https://www.w3.org/TR/css-ui-4/#valdef-appearance-auto
+
+        * css/CSSPrimitiveValueMappings.h:
+        (WebCore::CSSPrimitiveValue::CSSPrimitiveValue):
+        (WebCore::CSSPrimitiveValue::operator ControlPart const):
+        * css/CSSProperties.json:
+        * css/parser/CSSParserFastPaths.cpp:
+        (WebCore::CSSParserFastPaths::isValidKeywordPropertyAndValue):
+        * platform/ThemeTypes.cpp:
+        (WebCore::operator<<):
+        * platform/ThemeTypes.h:
+        * rendering/RenderTheme.cpp:
+        (WebCore::RenderTheme::adjustStyle):
+        (WebCore::RenderTheme::autoAppearanceForElement const):
+        * rendering/RenderTheme.h:
+
 2021-10-08  BJ Burg  <bburg@apple.com>
 
         [Cocoa] Web Inspector: provide a way for _WKInspectorExtension clients to be notified when the inspected page navigates

diff --git a/Source/WebCore/css/CSSPrimitiveValueMappings.h b/Source/WebCore/css/CSSPrimitiveValueMappings.h
@@ -423,6 +423,9 @@ template<> inline CSSPrimitiveValue::CSSPrimitiveValue(ControlPart e)
     case NoControlPart:
         m_value.valueID = CSSValueNone;
         break;
+    case AutoPart:
+        m_value.valueID = CSSValueAuto;
+        break;
     case CheckboxPart:
         m_value.valueID = CSSValueCheckbox;
         break;
@@ -629,7 +632,11 @@ template<> inline CSSPrimitiveValue::operator ControlPart() const
 
     if (m_value.valueID == CSSValueNone)
         return NoControlPart;
-    return ControlPart(m_value.valueID - CSSValueCheckbox + 1);
+
+    if (m_value.valueID == CSSValueAuto)
+        return AutoPart;
+
+    return ControlPart(m_value.valueID - CSSValueCheckbox + CheckboxPart);
 }
 
 template<> inline CSSPrimitiveValue::CSSPrimitiveValue(BackfaceVisibility e)

diff --git a/Source/WebCore/css/CSSProperties.json b/Source/WebCore/css/CSSProperties.json
@@ -5003,6 +5003,7 @@
                 "caps-lock-indicator",
                 "color-well",
                 "list-button",
+                "auto",
                 "none"
             ],
             "status": {

diff --git a/Source/WebCore/css/parser/CSSParserFastPaths.cpp b/Source/WebCore/css/parser/CSSParserFastPaths.cpp
@@ -754,7 +754,7 @@ bool CSSParserFastPaths::isValidKeywordPropertyAndValue(CSSPropertyID propertyId
     case CSSPropertyVisibility: // visible | hidden | collapse
         return valueID == CSSValueVisible || valueID == CSSValueHidden || valueID == CSSValueCollapse;
     case CSSPropertyWebkitAppearance:
-        return (valueID >= CSSValueCheckbox && valueID <= CSSValueCapsLockIndicator) || valueID == CSSValueNone;
+        return (valueID >= CSSValueCheckbox && valueID <= CSSValueCapsLockIndicator) || valueID == CSSValueNone || valueID == CSSValueAuto;
     case CSSPropertyBackfaceVisibility:
         return valueID == CSSValueVisible || valueID == CSSValueHidden;
 #if ENABLE(CSS_COMPOSITING)

diff --git a/Source/WebCore/platform/ThemeTypes.cpp b/Source/WebCore/platform/ThemeTypes.cpp
@@ -34,6 +34,7 @@ TextStream& operator<<(TextStream& ts, ControlPart controlPart)
 {
     switch (controlPart) {
     case NoControlPart: ts << "no-control-part"; break;
+    case AutoPart: ts << "auto-part"; break;
     case CheckboxPart: ts << "checkbox-part"; break;
     case RadioPart: ts << "radio-part"; break;
     case PushButtonPart: ts << "push-button-part"; break;

diff --git a/Source/WebCore/platform/ThemeTypes.h b/Source/WebCore/platform/ThemeTypes.h
@@ -34,6 +34,7 @@ namespace WebCore {
 // Must follow CSSValueKeywords.in order
 enum ControlPart {
     NoControlPart,
+    AutoPart,
     CheckboxPart,
     RadioPart,
     PushButtonPart,

diff --git a/Source/WebCore/rendering/RenderTheme.cpp b/Source/WebCore/rendering/RenderTheme.cpp
@@ -34,16 +34,22 @@
 #include "Frame.h"
 #include "FrameSelection.h"
 #include "GraphicsContext.h"
+#include "HTMLAttachmentElement.h"
+#include "HTMLButtonElement.h"
 #include "HTMLInputElement.h"
 #include "HTMLMeterElement.h"
 #include "HTMLNames.h"
+#include "HTMLProgressElement.h"
+#include "HTMLSelectElement.h"
+#include "HTMLTextAreaElement.h"
 #include "LocalizedStrings.h"
 #include "Page.h"
 #include "PaintInfo.h"
 #include "RenderMeter.h"
 #include "RenderStyle.h"
 #include "RenderView.h"
 #include "RuntimeEnabledFeatures.h"
+#include "ShadowPseudoIds.h"
 #include "SpinButtonElement.h"
 #include "StringTruncator.h"
 #include "TextControlInnerElements.h"
@@ -77,8 +83,16 @@ RenderTheme::RenderTheme()
 
 void RenderTheme::adjustStyle(RenderStyle& style, const Element* element, const RenderStyle* userAgentAppearanceStyle)
 {
+    auto part = style.appearance();
+    if (part == AutoPart) {
+        part = autoAppearanceForElement(element);
+        if (part == NoControlPart) {
+            style.setEffectiveAppearance(NoControlPart);
+            return;
+        }
+    }
+
     // Force inline and table display styles to be inline-block (except for table- which is block)
-    ControlPart part = style.appearance();
     if (style.display() == DisplayType::Inline || style.display() == DisplayType::InlineTable || style.display() == DisplayType::TableRowGroup
         || style.display() == DisplayType::TableHeaderGroup || style.display() == DisplayType::TableFooterGroup
         || style.display() == DisplayType::TableRow || style.display() == DisplayType::TableColumnGroup || style.display() == DisplayType::TableColumn
@@ -90,15 +104,17 @@ void RenderTheme::adjustStyle(RenderStyle& style, const Element* element, const
     if (userAgentAppearanceStyle && isControlStyled(style, *userAgentAppearanceStyle)) {
         switch (part) {
         case MenulistPart:
-            style.setEffectiveAppearance(MenulistButtonPart);
             part = MenulistButtonPart;
             break;
         default:
-            style.setEffectiveAppearance(NoControlPart);
+            part = NoControlPart;
             break;
         }
     }
 
+    ASSERT(part != AutoPart);
+    style.setEffectiveAppearance(part);
+
     if (!style.hasEffectiveAppearance())
         return;
 
@@ -191,7 +207,7 @@ void RenderTheme::adjustStyle(RenderStyle& style, const Element* element, const
 #endif
 
     // Call the appropriate style adjustment method based off the appearance value.
-    switch (style.effectiveAppearance()) {
+    switch (part) {
 #if !USE(NEW_THEME)
     case CheckboxPart:
         return adjustCheckboxStyle(style, element);
@@ -270,6 +286,110 @@ void RenderTheme::adjustStyle(RenderStyle& style, const Element* element, const
     }
 }
 
+ControlPart RenderTheme::autoAppearanceForElement(const Element* elementPtr) const
+{
+    if (!elementPtr)
+        return NoControlPart;
+
+    Ref element = *elementPtr;
+
+    if (is<HTMLInputElement>(element)) {
+        auto& input = downcast<HTMLInputElement>(element.get());
+
+        if (input.isTextButton() || input.isUploadButton())
+            return PushButtonPart;
+
+        if (input.isCheckbox())
+            return CheckboxPart;
+
+        if (input.isRadioButton())
+            return RadioPart;
+
+        if (input.isSearchField())
+            return SearchFieldPart;
+
+        if (input.isDateField() || input.isDateTimeLocalField() || input.isMonthField() || input.isTimeField() || input.isWeekField()) {
+#if PLATFORM(IOS_FAMILY)
+            return MenulistButtonPart;
+#else
+            return TextFieldPart;
+#endif
+        }
+
+#if ENABLE(INPUT_TYPE_COLOR)
+        if (input.isColorControl())
+            return ColorWellPart;
+#endif
+
+        if (input.isRangeControl())
+            return SliderHorizontalPart;
+
+        if (input.isTextField())
+            return TextFieldPart;
+
+        // <input type=hidden|image|file>
+        return NoControlPart;
+    }
+
+    if (is<HTMLButtonElement>(element))
+        return ButtonPart;
+
+    if (is<HTMLSelectElement>(element)) {
+#if PLATFORM(IOS_FAMILY)
+        return MenulistButtonPart;
+#else
+        auto& select = downcast<HTMLSelectElement>(element.get());
+        return select.usesMenuList() ? MenulistPart : ListboxPart;
+#endif
+    }
+
+    if (is<HTMLTextAreaElement>(element))
+        return TextAreaPart;
+
+    if (is<HTMLMeterElement>(element))
+        return MeterPart;
+
+    if (is<HTMLProgressElement>(element))
+        return ProgressBarPart;
+
+#if ENABLE(ATTACHMENT_ELEMENT)
+    if (is<HTMLAttachmentElement>(element))
+        return AttachmentPart;
+#endif
+
+    if (element->isInUserAgentShadowTree()) {
+        auto& pseudo = element->shadowPseudoId();
+
+#if ENABLE(DATALIST_ELEMENT)
+        if (pseudo == ShadowPseudoIds::webkitListButton())
+            return ListButtonPart;
+#endif
+
+        if (pseudo == ShadowPseudoIds::webkitCapsLockIndicator())
+            return CapsLockIndicatorPart;
+
+        if (pseudo == ShadowPseudoIds::webkitSearchCancelButton())
+            return SearchFieldCancelButtonPart;
+
+        if (pseudo == ShadowPseudoIds::webkitSearchDecoration())
+            return SearchFieldDecorationPart;
+
+        if (pseudo == ShadowPseudoIds::webkitSearchResultsDecoration())
+            return SearchFieldResultsDecorationPart;
+
+        if (pseudo == ShadowPseudoIds::webkitSearchResultsButton())
+            return SearchFieldResultsButtonPart;
+
+        if (pseudo == ShadowPseudoIds::webkitSliderThumb() || pseudo == ShadowPseudoIds::webkitMediaSliderThumb())
+            return SliderThumbHorizontalPart;
+
+        if (pseudo == ShadowPseudoIds::webkitInnerSpinButton())
+            return InnerSpinButtonPart;
+    }
+
+    return NoControlPart;
+}
+
 void RenderTheme::adjustSearchFieldDecorationStyle(RenderStyle& style, const Element* element) const
 {
     if (is<SearchFieldResultsButtonElement>(element) && !downcast<SearchFieldResultsButtonElement>(*element).canAdjustStyleForAppearance()) {

diff --git a/Source/WebCore/rendering/RenderTheme.h b/Source/WebCore/rendering/RenderTheme.h
@@ -454,6 +454,8 @@ class RenderTheme {
     virtual ColorCache& colorCache(OptionSet<StyleColor::Options>) const;
 
 private:
+    ControlPart autoAppearanceForElement(const Element*) const;
+
     void adjustSearchFieldDecorationStyle(RenderStyle&, const Element*) const;
 
     mutable HashMap<uint8_t, ColorCache, DefaultHash<uint8_t>, WTF::UnsignedWithZeroKeyHashTraits<uint8_t>> m_colorCacheMap;