- Revision
- 275426
- Author
- [email protected]
- Date
- 2021-04-02 11:17:07 -0700 (Fri, 02 Apr 2021)
Log Message
Do not paint native decorations for search fields without '-webkit-appearance: searchfield'
https://bugs.webkit.org/show_bug.cgi?id=223946
<rdar://problem/75621365>
Reviewed by Antti Koivisto.
Source/WebCore:
On iOS, sites that use <input type="search"> have been observed to draw
their own icons next to the field. Since we draw our own icon for
search fields, this results in an unwanted icon on some sites, such as
on chanel.com. However, in this case, the site specifies
"-webkit-appearance: textfield" on the search input, indicating a desire
to remove the native search field appearance. To remove the unwanted
icon, we should not paint decorations for search fields without
"-webkit-appearance: searchfield".
To achieve this behavior, adjust the -webkit-appearance value on the
pseudo element containing the icon when the search field has a different
-webkit-appearance value, so that the native painting is elided. The
decision to not simply set "display: none" on the element was made so
that sites can still customize the decoration should they choose to do
so. Note that on macOS, Web Inspector paints their own search icon
using the pseudo element.
No new tests. A layout test is not possible since SearchFieldResultsButtonElement
is inaccessible through DOM APIs. A reference mismatch test is not
possible since changing the -webkit-appearance property on a search field
already results in visual changes. Existing tests were rebaselined to
account for the fact that the decoration is removed when changing
-webkit-appearance, so we do have test coverage.
* html/HTMLElement.h:
(WebCore::HTMLElement::isSearchFieldResultsButtonElement const):
* html/shadow/TextControlInnerElements.cpp:
(WebCore::SearchFieldResultsButtonElement::SearchFieldResultsButtonElement):
(WebCore::SearchFieldResultsButtonElement::resolveCustomStyle):
If the searchfield's appearance is not "searchfield", adjust the
appearance of the results button to NoControlPart. For compatibility
reasons, the adjustment is skipped if the author has specified the
results attribute on the searchfield. This is determined by checking
the maxResults of the input element.
If the adjustment needs to be performed, we elide standard style
adjustments from the theme by setting canAdjustStyleForAppearance to
false. Without this, the call to resolveStyle will apply native styles
to the element, since it does not know we are about to reset appearance.
* html/shadow/TextControlInnerElements.h:
(isType):
* rendering/RenderTheme.cpp:
(WebCore::RenderTheme::adjustStyle):
(WebCore::RenderTheme::adjustSearchFieldDecorationStyle const):
Skip style adjustment and reset the appearance when necessary.
* rendering/RenderTheme.h:
* style/StyleTreeResolver.cpp:
(WebCore::Style::TreeResolver::resolveElement):
Resolve all descendants if the appearance property of a search input is
changed. Without this change, the style of the results button is not
resolved when making a dynamic style change to the appearance of the
search input.
LayoutTests:
Rebaselined tests to account for the removal of the native decoration
when a different -webkit-appearance is specified on a search field.
* platform/ios/fast/css/input-search-padding-expected.txt:
* platform/mac/fast/css/text-input-with-webkit-border-radius-expected.txt:
Modified Paths
Diff
Modified: trunk/LayoutTests/ChangeLog (275425 => 275426)
--- trunk/LayoutTests/ChangeLog 2021-04-02 17:41:48 UTC (rev 275425)
+++ trunk/LayoutTests/ChangeLog 2021-04-02 18:17:07 UTC (rev 275426)
@@ -1,3 +1,17 @@
+2021-04-02 Aditya Keerthi <[email protected]>
+
+ Do not paint native decorations for search fields without '-webkit-appearance: searchfield'
+ https://bugs.webkit.org/show_bug.cgi?id=223946
+ <rdar://problem/75621365>
+
+ Reviewed by Antti Koivisto.
+
+ Rebaselined tests to account for the removal of the native decoration
+ when a different -webkit-appearance is specified on a search field.
+
+ * platform/ios/fast/css/input-search-padding-expected.txt:
+ * platform/mac/fast/css/text-input-with-webkit-border-radius-expected.txt:
+
2021-04-02 Chris Fleizach <[email protected]>
AX: textRectsFromMarkers always fails
Modified: trunk/LayoutTests/platform/ios/fast/css/input-search-padding-expected.txt (275425 => 275426)
--- trunk/LayoutTests/platform/ios/fast/css/input-search-padding-expected.txt 2021-04-02 17:41:48 UTC (rev 275425)
+++ trunk/LayoutTests/platform/ios/fast/css/input-search-padding-expected.txt 2021-04-02 18:17:07 UTC (rev 275426)
@@ -3,21 +3,21 @@
layer at (0,0) size 800x600
RenderBlock {HTML} at (0,0) size 800x600
RenderBody {BODY} at (8,8) size 784x584
- RenderTextControl {INPUT} at (2,2) size 575x87 [bgcolor=#7676801F]
- RenderFlexibleBox {DIV} at (20,8) size 535x49
- RenderBlock {DIV} at (0,4) size 40x41
- RenderBlock {DIV} at (44,0) size 491x49
- RenderBlock {DIV} at (534,24) size 0x0
- RenderBR {BR} at (578,34) size 1x19
+ RenderTextControl {INPUT} at (2,2) size 535x87 [bgcolor=#7676801F]
+ RenderFlexibleBox {DIV} at (20,8) size 495x49
+ RenderBlock {DIV} at (0,24) size 0x0
+ RenderBlock {DIV} at (0,0) size 495x49
+ RenderBlock {DIV} at (494,24) size 0x0
+ RenderBR {BR} at (538,34) size 1x19
RenderTextControl {INPUT} at (2,93) size 537x89 [bgcolor=#FFFFFF] [border: (1px solid #78788033)]
RenderBR {BR} at (540,126) size 1x19
- RenderTextControl {INPUT} at (2,184) size 271x25 [bgcolor=#7676801F]
- RenderFlexibleBox {DIV} at (4,0) size 263x25
- RenderBlock {DIV} at (0,2) size 20x21
- RenderBlock {DIV} at (24,0) size 239x25
- RenderBlock {DIV} at (262,12) size 0x0
-layer at (74,18) size 491x49
- RenderBlock {DIV} at (0,0) size 491x49
+ RenderTextControl {INPUT} at (2,184) size 251x25 [bgcolor=#7676801F]
+ RenderFlexibleBox {DIV} at (4,0) size 243x25
+ RenderBlock {DIV} at (0,12) size 0x0
+ RenderBlock {DIV} at (0,0) size 243x25
+ RenderBlock {DIV} at (242,12) size 0x0
+layer at (30,18) size 495x49
+ RenderBlock {DIV} at (0,0) size 495x49
RenderText {#text} at (0,0) size 351x49
text run at (0,0) width 351: "value jgq not clipped"
layer at (31,110) size 495x49
@@ -24,7 +24,7 @@
RenderBlock {DIV} at (21,9) size 495x49
RenderText {#text} at (0,0) size 351x49
text run at (0,0) width 351: "value jgq not clipped"
-layer at (38,192) size 239x25
- RenderBlock {DIV} at (0,0) size 239x25
+layer at (14,192) size 243x25
+ RenderBlock {DIV} at (0,0) size 243x25
RenderText {#text} at (0,0) size 116x25
text run at (0,0) width 116: "Sample Input"
Modified: trunk/LayoutTests/platform/mac/fast/css/text-input-with-webkit-border-radius-expected.txt (275425 => 275426)
--- trunk/LayoutTests/platform/mac/fast/css/text-input-with-webkit-border-radius-expected.txt 2021-04-02 17:41:48 UTC (rev 275425)
+++ trunk/LayoutTests/platform/mac/fast/css/text-input-with-webkit-border-radius-expected.txt 2021-04-02 18:17:07 UTC (rev 275426)
@@ -17,11 +17,11 @@
RenderBlock {DIV} at (0,68) size 163x45 [bgcolor=#888888]
RenderTextControl {INPUT} at (11,9) size 133x25 [bgcolor=#00FF00] [border: (2px inset #000000)]
RenderFlexibleBox {DIV} at (3,3) size 127x19
- RenderBlock {DIV} at (0,0) size 8x19
- RenderBlock {DIV} at (8,3) size 100x13
+ RenderBlock {DIV} at (0,9) size 0x0
+ RenderBlock {DIV} at (0,3) size 108x13
RenderBlock {DIV} at (108,0) size 19x19
RenderText {#text} at (0,0) size 0x0
-layer at (30,99) size 100x13
- RenderBlock {DIV} at (0,0) size 100x13
+layer at (22,99) size 108x13
+ RenderBlock {DIV} at (0,0) size 108x13
RenderText {#text} at (0,0) size 60x13
text run at (0,0) width 60: "default text"
Modified: trunk/Source/WebCore/ChangeLog (275425 => 275426)
--- trunk/Source/WebCore/ChangeLog 2021-04-02 17:41:48 UTC (rev 275425)
+++ trunk/Source/WebCore/ChangeLog 2021-04-02 18:17:07 UTC (rev 275426)
@@ -1,3 +1,69 @@
+2021-04-02 Aditya Keerthi <[email protected]>
+
+ Do not paint native decorations for search fields without '-webkit-appearance: searchfield'
+ https://bugs.webkit.org/show_bug.cgi?id=223946
+ <rdar://problem/75621365>
+
+ Reviewed by Antti Koivisto.
+
+ On iOS, sites that use <input type="search"> have been observed to draw
+ their own icons next to the field. Since we draw our own icon for
+ search fields, this results in an unwanted icon on some sites, such as
+ on chanel.com. However, in this case, the site specifies
+ "-webkit-appearance: textfield" on the search input, indicating a desire
+ to remove the native search field appearance. To remove the unwanted
+ icon, we should not paint decorations for search fields without
+ "-webkit-appearance: searchfield".
+
+ To achieve this behavior, adjust the -webkit-appearance value on the
+ pseudo element containing the icon when the search field has a different
+ -webkit-appearance value, so that the native painting is elided. The
+ decision to not simply set "display: none" on the element was made so
+ that sites can still customize the decoration should they choose to do
+ so. Note that on macOS, Web Inspector paints their own search icon
+ using the pseudo element.
+
+ No new tests. A layout test is not possible since SearchFieldResultsButtonElement
+ is inaccessible through DOM APIs. A reference mismatch test is not
+ possible since changing the -webkit-appearance property on a search field
+ already results in visual changes. Existing tests were rebaselined to
+ account for the fact that the decoration is removed when changing
+ -webkit-appearance, so we do have test coverage.
+
+ * html/HTMLElement.h:
+ (WebCore::HTMLElement::isSearchFieldResultsButtonElement const):
+ * html/shadow/TextControlInnerElements.cpp:
+ (WebCore::SearchFieldResultsButtonElement::SearchFieldResultsButtonElement):
+ (WebCore::SearchFieldResultsButtonElement::resolveCustomStyle):
+
+ If the searchfield's appearance is not "searchfield", adjust the
+ appearance of the results button to NoControlPart. For compatibility
+ reasons, the adjustment is skipped if the author has specified the
+ results attribute on the searchfield. This is determined by checking
+ the maxResults of the input element.
+
+ If the adjustment needs to be performed, we elide standard style
+ adjustments from the theme by setting canAdjustStyleForAppearance to
+ false. Without this, the call to resolveStyle will apply native styles
+ to the element, since it does not know we are about to reset appearance.
+
+ * html/shadow/TextControlInnerElements.h:
+ (isType):
+ * rendering/RenderTheme.cpp:
+ (WebCore::RenderTheme::adjustStyle):
+ (WebCore::RenderTheme::adjustSearchFieldDecorationStyle const):
+
+ Skip style adjustment and reset the appearance when necessary.
+
+ * rendering/RenderTheme.h:
+ * style/StyleTreeResolver.cpp:
+ (WebCore::Style::TreeResolver::resolveElement):
+
+ Resolve all descendants if the appearance property of a search input is
+ changed. Without this change, the style of the results button is not
+ resolved when making a dynamic style change to the appearance of the
+ search input.
+
2021-04-02 Chris Fleizach <[email protected]>
AX: textRectsFromMarkers always fails
Modified: trunk/Source/WebCore/html/HTMLElement.h (275425 => 275426)
--- trunk/Source/WebCore/html/HTMLElement.h 2021-04-02 17:41:48 UTC (rev 275425)
+++ trunk/Source/WebCore/html/HTMLElement.h 2021-04-02 18:17:07 UTC (rev 275426)
@@ -89,6 +89,7 @@
TextDirection directionalityIfhasDirAutoAttribute(bool& isAuto) const;
virtual bool isTextControlInnerTextElement() const { return false; }
+ virtual bool isSearchFieldResultsButtonElement() const { return false; }
bool willRespondToMouseMoveEvents() override;
bool willRespondToMouseWheelEvents() override;
Modified: trunk/Source/WebCore/html/shadow/TextControlInnerElements.cpp (275425 => 275426)
--- trunk/Source/WebCore/html/shadow/TextControlInnerElements.cpp 2021-04-02 17:41:48 UTC (rev 275425)
+++ trunk/Source/WebCore/html/shadow/TextControlInnerElements.cpp 2021-04-02 18:17:07 UTC (rev 275426)
@@ -47,6 +47,7 @@
#include "TextEventInputType.h"
#include <wtf/IsoMallocInlines.h>
#include <wtf/Ref.h>
+#include <wtf/SetForScope.h>
namespace WebCore {
@@ -229,6 +230,8 @@
{
if (document.quirks().shouldHideSearchFieldResultsButton())
setInlineStyleProperty(CSSPropertyDisplay, CSSValueNone);
+
+ setHasCustomStyleResolveCallbacks();
}
Ref<SearchFieldResultsButtonElement> SearchFieldResultsButtonElement::create(Document& document)
@@ -236,6 +239,20 @@
return adoptRef(*new SearchFieldResultsButtonElement(document));
}
+Optional<Style::ElementStyle> SearchFieldResultsButtonElement::resolveCustomStyle(const RenderStyle& parentStyle, const RenderStyle* shadowHostStyle)
+{
+ auto input = makeRefPtr(downcast<HTMLInputElement>(shadowHost()));
+ if (input && input->maxResults() >= 0)
+ return WTF::nullopt;
+
+ if (shadowHostStyle && shadowHostStyle->appearance() != SearchFieldPart) {
+ SetForScope<bool> canAdjustStyleForAppearance(m_canAdjustStyleForAppearance, false);
+ return resolveStyle(&parentStyle);
+ }
+
+ return WTF::nullopt;
+}
+
void SearchFieldResultsButtonElement::defaultEventHandler(Event& event)
{
// On mousedown, bring up a menu, if needed
Modified: trunk/Source/WebCore/html/shadow/TextControlInnerElements.h (275425 => 275426)
--- trunk/Source/WebCore/html/shadow/TextControlInnerElements.h 2021-04-02 17:41:48 UTC (rev 275425)
+++ trunk/Source/WebCore/html/shadow/TextControlInnerElements.h 2021-04-02 18:17:07 UTC (rev 275426)
@@ -101,9 +101,15 @@
bool willRespondToMouseClickEvents() override;
#endif
+ bool canAdjustStyleForAppearance() const { return m_canAdjustStyleForAppearance; }
+
private:
SearchFieldResultsButtonElement(Document&);
bool isMouseFocusable() const override { return false; }
+ Optional<Style::ElementStyle> resolveCustomStyle(const RenderStyle& parentStyle, const RenderStyle* shadowHostStyle) override;
+ bool isSearchFieldResultsButtonElement() const override { return true; }
+
+ bool m_canAdjustStyleForAppearance { true };
};
class SearchFieldCancelButtonElement final : public HTMLDivElement {
@@ -128,3 +134,8 @@
static bool isType(const WebCore::HTMLElement& element) { return element.isTextControlInnerTextElement(); }
static bool isType(const WebCore::Node& node) { return is<WebCore::HTMLElement>(node) && isType(downcast<WebCore::HTMLElement>(node)); }
SPECIALIZE_TYPE_TRAITS_END()
+
+SPECIALIZE_TYPE_TRAITS_BEGIN(WebCore::SearchFieldResultsButtonElement)
+ static bool isType(const WebCore::HTMLElement& element) { return element.isSearchFieldResultsButtonElement(); }
+ static bool isType(const WebCore::Node& node) { return is<WebCore::HTMLElement>(node) && isType(downcast<WebCore::HTMLElement>(node)); }
+SPECIALIZE_TYPE_TRAITS_END()
Modified: trunk/Source/WebCore/rendering/RenderTheme.cpp (275425 => 275426)
--- trunk/Source/WebCore/rendering/RenderTheme.cpp 2021-04-02 17:41:48 UTC (rev 275425)
+++ trunk/Source/WebCore/rendering/RenderTheme.cpp 2021-04-02 18:17:07 UTC (rev 275426)
@@ -241,11 +241,9 @@
case SearchFieldCancelButtonPart:
return adjustSearchFieldCancelButtonStyle(style, element);
case SearchFieldDecorationPart:
- return adjustSearchFieldDecorationPartStyle(style, element);
case SearchFieldResultsDecorationPart:
- return adjustSearchFieldResultsDecorationPartStyle(style, element);
case SearchFieldResultsButtonPart:
- return adjustSearchFieldResultsButtonStyle(style, element);
+ return adjustSearchFieldDecorationStyle(style, element);
case ProgressBarPart:
return adjustProgressBarStyle(style, element);
case MeterPart:
@@ -274,6 +272,25 @@
}
}
+void RenderTheme::adjustSearchFieldDecorationStyle(RenderStyle& style, const Element* element) const
+{
+ if (is<SearchFieldResultsButtonElement>(element) && !downcast<SearchFieldResultsButtonElement>(*element).canAdjustStyleForAppearance()) {
+ style.setAppearance(NoControlPart);
+ return;
+ }
+
+ switch (style.appearance()) {
+ case SearchFieldDecorationPart:
+ return adjustSearchFieldDecorationPartStyle(style, element);
+ case SearchFieldResultsDecorationPart:
+ return adjustSearchFieldResultsDecorationPartStyle(style, element);
+ case SearchFieldResultsButtonPart:
+ return adjustSearchFieldResultsButtonStyle(style, element);
+ default:
+ break;
+ }
+}
+
bool RenderTheme::paint(const RenderBox& box, ControlStates& controlStates, const PaintInfo& paintInfo, const LayoutRect& rect)
{
// If painting is disabled, but we aren't updating control tints, then just bail.
Modified: trunk/Source/WebCore/rendering/RenderTheme.h (275425 => 275426)
--- trunk/Source/WebCore/rendering/RenderTheme.h 2021-04-02 17:41:48 UTC (rev 275425)
+++ trunk/Source/WebCore/rendering/RenderTheme.h 2021-04-02 18:17:07 UTC (rev 275426)
@@ -447,6 +447,8 @@
virtual ColorCache& colorCache(OptionSet<StyleColor::Options>) const;
private:
+ void adjustSearchFieldDecorationStyle(RenderStyle&, const Element*) const;
+
mutable HashMap<uint8_t, ColorCache, DefaultHash<uint8_t>, WTF::UnsignedWithZeroKeyHashTraits<uint8_t>> m_colorCacheMap;
};
Modified: trunk/Source/WebCore/style/StyleTreeResolver.cpp (275425 => 275426)
--- trunk/Source/WebCore/style/StyleTreeResolver.cpp 2021-04-02 17:41:48 UTC (rev 275425)
+++ trunk/Source/WebCore/style/StyleTreeResolver.cpp 2021-04-02 18:17:07 UTC (rev 275426)
@@ -33,6 +33,7 @@
#include "ElementIterator.h"
#include "Frame.h"
#include "HTMLBodyElement.h"
+#include "HTMLInputElement.h"
#include "HTMLMeterElement.h"
#include "HTMLNames.h"
#include "HTMLProgressElement.h"
@@ -242,7 +243,9 @@
m_document.setTextColor(update.style->visitedDependentColor(CSSPropertyColor));
// FIXME: These elements should not change renderer based on appearance property.
- if (element.hasTagName(HTMLNames::meterTag) || is<HTMLProgressElement>(element)) {
+ if (element.hasTagName(HTMLNames::meterTag)
+ || is<HTMLProgressElement>(element)
+ || (is<HTMLInputElement>(element) && downcast<HTMLInputElement>(element).isSearchField())) {
if (existingStyle && update.style->appearance() != existingStyle->appearance()) {
update.change = Change::Renderer;
descendantsToResolve = DescendantsToResolve::All;
