dom: Textual Input UA Shadow Dom#37527
Merged
xiaochengh merged 4 commits intoservo:mainfrom Jul 25, 2025
Merged
Conversation
stevennovaryo
force-pushed
the
textual-input-shadow-dom
branch
from
00b02f4 to
19ff07d
Compare
Signed-off-by: stevennovaryo <[email protected]>
stevennovaryo
force-pushed
the
textual-input-shadow-dom
branch
from
19ff07d to
146c40f
Compare
|
🔨 Triggering try run (#16481302530) for Linux (WPT) |
|
Test results for linux-wpt from try job (#16481302530): Flaky unexpected result (15)
Stable unexpected results that are known to be intermittent (19)
Stable unexpected results (5)
|
|
|
xiaochengh
reviewed
Jul 24, 2025
| fn update_shadow_tree(&self, can_gc: CanGc) { | ||
| let input_type = self.input_type(); | ||
| match input_type { | ||
| _ if input_type.is_textual_or_password() => self.update_textual_or_password_shadow_tree(can_gc), |
Contributor
There was a problem hiding this comment.
is_textual includes the hidden type.
I don't think we should construct a shadow DOM for hidden inputs.
Contributor
Author
There was a problem hiding this comment.
Ah yes it also include type=hidden ones. Thanks for catching that!
Contributor
Author
Yes, any textual inputs with its unique widgets will get its own shadow tree logic. I picture there will be more sophisticated architecture for constructing the shadow DOM, especially when we want to reuse some logic and optimize the construction. |
Contributor
Author
|
Done a little bit of look through failed WPTs, all of them is a false positive PASS.
|
Signed-off-by: Jo Steven Novaryo <[email protected]>
Signed-off-by: Jo Steven Novaryo <[email protected]>
|
🔨 Triggering try run (#16493052265) for Linux (WPT) |
|
Test results for linux-wpt from try job (#16493052265): Flaky unexpected result (11)
Stable unexpected results that are known to be intermittent (25)
|
|
✨ Try run (#16493052265) succeeded. |
18 tasks
xiaochengh
reviewed
Jul 25, 2025
| // To increase the performance, we would only do this when it is necessary. | ||
| fn update_text_shadow_tree_placeholder(&self, can_gc: CanGc) { | ||
| if self.input_type() != InputType::Text { | ||
| if !self.input_type().is_textual_or_password() { |
Contributor
Author
There was a problem hiding this comment.
Thanks, I have changed it!
components/script/dom/node.rs
Outdated
|
|
||
| // FIXME: All the non-color and non-text input types currently render as text | ||
| !matches!(input.input_type(), InputType::Color | InputType::Text) | ||
| !input.input_type().is_textual_or_password() && input.input_type() != InputType::Color |
Contributor
|
I'm wondering if there's a chance of refactoring
|
Signed-off-by: Jo Steven Novaryo <[email protected]>
stevennovaryo
force-pushed
the
textual-input-shadow-dom
branch
from
3daff7d to
6c1848d
Compare
Contributor
Author
I am wondering the same, I feel like one of the possible refactoring is by moving the input specific utilities to other a trait, or, if it is large enough we could create a wrapper for all attributes that is related to it. e.g., for wrapper for textual inputs, wrapping A further design planning should be required though. |
Contributor
True, that's way out of the scope of this PR. We can file an issue and think about it later. |
xiaochengh
approved these changes
Jul 25, 2025
minghuaw
pushed a commit
to minghuaw/servo
that referenced
this pull request
Aug 1, 2025
Depend on: - servo#37427 - servo#37483 Utilize input `type=text` for the display of all textual input. In which, consist of https://html.spec.whatwg.org/#the-input-element-as-a-text-entry-widget and https://html.spec.whatwg.org/#the-input-element-as-domain-specific-widgets inputs. For `password`, `url`, `tel`, and, `email` input, the appearance of input container is exactly the same as the `text` input. Other types of textual input simply extends `text` input by adding extra components inside the container. Testing: Servo textual input appearance WPT. --------- Signed-off-by: stevennovaryo <[email protected]> Signed-off-by: Jo Steven Novaryo <[email protected]>
github-merge-queue bot
pushed a commit
that referenced
this pull request
Aug 22, 2025
Following #37527, every textual input is constructing the containers for value and placeholder. However not all of textual `<input>` element require the initialization of such placeholder container. This is apparent with JS UI framework that defines its own placeholder management. This PR add lazy initialization for placeholder which construct the relevant HTML elements for placeholder container whenever it is necessary. Testing: Existing WPT coverage Signed-off-by: Jo Steven Novaryo <[email protected]>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Depend on:
type=color::color-swatch#37427type=textShadow DOM With Performance Improvement #37483Utilize input
type=textfor the display of all textual input. In which, consist of https://html.spec.whatwg.org/#the-input-element-as-a-text-entry-widget and https://html.spec.whatwg.org/#the-input-element-as-domain-specific-widgets inputs.For
password,url,tel, and,emailinput, the appearance of input container is exactly the same as thetextinput. Other types of textual input simply extendstextinput by adding extra components inside the container.Testing: Servo textual input appearance WPT.