8 月之前 · fdee82d203
--- 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;
			
--- 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> 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)) {
			
--- 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,
			
--- 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<DOM::ShadowRoot>(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));
			
 
				 
			
--- 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
@@ -0,0 +1,3 @@
 
				+<!doctype html>
			
 
				+<title>CSS Test Reference</title>
			
 
				+<input type="file">
			
--- 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
@@ -0,0 +1,11 @@
 
				+<!doctype html>
			
 
				+<title>::file-selector-button allows to customize the button in &lt;input type=file&gt;</title>
			
 
				+<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/5049">
			
 
				+<link rel="mismatch" href="../../../../expected/wpt-import/css/css-pseudo/file-selector-button-001-notref.html">
			
 
				+<style>
			
 
				+  input::file-selector-button {
			
 
				+    background: green;
			
 
				+    color: white;
			
 
				+  }
			
 
				+</style>
			
 
				+<input type="file">
			
--- 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
@@ -0,0 +1,6 @@
 
				+Harness status: OK
			
 
				+
			
 
				+Found 1 tests
			
 
				+
			
 
				+1 Pass
			
 
				+Pass	::file-selector-button should inherit from its originating element
			
--- 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
@@ -0,0 +1,20 @@
 
				+<!doctype html>
			
 
				+<title>CSS Pseudo Test: ::file-selector-button inherits from its originating element</title>
			
 
				+<link rel="help" href="https://drafts.csswg.org/css-pseudo-4/#treelike">
			
 
				+<script src="../../resources/testharness.js"></script>
			
 
				+<script src="../../resources/testharnessreport.js"></script>
			
 
				+<style>
			
 
				+  input { background-color: green; }
			
 
				+  input::file-selector-button {
			
 
				+    color: green;
			
 
				+    background-color: inherit;
			
 
				+  }
			
 
				+</style>
			
 
				+<input id="inp" type="file">
			
 
				+<script>
			
 
				+  test(() => {
			
 
				+    const style = getComputedStyle(inp, "::file-selector-button");
			
 
				+    assert_equals(style.color, "rgb(0, 128, 0)", "Check that ::file-selector-button is supported via color");
			
 
				+    assert_equals(style.backgroundColor, "rgb(0, 128, 0)", "::file-selector-button inheriting background-color");
			
 
				+  }, "::file-selector-button should inherit from its originating element");
			
 
				+</script>