From fdee82d2034dae6046a7f4422d684e5fcca84686 Mon Sep 17 00:00:00 2001 From: Luke Warlow Date: Sat, 30 Nov 2024 22:41:00 +0000 Subject: [PATCH] LibWeb: Implement `::file-selector-button` pseudo element The button for a file input now matches `::file-selector-button`. --- Libraries/LibWeb/CSS/Default.css | 2 +- Libraries/LibWeb/CSS/Selector.cpp | 4 ++++ Libraries/LibWeb/CSS/Selector.h | 1 + Libraries/LibWeb/HTML/HTMLInputElement.cpp | 2 ++ .../file-selector-button-001-notref.html | 3 +++ .../css-pseudo/file-selector-button-001.html | 11 ++++++++++ .../file-selector-button-inherit.txt | 6 ++++++ .../file-selector-button-inherit.html | 20 +++++++++++++++++++ 8 files changed, 48 insertions(+), 1 deletion(-) create mode 100644 Tests/LibWeb/Ref/expected/wpt-import/css/css-pseudo/file-selector-button-001-notref.html create mode 100644 Tests/LibWeb/Ref/input/wpt-import/css/css-pseudo/file-selector-button-001.html create mode 100644 Tests/LibWeb/Text/expected/wpt-import/css/css-pseudo/file-selector-button-inherit.txt create mode 100644 Tests/LibWeb/Text/input/wpt-import/css/css-pseudo/file-selector-button-inherit.html diff --git a/Libraries/LibWeb/CSS/Default.css b/Libraries/LibWeb/CSS/Default.css index 7924f7d8ed5..256e641ff76 100644 --- a/Libraries/LibWeb/CSS/Default.css +++ b/Libraries/LibWeb/CSS/Default.css @@ -48,7 +48,7 @@ input::placeholder, textarea::placeholder { line-height: initial; } -button, input[type=submit], input[type=button], input[type=reset], select { +button, input[type=submit], input[type=button], input[type=reset], select, ::file-selector-button { padding: 1px 4px; background-color: ButtonFace; border: 1px solid ButtonBorder; diff --git a/Libraries/LibWeb/CSS/Selector.cpp b/Libraries/LibWeb/CSS/Selector.cpp index 45076833fef..c0f9c5b2b8d 100644 --- a/Libraries/LibWeb/CSS/Selector.cpp +++ b/Libraries/LibWeb/CSS/Selector.cpp @@ -518,6 +518,8 @@ StringView Selector::PseudoElement::name(Selector::PseudoElement::Type pseudo_el return "-webkit-slider-thumb"sv; case Selector::PseudoElement::Type::Backdrop: return "backdrop"sv; + case Selector::PseudoElement::Type::FileSelectorButton: + return "file-selector-button"sv; case Selector::PseudoElement::Type::KnownPseudoElementCount: break; case Selector::PseudoElement::Type::UnknownWebKit: @@ -556,6 +558,8 @@ Optional Selector::PseudoElement::from_string(FlyString return Selector::PseudoElement { Selector::PseudoElement::Type::Selection }; } else if (name.equals_ignoring_ascii_case("backdrop"sv)) { return Selector::PseudoElement { Selector::PseudoElement::Type::Backdrop }; + } else if (name.equals_ignoring_ascii_case("file-selector-button"sv)) { + return Selector::PseudoElement { Selector::PseudoElement::Type::FileSelectorButton }; } else if (name.equals_ignoring_ascii_case("-webkit-slider-runnable-track"sv)) { return Selector::PseudoElement { Selector::PseudoElement::Type::SliderRunnableTrack }; } else if (name.equals_ignoring_ascii_case("-webkit-slider-thumb"sv)) { diff --git a/Libraries/LibWeb/CSS/Selector.h b/Libraries/LibWeb/CSS/Selector.h index 894e0f3f1f4..38b59ac078a 100644 --- a/Libraries/LibWeb/CSS/Selector.h +++ b/Libraries/LibWeb/CSS/Selector.h @@ -41,6 +41,7 @@ public: SliderRunnableTrack, SliderThumb, Backdrop, + FileSelectorButton, // Keep this last. KnownPseudoElementCount, diff --git a/Libraries/LibWeb/HTML/HTMLInputElement.cpp b/Libraries/LibWeb/HTML/HTMLInputElement.cpp index 64fc622507a..285568578f7 100644 --- a/Libraries/LibWeb/HTML/HTMLInputElement.cpp +++ b/Libraries/LibWeb/HTML/HTMLInputElement.cpp @@ -986,6 +986,8 @@ void HTMLInputElement::create_file_input_shadow_tree() auto shadow_root = realm.create(document(), *this, Bindings::ShadowRootMode::Closed); m_file_button = DOM::create_element(document(), HTML::TagNames::button, Namespace::HTML).release_value_but_fixme_should_propagate_errors(); + m_file_button->set_use_pseudo_element(CSS::Selector::PseudoElement::Type::FileSelectorButton); + m_file_label = DOM::create_element(document(), HTML::TagNames::label, Namespace::HTML).release_value_but_fixme_should_propagate_errors(); MUST(m_file_label->set_attribute(HTML::AttributeNames::style, "padding-left: 4px;"_string)); diff --git a/Tests/LibWeb/Ref/expected/wpt-import/css/css-pseudo/file-selector-button-001-notref.html b/Tests/LibWeb/Ref/expected/wpt-import/css/css-pseudo/file-selector-button-001-notref.html new file mode 100644 index 00000000000..e137ba05103 --- /dev/null +++ b/Tests/LibWeb/Ref/expected/wpt-import/css/css-pseudo/file-selector-button-001-notref.html @@ -0,0 +1,3 @@ + +CSS Test Reference + diff --git a/Tests/LibWeb/Ref/input/wpt-import/css/css-pseudo/file-selector-button-001.html b/Tests/LibWeb/Ref/input/wpt-import/css/css-pseudo/file-selector-button-001.html new file mode 100644 index 00000000000..0ad4b3d813c --- /dev/null +++ b/Tests/LibWeb/Ref/input/wpt-import/css/css-pseudo/file-selector-button-001.html @@ -0,0 +1,11 @@ + +::file-selector-button allows to customize the button in <input type=file> + + + + diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/css-pseudo/file-selector-button-inherit.txt b/Tests/LibWeb/Text/expected/wpt-import/css/css-pseudo/file-selector-button-inherit.txt new file mode 100644 index 00000000000..692e35cc826 --- /dev/null +++ b/Tests/LibWeb/Text/expected/wpt-import/css/css-pseudo/file-selector-button-inherit.txt @@ -0,0 +1,6 @@ +Harness status: OK + +Found 1 tests + +1 Pass +Pass ::file-selector-button should inherit from its originating element \ No newline at end of file diff --git a/Tests/LibWeb/Text/input/wpt-import/css/css-pseudo/file-selector-button-inherit.html b/Tests/LibWeb/Text/input/wpt-import/css/css-pseudo/file-selector-button-inherit.html new file mode 100644 index 00000000000..3517ca64237 --- /dev/null +++ b/Tests/LibWeb/Text/input/wpt-import/css/css-pseudo/file-selector-button-inherit.html @@ -0,0 +1,20 @@ + +CSS Pseudo Test: ::file-selector-button inherits from its originating element + + + + + +