[css-pseudo] Implement the file-selector-button pseudo.

I2S: https://groups.google.com/a/chromium.org/g/blink-dev/c/d4UdwpPDXJM/m/J-o_C_kqAwAJ

Fixed: 1086855
Change-Id: Ib37d2d8bf4a983ce93445ca0efdf765d3f98935f
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2584810
Commit-Queue: Emilio Cobos Álvarez <emilio@chromium.org>
Reviewed-by: Rune Lillesveen <futhark@chromium.org>
Auto-Submit: Emilio Cobos Álvarez <emilio@chromium.org>
Cr-Commit-Position: refs/heads/master@{#837061}

third_party/blink/renderer/core/css/css_selector.cc

@@ -281,6 +281,7 @@ PseudoId CSSSelector::GetPseudoId(PseudoType type) {
     case kPseudoOptional:
     case kPseudoPlaceholder:
     case kPseudoPlaceholderShown:
+    case kPseudoFileSelectorButton:
     case kPseudoRequired:
     case kPseudoReadOnly:
     case kPseudoReadWrite:
@@ -403,6 +404,7 @@ const static NameToPseudoStruct kPseudoTypeWithoutArgumentsMap[] = {
     {"empty", CSSSelector::kPseudoEmpty},
     {"enabled", CSSSelector::kPseudoEnabled},
     {"end", CSSSelector::kPseudoEnd},
+    {"file-selector-button", CSSSelector::kPseudoFileSelectorButton},
     {"first", CSSSelector::kPseudoFirstPage},
     {"first-child", CSSSelector::kPseudoFirstChild},
     {"first-letter", CSSSelector::kPseudoFirstLetter},
@@ -622,6 +624,7 @@ void CSSSelector::UpdatePseudoType(const AtomicString& value,
     case kPseudoMarker:
     case kPseudoPart:
     case kPseudoPlaceholder:
+    case kPseudoFileSelectorButton:
     case kPseudoResizer:
     case kPseudoScrollbar:
     case kPseudoScrollbarCorner:
@@ -1118,7 +1121,8 @@ bool CSSSelector::IsTreeAbidingPseudoElement() const {
   return Match() == CSSSelector::kPseudoElement &&
          (GetPseudoType() == kPseudoBefore || GetPseudoType() == kPseudoAfter ||
           GetPseudoType() == kPseudoMarker ||
-          GetPseudoType() == kPseudoPlaceholder);
+          GetPseudoType() == kPseudoPlaceholder ||
+          GetPseudoType() == kPseudoFileSelectorButton);
 }
 
 bool CSSSelector::IsAllowedAfterPart() const {
@@ -1131,6 +1135,7 @@ bool CSSSelector::IsAllowedAfterPart() const {
     case kPseudoBefore:
     case kPseudoAfter:
     case kPseudoPlaceholder:
+    case kPseudoFileSelectorButton:
     case kPseudoFirstLine:
     case kPseudoFirstLetter:
     case kPseudoSelection:

third_party/blink/renderer/core/css/css_selector.h

@@ -214,6 +214,7 @@ class CORE_EXPORT CSSSelector {
     kPseudoLang,
     kPseudoNot,
     kPseudoPlaceholder,
+    kPseudoFileSelectorButton,
     kPseudoResizer,
     kPseudoRoot,
     kPseudoScope,

third_party/blink/renderer/core/css/parser/css_parser_selector.cc

@@ -96,6 +96,7 @@ RelationType CSSParserSelector::GetImplicitShadowCombinatorForMatching() const {
     case PseudoType::kPseudoBlinkInternalElement:
     case PseudoType::kPseudoCue:
     case PseudoType::kPseudoPlaceholder:
+    case PseudoType::kPseudoFileSelectorButton:
     case PseudoType::kPseudoShadow:
       return RelationType::kShadowPseudo;
     case PseudoType::kPseudoPart:

third_party/blink/renderer/core/css/resolver/style_resolver.cc

@@ -452,8 +452,11 @@ static void MatchElementScopeRules(const Element& element,
 void StyleResolver::MatchPseudoPartRulesForUAHost(
     const Element& element,
     ElementRuleCollector& collector) {
-  if (element.ShadowPseudoId() != shadow_element_names::kPseudoInputPlaceholder)
+  const AtomicString& pseudo_id = element.ShadowPseudoId();
+  if (pseudo_id != shadow_element_names::kPseudoInputPlaceholder &&
+      pseudo_id != shadow_element_names::kPseudoFileUploadButton) {
     return;
+  }
 
   // We allow ::placeholder pseudo element after ::part(). See
   // MatchSlottedRulesForUAHost for a more detailed explanation.

third_party/blink/renderer/core/css/rule_feature_set.cc

@@ -131,6 +131,7 @@ bool SupportsInvalidation(CSSSelector::PseudoType type) {
     case CSSSelector::kPseudoDir:
     case CSSSelector::kPseudoNot:
     case CSSSelector::kPseudoPlaceholder:
+    case CSSSelector::kPseudoFileSelectorButton:
     case CSSSelector::kPseudoResizer:
     case CSSSelector::kPseudoRoot:
     case CSSSelector::kPseudoScope:

third_party/blink/renderer/core/css/rule_set.cc

@@ -172,6 +172,7 @@ static void ExtractSelectorValues(const CSSSelector* selector,
         case CSSSelector::kPseudoAnyLink:
         case CSSSelector::kPseudoFocus:
         case CSSSelector::kPseudoPlaceholder:
+        case CSSSelector::kPseudoFileSelectorButton:
         case CSSSelector::kPseudoHost:
         case CSSSelector::kPseudoHostContext:
         case CSSSelector::kPseudoSpatialNavigationInterest:
@@ -262,11 +263,14 @@ bool RuleSet::FindBestRuleSetAndAdd(const CSSSelector& component,
       focus_pseudo_class_rules_.push_back(rule_data);
       return true;
     case CSSSelector::kPseudoPlaceholder:
+    case CSSSelector::kPseudoFileSelectorButton:
       if (it->FollowsPart()) {
         part_pseudo_rules_.push_back(rule_data);
       } else {
-        AddToRuleSet(shadow_element_names::kPseudoInputPlaceholder,
-                     EnsurePendingRules()->shadow_pseudo_element_rules,
+        const auto& name = pseudo_type == CSSSelector::kPseudoFileSelectorButton
+                               ? shadow_element_names::kPseudoFileUploadButton
+                               : shadow_element_names::kPseudoInputPlaceholder;
+        AddToRuleSet(name, EnsurePendingRules()->shadow_pseudo_element_rules,
                      rule_data);
       }
       return true;

third_party/blink/renderer/core/css/selector_checker.cc

@@ -1206,6 +1206,11 @@ bool SelectorChecker::CheckPseudoClass(const SelectorCheckingContext& context,
   return false;
 }
 
+static bool MatchesUAShadowElement(Element& element, const AtomicString& id) {
+  ShadowRoot* root = element.ContainingShadowRoot();
+  return root && root->IsUserAgent() && element.ShadowPseudoId() == id;
+}
+
 bool SelectorChecker::CheckPseudoElement(const SelectorCheckingContext& context,
                                          MatchResult& result) const {
   const CSSSelector& selector = *context.selector;
@@ -1234,29 +1239,17 @@ bool SelectorChecker::CheckPseudoElement(const SelectorCheckingContext& context,
           return false;
       }
       return true;
+    case CSSSelector::kPseudoFileSelectorButton:
+      return MatchesUAShadowElement(
+          element, shadow_element_names::kPseudoFileUploadButton);
     case CSSSelector::kPseudoPlaceholder:
-      if (ShadowRoot* root = element.ContainingShadowRoot()) {
-        return root->IsUserAgent() &&
-               element.ShadowPseudoId() ==
-                   shadow_element_names::kPseudoInputPlaceholder;
-      }
-      return false;
-    case CSSSelector::kPseudoWebKitCustomElement: {
-      if (ShadowRoot* root = element.ContainingShadowRoot()) {
-        if (!root->IsUserAgent())
-          return false;
-        if (element.ShadowPseudoId() != selector.Value())
-          return false;
-        return true;
-      }
-      return false;
-    }
+      return MatchesUAShadowElement(
+          element, shadow_element_names::kPseudoInputPlaceholder);
+    case CSSSelector::kPseudoWebKitCustomElement:
+      return MatchesUAShadowElement(element, selector.Value());
     case CSSSelector::kPseudoBlinkInternalElement:
       DCHECK(is_ua_rule_);
-      if (ShadowRoot* root = element.ContainingShadowRoot())
-        return root->IsUserAgent() &&
-               element.ShadowPseudoId() == selector.Value();
-      return false;
+      return MatchesUAShadowElement(element, selector.Value());
     case CSSSelector::kPseudoSlotted: {
       SelectorCheckingContext sub_context(context);
       sub_context.is_sub_selector = true;

third_party/blink/renderer/core/html/shadow/shadow_element_names.json5

@@ -89,6 +89,10 @@
       name: "-webkit-input-placeholder",
       Symbol: "kPseudoInputPlaceholder",
     },
+    {
+      name: "-webkit-file-upload-button",
+      Symbol: "kPseudoFileUploadButton",
+    },
     {
       name: "-internal-input-suggested",
       Symbol: "kPseudoInternalInputSuggested",

third_party/blink/renderer/core/inspector/inspector_trace_events.cc

@@ -317,6 +317,7 @@ const char* PseudoTypeToString(CSSSelector::PseudoType pseudo_type) {
     DEFINE_STRING_MAPPING(PseudoLang)
     DEFINE_STRING_MAPPING(PseudoNot)
     DEFINE_STRING_MAPPING(PseudoPlaceholder)
+    DEFINE_STRING_MAPPING(PseudoFileSelectorButton)
     DEFINE_STRING_MAPPING(PseudoResizer)
     DEFINE_STRING_MAPPING(PseudoRoot)
     DEFINE_STRING_MAPPING(PseudoScope)

third_party/blink/web_tests/TestExpectations

@@ -2394,7 +2394,6 @@ crbug.com/1074547 external/wpt/css/css-transitions/transitioncancel-002.html [ T
 crbug.com/1078474 external/wpt/css/css-pseudo/cascade-highlight-001.html [ Failure ]
 crbug.com/1078474 external/wpt/css/css-pseudo/cascade-highlight-002.html [ Failure ]
 crbug.com/1024156 external/wpt/css/css-pseudo/cascade-highlight-004.html [ Failure ]
-crbug.com/1086855 external/wpt/css/css-pseudo/file-selector-button-001.html [ Failure ]
 crbug.com/1113004 external/wpt/css/css-pseudo/active-selection-043.html [ Failure ]
 crbug.com/1100119 [ Mac ] external/wpt/css/css-pseudo/active-selection-051.html [ Failure ]
 crbug.com/1100119 [ Mac ] external/wpt/css/css-pseudo/active-selection-052.html [ Failure ]

third_party/blink/web_tests/external/wpt/css/css-pseudo/file-selector-button-after-part.html

+<!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="help" href="https://drafts.csswg.org/css-pseudo/#file-selector-button-pseudo">
+<link rel="mismatch" href="file-selector-button-001-notref.html">
+<style>
+#host::part(file-input)::file-selector-button {
+  border: 1px solid green;
+}
+</style>
+<div id="host"></div>
+<script>
+  document.getElementById("host").attachShadow({ mode: "open" }).innerHTML = `
+    <input type=file part=file-input>
+  `;
+</script>