Use :placeholder-shown for showing placeholder

Signed-off-by: stevennovaryo <steven.novaryo@gmail.com>
This commit is contained in:
stevennovaryo 2025-06-06 15:35:22 +08:00
parent 2a87b7b560
commit 3340e5e786
3 changed files with 17 additions and 21 deletions

24
Cargo.lock generated
View file

@ -6607,7 +6607,7 @@ dependencies = [
[[package]]
name = "selectors"
version = "0.28.0"
source = "git+https://github.com/stevennovaryo/stylo?branch=input-text-internal-pseudo-selector#b0123d478e727125f8f6862e7afb5cf8ebf8ba17"
source = "git+https://github.com/stevennovaryo/stylo?branch=input-text-internal-pseudo-selector#ae8a6e376ce4838a9d08ac5905d4c25a9aa5659a"
dependencies = [
"bitflags 2.9.1",
"cssparser",
@ -6902,7 +6902,7 @@ dependencies = [
[[package]]
name = "servo_arc"
version = "0.4.1"
source = "git+https://github.com/stevennovaryo/stylo?branch=input-text-internal-pseudo-selector#b0123d478e727125f8f6862e7afb5cf8ebf8ba17"
source = "git+https://github.com/stevennovaryo/stylo?branch=input-text-internal-pseudo-selector#ae8a6e376ce4838a9d08ac5905d4c25a9aa5659a"
dependencies = [
"serde",
"stable_deref_trait",
@ -7363,7 +7363,7 @@ dependencies = [
[[package]]
name = "stylo"
version = "0.3.0"
source = "git+https://github.com/stevennovaryo/stylo?branch=input-text-internal-pseudo-selector#b0123d478e727125f8f6862e7afb5cf8ebf8ba17"
source = "git+https://github.com/stevennovaryo/stylo?branch=input-text-internal-pseudo-selector#ae8a6e376ce4838a9d08ac5905d4c25a9aa5659a"
dependencies = [
"app_units",
"arrayvec",
@ -7421,7 +7421,7 @@ dependencies = [
[[package]]
name = "stylo_atoms"
version = "0.3.0"
source = "git+https://github.com/stevennovaryo/stylo?branch=input-text-internal-pseudo-selector#b0123d478e727125f8f6862e7afb5cf8ebf8ba17"
source = "git+https://github.com/stevennovaryo/stylo?branch=input-text-internal-pseudo-selector#ae8a6e376ce4838a9d08ac5905d4c25a9aa5659a"
dependencies = [
"string_cache",
"string_cache_codegen",
@ -7430,12 +7430,12 @@ dependencies = [
[[package]]
name = "stylo_config"
version = "0.3.0"
source = "git+https://github.com/stevennovaryo/stylo?branch=input-text-internal-pseudo-selector#b0123d478e727125f8f6862e7afb5cf8ebf8ba17"
source = "git+https://github.com/stevennovaryo/stylo?branch=input-text-internal-pseudo-selector#ae8a6e376ce4838a9d08ac5905d4c25a9aa5659a"
[[package]]
name = "stylo_derive"
version = "0.3.0"
source = "git+https://github.com/stevennovaryo/stylo?branch=input-text-internal-pseudo-selector#b0123d478e727125f8f6862e7afb5cf8ebf8ba17"
source = "git+https://github.com/stevennovaryo/stylo?branch=input-text-internal-pseudo-selector#ae8a6e376ce4838a9d08ac5905d4c25a9aa5659a"
dependencies = [
"darling",
"proc-macro2",
@ -7447,7 +7447,7 @@ dependencies = [
[[package]]
name = "stylo_dom"
version = "0.3.0"
source = "git+https://github.com/stevennovaryo/stylo?branch=input-text-internal-pseudo-selector#b0123d478e727125f8f6862e7afb5cf8ebf8ba17"
source = "git+https://github.com/stevennovaryo/stylo?branch=input-text-internal-pseudo-selector#ae8a6e376ce4838a9d08ac5905d4c25a9aa5659a"
dependencies = [
"bitflags 2.9.1",
"stylo_malloc_size_of",
@ -7456,7 +7456,7 @@ dependencies = [
[[package]]
name = "stylo_malloc_size_of"
version = "0.3.0"
source = "git+https://github.com/stevennovaryo/stylo?branch=input-text-internal-pseudo-selector#b0123d478e727125f8f6862e7afb5cf8ebf8ba17"
source = "git+https://github.com/stevennovaryo/stylo?branch=input-text-internal-pseudo-selector#ae8a6e376ce4838a9d08ac5905d4c25a9aa5659a"
dependencies = [
"app_units",
"cssparser",
@ -7473,12 +7473,12 @@ dependencies = [
[[package]]
name = "stylo_static_prefs"
version = "0.3.0"
source = "git+https://github.com/stevennovaryo/stylo?branch=input-text-internal-pseudo-selector#b0123d478e727125f8f6862e7afb5cf8ebf8ba17"
source = "git+https://github.com/stevennovaryo/stylo?branch=input-text-internal-pseudo-selector#ae8a6e376ce4838a9d08ac5905d4c25a9aa5659a"
[[package]]
name = "stylo_traits"
version = "0.3.0"
source = "git+https://github.com/stevennovaryo/stylo?branch=input-text-internal-pseudo-selector#b0123d478e727125f8f6862e7afb5cf8ebf8ba17"
source = "git+https://github.com/stevennovaryo/stylo?branch=input-text-internal-pseudo-selector#ae8a6e376ce4838a9d08ac5905d4c25a9aa5659a"
dependencies = [
"app_units",
"bitflags 2.9.1",
@ -7887,7 +7887,7 @@ checksum = "1f3ccbac311fea05f86f61904b462b55fb3df8837a366dfc601a0161d0532f20"
[[package]]
name = "to_shmem"
version = "0.2.0"
source = "git+https://github.com/stevennovaryo/stylo?branch=input-text-internal-pseudo-selector#b0123d478e727125f8f6862e7afb5cf8ebf8ba17"
source = "git+https://github.com/stevennovaryo/stylo?branch=input-text-internal-pseudo-selector#ae8a6e376ce4838a9d08ac5905d4c25a9aa5659a"
dependencies = [
"cssparser",
"servo_arc",
@ -7900,7 +7900,7 @@ dependencies = [
[[package]]
name = "to_shmem_derive"
version = "0.1.0"
source = "git+https://github.com/stevennovaryo/stylo?branch=input-text-internal-pseudo-selector#b0123d478e727125f8f6862e7afb5cf8ebf8ba17"
source = "git+https://github.com/stevennovaryo/stylo?branch=input-text-internal-pseudo-selector#ae8a6e376ce4838a9d08ac5905d4c25a9aa5659a"
dependencies = [
"darling",
"proc-macro2",

View file

@ -31,6 +31,10 @@ input::-servo-text-control-inner-container {
display: flex;
}
input:not(:placeholder-shown)::-servo-text-control-placeholder {
visibility: hidden !important
}
input::-servo-text-control-inner-editor, input::-servo-text-control-placeholder {
white-space: pre;
margin-block: auto !important;

View file

@ -2197,17 +2197,10 @@ impl HTMLInputElement {
return;
}
// Ideally we are not supposed to handle visibility of the placeholder.
// But we are doing so because UA stylesheet does not support `:host` selector yet.
let placeholder_text = match self.upcast::<Element>().placeholder_shown_state() {
true => self.placeholder.borrow().clone(),
false => "".into(),
};
self.text_shadow_tree(can_gc)
.placeholder_container
.upcast::<Node>()
.SetTextContent(Some(placeholder_text), can_gc);
.SetTextContent(Some(self.placeholder.borrow().clone()), can_gc);
}
// https://html.spec.whatwg.org/multipage/#file-upload-state-(type=file)
@ -3048,7 +3041,6 @@ impl VirtualMethods for HTMLInputElement {
}
self.value_dirty.set(true);
self.update_placeholder_shown_state();
self.update_text_shadow_tree_placeholder(can_gc);
self.upcast::<Node>().dirty(NodeDamage::OtherNodeDamage);
event.mark_as_handled();
},