1
Fork 0
mirror of https://github.com/RGBCube/serenity synced 2025-07-25 03:37:34 +00:00

LibWeb: Implement the :playing and :paused pseudo-classes

These match media elements (`<video>` and `<audio>`) which are playing
or paused, respectively.
This commit is contained in:
Sam Atkins 2023-08-01 12:31:41 +01:00 committed by Tim Flynn
parent a336fe4fc4
commit 4df5e24926
6 changed files with 34 additions and 1 deletions

View file

@ -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))

View file

@ -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)));

View file

@ -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();
}

View file

@ -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;
}

View file

@ -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);

View file

@ -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