LibWeb: Implement the :placeholder-shown pseudo-class

This matches if the element has a placeholder, and that placeholder is
currently visible. This applies to `<input>` and `<textarea>` elements,
but our `<textarea>` is very limited so does not support placeholders.
This commit is contained in:
Sam Atkins 2023-08-22 16:51:42 +01:00 committed by Andreas Kling
parent 9f5b1e6614
commit 7bc5949e35
Notes: sideshowbarker 2024-07-17 07:43:44 +09:00
5 changed files with 34 additions and 0 deletions

View file

@ -0,0 +1,9 @@
<style>
.placeholder-shown {
background-color: yellow;
}
</style>
<input type="text" placeholder="hi" class="placeholder-shown">
<input type="text" placeholder="hi" value="I like turtles">
<input type="text">
<input type="text" value="I like turtles">

View file

@ -0,0 +1,9 @@
<style>
:placeholder-shown {
background-color: yellow;
}
</style>
<input type="text" placeholder="hi">
<input type="text" placeholder="hi" value="I like turtles">
<input type="text">
<input type="text" value="I like turtles">

View file

@ -9,6 +9,7 @@
"css-gradient-currentcolor.html": "css-gradient-currentcolor-ref.html",
"css-lang-selector.html": "css-lang-selector-ref.html",
"css-local-link-selector.html": "css-local-link-selector-ref.html",
"css-placeholder-shown-selector.html": "css-placeholder-shown-selector-ref.html",
"css-gradients.html": "css-gradients-ref.html",
"css-read-only-read-write-selectors.html": "css-read-only-read-write-selectors-ref.html",
"svg-symbol.html": "svg-symbol-ref.html",

View file

@ -95,6 +95,9 @@
"paused": {
"argument": ""
},
"placeholder-shown": {
"argument": ""
},
"playing": {
"argument": ""
},

View file

@ -7,6 +7,7 @@
#include <LibWeb/CSS/Parser/Parser.h>
#include <LibWeb/CSS/SelectorEngine.h>
#include <LibWeb/CSS/StyleProperties.h>
#include <LibWeb/CSS/ValueID.h>
#include <LibWeb/DOM/Document.h>
#include <LibWeb/DOM/Element.h>
@ -497,6 +498,17 @@ static inline bool matches_pseudo_class(CSS::Selector::SimpleSelector::PseudoCla
return !matches_read_write_pseudo_class(element);
case CSS::PseudoClass::ReadWrite:
return matches_read_write_pseudo_class(element);
case CSS::PseudoClass::PlaceholderShown: {
// https://html.spec.whatwg.org/multipage/semantics-other.html#selector-placeholder-shown
// The :placeholder-shown pseudo-class must match any element falling into one of the following categories:
// - input elements that have a placeholder attribute whose value is currently being presented to the user.
if (is<HTML::HTMLInputElement>(element) && element.has_attribute(HTML::AttributeNames::placeholder)) {
auto const& input_element = static_cast<HTML::HTMLInputElement const&>(element);
return input_element.placeholder_element() && input_element.placeholder_value().has_value();
}
// - FIXME: textarea elements that have a placeholder attribute whose value is currently being presented to the user.
return false;
}
}
return false;