From 4df5e249265d8befdd700b3633b2405a5f443260 Mon Sep 17 00:00:00 2001
From: Sam Atkins <atkinssj@serenityos.org>
Date: Tue, 1 Aug 2023 12:31:41 +0100
Subject: [PATCH] LibWeb: Implement the `:playing` and `:paused` pseudo-classes

These match media elements (`<video>` and `<audio>`) which are playing
or paused, respectively.
---
 Userland/Libraries/LibWeb/CSS/Parser/Parser.cpp  |  4 ++++
 Userland/Libraries/LibWeb/CSS/Selector.cpp       |  2 ++
 Userland/Libraries/LibWeb/CSS/Selector.h         |  6 ++++++
 Userland/Libraries/LibWeb/CSS/SelectorEngine.cpp | 16 +++++++++++++++-
 Userland/Libraries/LibWeb/Dump.cpp               |  6 ++++++
 .../Libraries/LibWeb/HTML/HTMLMediaElement.cpp   |  1 +
 6 files changed, 34 insertions(+), 1 deletion(-)

diff --git a/Userland/Libraries/LibWeb/CSS/Parser/Parser.cpp b/Userland/Libraries/LibWeb/CSS/Parser/Parser.cpp
index 7383d3e9dd..88bb4cb062 100644
--- a/Userland/Libraries/LibWeb/CSS/Parser/Parser.cpp
+++ b/Userland/Libraries/LibWeb/CSS/Parser/Parser.cpp
@@ -497,6 +497,10 @@ Parser::ParseErrorOr<Selector::SimpleSelector> Parser::parse_pseudo_simple_selec
             return make_pseudo_class_selector(Selector::SimpleSelector::PseudoClass::Type::OnlyChild);
         if (pseudo_name.equals_ignoring_ascii_case("only-of-type"sv))
             return make_pseudo_class_selector(Selector::SimpleSelector::PseudoClass::Type::OnlyOfType);
+        if (pseudo_name.equals_ignoring_ascii_case("playing"sv))
+            return make_pseudo_class_selector(Selector::SimpleSelector::PseudoClass::Type::Playing);
+        if (pseudo_name.equals_ignoring_ascii_case("paused"sv))
+            return make_pseudo_class_selector(Selector::SimpleSelector::PseudoClass::Type::Paused);
         if (pseudo_name.equals_ignoring_ascii_case("root"sv))
             return make_pseudo_class_selector(Selector::SimpleSelector::PseudoClass::Type::Root);
         if (pseudo_name.equals_ignoring_ascii_case("host"sv))
diff --git a/Userland/Libraries/LibWeb/CSS/Selector.cpp b/Userland/Libraries/LibWeb/CSS/Selector.cpp
index e80d4d0519..a55e71b054 100644
--- a/Userland/Libraries/LibWeb/CSS/Selector.cpp
+++ b/Userland/Libraries/LibWeb/CSS/Selector.cpp
@@ -231,6 +231,8 @@ ErrorOr<String> Selector::SimpleSelector::serialize() const
         case Selector::SimpleSelector::PseudoClass::Type::Active:
         case Selector::SimpleSelector::PseudoClass::Type::Scope:
         case Selector::SimpleSelector::PseudoClass::Type::Defined:
+        case Selector::SimpleSelector::PseudoClass::Type::Playing:
+        case Selector::SimpleSelector::PseudoClass::Type::Paused:
             // If the pseudo-class does not accept arguments append ":" (U+003A), followed by the name of the pseudo-class, to s.
             TRY(s.try_append(':'));
             TRY(s.try_append(pseudo_class_name(pseudo_class.type)));
diff --git a/Userland/Libraries/LibWeb/CSS/Selector.h b/Userland/Libraries/LibWeb/CSS/Selector.h
index 06503d46c8..42af93c276 100644
--- a/Userland/Libraries/LibWeb/CSS/Selector.h
+++ b/Userland/Libraries/LibWeb/CSS/Selector.h
@@ -115,6 +115,8 @@ public:
                 Lang,
                 Scope,
                 Defined,
+                Playing,
+                Paused,
             };
             Type type;
 
@@ -304,6 +306,10 @@ constexpr StringView pseudo_class_name(Selector::SimpleSelector::PseudoClass::Ty
         return "scope"sv;
     case Selector::SimpleSelector::PseudoClass::Type::Defined:
         return "defined"sv;
+    case Selector::SimpleSelector::PseudoClass::Type::Playing:
+        return "playing"sv;
+    case Selector::SimpleSelector::PseudoClass::Type::Paused:
+        return "paused"sv;
     }
     VERIFY_NOT_REACHED();
 }
diff --git a/Userland/Libraries/LibWeb/CSS/SelectorEngine.cpp b/Userland/Libraries/LibWeb/CSS/SelectorEngine.cpp
index 301c74146f..d563329a23 100644
--- a/Userland/Libraries/LibWeb/CSS/SelectorEngine.cpp
+++ b/Userland/Libraries/LibWeb/CSS/SelectorEngine.cpp
@@ -17,6 +17,7 @@
 #include <LibWeb/HTML/HTMLFieldSetElement.h>
 #include <LibWeb/HTML/HTMLHtmlElement.h>
 #include <LibWeb/HTML/HTMLInputElement.h>
+#include <LibWeb/HTML/HTMLMediaElement.h>
 #include <LibWeb/HTML/HTMLOptGroupElement.h>
 #include <LibWeb/HTML/HTMLOptionElement.h>
 #include <LibWeb/HTML/HTMLProgressElement.h>
@@ -289,7 +290,7 @@ static inline bool matches_pseudo_class(CSS::Selector::SimpleSelector::PseudoCla
     case CSS::Selector::SimpleSelector::PseudoClass::Type::NthChild:
     case CSS::Selector::SimpleSelector::PseudoClass::Type::NthLastChild:
     case CSS::Selector::SimpleSelector::PseudoClass::Type::NthOfType:
-    case CSS::Selector::SimpleSelector::PseudoClass::Type::NthLastOfType:
+    case CSS::Selector::SimpleSelector::PseudoClass::Type::NthLastOfType: {
         auto const step_size = pseudo_class.nth_child_pattern.step_size;
         auto const offset = pseudo_class.nth_child_pattern.offset;
         if (step_size == 0 && offset == 0)
@@ -376,6 +377,19 @@ static inline bool matches_pseudo_class(CSS::Selector::SimpleSelector::PseudoCla
         // Otherwise, we start at "offset" and count forwards.
         return index >= offset && canonical_modulo(index - offset, step_size) == 0;
     }
+    case CSS::Selector::SimpleSelector::PseudoClass::Type::Playing: {
+        if (!is<HTML::HTMLMediaElement>(element))
+            return false;
+        auto const& media_element = static_cast<HTML::HTMLMediaElement const&>(element);
+        return !media_element.paused();
+    }
+    case CSS::Selector::SimpleSelector::PseudoClass::Type::Paused: {
+        if (!is<HTML::HTMLMediaElement>(element))
+            return false;
+        auto const& media_element = static_cast<HTML::HTMLMediaElement const&>(element);
+        return media_element.paused();
+    }
+    }
 
     return false;
 }
diff --git a/Userland/Libraries/LibWeb/Dump.cpp b/Userland/Libraries/LibWeb/Dump.cpp
index 0111ff993a..06f16950bf 100644
--- a/Userland/Libraries/LibWeb/Dump.cpp
+++ b/Userland/Libraries/LibWeb/Dump.cpp
@@ -542,6 +542,12 @@ void dump_selector(StringBuilder& builder, CSS::Selector const& selector)
                 case CSS::Selector::SimpleSelector::PseudoClass::Type::Defined:
                     pseudo_class_description = "Defined";
                     break;
+                case CSS::Selector::SimpleSelector::PseudoClass::Type::Playing:
+                    pseudo_class_description = "Playing";
+                    break;
+                case CSS::Selector::SimpleSelector::PseudoClass::Type::Paused:
+                    pseudo_class_description = "Paused";
+                    break;
                 }
 
                 builder.appendff(" pseudo_class={}", pseudo_class_description);
diff --git a/Userland/Libraries/LibWeb/HTML/HTMLMediaElement.cpp b/Userland/Libraries/LibWeb/HTML/HTMLMediaElement.cpp
index 76ca7f30ad..e61421cf2a 100644
--- a/Userland/Libraries/LibWeb/HTML/HTMLMediaElement.cpp
+++ b/Userland/Libraries/LibWeb/HTML/HTMLMediaElement.cpp
@@ -1591,6 +1591,7 @@ void HTMLMediaElement::set_paused(bool paused)
 
     if (auto* layout_node = this->layout_node())
         layout_node->set_needs_display();
+    set_needs_style_update(true);
 }
 
 // https://html.spec.whatwg.org/multipage/media.html#blocked-media-element