Skip to content
Permalink
Browse files
[css-ui] Hide input[type=search] icons when appearance: textfield is set 
https://bugs.webkit.org/show_bug.cgi?id=238751
<rdar://91253463>

Reviewed by Aditya Keerthi and Antti Koivisto.

This forces the display value to none when appearance: textfield is set to make it look like input[type=text], matching the CSS UI spec.

There are however still two issues in order to make input[type=search] match input[type=text] fully with appearance: textfield:
- iOS has special UA styles in html.css that need to stop applying with appearance: textfield
- The focus outline offset is inflated on macOS (although this is an issue with other contexts too), see webkit.org/b/241102

* LayoutTests/TestExpectations:
* LayoutTests/fast/forms/search/search-padding-cancel-results-buttons.html:
* LayoutTests/platform/ios/TestExpectations:
* LayoutTests/platform/ios/fast/css/input-search-padding-expected.txt:
* LayoutTests/platform/gtk/fast/css/input-search-padding-expected.png:
* LayoutTests/platform/gtk/fast/css/input-search-padding-expected.txt:
* Source/WebCore/html/shadow/TextControlInnerElements.cpp:
(WebCore::SearchFieldResultsButtonElement::resolveCustomStyle):
(WebCore::SearchFieldCancelButtonElement::resolveCustomStyle):

Canonical link: https://commits.webkit.org/253691@main
  • Loading branch information
@nt1m
nt1m committed Aug 23, 2022
1 parent 9e52a6d commit d08a6f78266006d68404e6af8d2418a658025315
Show file tree
Hide file tree
Showing 7 changed files with 23 additions and 13 deletions.
2 LayoutTests/TestExpectations
View file
@@ -4562,14 +4562,12 @@ webkit.org/b/234762 imported/w3c/web-platform-tests/css/css-writing-modes/wm-pro

# New failures after updating WPT import of css/css-text on 2020-07
webkit.org/b/214299 imported/w3c/web-platform-tests/css/css-ui/appearance-menulist-button-002.tentative.html [ ImageOnlyFailure ]
webkit.org/b/214299 imported/w3c/web-platform-tests/css/css-ui/appearance-textfield-001.html [ ImageOnlyFailure ]
webkit.org/b/214299 imported/w3c/web-platform-tests/css/css-ui/outline-021.html [ ImageOnlyFailure ]
webkit.org/b/214299 imported/w3c/web-platform-tests/css/css-ui/outline-025.html [ ImageOnlyFailure ]
webkit.org/b/214299 imported/w3c/web-platform-tests/css/css-ui/outline-026.html [ ImageOnlyFailure ]
webkit.org/b/214299 imported/w3c/web-platform-tests/css/css-ui/outline-offset-table-001.html [ ImageOnlyFailure ]
webkit.org/b/214299 imported/w3c/web-platform-tests/css/css-ui/text-overflow-ruby.html [ ImageOnlyFailure ]
webkit.org/b/214299 imported/w3c/web-platform-tests/css/css-ui/webkit-appearance-menulist-button-002.tentative.html [ ImageOnlyFailure ]
webkit.org/b/214299 imported/w3c/web-platform-tests/css/css-ui/webkit-appearance-textfield-001.html [ ImageOnlyFailure ]
webkit.org/b/214299 imported/w3c/web-platform-tests/css/css-ui/resize-child-will-change-transform.html [ ImageOnlyFailure ]
webkit.org/b/214299 imported/w3c/web-platform-tests/css/css-ui/resize-generated-content.html [ ImageOnlyFailure ]

2 LayoutTests/fast/forms/search/search-padding-cancel-results-buttons.html
View file
@@ -2,7 +2,7 @@
<head>
<style>
input {
-webkit-appearance: textfield;
appearance: none;
padding: 10px;
}
</style>
BIN +50 Bytes (100%) LayoutTests/platform/gtk/fast/css/input-search-padding-expected.png
View file
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
9 LayoutTests/platform/gtk/fast/css/input-search-padding-expected.txt
View file
@@ -12,8 +12,7 @@ layer at (0,0) size 800x600
RenderBR {BR} at (461,105) size 0x17
RenderTextControl {INPUT} at (0,160) size 240x25 [bgcolor=#FFFFFF] [border: (2px inset #000000)]
RenderFlexibleBox {DIV} at (6,1) size 228x23
RenderBlock {DIV} at (0,11) size 0x0
RenderBlock {DIV} at (0,0) size 208x23
RenderBlock {DIV} at (0,0) size 228x23
layer at (11,11) size 415x45
RenderBlock {DIV} at (0,0) size 415x45
RenderText {#text} at (0,0) size 362x44
@@ -22,11 +21,9 @@ layer at (11,91) size 455x45
RenderBlock {DIV} at (3,3) size 455x45
RenderText {#text} at (0,0) size 362x44
text run at (0,0) width 362: "value jgq not clipped"
layer at (14,169) size 208x23
RenderBlock {DIV} at (0,0) size 208x23
layer at (14,169) size 228x23
RenderBlock {DIV} at (0,0) size 228x23
RenderText {#text} at (0,0) size 118x22
text run at (0,0) width 118: "Sample Input"
layer at (426,14) size 40x40
RenderBlock {DIV} at (415,2) size 40x41 [bgcolor=#000000]
layer at (222,171) size 20x20
RenderBlock {DIV} at (208,1) size 20x21 [bgcolor=#000000]
4 LayoutTests/platform/ios/TestExpectations
View file
@@ -3720,6 +3720,10 @@ imported/w3c/web-platform-tests/css/css-ui/compute-kind-widget-generated/kind-of
imported/w3c/web-platform-tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-textarea-border-right-color-001.html [ Pass ImageOnlyFailure ]
imported/w3c/web-platform-tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-textarea-border-top-color-001.html [ Pass ImageOnlyFailure ]

# iOS user agent styles are preventing these from passing for <input type=search>
webkit.org/b/241095 imported/w3c/web-platform-tests/css/css-ui/appearance-textfield-001.html [ ImageOnlyFailure ]
webkit.org/b/241095 imported/w3c/web-platform-tests/css/css-ui/webkit-appearance-textfield-001.html [ ImageOnlyFailure ]

webkit.org/b/244065 fast/forms/auto-fill-button/hide-auto-fill-button-when-input-becomes-readonly.html [ Pass ImageOnlyFailure ]

webkit.org/b/244134 animations/no-style-recalc-during-accelerated-animation.html [ Pass Failure ]
2 LayoutTests/platform/ios/fast/css/input-search-padding-expected.txt
View file
@@ -13,9 +13,7 @@ layer at (0,0) size 800x600
RenderBR {BR} at (536,122) size 1x19
RenderTextControl {INPUT} at (0,178) size 253x25 [bgcolor=#FFFFFF] [border: (1px solid #FFFFFF)]
RenderFlexibleBox {DIV} at (5,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 (29,17) size 495x49
RenderBlock {DIV} at (0,0) size 495x49
RenderText {#text} at (0,0) size 351x49
17 Source/WebCore/html/shadow/TextControlInnerElements.cpp
View file
@@ -249,7 +249,16 @@ std::optional<Style::ElementStyle> SearchFieldResultsButtonElement::resolveCusto
if (input && input->maxResults() >= 0)
return std::nullopt;

if (shadowHostStyle && shadowHostStyle->effectiveAppearance() != SearchFieldPart) {
if (!shadowHostStyle)
return std::nullopt;

auto appearance = shadowHostStyle->effectiveAppearance();
if (appearance == TextFieldPart) {
auto elementStyle = resolveStyle(resolutionContext);
elementStyle.renderStyle->setDisplay(DisplayType::None);
return elementStyle;
}
if (appearance != SearchFieldPart) {
SetForScope canAdjustStyleForAppearance(m_canAdjustStyleForAppearance, false);
return resolveStyle(resolutionContext);
}
@@ -310,11 +319,15 @@ Ref<SearchFieldCancelButtonElement> SearchFieldCancelButtonElement::create(Docum
return element;
}

std::optional<Style::ElementStyle> SearchFieldCancelButtonElement::resolveCustomStyle(const Style::ResolutionContext& resolutionContext, const RenderStyle*)
std::optional<Style::ElementStyle> SearchFieldCancelButtonElement::resolveCustomStyle(const Style::ResolutionContext& resolutionContext, const RenderStyle* shadowHostStyle)
{
auto elementStyle = resolveStyle(resolutionContext);
auto& inputElement = downcast<HTMLInputElement>(*shadowHost());
elementStyle.renderStyle->setVisibility(elementStyle.renderStyle->visibility() == Visibility::Hidden || inputElement.value().isEmpty() ? Visibility::Hidden : Visibility::Visible);

if (shadowHostStyle && shadowHostStyle->effectiveAppearance() == TextFieldPart)
elementStyle.renderStyle->setDisplay(DisplayType::None);

return elementStyle;
}

0 comments on commit d08a6f7

Please sign in to comment.