Skip to content
Permalink
Browse files
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
  • Loading branch information
pxlcoder committed Oct 9, 2021
1 parent a765be1 commit 03ed097cc60e2063b45e3e566f1fa5954708a319
Showing 14 changed files with 207 additions and 10 deletions.
@@ -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().
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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)
@@ -5003,6 +5003,7 @@
"caps-lock-indicator",
"color-well",
"list-button",
"auto",
"none"
],
"status": {
@@ -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)
@@ -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;
@@ -34,6 +34,7 @@ namespace WebCore {
// Must follow CSSValueKeywords.in order
enum ControlPart {
NoControlPart,
AutoPart,
CheckboxPart,
RadioPart,
PushButtonPart,
@@ -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()) {
@@ -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;

0 comments on commit 03ed097

Please sign in to comment.