From 6cd8578f8b89a89e953cfd337374cc2a67eca976 Mon Sep 17 00:00:00 2001 From: Jo Steven Novaryo <65610990+stevennovaryo@users.noreply.github.com> Date: Fri, 25 Jul 2025 12:38:14 +0800 Subject: [PATCH] dom: Textual Input UA Shadow Dom (#37527) Depend on: - https://github.com/servo/servo/pull/37427 - https://github.com/servo/servo/pull/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 Signed-off-by: Jo Steven Novaryo --- components/script/dom/element.rs | 23 ++-- components/script/dom/htmlinputelement.rs | 116 +++++++++++------- components/script/dom/node.rs | 6 +- components/script/textinput.rs | 2 +- tests/wpt/meta/MANIFEST.json | 4 +- .../number-placeholder-right-aligned.html.ini | 2 + .../field-sizing-input-number.html.ini | 3 + .../widgets/input-date-content-size.html.ini | 2 + .../input-number-text-size.tentative.html.ini | 2 + .../widgets/input-time-content-size.html.ini | 2 + tests/wpt/mozilla/meta/MANIFEST.json | 76 ++++++------ .../input-text-definite-width-ref.html | 15 --- .../appearance/input-text-definite-width.html | 14 --- .../appearance/input-text-empty-ref.html | 15 --- .../tests/appearance/input-text-empty.html | 14 --- .../input-text-nonempty-placeholder-ref.html | 15 --- .../input-text-nonempty-placeholder.html | 14 --- .../appearance/input-text-overflow-ref.html | 15 --- .../tests/appearance/input-text-overflow.html | 14 --- .../input-text-placeholder-overflow-ref.html | 15 --- .../input-text-placeholder-overflow.html | 14 --- .../input-text-placeholder-ref.html | 15 --- .../appearance/input-text-placeholder.html | 14 --- .../input-textual-definite-width-ref.html | 36 ++++++ .../input-textual-definite-width.html | 26 ++++ .../appearance/input-textual-empty-ref.html | 36 ++++++ .../tests/appearance/input-textual-empty.html | 26 ++++ ...nput-textual-nonempty-placeholder-ref.html | 36 ++++++ .../input-textual-nonempty-placeholder.html | 26 ++++ .../input-textual-overflow-ref.html | 35 ++++++ .../appearance/input-textual-overflow.html | 46 +++++++ ...nput-textual-placeholder-overflow-ref.html | 35 ++++++ .../input-textual-placeholder-overflow.html | 46 +++++++ .../input-textual-placeholder-ref.html | 35 ++++++ .../appearance/input-textual-placeholder.html | 26 ++++ ...put-text-ref.css => input-textual-ref.css} | 4 +- 36 files changed, 546 insertions(+), 279 deletions(-) create mode 100644 tests/wpt/meta/html/rendering/replaced-elements/attributes-for-embedded-content-and-images/number-placeholder-right-aligned.html.ini create mode 100644 tests/wpt/meta/html/rendering/widgets/input-date-content-size.html.ini create mode 100644 tests/wpt/meta/html/rendering/widgets/input-number-text-size.tentative.html.ini create mode 100644 tests/wpt/meta/html/rendering/widgets/input-time-content-size.html.ini delete mode 100644 tests/wpt/mozilla/tests/appearance/input-text-definite-width-ref.html delete mode 100644 tests/wpt/mozilla/tests/appearance/input-text-definite-width.html delete mode 100644 tests/wpt/mozilla/tests/appearance/input-text-empty-ref.html delete mode 100644 tests/wpt/mozilla/tests/appearance/input-text-empty.html delete mode 100644 tests/wpt/mozilla/tests/appearance/input-text-nonempty-placeholder-ref.html delete mode 100644 tests/wpt/mozilla/tests/appearance/input-text-nonempty-placeholder.html delete mode 100644 tests/wpt/mozilla/tests/appearance/input-text-overflow-ref.html delete mode 100644 tests/wpt/mozilla/tests/appearance/input-text-overflow.html delete mode 100644 tests/wpt/mozilla/tests/appearance/input-text-placeholder-overflow-ref.html delete mode 100644 tests/wpt/mozilla/tests/appearance/input-text-placeholder-overflow.html delete mode 100644 tests/wpt/mozilla/tests/appearance/input-text-placeholder-ref.html delete mode 100644 tests/wpt/mozilla/tests/appearance/input-text-placeholder.html create mode 100644 tests/wpt/mozilla/tests/appearance/input-textual-definite-width-ref.html create mode 100644 tests/wpt/mozilla/tests/appearance/input-textual-definite-width.html create mode 100644 tests/wpt/mozilla/tests/appearance/input-textual-empty-ref.html create mode 100644 tests/wpt/mozilla/tests/appearance/input-textual-empty.html create mode 100644 tests/wpt/mozilla/tests/appearance/input-textual-nonempty-placeholder-ref.html create mode 100644 tests/wpt/mozilla/tests/appearance/input-textual-nonempty-placeholder.html create mode 100644 tests/wpt/mozilla/tests/appearance/input-textual-overflow-ref.html create mode 100644 tests/wpt/mozilla/tests/appearance/input-textual-overflow.html create mode 100644 tests/wpt/mozilla/tests/appearance/input-textual-placeholder-overflow-ref.html create mode 100644 tests/wpt/mozilla/tests/appearance/input-textual-placeholder-overflow.html create mode 100644 tests/wpt/mozilla/tests/appearance/input-textual-placeholder-ref.html create mode 100644 tests/wpt/mozilla/tests/appearance/input-textual-placeholder.html rename tests/wpt/mozilla/tests/appearance/supports/{input-text-ref.css => input-textual-ref.css} (84%) diff --git a/components/script/dom/element.rs b/components/script/dom/element.rs index 45247b40cc3..5eae2c06ccd 100644 --- a/components/script/dom/element.rs +++ b/components/script/dom/element.rs @@ -1119,25 +1119,16 @@ impl<'dom> LayoutElementHelpers<'dom> for LayoutDom<'dom, Element> { )); } + // Textual input, specifically text entry and domain specific input has + // a default preferred size. + // + // + // let size = if let Some(this) = self.downcast::() { // FIXME(pcwalton): More use of atoms, please! match self.get_attr_val_for_layout(&ns!(), &local_name!("type")) { - // Not text entry widget - Some("hidden") | - Some("date") | - Some("month") | - Some("week") | - Some("time") | - Some("datetime-local") | - Some("number") | - Some("range") | - Some("color") | - Some("checkbox") | - Some("radio") | - Some("file") | - Some("submit") | - Some("image") | - Some("reset") | + Some("hidden") | Some("range") | Some("color") | Some("checkbox") | + Some("radio") | Some("file") | Some("submit") | Some("image") | Some("reset") | Some("button") => None, // Others _ => match this.size_for_layout() { diff --git a/components/script/dom/htmlinputelement.rs b/components/script/dom/htmlinputelement.rs index 090190b01f7..102d14653b7 100644 --- a/components/script/dom/htmlinputelement.rs +++ b/components/script/dom/htmlinputelement.rs @@ -104,7 +104,8 @@ const DEFAULT_FILE_INPUT_VALUE: &str = "No file chosen"; #[derive(Clone, JSTraceable, MallocSizeOf)] #[cfg_attr(crown, crown::unrooted_must_root_lint::must_root)] /// Contains reference to text control inner editor and placeholder container element in the UA -/// shadow tree for ``. The following is the structure of the shadow tree. +/// shadow tree for `text`, `password`, `url`, `tel`, and `email` input. The following is the +/// structure of the shadow tree. /// /// ``` /// @@ -115,6 +116,7 @@ const DEFAULT_FILE_INPUT_VALUE: &str = "No file chosen"; /// /// /// ``` +/// // TODO(stevennovaryo): We are trying to use CSS to mimic Chrome and Firefox's layout for the element. // But, this could be slower in performance and does have some discrepancies. For example, // they would try to vertically align text baseline with the baseline of other @@ -128,7 +130,7 @@ struct InputTypeTextShadowTree { #[derive(Clone, JSTraceable, MallocSizeOf)] #[cfg_attr(crown, crown::unrooted_must_root_lint::must_root)] -/// Contains references to the elements in the shadow tree for ``. +/// Contains references to the elements in the shadow tree for ``. /// /// The shadow tree consists of a single div with the currently selected color as /// the background. @@ -219,10 +221,11 @@ pub(crate) enum InputType { } impl InputType { - // Note that Password is not included here since it is handled - // slightly differently, with placeholder characters shown rather - // than the underlying value. - fn is_textual(&self) -> bool { + /// Defines which input type that should perform like a text input, + /// specifically when it is interacting with JS. Note that Password + /// is not included here since it is handled slightly differently, + /// with placeholder characters shown rather than the underlying value. + pub(crate) fn is_textual(&self) -> bool { matches!( *self, InputType::Date | @@ -1238,9 +1241,35 @@ impl HTMLInputElement { .expect("UA shadow tree was not created") } - fn update_text_shadow_tree_if_needed(&self, can_gc: CanGc) { - // Should only do this for `type=text` input. - debug_assert_eq!(self.input_type(), InputType::Text); + /// Should this input type render as a basic text UA widget. + // TODO(#38251): Ideally, the most basic shadow dom should cover only `text`, `password`, `url`, `tel`, + // and `email`. But we are leaving the others textual inputs here while tackling them one + // by one. + pub(crate) fn is_textual_widget(&self) -> bool { + matches!( + self.input_type(), + InputType::Date | + InputType::DatetimeLocal | + InputType::Email | + InputType::Month | + InputType::Number | + InputType::Password | + InputType::Range | + InputType::Search | + InputType::Tel | + InputType::Text | + InputType::Time | + InputType::Url | + InputType::Week + ) + } + + /// Construct the most basic shadow tree structure for textual input. + /// TODO(stevennovaryo): The rest of textual input shadow dom structure should act like an + /// exstension to this one. + fn update_textual_shadow_tree(&self, can_gc: CanGc) { + // Should only do this for textual input widget. + debug_assert!(self.is_textual_widget()); let text_shadow_tree = self.text_shadow_tree(can_gc); let value = self.Value(); @@ -1253,9 +1282,15 @@ impl HTMLInputElement { // This is also used to ensure that the caret will still be rendered when the input is empty. // TODO: Could append `
` element to prevent collapses and avoid this hack, but we would // need to fix the rendering of caret beforehand. - let value_text = match value.is_empty() { - false => value, - true => "\u{200B}".into(), + let value_text = match (value.is_empty(), self.input_type()) { + // For a password input, we replace all of the character with its replacement char. + (false, InputType::Password) => value + .chars() + .map(|_| PASSWORD_REPLACEMENT_CHAR) + .collect::() + .into(), + (false, _) => value, + (true, _) => "\u{200B}".into(), }; // FIXME(stevennovaryo): Refactor this inside a TextControl wrapper @@ -1269,7 +1304,7 @@ impl HTMLInputElement { .SetData(value_text); } - fn update_color_shadow_tree_if_needed(&self, can_gc: CanGc) { + fn update_color_shadow_tree(&self, can_gc: CanGc) { // Should only do this for `type=color` input. debug_assert_eq!(self.input_type(), InputType::Color); @@ -1287,10 +1322,10 @@ impl HTMLInputElement { .set_string_attribute(&local_name!("style"), style.into(), can_gc); } - fn update_shadow_tree_if_needed(&self, can_gc: CanGc) { + fn update_shadow_tree(&self, can_gc: CanGc) { match self.input_type() { - InputType::Text => self.update_text_shadow_tree_if_needed(can_gc), - InputType::Color => self.update_color_shadow_tree_if_needed(can_gc), + _ if self.is_textual_widget() => self.update_textual_shadow_tree(can_gc), + InputType::Color => self.update_color_shadow_tree(can_gc), _ => {}, } } @@ -1317,10 +1352,6 @@ impl<'dom> LayoutDom<'dom, HTMLInputElement> { unsafe { self.unsafe_get().filelist.get_inner_as_layout() } } - fn placeholder(self) -> &'dom str { - unsafe { self.unsafe_get().placeholder.borrow_for_layout() } - } - fn input_type(self) -> InputType { self.unsafe_get().input_type.get() } @@ -1336,6 +1367,9 @@ impl<'dom> LayoutDom<'dom, HTMLInputElement> { } impl<'dom> LayoutHTMLInputElementHelpers<'dom> for LayoutDom<'dom, HTMLInputElement> { + /// In the past, we are handling the display of element inside the dom tree traversal. + /// With the introduction of shadow DOM, these implementations will be replaced one by one + /// and these will be obselete, fn value_for_layout(self) -> Cow<'dom, str> { fn get_raw_attr_value<'dom>( input: LayoutDom<'dom, HTMLInputElement>, @@ -1349,7 +1383,9 @@ impl<'dom> LayoutHTMLInputElementHelpers<'dom> for LayoutDom<'dom, HTMLInputElem } match self.input_type() { - InputType::Checkbox | InputType::Radio | InputType::Image => "".into(), + InputType::Checkbox | InputType::Radio | InputType::Image | InputType::Hidden => { + "".into() + }, InputType::File => { let filelist = self.get_filelist(); match filelist { @@ -1372,31 +1408,23 @@ impl<'dom> LayoutHTMLInputElementHelpers<'dom> for LayoutDom<'dom, HTMLInputElem InputType::Button => get_raw_attr_value(self, ""), InputType::Submit => get_raw_attr_value(self, DEFAULT_SUBMIT_VALUE), InputType::Reset => get_raw_attr_value(self, DEFAULT_RESET_VALUE), - InputType::Password => { - let text = self.get_raw_textinput_value(); - if !text.is_empty() { - text.chars() - .map(|_| PASSWORD_REPLACEMENT_CHAR) - .collect::() - .into() - } else { - self.placeholder().into() - } - }, - InputType::Color => { - unreachable!("Input type color is explicitly not rendered as text"); - }, + // FIXME(#22728): input `type=range` has yet to be implemented. + InputType::Range => "".into(), _ => { - let text = self.get_raw_textinput_value(); - if !text.is_empty() { - text.into() - } else { - self.placeholder().into() - } + unreachable!("Input with shadow tree should use internal shadow tree for layout"); }, } } + /// Textual input, specifically text entry and domain specific input has + /// a default preferred size. + /// + /// + /// + // FIXME(stevennovaryo): Implement the calculation of default preferred size + // for domain specific input widgets correctly. + // FIXME(#4378): Implement the calculation of average character width for + // textual input correctly. fn size_for_layout(self) -> u32 { self.unsafe_get().size.get() } @@ -2228,7 +2256,7 @@ impl HTMLInputElement { // Update the placeholder text in the text shadow tree. // 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.is_textual_widget() { return; } @@ -2690,7 +2718,7 @@ impl HTMLInputElement { fn value_changed(&self, can_gc: CanGc) { self.update_related_validity_states(can_gc); - self.update_shadow_tree_if_needed(can_gc); + self.update_shadow_tree(can_gc); } /// @@ -3034,7 +3062,7 @@ impl VirtualMethods for HTMLInputElement { // WHATWG-specified activation behaviors are handled elsewhere; // this is for all the other things a UI click might do - //TODO: set the editing position for text inputs + //TODO(#10083): set the editing position for text inputs if self.input_type().is_textual_or_password() && // Check if we display a placeholder. Layout doesn't know about this. diff --git a/components/script/dom/node.rs b/components/script/dom/node.rs index 98afce97e5b..bc1589dee1c 100644 --- a/components/script/dom/node.rs +++ b/components/script/dom/node.rs @@ -1852,6 +1852,9 @@ impl<'dom> LayoutNodeHelpers<'dom> for LayoutDom<'dom, Node> { } } + /// Whether this element should layout as a special case input element. + // TODO(#38251): With the implementation of Shadow DOM, we could implement the construction properly + // in the DOM, instead of delegating it to layout. fn is_text_input(&self) -> bool { let type_id = self.type_id_for_layout(); if type_id == @@ -1861,8 +1864,7 @@ impl<'dom> LayoutNodeHelpers<'dom> for LayoutDom<'dom, Node> { { let input = self.unsafe_get().downcast::().unwrap(); - // FIXME: All the non-color and non-text input types currently render as text - !matches!(input.input_type(), InputType::Color | InputType::Text) + !input.is_textual_widget() && input.input_type() != InputType::Color } else { type_id == NodeTypeId::Element(ElementTypeId::HTMLElement( diff --git a/components/script/textinput.rs b/components/script/textinput.rs index 6213b1ef511..a8b2504c889 100644 --- a/components/script/textinput.rs +++ b/components/script/textinput.rs @@ -902,7 +902,6 @@ impl TextInput { KeyReaction::RedrawSelection }) .shortcut(CMD_OR_CONTROL, 'X', || { - // FIXME: this is unreachable because ClipboardEvent is fired instead of keydown if let Some(text) = self.get_selection_text() { self.clipboard_provider.set_text(text); self.delete_char(Direction::Backward); @@ -910,6 +909,7 @@ impl TextInput { KeyReaction::DispatchInput }) .shortcut(CMD_OR_CONTROL, 'C', || { + // TODO(stevennovaryo): we should not provide text to clipboard for type=password if let Some(text) = self.get_selection_text() { self.clipboard_provider.set_text(text); } diff --git a/tests/wpt/meta/MANIFEST.json b/tests/wpt/meta/MANIFEST.json index 12520bf7227..80ac26a5d14 100644 --- a/tests/wpt/meta/MANIFEST.json +++ b/tests/wpt/meta/MANIFEST.json @@ -357056,7 +357056,7 @@ "input-date-content-size.html": [ "d026771f3c89c736b397db6a10c15fde5d73a3a8", [ - null, + "html/rendering/widgets/input-date-content-size.html", [ [ "/html/rendering/widgets/input-date-content-size-ref.html", @@ -357147,7 +357147,7 @@ "input-time-content-size.html": [ "4a378f6923a8910b96f8afa84125a8fbac4a5d05", [ - null, + "html/rendering/widgets/input-time-content-size.html", [ [ "/html/rendering/widgets/input-time-content-size-ref.html", diff --git a/tests/wpt/meta/html/rendering/replaced-elements/attributes-for-embedded-content-and-images/number-placeholder-right-aligned.html.ini b/tests/wpt/meta/html/rendering/replaced-elements/attributes-for-embedded-content-and-images/number-placeholder-right-aligned.html.ini new file mode 100644 index 00000000000..2e5b303b98d --- /dev/null +++ b/tests/wpt/meta/html/rendering/replaced-elements/attributes-for-embedded-content-and-images/number-placeholder-right-aligned.html.ini @@ -0,0 +1,2 @@ +[number-placeholder-right-aligned.html] + expected: FAIL diff --git a/tests/wpt/meta/html/rendering/widgets/field-sizing-input-number.html.ini b/tests/wpt/meta/html/rendering/widgets/field-sizing-input-number.html.ini index 4528575dcb0..881128e9dc8 100644 --- a/tests/wpt/meta/html/rendering/widgets/field-sizing-input-number.html.ini +++ b/tests/wpt/meta/html/rendering/widgets/field-sizing-input-number.html.ini @@ -13,3 +13,6 @@ [number: Update field-sizing property dynamically] expected: FAIL + + [number: Text caret is taller than the placeholder] + expected: FAIL diff --git a/tests/wpt/meta/html/rendering/widgets/input-date-content-size.html.ini b/tests/wpt/meta/html/rendering/widgets/input-date-content-size.html.ini new file mode 100644 index 00000000000..e5f593cd717 --- /dev/null +++ b/tests/wpt/meta/html/rendering/widgets/input-date-content-size.html.ini @@ -0,0 +1,2 @@ +[input-date-content-size.html] + expected: FAIL diff --git a/tests/wpt/meta/html/rendering/widgets/input-number-text-size.tentative.html.ini b/tests/wpt/meta/html/rendering/widgets/input-number-text-size.tentative.html.ini new file mode 100644 index 00000000000..6d0e064411a --- /dev/null +++ b/tests/wpt/meta/html/rendering/widgets/input-number-text-size.tentative.html.ini @@ -0,0 +1,2 @@ +[input-number-text-size.tentative.html] + expected: FAIL diff --git a/tests/wpt/meta/html/rendering/widgets/input-time-content-size.html.ini b/tests/wpt/meta/html/rendering/widgets/input-time-content-size.html.ini new file mode 100644 index 00000000000..604132eb8c1 --- /dev/null +++ b/tests/wpt/meta/html/rendering/widgets/input-time-content-size.html.ini @@ -0,0 +1,2 @@ +[input-time-content-size.html] + expected: FAIL diff --git a/tests/wpt/mozilla/meta/MANIFEST.json b/tests/wpt/mozilla/meta/MANIFEST.json index a01a6788fc4..3c5179ac4fc 100644 --- a/tests/wpt/mozilla/meta/MANIFEST.json +++ b/tests/wpt/mozilla/meta/MANIFEST.json @@ -92,78 +92,78 @@ }, "reftest": { "appearance": { - "input-text-definite-width.html": [ - "fda46f8af9c14cef3911ec809054624204848b9d", + "input-textual-definite-width.html": [ + "59f1797fab3d1889bbcb7863178c6c5ef9e54f19", [ - "appearance/input-text-definite-width.html", + "appearance/input-textual-definite-width.html", [ [ - "/_mozilla/appearance/input-text-definite-width-ref.html", + "/_mozilla/appearance/input-textual-definite-width-ref.html", "==" ] ], {} ] ], - "input-text-empty.html": [ - "bd5f5f5a21ec0ce028922a6764de41dc904a1eb1", + "input-textual-empty.html": [ + "c85214b6c681b657a30a06b44670c796cdaeda11", [ - "appearance/input-text-empty.html", + "appearance/input-textual-empty.html", [ [ - "/_mozilla/appearance/input-text-empty-ref.html", + "/_mozilla/appearance/input-textual-empty-ref.html", "==" ] ], {} ] ], - "input-text-nonempty-placeholder.html": [ - "e075663cb6ae708b313b3cd5cd69f78c51b4bc1f", + "input-textual-nonempty-placeholder.html": [ + "83670d37e310954e6d3a69114577ff92b4126a98", [ - "appearance/input-text-nonempty-placeholder.html", + "appearance/input-textual-nonempty-placeholder.html", [ [ - "/_mozilla/appearance/input-text-nonempty-placeholder-ref.html", + "/_mozilla/appearance/input-textual-nonempty-placeholder-ref.html", "==" ] ], {} ] ], - "input-text-overflow.html": [ - "52db07c0f0274d2b7b086d7017982145c25918da", + "input-textual-overflow.html": [ + "ad1f0aa70285e227153f7d05983b2ef9caa798f9", [ - "appearance/input-text-overflow.html", + "appearance/input-textual-overflow.html", [ [ - "/_mozilla/appearance/input-text-overflow-ref.html", + "/_mozilla/appearance/input-textual-overflow-ref.html", "==" ] ], {} ] ], - "input-text-placeholder-overflow.html": [ - "c4d77ae2a22a5b7972f2798b8ca78742b81bacc4", + "input-textual-placeholder-overflow.html": [ + "9bc84f26b8c1ae0718085ddb069889cca2e0322a", [ - "appearance/input-text-placeholder-overflow.html", + "appearance/input-textual-placeholder-overflow.html", [ [ - "/_mozilla/appearance/input-text-placeholder-overflow-ref.html", + "/_mozilla/appearance/input-textual-placeholder-overflow-ref.html", "==" ] ], {} ] ], - "input-text-placeholder.html": [ - "d75acade78038b14529135b1d63c0ac5a168a87b", + "input-textual-placeholder.html": [ + "68287721ce67ecece6e746b44fd3fd1d92763085", [ - "appearance/input-text-placeholder.html", + "appearance/input-textual-placeholder.html", [ [ - "/_mozilla/appearance/input-text-placeholder-ref.html", + "/_mozilla/appearance/input-textual-placeholder-ref.html", "==" ] ], @@ -8130,33 +8130,33 @@ [] ], "appearance": { - "input-text-definite-width-ref.html": [ - "86f7937755750261ed3b06dfe11e78a251b9d175", + "input-textual-definite-width-ref.html": [ + "7a256be23b3c084bb8477d7380a8b1801ec07f05", [] ], - "input-text-empty-ref.html": [ - "437c9988a13e094d870f67c8de0dd0becdeece76", + "input-textual-empty-ref.html": [ + "6cbaa3e40e5a7fa6ea96710f126d6e6d4d4d633e", [] ], - "input-text-nonempty-placeholder-ref.html": [ - "5415dfb2a4a88dc3bfed6ad04e23f288534351e4", + "input-textual-nonempty-placeholder-ref.html": [ + "7a256be23b3c084bb8477d7380a8b1801ec07f05", [] ], - "input-text-overflow-ref.html": [ - "4cece657a2a09cfe3f1d91d49f0c9d76f5714516", + "input-textual-overflow-ref.html": [ + "f8e22c9d11dc68dd244a3fc5b8f5946a707a2660", [] ], - "input-text-placeholder-overflow-ref.html": [ - "0cccfff638c0d8687a3582310c73233b7d883b1a", + "input-textual-placeholder-overflow-ref.html": [ + "ee297a94cacb3838375b94c3a546f288adb464f1", [] ], - "input-text-placeholder-ref.html": [ - "fa5b60bdabdf2b9b818ebe66bfc7f2711173b88b", + "input-textual-placeholder-ref.html": [ + "d30f13a2a1bab16989ec585a57ba7b7bd0b1c329", [] ], "supports": { - "input-text-ref.css": [ - "8cf00d493138285e50aa510273abae98c099ae8b", + "input-textual-ref.css": [ + "7cdabb05d5dd7eb39df521fcb5ce24e39fea840f", [] ] } diff --git a/tests/wpt/mozilla/tests/appearance/input-text-definite-width-ref.html b/tests/wpt/mozilla/tests/appearance/input-text-definite-width-ref.html deleted file mode 100644 index 86f79377557..00000000000 --- a/tests/wpt/mozilla/tests/appearance/input-text-definite-width-ref.html +++ /dev/null @@ -1,15 +0,0 @@ - - - - Appearance of an Input type=text With a Definite Width - - - -Display of an input type=text should match the display generated by the CSS reference. -
-
- Foo -
-
- - diff --git a/tests/wpt/mozilla/tests/appearance/input-text-definite-width.html b/tests/wpt/mozilla/tests/appearance/input-text-definite-width.html deleted file mode 100644 index fda46f8af9c..00000000000 --- a/tests/wpt/mozilla/tests/appearance/input-text-definite-width.html +++ /dev/null @@ -1,14 +0,0 @@ - - - - Appearance of an Input type=text With a Definite Width - - - - -Display of an input type=text should match the display generated by the CSS reference. -
- -
- - diff --git a/tests/wpt/mozilla/tests/appearance/input-text-empty-ref.html b/tests/wpt/mozilla/tests/appearance/input-text-empty-ref.html deleted file mode 100644 index 437c9988a13..00000000000 --- a/tests/wpt/mozilla/tests/appearance/input-text-empty-ref.html +++ /dev/null @@ -1,15 +0,0 @@ - - - - Appearance of an Empty Input type=text With a Definite Width - - - -Display of an input type=text should match the display generated by the CSS reference. -
-
-
-
-
- - diff --git a/tests/wpt/mozilla/tests/appearance/input-text-empty.html b/tests/wpt/mozilla/tests/appearance/input-text-empty.html deleted file mode 100644 index bd5f5f5a21e..00000000000 --- a/tests/wpt/mozilla/tests/appearance/input-text-empty.html +++ /dev/null @@ -1,14 +0,0 @@ - - - - Appearance of an Empty Input type=text With a Definite Width - - - - -Display of an input type=text should match the display generated by the CSS reference. -
- -
- - diff --git a/tests/wpt/mozilla/tests/appearance/input-text-nonempty-placeholder-ref.html b/tests/wpt/mozilla/tests/appearance/input-text-nonempty-placeholder-ref.html deleted file mode 100644 index 5415dfb2a4a..00000000000 --- a/tests/wpt/mozilla/tests/appearance/input-text-nonempty-placeholder-ref.html +++ /dev/null @@ -1,15 +0,0 @@ - - - - Appearance of a Non-empty Input type=text With a Definite Width and a Placeholder - - - -Display of an input type=text should match the display generated by the CSS reference. -
-
- Foo -
-
- - diff --git a/tests/wpt/mozilla/tests/appearance/input-text-nonempty-placeholder.html b/tests/wpt/mozilla/tests/appearance/input-text-nonempty-placeholder.html deleted file mode 100644 index e075663cb6a..00000000000 --- a/tests/wpt/mozilla/tests/appearance/input-text-nonempty-placeholder.html +++ /dev/null @@ -1,14 +0,0 @@ - - - - Appearance of a Non-empty Input type=text With a Definite Width and a Placeholder - - - - -Display of an input type=text should match the display generated by the CSS reference. -
- -
- - diff --git a/tests/wpt/mozilla/tests/appearance/input-text-overflow-ref.html b/tests/wpt/mozilla/tests/appearance/input-text-overflow-ref.html deleted file mode 100644 index 4cece657a2a..00000000000 --- a/tests/wpt/mozilla/tests/appearance/input-text-overflow-ref.html +++ /dev/null @@ -1,15 +0,0 @@ - - - - Appearance of an Overflowing Input type=text With a Definite Width - - - -Display of an input type=text should match the display generated by the CSS reference. -
-
- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. -
-
- - diff --git a/tests/wpt/mozilla/tests/appearance/input-text-overflow.html b/tests/wpt/mozilla/tests/appearance/input-text-overflow.html deleted file mode 100644 index 52db07c0f02..00000000000 --- a/tests/wpt/mozilla/tests/appearance/input-text-overflow.html +++ /dev/null @@ -1,14 +0,0 @@ - - - - Appearance of an Overflowing Input type=text With a Definite Width - - - - -Display of an input type=text should match the display generated by the CSS reference. -
- -
- - diff --git a/tests/wpt/mozilla/tests/appearance/input-text-placeholder-overflow-ref.html b/tests/wpt/mozilla/tests/appearance/input-text-placeholder-overflow-ref.html deleted file mode 100644 index 0cccfff638c..00000000000 --- a/tests/wpt/mozilla/tests/appearance/input-text-placeholder-overflow-ref.html +++ /dev/null @@ -1,15 +0,0 @@ - - - - Appearance of an Input type=text With a Definite Width and an Overflowing Placeholder - - - -Display of an input type=text should match the display generated by the CSS reference. -
-
- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. -
-
- - diff --git a/tests/wpt/mozilla/tests/appearance/input-text-placeholder-overflow.html b/tests/wpt/mozilla/tests/appearance/input-text-placeholder-overflow.html deleted file mode 100644 index c4d77ae2a22..00000000000 --- a/tests/wpt/mozilla/tests/appearance/input-text-placeholder-overflow.html +++ /dev/null @@ -1,14 +0,0 @@ - - - - Appearance of an Input type=text With a Definite Width and an Overflowing Placeholder - - - - -Display of an input type=text should match the display generated by the CSS reference. -
- -
- - diff --git a/tests/wpt/mozilla/tests/appearance/input-text-placeholder-ref.html b/tests/wpt/mozilla/tests/appearance/input-text-placeholder-ref.html deleted file mode 100644 index fa5b60bdabd..00000000000 --- a/tests/wpt/mozilla/tests/appearance/input-text-placeholder-ref.html +++ /dev/null @@ -1,15 +0,0 @@ - - - - Appearance of an Input type=text With a Definite Width and a Placeholder - - - -Display of an input type=text should match the display generated by the CSS reference. -
-
- Bar -
-
- - diff --git a/tests/wpt/mozilla/tests/appearance/input-text-placeholder.html b/tests/wpt/mozilla/tests/appearance/input-text-placeholder.html deleted file mode 100644 index d75acade780..00000000000 --- a/tests/wpt/mozilla/tests/appearance/input-text-placeholder.html +++ /dev/null @@ -1,14 +0,0 @@ - - - - Appearance of an Input type=text With a Definite Width and a Placeholder - - - - -Display of an input type=text should match the display generated by the CSS reference. -
- -
- - diff --git a/tests/wpt/mozilla/tests/appearance/input-textual-definite-width-ref.html b/tests/wpt/mozilla/tests/appearance/input-textual-definite-width-ref.html new file mode 100644 index 00000000000..7a256be23b3 --- /dev/null +++ b/tests/wpt/mozilla/tests/appearance/input-textual-definite-width-ref.html @@ -0,0 +1,36 @@ + + + + Appearance of an Textual Input With a Definite Width + + + +Display of the textual inputs should match the display generated by the CSS reference. +
+
+ Text +
+
+
+
+ ●●●●●●●● +
+
+
+
+ Tel +
+
+
+
+ Url +
+
+
+
+ Email +
+
+ + + diff --git a/tests/wpt/mozilla/tests/appearance/input-textual-definite-width.html b/tests/wpt/mozilla/tests/appearance/input-textual-definite-width.html new file mode 100644 index 00000000000..59f1797fab3 --- /dev/null +++ b/tests/wpt/mozilla/tests/appearance/input-textual-definite-width.html @@ -0,0 +1,26 @@ + + + + Appearance of an Textual Input With a Definite Width + + + + +Display of the textual inputs should match the display generated by the CSS reference. +
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+ + diff --git a/tests/wpt/mozilla/tests/appearance/input-textual-empty-ref.html b/tests/wpt/mozilla/tests/appearance/input-textual-empty-ref.html new file mode 100644 index 00000000000..6cbaa3e40e5 --- /dev/null +++ b/tests/wpt/mozilla/tests/appearance/input-textual-empty-ref.html @@ -0,0 +1,36 @@ + + + + Appearance of an Textual Input With a Definite Width + + + +Display of the textual inputs should match the display generated by the CSS reference. +
+
+   +
+
+
+
+   +
+
+
+
+   +
+
+
+
+   +
+
+
+
+   +
+
+ + + diff --git a/tests/wpt/mozilla/tests/appearance/input-textual-empty.html b/tests/wpt/mozilla/tests/appearance/input-textual-empty.html new file mode 100644 index 00000000000..c85214b6c68 --- /dev/null +++ b/tests/wpt/mozilla/tests/appearance/input-textual-empty.html @@ -0,0 +1,26 @@ + + + + Appearance of an Textual Input With a Definite Width + + + + +Display of the textual inputs should match the display generated by the CSS reference. +
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+ + diff --git a/tests/wpt/mozilla/tests/appearance/input-textual-nonempty-placeholder-ref.html b/tests/wpt/mozilla/tests/appearance/input-textual-nonempty-placeholder-ref.html new file mode 100644 index 00000000000..7a256be23b3 --- /dev/null +++ b/tests/wpt/mozilla/tests/appearance/input-textual-nonempty-placeholder-ref.html @@ -0,0 +1,36 @@ + + + + Appearance of an Textual Input With a Definite Width + + + +Display of the textual inputs should match the display generated by the CSS reference. +
+
+ Text +
+
+
+
+ ●●●●●●●● +
+
+
+
+ Tel +
+
+
+
+ Url +
+
+
+
+ Email +
+
+ + + diff --git a/tests/wpt/mozilla/tests/appearance/input-textual-nonempty-placeholder.html b/tests/wpt/mozilla/tests/appearance/input-textual-nonempty-placeholder.html new file mode 100644 index 00000000000..83670d37e31 --- /dev/null +++ b/tests/wpt/mozilla/tests/appearance/input-textual-nonempty-placeholder.html @@ -0,0 +1,26 @@ + + + + Appearance of a Non-empty Textual Input With a Definite Width and a Placeholder + + + + +Display of the textual inputs should match the display generated by the CSS reference. +
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+ + diff --git a/tests/wpt/mozilla/tests/appearance/input-textual-overflow-ref.html b/tests/wpt/mozilla/tests/appearance/input-textual-overflow-ref.html new file mode 100644 index 00000000000..f8e22c9d11d --- /dev/null +++ b/tests/wpt/mozilla/tests/appearance/input-textual-overflow-ref.html @@ -0,0 +1,35 @@ + + + + Appearance of an Textual Input With a Definite Width and an Overflowing Placeholder + + + +Display of the textual inputs should match the display generated by the CSS reference. +
+
+ Text Input: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. +
+
+
+
+ ●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●● +
+
+
+
+ Tel Input: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. +
+
+
+
+ Url Input: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. +
+
+
+
+ Email Input: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. +
+
+ + diff --git a/tests/wpt/mozilla/tests/appearance/input-textual-overflow.html b/tests/wpt/mozilla/tests/appearance/input-textual-overflow.html new file mode 100644 index 00000000000..ad1f0aa7028 --- /dev/null +++ b/tests/wpt/mozilla/tests/appearance/input-textual-overflow.html @@ -0,0 +1,46 @@ + + + + Appearance of an Textual Input With a Definite Width and an Overflowing Placeholder + + + + +Display of the textual inputs should match the display generated by the CSS reference. +
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+ + diff --git a/tests/wpt/mozilla/tests/appearance/input-textual-placeholder-overflow-ref.html b/tests/wpt/mozilla/tests/appearance/input-textual-placeholder-overflow-ref.html new file mode 100644 index 00000000000..ee297a94cac --- /dev/null +++ b/tests/wpt/mozilla/tests/appearance/input-textual-placeholder-overflow-ref.html @@ -0,0 +1,35 @@ + + + + Appearance of an Textual Input With a Definite Width and an Overflowing Placeholder + + + +Display of the textual inputs should match the display generated by the CSS reference. +
+
+ Text Input: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. +
+
+
+
+ Password Input: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. +
+
+
+
+ Tel Input: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. +
+
+
+
+ Url Input: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. +
+
+
+
+ Email Input: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. +
+
+ + diff --git a/tests/wpt/mozilla/tests/appearance/input-textual-placeholder-overflow.html b/tests/wpt/mozilla/tests/appearance/input-textual-placeholder-overflow.html new file mode 100644 index 00000000000..9bc84f26b8c --- /dev/null +++ b/tests/wpt/mozilla/tests/appearance/input-textual-placeholder-overflow.html @@ -0,0 +1,46 @@ + + + + Appearance of an Textual Input With a Definite Width and an Overflowing Placeholder + + + + +Display of the textual inputs should match the display generated by the CSS reference. +
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+ + diff --git a/tests/wpt/mozilla/tests/appearance/input-textual-placeholder-ref.html b/tests/wpt/mozilla/tests/appearance/input-textual-placeholder-ref.html new file mode 100644 index 00000000000..d30f13a2a1b --- /dev/null +++ b/tests/wpt/mozilla/tests/appearance/input-textual-placeholder-ref.html @@ -0,0 +1,35 @@ + + + + Appearance of an Textual Input With a Definite Width and a Placeholder + + + +Display of the textual inputs should match the display generated by the CSS reference. +
+
+ Text +
+
+
+
+ Password +
+
+
+
+ Tel +
+
+
+
+ Url +
+
+
+
+ Email +
+
+ + diff --git a/tests/wpt/mozilla/tests/appearance/input-textual-placeholder.html b/tests/wpt/mozilla/tests/appearance/input-textual-placeholder.html new file mode 100644 index 00000000000..68287721ce6 --- /dev/null +++ b/tests/wpt/mozilla/tests/appearance/input-textual-placeholder.html @@ -0,0 +1,26 @@ + + + + Appearance of an Textual Input With a Definite Width and a Placeholder + + + + +Display of the textual inputs should match the display generated by the CSS reference. +
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+ + diff --git a/tests/wpt/mozilla/tests/appearance/supports/input-text-ref.css b/tests/wpt/mozilla/tests/appearance/supports/input-textual-ref.css similarity index 84% rename from tests/wpt/mozilla/tests/appearance/supports/input-text-ref.css rename to tests/wpt/mozilla/tests/appearance/supports/input-textual-ref.css index 8cf00d49313..7cdabb05d5d 100644 --- a/tests/wpt/mozilla/tests/appearance/supports/input-text-ref.css +++ b/tests/wpt/mozilla/tests/appearance/supports/input-textual-ref.css @@ -1,6 +1,6 @@ -/* Minimal stylesheet to mimic the appearence of an input type=text specific to Servo. +/* Minimal stylesheet to mimic the appearence of the textual inputs specific to Servo. * This stylesheet is expected to be modified following the development of the - * Shadow DOM input type=text in Servo. + * Shadow DOM textual inputs in Servo. */ #input {