Skip to content

Commit 7313736

Browse files
alanbaradlayalanbaradlay
committed
chromestatus.com: Misplaced clear button in search field
https://bugs.webkit.org/show_bug.cgi?id=305115 <rdar://166754216> Reviewed by Lily Spiniolas. Do not reserve space for list-button dropdown when page customizes the input field appearance. This is consistent with how the magnifier (webkit-search-decoration) behaves, where appearance: none effectively hides it by collapsing its size in inline direction to 0px. Test: fast/forms/datalist/data-list-search-input-with-appearance-none.html * LayoutTests/fast/forms/datalist/data-list-search-input-with-appearance-none-expected.html: Added. * LayoutTests/fast/forms/datalist/data-list-search-input-with-appearance-none.html: Added. * Source/WebCore/css/html.css: (input::-webkit-list-button): * Source/WebCore/html/HTMLElement.h: (WebCore::HTMLElement::isDataListButtonElement const): * Source/WebCore/html/shadow/DataListButtonElement.cpp: (WebCore::DataListButtonElement::canAdjustStyleForAppearance const): * Source/WebCore/html/shadow/DataListButtonElement.h: (isType): * Source/WebCore/rendering/RenderTheme.cpp: (WebCore::RenderTheme::autoAppearanceForElement const): * Source/WebCore/rendering/adwaita/RenderThemeAdwaita.cpp: (WebCore::RenderThemeAdwaita::adjustListButtonStyle const): * Source/WebCore/rendering/cocoa/RenderThemeCocoa.mm: (WebCore::RenderThemeCocoa::adjustListButtonStyleForVectorBasedControls const): * Source/WebCore/rendering/mac/RenderThemeMac.mm: (WebCore::RenderThemeMac::adjustListButtonStyle const): Canonical link: https://commits.webkit.org/305314@main
1 parent bb5f5d8 commit 7313736

File tree

10 files changed

+104
-5
lines changed

10 files changed

+104
-5
lines changed

‎LayoutTests/fast/forms/datalist/data-list-search-input-with-appearance-none-expected.html‎

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
<!DOCTYPE html>
2+
<script src="../../../resources/ui-helper.js"></script>
3+
<style>
4+
body {
5+
margin: 0;
6+
}
7+
8+
input {
9+
width: 300px;
10+
height: 50px;
11+
border-radius: 1px;
12+
}
13+
</style>
14+
15+
<body onload="runTest()">
16+
<input type="search"/>
17+
18+
<script>
19+
if (window.testRunner)
20+
testRunner.waitUntilDone();
21+
22+
async function runTest() {
23+
await UIHelper.activateAndWaitForInputSessionAt(150, 25);
24+
25+
if (UIHelper.isIOSFamily())
26+
await UIHelper.tapAt(290, 30);
27+
28+
document.execCommand("InsertText", true, "Apple");
29+
30+
testRunner.notifyDone();
31+
}
32+
</script>

‎LayoutTests/fast/forms/datalist/data-list-search-input-with-appearance-none.html‎

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
<!DOCTYPE html>
2+
<script src="../../../resources/ui-helper.js"></script>
3+
<style>
4+
body {
5+
margin: 0;
6+
}
7+
8+
input {
9+
width: 300px;
10+
height: 50px;
11+
border-radius: 1px;
12+
}
13+
</style>
14+
15+
<body onload="runTest()">
16+
<input list="fruits" type="search"/>
17+
<datalist id="fruits">
18+
<option>Apple</option>
19+
<option>Orange</option>
20+
<option>Pear</option>
21+
</datalist>
22+
23+
<script>
24+
if (window.testRunner)
25+
testRunner.waitUntilDone();
26+
27+
async function runTest() {
28+
await UIHelper.activateAndWaitForInputSessionAt(150, 25);
29+
30+
if (UIHelper.isIOSFamily())
31+
await UIHelper.tapAt(290, 30);
32+
33+
await UIHelper.waitForDataListSuggestionsToChangeVisibility(true);
34+
document.execCommand("InsertText", true, "Apple");
35+
36+
testRunner.notifyDone();
37+
}
38+
</script>

‎Source/WebCore/css/html.css‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -695,12 +695,10 @@ input::-webkit-list-button {
695695
flex: none;
696696
-webkit-user-select: none;
697697
#if defined(WTF_PLATFORM_IOS_FAMILY) && WTF_PLATFORM_IOS_FAMILY
698-
inline-size: 11px;
699698
/* Make it easier to hit the button on iOS */
700699
padding: 7px;
701700
margin: -7px;
702701
#else
703-
inline-size: 16px;
704702
block-size: 100%;
705703
#endif
706704
}

‎Source/WebCore/html/HTMLElement.h‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -97,6 +97,7 @@ class HTMLElement : public StyledElement {
9797

9898
virtual bool isTextControlInnerTextElement() const { return false; }
9999
virtual bool isSearchFieldResultsButtonElement() const { return false; }
100+
virtual bool isDataListButtonElement() const { return false; }
100101

101102
bool willRespondToMouseMoveEvents() const override;
102103
bool willRespondToMouseClickEventsWithEditability(Editability) const override;

‎Source/WebCore/html/shadow/DataListButtonElement.cpp‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -30,6 +30,7 @@
3030
#include "EventNames.h"
3131
#include "HTMLNames.h"
3232
#include "MouseEvent.h"
33+
#include "StyleAppearance.h"
3334
#include <wtf/TZoneMallocInlines.h>
3435

3536
namespace WebCore {
@@ -69,6 +70,14 @@ void DataListButtonElement::defaultEventHandler(Event& event)
6970
HTMLDivElement::defaultEventHandler(event);
7071
}
7172

73+
bool DataListButtonElement::canAdjustStyleForAppearance() const
74+
{
75+
RefPtr host = shadowHost();
76+
if (host && host->existingComputedStyle())
77+
return host->existingComputedStyle()->usedAppearance() != StyleAppearance::None;
78+
return true;
79+
}
80+
7281
bool DataListButtonElement::isDisabledFormControl() const
7382
{
7483
RefPtr host = shadowHost();

‎Source/WebCore/html/shadow/DataListButtonElement.h‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -45,13 +45,26 @@ class DataListButtonElement final : public HTMLDivElement {
4545

4646
static Ref<DataListButtonElement> create(Document&, DataListButtonOwner&);
4747

48+
bool canAdjustStyleForAppearance() const;
49+
4850
private:
4951
explicit DataListButtonElement(Document&, DataListButtonOwner&);
5052

53+
bool isDataListButtonElement() const override { return true; }
54+
5155
void defaultEventHandler(Event&) override;
5256
bool isDisabledFormControl() const override;
5357

5458
DataListButtonOwner& m_owner;
5559
};
5660

5761
} // namespace WebCore
62+
63+
SPECIALIZE_TYPE_TRAITS_BEGIN(WebCore::DataListButtonElement)
64+
static bool isType(const WebCore::HTMLElement& element) { return element.isDataListButtonElement(); }
65+
static bool isType(const WebCore::Node& node)
66+
{
67+
auto* htmlElement = dynamicDowncast<WebCore::HTMLElement>(node);
68+
return htmlElement && isType(*htmlElement);
69+
}
70+
SPECIALIZE_TYPE_TRAITS_END()

‎Source/WebCore/rendering/RenderTheme.cpp‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -32,6 +32,7 @@
3232
#include "ColorSerialization.h"
3333
#include "ColorWellPart.h"
3434
#include "ContainerNodeInlines.h"
35+
#include "DataListButtonElement.h"
3536
#include "DeprecatedGlobalSettings.h"
3637
#include "Document.h"
3738
#include "FileList.h"
@@ -454,8 +455,12 @@ StyleAppearance RenderTheme::autoAppearanceForElement(RenderStyle& style, const
454455
if (element->isInUserAgentShadowTree()) {
455456
auto& part = element->userAgentPart();
456457

457-
if (part == UserAgentParts::webkitListButton())
458+
if (RefPtr button = dynamicDowncast<DataListButtonElement>(element)) {
459+
ASSERT(part == UserAgentParts::webkitListButton());
460+
if (!button->canAdjustStyleForAppearance())
461+
return StyleAppearance::None;
458462
return StyleAppearance::ListButton;
463+
}
459464

460465
if (part == UserAgentParts::webkitSearchCancelButton())
461466
return StyleAppearance::SearchFieldCancelButton;

‎Source/WebCore/rendering/adwaita/RenderThemeAdwaita.cpp‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -397,6 +397,7 @@ int RenderThemeAdwaita::sliderTickOffsetFromTrackCenter() const
397397

398398
void RenderThemeAdwaita::adjustListButtonStyle(RenderStyle& style, const Element*) const
399399
{
400+
style.setLogicalWidth(16_css_px);
400401
// Add a margin to place the button at end of the input field.
401402
if (style.isLeftToRightDirection())
402403
style.setMarginRight(-2_css_px);

‎Source/WebCore/rendering/cocoa/RenderThemeCocoa.mm‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2972,13 +2972,14 @@ static void adjustSelectListButtonStyleForVectorBasedControls(RenderStyle& style
29722972
return false;
29732973

29742974
#if PLATFORM(IOS_FAMILY)
2975-
if (style.hasContent() || style.hasUsedContentNone())
2975+
if (style.hasContent() || style.hasUsedContentNone()) {
2976+
style.setLogicalWidth(11_css_px);
29762977
return true;
2978+
}
29772979
#endif
29782980

29792981
// FIXME: rdar://150914436 The width to height ratio of the button needs to
29802982
// dynamically change according to the overall control size.
2981-
29822983
style.setLogicalWidth(15.4_css_percentage);
29832984
style.setLogicalHeight(CSS::Keyword::Auto { });
29842985

‎Source/WebCore/rendering/mac/RenderThemeMac.mm‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1247,6 +1247,7 @@ static void setFontFromControlSize(RenderStyle& style, NSControlSize controlSize
12471247
UNUSED_PARAM(element);
12481248
#endif
12491249

1250+
style.setLogicalWidth(16_css_px);
12501251
// Add a margin to place the button at end of the input field.
12511252
style.setMarginEnd(-4_css_px / style.usedZoomForLength().value);
12521253
}

0 commit comments

Comments
 (0)