From b5febe538c7d68fddc51d1e171759f3f5fe8a92d Mon Sep 17 00:00:00 2001
From: MacDue <macdue@dueutil.tech>
Date: Fri, 22 Jul 2022 15:58:52 +0100
Subject: [PATCH] LibWeb: Parse the -webkit-progress-bar/value pseudo elements

These will be needed for styling progress bars, sadly this can
only be done with these non-standard selectors. These are, hovever,
in use on real sites such as https://rpcs3.net/compatibility.
---
 Userland/Libraries/LibWeb/CSS/Parser/Parser.cpp | 6 ++++--
 Userland/Libraries/LibWeb/CSS/Selector.cpp      | 4 ++++
 Userland/Libraries/LibWeb/CSS/Selector.h        | 8 +++++++-
 Userland/Libraries/LibWeb/Dump.cpp              | 6 ++++++
 4 files changed, 21 insertions(+), 3 deletions(-)

diff --git a/Userland/Libraries/LibWeb/CSS/Parser/Parser.cpp b/Userland/Libraries/LibWeb/CSS/Parser/Parser.cpp
index f1919c09552..9155305b1cf 100644
--- a/Userland/Libraries/LibWeb/CSS/Parser/Parser.cpp
+++ b/Userland/Libraries/LibWeb/CSS/Parser/Parser.cpp
@@ -458,10 +458,12 @@ Parser::ParseErrorOr<Selector::SimpleSelector> Parser::parse_pseudo_simple_selec
         }
 
         auto pseudo_name = name_token.token().ident();
-        if (has_ignored_vendor_prefix(pseudo_name))
+        auto pseudo_element = pseudo_element_from_string(pseudo_name);
+
+        // Note: We allow the "ignored" -webkit prefix here for -webkit-progress-bar/-webkit-progress-bar
+        if (!pseudo_element.has_value() && has_ignored_vendor_prefix(pseudo_name))
             return ParseError::IncludesIgnoredVendorPrefix;
 
-        auto pseudo_element = pseudo_element_from_string(pseudo_name);
         if (!pseudo_element.has_value()) {
             dbgln_if(CSS_PARSER_DEBUG, "Unrecognized pseudo-element: '::{}'", pseudo_name);
             return ParseError::SyntaxError;
diff --git a/Userland/Libraries/LibWeb/CSS/Selector.cpp b/Userland/Libraries/LibWeb/CSS/Selector.cpp
index 57889720271..ca10a764efb 100644
--- a/Userland/Libraries/LibWeb/CSS/Selector.cpp
+++ b/Userland/Libraries/LibWeb/CSS/Selector.cpp
@@ -352,6 +352,10 @@ Optional<Selector::PseudoElement> pseudo_element_from_string(StringView name)
         return Selector::PseudoElement::FirstLine;
     } else if (name.equals_ignoring_case("marker"sv)) {
         return Selector::PseudoElement::Marker;
+    } else if (name.equals_ignoring_case("-webkit-progress-bar"sv)) {
+        return Selector::PseudoElement::ProgressBar;
+    } else if (name.equals_ignoring_case("-webkit-progress-value"sv)) {
+        return Selector::PseudoElement::ProgressValue;
     }
     return {};
 }
diff --git a/Userland/Libraries/LibWeb/CSS/Selector.h b/Userland/Libraries/LibWeb/CSS/Selector.h
index 6c5d6a5ea0e..4d9a1c0ee28 100644
--- a/Userland/Libraries/LibWeb/CSS/Selector.h
+++ b/Userland/Libraries/LibWeb/CSS/Selector.h
@@ -26,8 +26,10 @@ public:
         FirstLine,
         FirstLetter,
         Marker,
+        ProgressValue,
+        ProgressBar
     };
-    static auto constexpr PseudoElementCount = to_underlying(PseudoElement::Marker) + 1;
+    static auto constexpr PseudoElementCount = to_underlying(PseudoElement::ProgressBar) + 1;
 
     struct SimpleSelector {
         enum class Type {
@@ -204,6 +206,10 @@ constexpr StringView pseudo_element_name(Selector::PseudoElement pseudo_element)
         return "first-letter"sv;
     case Selector::PseudoElement::Marker:
         return "marker"sv;
+    case Selector::PseudoElement::ProgressBar:
+        return "-webkit-progress-bar"sv;
+    case Selector::PseudoElement::ProgressValue:
+        return "-webkit-progress-value"sv;
     }
     VERIFY_NOT_REACHED();
 }
diff --git a/Userland/Libraries/LibWeb/Dump.cpp b/Userland/Libraries/LibWeb/Dump.cpp
index bbb6bfeaea4..520c0cf9d9e 100644
--- a/Userland/Libraries/LibWeb/Dump.cpp
+++ b/Userland/Libraries/LibWeb/Dump.cpp
@@ -492,6 +492,12 @@ void dump_selector(StringBuilder& builder, CSS::Selector const& selector)
                 case CSS::Selector::PseudoElement::Marker:
                     pseudo_element_description = "marker";
                     break;
+                case CSS::Selector::PseudoElement::ProgressBar:
+                    pseudo_element_description = "-webkit-progress-bar";
+                    break;
+                case CSS::Selector::PseudoElement::ProgressValue:
+                    pseudo_element_description = "-webkit-progress-value";
+                    break;
                 }
 
                 builder.appendff(" pseudo_element={}", pseudo_element_description);