HTMLInputElement.cpp 59 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036103710381039104010411042104310441045104610471048104910501051105210531054105510561057105810591060106110621063106410651066106710681069107010711072107310741075107610771078107910801081108210831084108510861087108810891090109110921093109410951096109710981099110011011102110311041105110611071108110911101111111211131114111511161117111811191120112111221123112411251126112711281129113011311132113311341135113611371138113911401141114211431144114511461147114811491150115111521153115411551156115711581159116011611162116311641165116611671168116911701171117211731174117511761177117811791180118111821183118411851186118711881189119011911192119311941195119611971198119912001201120212031204120512061207120812091210121112121213121412151216121712181219122012211222122312241225122612271228122912301231123212331234123512361237123812391240124112421243124412451246124712481249125012511252125312541255125612571258125912601261126212631264126512661267126812691270127112721273127412751276127712781279128012811282128312841285
  1. /*
  2. * Copyright (c) 2018-2023, Andreas Kling <kling@serenityos.org>
  3. * Copyright (c) 2022, Adam Hodgen <ant1441@gmail.com>
  4. * Copyright (c) 2022, Andrew Kaster <akaster@serenityos.org>
  5. * Copyright (c) 2023, Shannon Booth <shannon@serenityos.org>
  6. *
  7. * SPDX-License-Identifier: BSD-2-Clause
  8. */
  9. #include <LibWeb/CSS/StyleValues/DisplayStyleValue.h>
  10. #include <LibWeb/CSS/StyleValues/IdentifierStyleValue.h>
  11. #include <LibWeb/DOM/Document.h>
  12. #include <LibWeb/DOM/ElementFactory.h>
  13. #include <LibWeb/DOM/Event.h>
  14. #include <LibWeb/DOM/ShadowRoot.h>
  15. #include <LibWeb/HTML/BrowsingContext.h>
  16. #include <LibWeb/HTML/EventNames.h>
  17. #include <LibWeb/HTML/HTMLDivElement.h>
  18. #include <LibWeb/HTML/HTMLFormElement.h>
  19. #include <LibWeb/HTML/HTMLInputElement.h>
  20. #include <LibWeb/HTML/Scripting/Environments.h>
  21. #include <LibWeb/HTML/Window.h>
  22. #include <LibWeb/Infra/CharacterTypes.h>
  23. #include <LibWeb/Layout/BlockContainer.h>
  24. #include <LibWeb/Layout/ButtonBox.h>
  25. #include <LibWeb/Layout/CheckBox.h>
  26. #include <LibWeb/Layout/RadioButton.h>
  27. #include <LibWeb/Namespace.h>
  28. #include <LibWeb/Page/Page.h>
  29. #include <LibWeb/WebIDL/DOMException.h>
  30. #include <LibWeb/WebIDL/ExceptionOr.h>
  31. namespace Web::HTML {
  32. HTMLInputElement::HTMLInputElement(DOM::Document& document, DOM::QualifiedName qualified_name)
  33. : HTMLElement(document, move(qualified_name))
  34. , m_value(DeprecatedString::empty())
  35. {
  36. activation_behavior = [this](auto&) {
  37. // The activation behavior for input elements are these steps:
  38. // FIXME: 1. If this element is not mutable and is not in the Checkbox state and is not in the Radio state, then return.
  39. // 2. Run this element's input activation behavior, if any, and do nothing otherwise.
  40. run_input_activation_behavior().release_value_but_fixme_should_propagate_errors();
  41. };
  42. }
  43. HTMLInputElement::~HTMLInputElement() = default;
  44. void HTMLInputElement::initialize(JS::Realm& realm)
  45. {
  46. Base::initialize(realm);
  47. set_prototype(&Bindings::ensure_web_prototype<Bindings::HTMLInputElementPrototype>(realm, "HTMLInputElement"));
  48. }
  49. void HTMLInputElement::visit_edges(Cell::Visitor& visitor)
  50. {
  51. Base::visit_edges(visitor);
  52. visitor.visit(m_inner_text_element);
  53. visitor.visit(m_text_node);
  54. visitor.visit(m_placeholder_element);
  55. visitor.visit(m_placeholder_text_node);
  56. visitor.visit(m_color_well_element);
  57. visitor.visit(m_legacy_pre_activation_behavior_checked_element_in_group.ptr());
  58. visitor.visit(m_selected_files);
  59. }
  60. JS::GCPtr<Layout::Node> HTMLInputElement::create_layout_node(NonnullRefPtr<CSS::StyleProperties> style)
  61. {
  62. if (type_state() == TypeAttributeState::Hidden)
  63. return nullptr;
  64. if (type_state() == TypeAttributeState::SubmitButton || type_state() == TypeAttributeState::Button || type_state() == TypeAttributeState::ResetButton || type_state() == TypeAttributeState::FileUpload)
  65. return heap().allocate_without_realm<Layout::ButtonBox>(document(), *this, move(style));
  66. if (type_state() == TypeAttributeState::Checkbox)
  67. return heap().allocate_without_realm<Layout::CheckBox>(document(), *this, move(style));
  68. if (type_state() == TypeAttributeState::RadioButton)
  69. return heap().allocate_without_realm<Layout::RadioButton>(document(), *this, move(style));
  70. // AD-HOC: We rewrite `display: inline` to `display: inline-block`.
  71. // This is required for the internal shadow tree to work correctly in layout.
  72. if (style->display().is_inline_outside() && style->display().is_flow_inside())
  73. style->set_property(CSS::PropertyID::Display, CSS::DisplayStyleValue::create(CSS::Display::from_short(CSS::Display::Short::InlineBlock)));
  74. return Element::create_layout_node_for_display_type(document(), style->display(), style, this);
  75. }
  76. void HTMLInputElement::set_checked(bool checked, ChangeSource change_source)
  77. {
  78. if (m_checked == checked)
  79. return;
  80. // The dirty checkedness flag must be initially set to false when the element is created,
  81. // and must be set to true whenever the user interacts with the control in a way that changes the checkedness.
  82. if (change_source == ChangeSource::User)
  83. m_dirty_checkedness = true;
  84. m_checked = checked;
  85. // This element's :checked pseudo-class could be used in a sibling's sibling-selector,
  86. // so we need to invalidate the style of all siblings.
  87. if (parent()) {
  88. parent()->for_each_child([&](auto& child) {
  89. child.invalidate_style();
  90. });
  91. }
  92. }
  93. void HTMLInputElement::set_checked_binding(bool checked)
  94. {
  95. if (type_state() == TypeAttributeState::RadioButton) {
  96. if (checked)
  97. set_checked_within_group();
  98. else
  99. set_checked(false, ChangeSource::Programmatic);
  100. } else {
  101. set_checked(checked, ChangeSource::Programmatic);
  102. }
  103. }
  104. // https://html.spec.whatwg.org/multipage/input.html#dom-input-indeterminate
  105. void HTMLInputElement::set_indeterminate(bool value)
  106. {
  107. // On setting, it must be set to the new value. It has no effect except for changing the appearance of checkbox controls.
  108. m_indeterminate = value;
  109. }
  110. // https://html.spec.whatwg.org/multipage/input.html#dom-input-files
  111. JS::GCPtr<FileAPI::FileList> HTMLInputElement::files()
  112. {
  113. // On getting, if the IDL attribute applies, it must return a FileList object that represents the current selected files.
  114. // The same object must be returned until the list of selected files changes.
  115. // If the IDL attribute does not apply, then it must instead return null.
  116. if (m_type != TypeAttributeState::FileUpload)
  117. return nullptr;
  118. if (!m_selected_files)
  119. m_selected_files = FileAPI::FileList::create(realm(), {});
  120. return m_selected_files;
  121. }
  122. // https://html.spec.whatwg.org/multipage/input.html#dom-input-files
  123. void HTMLInputElement::set_files(JS::GCPtr<FileAPI::FileList> files)
  124. {
  125. // 1. If the IDL attribute does not apply or the given value is null, then return.
  126. if (m_type != TypeAttributeState::FileUpload || files == nullptr)
  127. return;
  128. // 2. Replace the element's selected files with the given value.
  129. m_selected_files = files;
  130. }
  131. // https://html.spec.whatwg.org/multipage/input.html#update-the-file-selection
  132. void HTMLInputElement::update_the_file_selection(JS::NonnullGCPtr<FileAPI::FileList> files)
  133. {
  134. // 1. Queue an element task on the user interaction task source given element and the following steps:
  135. queue_an_element_task(Task::Source::UserInteraction, [this, files] {
  136. // 1. Update element's selected files so that it represents the user's selection.
  137. this->set_files(files.ptr());
  138. // 2. Fire an event named input at the input element, with the bubbles and composed attributes initialized to true.
  139. auto input_event = DOM::Event::create(this->realm(), EventNames::input, { .bubbles = true, .composed = true });
  140. this->dispatch_event(input_event);
  141. // 3. Fire an event named change at the input element, with the bubbles attribute initialized to true.
  142. auto change_event = DOM::Event::create(this->realm(), EventNames::change, { .bubbles = true });
  143. this->dispatch_event(change_event);
  144. });
  145. }
  146. // https://html.spec.whatwg.org/multipage/input.html#show-the-picker,-if-applicable
  147. static void show_the_picker_if_applicable(HTMLInputElement& element)
  148. {
  149. // To show the picker, if applicable for an input element element:
  150. // 1. If element's relevant global object does not have transient activation, then return.
  151. auto& global_object = relevant_global_object(element);
  152. if (!is<HTML::Window>(global_object) || !static_cast<HTML::Window&>(global_object).has_transient_activation())
  153. return;
  154. // 2. If element is not mutable, then return.
  155. if (!element.is_mutable())
  156. return;
  157. // 3. If element's type attribute is in the File Upload state, then run these steps in parallel:
  158. if (element.type_state() == HTMLInputElement::TypeAttributeState::FileUpload) {
  159. // NOTE: These steps cannot be fully implemented here, and must be done in the PageClient when the response comes back from the PageHost
  160. // 1. Optionally, wait until any prior execution of this algorithm has terminated.
  161. // 2. Display a prompt to the user requesting that the user specify some files.
  162. // If the multiple attribute is not set on element, there must be no more than one file selected; otherwise, any number may be selected.
  163. // Files can be from the filesystem or created on the fly, e.g., a picture taken from a camera connected to the user's device.
  164. // 3. Wait for the user to have made their selection.
  165. // 4. If the user dismissed the prompt without changing their selection,
  166. // then queue an element task on the user interaction task source given element to fire an event named cancel at element,
  167. // with the bubbles attribute initialized to true.
  168. // 5. Otherwise, update the file selection for element.
  169. bool const multiple = element.has_attribute(HTML::AttributeNames::multiple);
  170. auto weak_element = element.make_weak_ptr<DOM::EventTarget>();
  171. // FIXME: Pass along accept attribute information https://html.spec.whatwg.org/multipage/input.html#attr-input-accept
  172. // The accept attribute may be specified to provide user agents with a hint of what file types will be accepted.
  173. element.document().browsing_context()->top_level_browsing_context()->page()->client().page_did_request_file_picker(weak_element, multiple);
  174. return;
  175. }
  176. // 4. Otherwise, the user agent should show any relevant user interface for selecting a value for element,
  177. // in the way it normally would when the user interacts with the control. (If no such UI applies to element, then this step does nothing.)
  178. // If such a user interface is shown, it must respect the requirements stated in the relevant parts of the specification for how element
  179. // behaves given its type attribute state. (For example, various sections describe restrictions on the resulting value string.)
  180. // This step can have side effects, such as closing other pickers that were previously shown by this algorithm.
  181. // (If this closes a file selection picker, then per the above that will lead to firing either input and change events, or a cancel event.)
  182. if (element.type_state() == HTMLInputElement::TypeAttributeState::Color) {
  183. auto weak_element = element.make_weak_ptr<HTMLInputElement>();
  184. element.document().browsing_context()->top_level_browsing_context()->page()->did_request_color_picker(weak_element, Color::from_string(MUST(String::from_deprecated_string(element.value()))).value_or(Color(0, 0, 0)));
  185. }
  186. }
  187. // https://html.spec.whatwg.org/multipage/input.html#dom-input-showpicker
  188. WebIDL::ExceptionOr<void> HTMLInputElement::show_picker()
  189. {
  190. // The showPicker() method steps are:
  191. // 1. If this is not mutable, then throw an "InvalidStateError" DOMException.
  192. if (!m_is_mutable)
  193. return WebIDL::InvalidStateError::create(realm(), "Element is not mutable"_fly_string);
  194. // 2. If this's relevant settings object's origin is not same origin with this's relevant settings object's top-level origin,
  195. // and this's type attribute is not in the File Upload state or Color state, then throw a "SecurityError" DOMException.
  196. // NOTE: File and Color inputs are exempted from this check for historical reason: their input activation behavior also shows their pickers,
  197. // and has never been guarded by an origin check.
  198. if (!relevant_settings_object(*this).origin().is_same_origin(relevant_settings_object(*this).top_level_origin)
  199. && m_type != TypeAttributeState::FileUpload && m_type != TypeAttributeState::Color) {
  200. return WebIDL::SecurityError::create(realm(), "Cross origin pickers are not allowed"_fly_string);
  201. }
  202. // 3. If this's relevant global object does not have transient activation, then throw a "NotAllowedError" DOMException.
  203. // FIXME: The global object we get here should probably not need casted to Window to check for transient activation
  204. auto& global_object = relevant_global_object(*this);
  205. if (!is<HTML::Window>(global_object) || !static_cast<HTML::Window&>(global_object).has_transient_activation()) {
  206. return WebIDL::NotAllowedError::create(realm(), "Too long since user activation to show picker"_fly_string);
  207. }
  208. // 4. Show the picker, if applicable, for this.
  209. show_the_picker_if_applicable(*this);
  210. return {};
  211. }
  212. // https://html.spec.whatwg.org/multipage/input.html#input-activation-behavior
  213. WebIDL::ExceptionOr<void> HTMLInputElement::run_input_activation_behavior()
  214. {
  215. if (type_state() == TypeAttributeState::Checkbox || type_state() == TypeAttributeState::RadioButton) {
  216. // 1. If the element is not connected, then return.
  217. if (!is_connected())
  218. return {};
  219. // 2. Fire an event named input at the element with the bubbles and composed attributes initialized to true.
  220. auto input_event = DOM::Event::create(realm(), HTML::EventNames::input);
  221. input_event->set_bubbles(true);
  222. input_event->set_composed(true);
  223. dispatch_event(input_event);
  224. // 3. Fire an event named change at the element with the bubbles attribute initialized to true.
  225. auto change_event = DOM::Event::create(realm(), HTML::EventNames::change);
  226. change_event->set_bubbles(true);
  227. dispatch_event(*change_event);
  228. } else if (type_state() == TypeAttributeState::SubmitButton) {
  229. JS::GCPtr<HTMLFormElement> form;
  230. // 1. If the element does not have a form owner, then return.
  231. if (!(form = this->form()))
  232. return {};
  233. // 2. If the element's node document is not fully active, then return.
  234. if (!document().is_fully_active())
  235. return {};
  236. // 3. Submit the form owner from the element.
  237. TRY(form->submit_form(*this));
  238. } else if (type_state() == TypeAttributeState::FileUpload || type_state() == TypeAttributeState::Color) {
  239. show_the_picker_if_applicable(*this);
  240. } else {
  241. dispatch_event(DOM::Event::create(realm(), EventNames::change));
  242. }
  243. return {};
  244. }
  245. void HTMLInputElement::did_edit_text_node(Badge<BrowsingContext>)
  246. {
  247. // An input element's dirty value flag must be set to true whenever the user interacts with the control in a way that changes the value.
  248. m_value = value_sanitization_algorithm(m_text_node->data().to_deprecated_string());
  249. m_dirty_value = true;
  250. update_placeholder_visibility();
  251. // NOTE: This is a bit ad-hoc, but basically implements part of "4.10.5.5 Common event behaviors"
  252. // https://html.spec.whatwg.org/multipage/input.html#common-input-element-events
  253. queue_an_element_task(HTML::Task::Source::UserInteraction, [this] {
  254. auto input_event = DOM::Event::create(realm(), HTML::EventNames::input);
  255. input_event->set_bubbles(true);
  256. input_event->set_composed(true);
  257. dispatch_event(*input_event);
  258. });
  259. }
  260. void HTMLInputElement::did_pick_color(Optional<Color> picked_color)
  261. {
  262. // https://html.spec.whatwg.org/multipage/input.html#common-input-element-events
  263. // For input elements without a defined input activation behavior, but to which these events apply
  264. // and for which the user interface involves both interactive manipulation and an explicit commit action
  265. if (type_state() == TypeAttributeState::Color && picked_color.has_value()) {
  266. // then when the user changes the element's value
  267. m_value = value_sanitization_algorithm(picked_color.value().to_deprecated_string_without_alpha());
  268. m_dirty_value = true;
  269. if (m_color_well_element)
  270. MUST(m_color_well_element->style_for_bindings()->set_property(CSS::PropertyID::BackgroundColor, m_value));
  271. // the user agent must queue an element task on the user interaction task source
  272. queue_an_element_task(HTML::Task::Source::UserInteraction, [this] {
  273. // given the input element to fire an event named input at the input element, with the bubbles and composed attributes initialized to true
  274. auto input_event = DOM::Event::create(realm(), HTML::EventNames::input);
  275. input_event->set_bubbles(true);
  276. input_event->set_composed(true);
  277. dispatch_event(*input_event);
  278. });
  279. // and any time the user commits the change, the user agent must queue an element task on the user interaction task source
  280. queue_an_element_task(HTML::Task::Source::UserInteraction, [this] {
  281. // given the input element
  282. // FIXME: to set its user interacted to true
  283. // and fire an event named change at the input element, with the bubbles attribute initialized to true.
  284. auto change_event = DOM::Event::create(realm(), HTML::EventNames::change);
  285. change_event->set_bubbles(true);
  286. dispatch_event(*change_event);
  287. });
  288. }
  289. }
  290. DeprecatedString HTMLInputElement::value() const
  291. {
  292. // https://html.spec.whatwg.org/multipage/input.html#dom-input-value-filename
  293. if (type_state() == TypeAttributeState::FileUpload) {
  294. // NOTE: This "fakepath" requirement is a sad accident of history. See the example in the File Upload state section for more information.
  295. // NOTE: Since path components are not permitted in filenames in the list of selected files, the "\fakepath\" cannot be mistaken for a path component.
  296. // On getting, return the string "C:\fakepath\" followed by the name of the first file in the list of selected files, if any, or the empty string if the list is empty.
  297. if (m_selected_files && m_selected_files->item(0))
  298. return DeprecatedString::formatted("C:\\fakepath\\{}", m_selected_files->item(0)->name());
  299. return DeprecatedString::empty();
  300. }
  301. // https://html.spec.whatwg.org/multipage/input.html#dom-input-value-default-on
  302. if (type_state() == TypeAttributeState::Checkbox || type_state() == TypeAttributeState::RadioButton) {
  303. // On getting, if the element has a value content attribute, return that attribute's value; otherwise, return the string "on".
  304. return get_attribute(AttributeNames::value).value_or("on"_string).to_deprecated_string();
  305. }
  306. // https://html.spec.whatwg.org/multipage/input.html#dom-input-value-default
  307. if (type_state() == TypeAttributeState::Hidden
  308. || type_state() == TypeAttributeState::SubmitButton
  309. || type_state() == TypeAttributeState::ImageButton
  310. || type_state() == TypeAttributeState::ResetButton
  311. || type_state() == TypeAttributeState::Button) {
  312. // On getting, if the element has a value content attribute, return that attribute's value; otherwise, return the empty string.
  313. return get_attribute(AttributeNames::value).value_or(String {}).to_deprecated_string();
  314. }
  315. // https://html.spec.whatwg.org/multipage/input.html#dom-input-value-value
  316. // Return the current value of the element.
  317. return m_value;
  318. }
  319. WebIDL::ExceptionOr<void> HTMLInputElement::set_value(String const& value)
  320. {
  321. // https://html.spec.whatwg.org/multipage/input.html#dom-input-value-filename
  322. if (type_state() == TypeAttributeState::FileUpload) {
  323. // On setting, if the new value is the empty string, empty the list of selected files; otherwise, throw an "InvalidStateError" DOMException.
  324. if (!value.is_empty())
  325. return WebIDL::InvalidStateError::create(realm(), "Setting value of input type file to non-empty string"_fly_string);
  326. m_selected_files = nullptr;
  327. return {};
  328. }
  329. // https://html.spec.whatwg.org/multipage/input.html#dom-input-value-value
  330. // 1. Let oldValue be the element's value.
  331. auto old_value = move(m_value);
  332. // 2. Set the element's value to the new value.
  333. // NOTE: For the TextNode this is done as part of step 4 below.
  334. if (type_state() == TypeAttributeState::Color && m_color_well_element)
  335. MUST(m_color_well_element->style_for_bindings()->set_property(CSS::PropertyID::BackgroundColor, m_value));
  336. // 3. Set the element's dirty value flag to true.
  337. m_dirty_value = true;
  338. // 4. Invoke the value sanitization algorithm, if the element's type attribute's current state defines one.
  339. m_value = value_sanitization_algorithm(value.to_deprecated_string());
  340. // 5. If the element's value (after applying the value sanitization algorithm) is different from oldValue,
  341. // and the element has a text entry cursor position, move the text entry cursor position to the end of the
  342. // text control, unselecting any selected text and resetting the selection direction to "none".
  343. if (m_text_node && (m_value != old_value)) {
  344. m_text_node->set_data(MUST(String::from_deprecated_string(m_value)));
  345. update_placeholder_visibility();
  346. }
  347. return {};
  348. }
  349. void HTMLInputElement::update_placeholder_visibility()
  350. {
  351. if (!m_placeholder_element)
  352. return;
  353. auto placeholder_text = this->placeholder_value();
  354. if (placeholder_text.has_value()) {
  355. MUST(m_placeholder_element->style_for_bindings()->set_property(CSS::PropertyID::Display, "block"sv));
  356. } else {
  357. MUST(m_placeholder_element->style_for_bindings()->set_property(CSS::PropertyID::Display, "none"sv));
  358. }
  359. }
  360. // https://html.spec.whatwg.org/multipage/input.html#the-input-element:attr-input-readonly-3
  361. static bool is_allowed_to_be_readonly(HTML::HTMLInputElement::TypeAttributeState state)
  362. {
  363. switch (state) {
  364. case HTML::HTMLInputElement::TypeAttributeState::Text:
  365. case HTML::HTMLInputElement::TypeAttributeState::Search:
  366. case HTML::HTMLInputElement::TypeAttributeState::Telephone:
  367. case HTML::HTMLInputElement::TypeAttributeState::URL:
  368. case HTML::HTMLInputElement::TypeAttributeState::Email:
  369. case HTML::HTMLInputElement::TypeAttributeState::Password:
  370. case HTML::HTMLInputElement::TypeAttributeState::Date:
  371. case HTML::HTMLInputElement::TypeAttributeState::Month:
  372. case HTML::HTMLInputElement::TypeAttributeState::Week:
  373. case HTML::HTMLInputElement::TypeAttributeState::Time:
  374. case HTML::HTMLInputElement::TypeAttributeState::LocalDateAndTime:
  375. case HTML::HTMLInputElement::TypeAttributeState::Number:
  376. return true;
  377. default:
  378. return false;
  379. }
  380. }
  381. // https://html.spec.whatwg.org/multipage/input.html#attr-input-readonly
  382. void HTMLInputElement::handle_readonly_attribute(Optional<String> const& maybe_value)
  383. {
  384. // The readonly attribute is a boolean attribute that controls whether or not the user can edit the form control. When specified, the element is not mutable.
  385. m_is_mutable = !maybe_value.has_value() || !is_allowed_to_be_readonly(m_type);
  386. if (m_text_node)
  387. m_text_node->set_always_editable(m_is_mutable);
  388. }
  389. // https://html.spec.whatwg.org/multipage/input.html#the-input-element:attr-input-placeholder-3
  390. static bool is_allowed_to_have_placeholder(HTML::HTMLInputElement::TypeAttributeState state)
  391. {
  392. switch (state) {
  393. case HTML::HTMLInputElement::TypeAttributeState::Text:
  394. case HTML::HTMLInputElement::TypeAttributeState::Search:
  395. case HTML::HTMLInputElement::TypeAttributeState::URL:
  396. case HTML::HTMLInputElement::TypeAttributeState::Telephone:
  397. case HTML::HTMLInputElement::TypeAttributeState::Email:
  398. case HTML::HTMLInputElement::TypeAttributeState::Password:
  399. case HTML::HTMLInputElement::TypeAttributeState::Number:
  400. return true;
  401. default:
  402. return false;
  403. }
  404. }
  405. // https://html.spec.whatwg.org/multipage/input.html#attr-input-placeholder
  406. Optional<DeprecatedString> HTMLInputElement::placeholder_value() const
  407. {
  408. if (!m_text_node || !m_text_node->data().is_empty())
  409. return {};
  410. if (!is_allowed_to_have_placeholder(type_state()))
  411. return {};
  412. if (!has_attribute(HTML::AttributeNames::placeholder))
  413. return {};
  414. auto placeholder = deprecated_attribute(HTML::AttributeNames::placeholder);
  415. if (placeholder.contains('\r') || placeholder.contains('\n')) {
  416. StringBuilder builder;
  417. for (auto ch : placeholder) {
  418. if (ch != '\r' && ch != '\n')
  419. builder.append(ch);
  420. }
  421. placeholder = builder.to_deprecated_string();
  422. }
  423. return placeholder;
  424. }
  425. class PlaceholderElement final : public HTMLDivElement {
  426. JS_CELL(PlaceholderElement, HTMLDivElement);
  427. public:
  428. PlaceholderElement(DOM::Document& document)
  429. : HTMLDivElement(document, DOM::QualifiedName { HTML::TagNames::div, ""_fly_string, Namespace::HTML })
  430. {
  431. }
  432. virtual Optional<CSS::Selector::PseudoElement> pseudo_element() const override { return CSS::Selector::PseudoElement::Placeholder; }
  433. };
  434. void HTMLInputElement::create_shadow_tree_if_needed()
  435. {
  436. if (shadow_root_internal())
  437. return;
  438. switch (type_state()) {
  439. case TypeAttributeState::Hidden:
  440. case TypeAttributeState::RadioButton:
  441. case TypeAttributeState::Checkbox:
  442. case TypeAttributeState::Button:
  443. case TypeAttributeState::SubmitButton:
  444. case TypeAttributeState::ResetButton:
  445. case TypeAttributeState::ImageButton:
  446. break;
  447. case TypeAttributeState::Color:
  448. create_color_input_shadow_tree();
  449. break;
  450. // FIXME: This could be better factored. Everything except the above types becomes a text input.
  451. default:
  452. create_text_input_shadow_tree();
  453. break;
  454. }
  455. }
  456. void HTMLInputElement::create_text_input_shadow_tree()
  457. {
  458. auto shadow_root = heap().allocate<DOM::ShadowRoot>(realm(), document(), *this, Bindings::ShadowRootMode::Closed);
  459. auto initial_value = m_value;
  460. auto element = DOM::create_element(document(), HTML::TagNames::div, Namespace::HTML).release_value_but_fixme_should_propagate_errors();
  461. MUST(element->set_attribute(HTML::AttributeNames::style, R"~~~(
  462. display: flex;
  463. height: 100%;
  464. align-items: center;
  465. white-space: pre;
  466. border: none;
  467. padding: 1px 2px;
  468. )~~~"_string));
  469. m_placeholder_element = heap().allocate<PlaceholderElement>(realm(), document());
  470. MUST(m_placeholder_element->style_for_bindings()->set_property(CSS::PropertyID::Height, "1lh"sv));
  471. m_placeholder_text_node = heap().allocate<DOM::Text>(realm(), document(), MUST(String::from_deprecated_string(initial_value)));
  472. m_placeholder_text_node->set_data(attribute(HTML::AttributeNames::placeholder).value_or(String {}));
  473. m_placeholder_text_node->set_editable_text_node_owner(Badge<HTMLInputElement> {}, *this);
  474. MUST(m_placeholder_element->append_child(*m_placeholder_text_node));
  475. MUST(element->append_child(*m_placeholder_element));
  476. m_inner_text_element = DOM::create_element(document(), HTML::TagNames::div, Namespace::HTML).release_value_but_fixme_should_propagate_errors();
  477. MUST(m_inner_text_element->style_for_bindings()->set_property(CSS::PropertyID::Height, "1lh"sv));
  478. m_text_node = heap().allocate<DOM::Text>(realm(), document(), MUST(String::from_deprecated_string(initial_value)));
  479. if (m_type == TypeAttributeState::FileUpload) {
  480. // NOTE: file upload state is mutable, but we don't allow the text node to be modifed
  481. m_text_node->set_always_editable(false);
  482. } else {
  483. handle_readonly_attribute(attribute(HTML::AttributeNames::readonly));
  484. }
  485. m_text_node->set_editable_text_node_owner(Badge<HTMLInputElement> {}, *this);
  486. if (m_type == TypeAttributeState::Password)
  487. m_text_node->set_is_password_input({}, true);
  488. MUST(m_inner_text_element->append_child(*m_text_node));
  489. MUST(element->append_child(*m_inner_text_element));
  490. MUST(shadow_root->append_child(element));
  491. set_shadow_root(shadow_root);
  492. }
  493. void HTMLInputElement::create_color_input_shadow_tree()
  494. {
  495. auto shadow_root = heap().allocate<DOM::ShadowRoot>(realm(), document(), *this, Bindings::ShadowRootMode::Closed);
  496. auto color = value_sanitization_algorithm(m_value);
  497. auto border = DOM::create_element(document(), HTML::TagNames::div, Namespace::HTML).release_value_but_fixme_should_propagate_errors();
  498. MUST(border->set_attribute(HTML::AttributeNames::style, R"~~~(
  499. width: fit-content;
  500. height: fit-content;
  501. padding: 4px;
  502. border: 1px solid ButtonBorder;
  503. background-color: ButtonFace;
  504. )~~~"_string));
  505. m_color_well_element = DOM::create_element(document(), HTML::TagNames::div, Namespace::HTML).release_value_but_fixme_should_propagate_errors();
  506. MUST(m_color_well_element->set_attribute(HTML::AttributeNames::style, R"~~~(
  507. width: 24px;
  508. height: 24px;
  509. border: 1px solid ButtonBorder;
  510. box-sizing: border-box;
  511. )~~~"_string));
  512. MUST(m_color_well_element->style_for_bindings()->set_property(CSS::PropertyID::BackgroundColor, color));
  513. MUST(border->append_child(*m_color_well_element));
  514. MUST(shadow_root->append_child(border));
  515. set_shadow_root(shadow_root);
  516. }
  517. void HTMLInputElement::did_receive_focus()
  518. {
  519. auto* browsing_context = document().browsing_context();
  520. if (!browsing_context)
  521. return;
  522. if (!m_text_node)
  523. return;
  524. browsing_context->set_cursor_position(DOM::Position::create(realm(), *m_text_node, 0));
  525. }
  526. void HTMLInputElement::did_lose_focus()
  527. {
  528. // The change event fires when the value is committed, if that makes sense for the control,
  529. // or else when the control loses focus
  530. queue_an_element_task(HTML::Task::Source::UserInteraction, [this] {
  531. auto change_event = DOM::Event::create(realm(), HTML::EventNames::change);
  532. change_event->set_bubbles(true);
  533. dispatch_event(change_event);
  534. });
  535. }
  536. void HTMLInputElement::attribute_changed(FlyString const& name, Optional<DeprecatedString> const& value)
  537. {
  538. HTMLElement::attribute_changed(name, value);
  539. if (name == HTML::AttributeNames::checked) {
  540. if (!value.has_value()) {
  541. // When the checked content attribute is removed, if the control does not have dirty checkedness,
  542. // the user agent must set the checkedness of the element to false.
  543. if (!m_dirty_checkedness)
  544. set_checked(false, ChangeSource::Programmatic);
  545. } else {
  546. // When the checked content attribute is added, if the control does not have dirty checkedness,
  547. // the user agent must set the checkedness of the element to true
  548. if (!m_dirty_checkedness)
  549. set_checked(true, ChangeSource::Programmatic);
  550. }
  551. } else if (name == HTML::AttributeNames::type) {
  552. m_type = parse_type_attribute(value.value_or(""));
  553. } else if (name == HTML::AttributeNames::value) {
  554. if (!value.has_value()) {
  555. if (!m_dirty_value) {
  556. m_value = DeprecatedString::empty();
  557. update_placeholder_visibility();
  558. if (type_state() == TypeAttributeState::Color && m_color_well_element)
  559. MUST(m_color_well_element->style_for_bindings()->set_property(CSS::PropertyID::BackgroundColor, m_value));
  560. }
  561. } else {
  562. if (!m_dirty_value) {
  563. m_value = value_sanitization_algorithm(*value);
  564. update_placeholder_visibility();
  565. if (type_state() == TypeAttributeState::Color && m_color_well_element)
  566. MUST(m_color_well_element->style_for_bindings()->set_property(CSS::PropertyID::BackgroundColor, m_value));
  567. }
  568. }
  569. } else if (name == HTML::AttributeNames::placeholder) {
  570. if (m_placeholder_text_node)
  571. m_placeholder_text_node->set_data(MUST(String::from_deprecated_string(value.value_or(""))));
  572. } else if (name == HTML::AttributeNames::readonly) {
  573. if (value.has_value())
  574. handle_readonly_attribute(MUST(String::from_deprecated_string(*value)));
  575. else
  576. handle_readonly_attribute({});
  577. }
  578. }
  579. HTMLInputElement::TypeAttributeState HTMLInputElement::parse_type_attribute(StringView type)
  580. {
  581. #define __ENUMERATE_HTML_INPUT_TYPE_ATTRIBUTE(keyword, state) \
  582. if (type.equals_ignoring_ascii_case(#keyword##sv)) \
  583. return HTMLInputElement::TypeAttributeState::state;
  584. ENUMERATE_HTML_INPUT_TYPE_ATTRIBUTES
  585. #undef __ENUMERATE_HTML_INPUT_TYPE_ATTRIBUTE
  586. // The missing value default and the invalid value default are the Text state.
  587. // https://html.spec.whatwg.org/multipage/input.html#the-input-element:missing-value-default
  588. // https://html.spec.whatwg.org/multipage/input.html#the-input-element:invalid-value-default
  589. return HTMLInputElement::TypeAttributeState::Text;
  590. }
  591. StringView HTMLInputElement::type() const
  592. {
  593. // FIXME: This should probably be `Reflect` in the IDL.
  594. switch (m_type) {
  595. #define __ENUMERATE_HTML_INPUT_TYPE_ATTRIBUTE(keyword, state) \
  596. case TypeAttributeState::state: \
  597. return #keyword##sv;
  598. ENUMERATE_HTML_INPUT_TYPE_ATTRIBUTES
  599. #undef __ENUMERATE_HTML_INPUT_TYPE_ATTRIBUTE
  600. }
  601. VERIFY_NOT_REACHED();
  602. }
  603. WebIDL::ExceptionOr<void> HTMLInputElement::set_type(String const& type)
  604. {
  605. return set_attribute(HTML::AttributeNames::type, type);
  606. }
  607. // https://html.spec.whatwg.org/multipage/common-microsyntaxes.html#valid-simple-colour
  608. static bool is_valid_simple_color(DeprecatedString const& value)
  609. {
  610. // if it is exactly seven characters long,
  611. if (value.length() != 7)
  612. return false;
  613. // and the first character is a U+0023 NUMBER SIGN character (#),
  614. if (!value.starts_with('#'))
  615. return false;
  616. // and the remaining six characters are all ASCII hex digits
  617. for (size_t i = 1; i < value.length(); i++)
  618. if (!is_ascii_hex_digit(value[i]))
  619. return false;
  620. return true;
  621. }
  622. // https://html.spec.whatwg.org/multipage/common-microsyntaxes.html#valid-time-string
  623. static bool is_valid_time_string(DeprecatedString const& value)
  624. {
  625. // A string is a valid time string representing an hour hour, a minute minute, and a second second if it consists of the following components in the given order:
  626. // 1. Two ASCII digits, representing hour, in the range 0 ≤ hour ≤ 23
  627. // 2. A U+003A COLON character (:)
  628. // 3. Two ASCII digits, representing minute, in the range 0 ≤ minute ≤ 59
  629. // 4. If second is nonzero, or optionally if second is zero:
  630. // 1. A U+003A COLON character (:)
  631. // 2. Two ASCII digits, representing the integer part of second, in the range 0 ≤ s ≤ 59
  632. // 3. If second is not an integer, or optionally if second is an integer:
  633. // 1. A U+002E FULL STOP character (.)
  634. // 2. One, two, or three ASCII digits, representing the fractional part of second
  635. auto parts = value.split(':');
  636. if (parts.size() != 2 || parts.size() != 3)
  637. return false;
  638. if (parts[0].length() != 2)
  639. return false;
  640. auto hour = (parse_ascii_digit(parts[0][0]) * 10) + parse_ascii_digit(parts[0][1]);
  641. if (hour > 23)
  642. return false;
  643. if (parts[1].length() != 2)
  644. return false;
  645. auto minute = (parse_ascii_digit(parts[1][0]) * 10) + parse_ascii_digit(parts[1][1]);
  646. if (minute > 59)
  647. return false;
  648. if (parts.size() == 2)
  649. return true;
  650. if (parts[2].length() < 2)
  651. return false;
  652. auto second = (parse_ascii_digit(parts[2][0]) * 10) + parse_ascii_digit(parts[2][1]);
  653. if (second > 59)
  654. return false;
  655. if (parts[2].length() == 2)
  656. return true;
  657. auto second_parts = parts[2].split('.');
  658. if (second_parts.size() != 2)
  659. return false;
  660. if (second_parts[1].length() < 1 || second_parts[1].length() > 3)
  661. return false;
  662. for (auto digit : second_parts[1])
  663. if (!is_ascii_digit(digit))
  664. return false;
  665. return true;
  666. }
  667. // https://html.spec.whatwg.org/multipage/common-microsyntaxes.html#week-number-of-the-last-day
  668. static u32 week_number_of_the_last_day(u64)
  669. {
  670. // FIXME: sometimes return 53 (!)
  671. // https://html.spec.whatwg.org/multipage/common-microsyntaxes.html#weeks
  672. return 52;
  673. }
  674. // https://html.spec.whatwg.org/multipage/common-microsyntaxes.html#valid-week-string
  675. static bool is_valid_week_string(DeprecatedString const& value)
  676. {
  677. // A string is a valid week string representing a week-year year and week week if it consists of the following components in the given order:
  678. // 1. Four or more ASCII digits, representing year, where year > 0
  679. // 2. A U+002D HYPHEN-MINUS character (-)
  680. // 3. A U+0057 LATIN CAPITAL LETTER W character (W)
  681. // 4. Two ASCII digits, representing the week week, in the range 1 ≤ week ≤ maxweek, where maxweek is the week number of the last day of week-year year
  682. auto parts = value.split('-');
  683. if (parts.size() != 2)
  684. return false;
  685. if (parts[0].length() < 4)
  686. return false;
  687. for (auto digit : parts[0])
  688. if (!is_ascii_digit(digit))
  689. return false;
  690. if (parts[1].length() != 3)
  691. return false;
  692. if (!parts[1].starts_with('W'))
  693. return false;
  694. if (!is_ascii_digit(parts[1][1]))
  695. return false;
  696. if (!is_ascii_digit(parts[1][2]))
  697. return false;
  698. u64 year = 0;
  699. for (auto d : parts[0]) {
  700. year *= 10;
  701. year += parse_ascii_digit(d);
  702. }
  703. auto week = (parse_ascii_digit(parts[1][1]) * 10) + parse_ascii_digit(parts[1][2]);
  704. return week >= 1 && week <= week_number_of_the_last_day(year);
  705. }
  706. // https://html.spec.whatwg.org/multipage/common-microsyntaxes.html#valid-month-string
  707. static bool is_valid_month_string(DeprecatedString const& value)
  708. {
  709. // A string is a valid month string representing a year year and month month if it consists of the following components in the given order:
  710. // 1. Four or more ASCII digits, representing year, where year > 0
  711. // 2. A U+002D HYPHEN-MINUS character (-)
  712. // 3. Two ASCII digits, representing the month month, in the range 1 ≤ month ≤ 12
  713. auto parts = value.split('-');
  714. if (parts.size() != 2)
  715. return false;
  716. if (parts[0].length() < 4)
  717. return false;
  718. for (auto digit : parts[0])
  719. if (!is_ascii_digit(digit))
  720. return false;
  721. if (parts[1].length() != 2)
  722. return false;
  723. if (!is_ascii_digit(parts[1][0]))
  724. return false;
  725. if (!is_ascii_digit(parts[1][1]))
  726. return false;
  727. auto month = (parse_ascii_digit(parts[1][0]) * 10) + parse_ascii_digit(parts[1][1]);
  728. return month >= 1 && month <= 12;
  729. }
  730. // https://html.spec.whatwg.org/multipage/common-microsyntaxes.html#valid-date-string
  731. static bool is_valid_date_string(DeprecatedString const& value)
  732. {
  733. // A string is a valid date string representing a year year, month month, and day day if it consists of the following components in the given order:
  734. // 1. A valid month string, representing year and month
  735. // 2. A U+002D HYPHEN-MINUS character (-)
  736. // 3. Two ASCII digits, representing day, in the range 1 ≤ day ≤ maxday where maxday is the number of days in the month month and year year
  737. auto parts = value.split('-');
  738. if (parts.size() != 3)
  739. return false;
  740. if (!is_valid_month_string(DeprecatedString::formatted("{}-{}", parts[0], parts[1])))
  741. return false;
  742. if (parts[2].length() != 2)
  743. return false;
  744. i64 year = 0;
  745. for (auto d : parts[0]) {
  746. year *= 10;
  747. year += parse_ascii_digit(d);
  748. }
  749. auto month = (parse_ascii_digit(parts[1][0]) * 10) + parse_ascii_digit(parts[1][1]);
  750. i64 day = (parse_ascii_digit(parts[2][0]) * 10) + parse_ascii_digit(parts[2][1]);
  751. return day >= 1 && day <= AK::days_in_month(year, month);
  752. }
  753. // https://html.spec.whatwg.org/multipage/common-microsyntaxes.html#valid-local-date-and-time-string
  754. static bool is_valid_local_date_and_time_string(DeprecatedString const& value)
  755. {
  756. auto parts_split_by_T = value.split('T');
  757. if (parts_split_by_T.size() == 2)
  758. return is_valid_date_string(parts_split_by_T[0]) && is_valid_time_string(parts_split_by_T[1]);
  759. auto parts_split_by_space = value.split(' ');
  760. if (parts_split_by_space.size() == 2)
  761. return is_valid_date_string(parts_split_by_space[0]) && is_valid_time_string(parts_split_by_space[1]);
  762. return false;
  763. }
  764. // https://html.spec.whatwg.org/multipage/common-microsyntaxes.html#valid-normalised-local-date-and-time-string
  765. static DeprecatedString normalize_local_date_and_time_string(DeprecatedString const& value)
  766. {
  767. VERIFY(value.count(" "sv) == 1);
  768. return value.replace(" "sv, "T"sv, ReplaceMode::FirstOnly);
  769. }
  770. // https://html.spec.whatwg.org/multipage/input.html#value-sanitization-algorithm
  771. DeprecatedString HTMLInputElement::value_sanitization_algorithm(DeprecatedString value) const
  772. {
  773. if (type_state() == HTMLInputElement::TypeAttributeState::Text || type_state() == HTMLInputElement::TypeAttributeState::Search || type_state() == HTMLInputElement::TypeAttributeState::Telephone || type_state() == HTMLInputElement::TypeAttributeState::Password) {
  774. // Strip newlines from the value.
  775. if (value.contains('\r') || value.contains('\n')) {
  776. StringBuilder builder;
  777. for (auto c : value) {
  778. if (!(c == '\r' || c == '\n'))
  779. builder.append(c);
  780. }
  781. return builder.to_deprecated_string();
  782. }
  783. } else if (type_state() == HTMLInputElement::TypeAttributeState::URL) {
  784. // Strip newlines from the value, then strip leading and trailing ASCII whitespace from the value.
  785. if (value.contains('\r') || value.contains('\n')) {
  786. StringBuilder builder;
  787. for (auto c : value) {
  788. if (!(c == '\r' || c == '\n'))
  789. builder.append(c);
  790. }
  791. return builder.string_view().trim(Infra::ASCII_WHITESPACE);
  792. }
  793. } else if (type_state() == HTMLInputElement::TypeAttributeState::Email) {
  794. // https://html.spec.whatwg.org/multipage/input.html#email-state-(type=email):value-sanitization-algorithm
  795. // FIXME: handle the `multiple` attribute
  796. // Strip newlines from the value, then strip leading and trailing ASCII whitespace from the value.
  797. if (value.contains('\r') || value.contains('\n')) {
  798. StringBuilder builder;
  799. for (auto c : value) {
  800. if (!(c == '\r' || c == '\n'))
  801. builder.append(c);
  802. }
  803. return builder.string_view().trim(Infra::ASCII_WHITESPACE);
  804. }
  805. } else if (type_state() == HTMLInputElement::TypeAttributeState::Number) {
  806. // If the value of the element is not a valid floating-point number, then set it to the empty string instead.
  807. // https://html.spec.whatwg.org/multipage/common-microsyntaxes.html#rules-for-parsing-floating-point-number-values
  808. // 6. Skip ASCII whitespace within input given position.
  809. auto maybe_double = value.to_double(TrimWhitespace::Yes);
  810. if (!maybe_double.has_value() || !isfinite(maybe_double.value()))
  811. return "";
  812. } else if (type_state() == HTMLInputElement::TypeAttributeState::Date) {
  813. // https://html.spec.whatwg.org/multipage/input.html#date-state-(type=date):value-sanitization-algorithm
  814. if (!is_valid_date_string(value))
  815. return "";
  816. } else if (type_state() == HTMLInputElement::TypeAttributeState::Month) {
  817. // https://html.spec.whatwg.org/multipage/input.html#month-state-(type=month):value-sanitization-algorithm
  818. if (!is_valid_month_string(value))
  819. return "";
  820. } else if (type_state() == HTMLInputElement::TypeAttributeState::Week) {
  821. // https://html.spec.whatwg.org/multipage/input.html#week-state-(type=week):value-sanitization-algorithm
  822. if (!is_valid_week_string(value))
  823. return "";
  824. } else if (type_state() == HTMLInputElement::TypeAttributeState::Time) {
  825. // https://html.spec.whatwg.org/multipage/input.html#time-state-(type=time):value-sanitization-algorithm
  826. if (!is_valid_time_string(value))
  827. return "";
  828. } else if (type_state() == HTMLInputElement::TypeAttributeState::LocalDateAndTime) {
  829. // https://html.spec.whatwg.org/multipage/input.html#local-date-and-time-state-(type=datetime-local):value-sanitization-algorithm
  830. if (is_valid_local_date_and_time_string(value))
  831. return normalize_local_date_and_time_string(value);
  832. return "";
  833. } else if (type_state() == HTMLInputElement::TypeAttributeState::Range) {
  834. // https://html.spec.whatwg.org/multipage/input.html#range-state-(type=range):value-sanitization-algorithm
  835. auto maybe_double = value.to_double(TrimWhitespace::Yes);
  836. if (!maybe_double.has_value() || !isfinite(maybe_double.value()))
  837. return JS::number_to_deprecated_string(maybe_double.value_or(0));
  838. } else if (type_state() == HTMLInputElement::TypeAttributeState::Color) {
  839. // https://html.spec.whatwg.org/multipage/input.html#color-state-(type=color):value-sanitization-algorithm
  840. // If the value of the element is a valid simple color, then set it to the value of the element converted to ASCII lowercase;
  841. if (is_valid_simple_color(value))
  842. return value.to_lowercase();
  843. // otherwise, set it to the string "#000000".
  844. return "#000000";
  845. }
  846. return value;
  847. }
  848. // https://html.spec.whatwg.org/multipage/input.html#the-input-element:concept-form-reset-control
  849. void HTMLInputElement::reset_algorithm()
  850. {
  851. // The reset algorithm for input elements is to set the dirty value flag and dirty checkedness flag back to false,
  852. m_dirty_value = false;
  853. m_dirty_checkedness = false;
  854. // set the value of the element to the value of the value content attribute, if there is one, or the empty string otherwise,
  855. m_value = get_attribute(AttributeNames::value).value_or(String {}).to_deprecated_string();
  856. // set the checkedness of the element to true if the element has a checked content attribute and false if it does not,
  857. m_checked = has_attribute(AttributeNames::checked);
  858. // empty the list of selected files,
  859. m_selected_files = FileAPI::FileList::create(realm(), {});
  860. // and then invoke the value sanitization algorithm, if the type attribute's current state defines one.
  861. m_value = value_sanitization_algorithm(m_value);
  862. if (m_text_node) {
  863. m_text_node->set_data(MUST(String::from_deprecated_string(m_value)));
  864. update_placeholder_visibility();
  865. }
  866. if (type_state() == TypeAttributeState::Color && m_color_well_element)
  867. MUST(m_color_well_element->style_for_bindings()->set_property(CSS::PropertyID::BackgroundColor, m_value));
  868. }
  869. void HTMLInputElement::form_associated_element_was_inserted()
  870. {
  871. create_shadow_tree_if_needed();
  872. }
  873. // https://html.spec.whatwg.org/multipage/input.html#radio-button-group
  874. static bool is_in_same_radio_button_group(HTML::HTMLInputElement const& a, HTML::HTMLInputElement const& b)
  875. {
  876. auto non_empty_equals = [](auto const& value_a, auto const& value_b) {
  877. return !value_a.is_empty() && value_a == value_b;
  878. };
  879. // The radio button group that contains an input element a also contains all the
  880. // other input elements b that fulfill all of the following conditions:
  881. return (
  882. // - Both a and b are in the same tree.
  883. // - The input element b's type attribute is in the Radio Button state.
  884. a.type_state() == b.type_state()
  885. && b.type_state() == HTMLInputElement::TypeAttributeState::RadioButton
  886. // - Either a and b have the same form owner, or they both have no form owner.
  887. && a.form() == b.form()
  888. // - They both have a name attribute, their name attributes are not empty, and the
  889. // value of a's name attribute equals the value of b's name attribute.
  890. && a.has_attribute(HTML::AttributeNames::name)
  891. && b.has_attribute(HTML::AttributeNames::name)
  892. && non_empty_equals(a.name(), b.name()));
  893. }
  894. // https://html.spec.whatwg.org/multipage/input.html#radio-button-state-(type=radio)
  895. void HTMLInputElement::set_checked_within_group()
  896. {
  897. if (checked())
  898. return;
  899. set_checked(true, ChangeSource::User);
  900. // No point iterating the tree if we have an empty name.
  901. auto name = this->name();
  902. if (name.is_empty())
  903. return;
  904. document().for_each_in_inclusive_subtree_of_type<HTML::HTMLInputElement>([&](auto& element) {
  905. if (element.checked() && &element != this && is_in_same_radio_button_group(*this, element))
  906. element.set_checked(false, ChangeSource::User);
  907. return IterationDecision::Continue;
  908. });
  909. }
  910. // https://html.spec.whatwg.org/multipage/input.html#the-input-element:legacy-pre-activation-behavior
  911. void HTMLInputElement::legacy_pre_activation_behavior()
  912. {
  913. m_before_legacy_pre_activation_behavior_checked = checked();
  914. m_before_legacy_pre_activation_behavior_indeterminate = indeterminate();
  915. // 1. If this element's type attribute is in the Checkbox state, then set
  916. // this element's checkedness to its opposite value (i.e. true if it is
  917. // false, false if it is true) and set this element's indeterminate IDL
  918. // attribute to false.
  919. if (type_state() == TypeAttributeState::Checkbox) {
  920. set_checked(!checked(), ChangeSource::User);
  921. set_indeterminate(false);
  922. }
  923. // 2. If this element's type attribute is in the Radio Button state, then
  924. // get a reference to the element in this element's radio button group that
  925. // has its checkedness set to true, if any, and then set this element's
  926. // checkedness to true.
  927. if (type_state() == TypeAttributeState::RadioButton) {
  928. DeprecatedString name = this->name();
  929. document().for_each_in_inclusive_subtree_of_type<HTML::HTMLInputElement>([&](auto& element) {
  930. if (element.checked() && is_in_same_radio_button_group(*this, element)) {
  931. m_legacy_pre_activation_behavior_checked_element_in_group = &element;
  932. return IterationDecision::Break;
  933. }
  934. return IterationDecision::Continue;
  935. });
  936. set_checked_within_group();
  937. }
  938. }
  939. // https://html.spec.whatwg.org/multipage/input.html#the-input-element:legacy-canceled-activation-behavior
  940. void HTMLInputElement::legacy_cancelled_activation_behavior()
  941. {
  942. // 1. If the element's type attribute is in the Checkbox state, then set the
  943. // element's checkedness and the element's indeterminate IDL attribute back
  944. // to the values they had before the legacy-pre-activation behavior was run.
  945. if (type_state() == TypeAttributeState::Checkbox) {
  946. set_checked(m_before_legacy_pre_activation_behavior_checked, ChangeSource::Programmatic);
  947. set_indeterminate(m_before_legacy_pre_activation_behavior_indeterminate);
  948. }
  949. // 2. If this element 's type attribute is in the Radio Button state, then
  950. // if the element to which a reference was obtained in the
  951. // legacy-pre-activation behavior, if any, is still in what is now this
  952. // element' s radio button group, if it still has one, and if so, setting
  953. // that element 's checkedness to true; or else, if there was no such
  954. // element, or that element is no longer in this element' s radio button
  955. // group, or if this element no longer has a radio button group, setting
  956. // this element's checkedness to false.
  957. if (type_state() == TypeAttributeState::RadioButton) {
  958. bool did_reselect_previous_element = false;
  959. if (m_legacy_pre_activation_behavior_checked_element_in_group) {
  960. auto& element_in_group = *m_legacy_pre_activation_behavior_checked_element_in_group;
  961. if (is_in_same_radio_button_group(*this, element_in_group)) {
  962. element_in_group.set_checked_within_group();
  963. did_reselect_previous_element = true;
  964. }
  965. m_legacy_pre_activation_behavior_checked_element_in_group = nullptr;
  966. }
  967. if (!did_reselect_previous_element)
  968. set_checked(false, ChangeSource::User);
  969. }
  970. }
  971. void HTMLInputElement::legacy_cancelled_activation_behavior_was_not_called()
  972. {
  973. m_legacy_pre_activation_behavior_checked_element_in_group = nullptr;
  974. }
  975. // https://html.spec.whatwg.org/multipage/interaction.html#dom-tabindex
  976. i32 HTMLInputElement::default_tab_index_value() const
  977. {
  978. // See the base function for the spec comments.
  979. return 0;
  980. }
  981. // https://html.spec.whatwg.org/multipage/input.html#dom-input-valueasnumber
  982. WebIDL::ExceptionOr<double> HTMLInputElement::value_as_number() const
  983. {
  984. // On getting, if the valueAsNumber attribute does not apply, as defined for the input element's type attribute's current state, then return a Not-a-Number (NaN) value.
  985. if (type_state() != TypeAttributeState::Date || type_state() != TypeAttributeState::Month || type_state() != TypeAttributeState::Week || type_state() != TypeAttributeState::Time || type_state() != TypeAttributeState::LocalDateAndTime || type_state() != TypeAttributeState::Number || type_state() != TypeAttributeState::Range)
  986. return NAN;
  987. // Otherwise, run the algorithm to convert a string to a number defined for that state to the element's value; if the algorithm returned a number, then return it, otherwise, return a Not-a-Number (NaN) value.
  988. return value().to_double().value_or(NAN);
  989. }
  990. // https://html.spec.whatwg.org/multipage/input.html#dom-input-valueasnumber
  991. WebIDL::ExceptionOr<void> HTMLInputElement::set_value_as_number(double value)
  992. {
  993. // On setting, if the new value is infinite, then throw a TypeError exception.
  994. if (!isfinite(value))
  995. return WebIDL::SimpleException { WebIDL::SimpleExceptionType::TypeError, "valueAsNumber: Value is infinite"sv };
  996. // Otherwise, if the valueAsNumber attribute does not apply, as defined for the input element's type attribute's current state, then throw an "InvalidStateError" DOMException.
  997. if (type_state() != TypeAttributeState::Date || type_state() != TypeAttributeState::Month || type_state() != TypeAttributeState::Week || type_state() != TypeAttributeState::Time || type_state() != TypeAttributeState::LocalDateAndTime || type_state() != TypeAttributeState::Number || type_state() != TypeAttributeState::Range)
  998. return WebIDL::InvalidStateError::create(realm(), "valueAsNumber: Invalid input type used"_fly_string);
  999. // Otherwise, if the new value is a Not-a-Number (NaN) value, then set the value of the element to the empty string.
  1000. if (value == NAN) {
  1001. m_value = "";
  1002. return {};
  1003. }
  1004. // Otherwise, run the algorithm to convert a number to a string, as defined for that state, on the new value, and set the value of the element to the resulting string.
  1005. m_value = DeprecatedString::number(value);
  1006. return {};
  1007. }
  1008. // https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#dom-cva-checkvalidity
  1009. WebIDL::ExceptionOr<bool> HTMLInputElement::check_validity()
  1010. {
  1011. dbgln("(STUBBED) HTMLInputElement::check_validity(). Called on: {}", debug_description());
  1012. return true;
  1013. }
  1014. // https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#dom-cva-reportvalidity
  1015. WebIDL::ExceptionOr<bool> HTMLInputElement::report_validity()
  1016. {
  1017. dbgln("(STUBBED) HTMLInputElement::report_validity(). Called on: {}", debug_description());
  1018. return true;
  1019. }
  1020. // https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#dom-cva-setcustomvalidity
  1021. void HTMLInputElement::set_custom_validity(String const& error)
  1022. {
  1023. dbgln("(STUBBED) HTMLInputElement::set_custom_validity(error={}). Called on: {}", error, debug_description());
  1024. return;
  1025. }
  1026. // https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#dom-textarea/input-select
  1027. WebIDL::ExceptionOr<void> HTMLInputElement::select()
  1028. {
  1029. dbgln("(STUBBED) HTMLInputElement::select(). Called on: {}", debug_description());
  1030. return {};
  1031. }
  1032. // https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#dom-textarea/input-setselectionrange
  1033. WebIDL::ExceptionOr<void> HTMLInputElement::set_selection_range(u32 start, u32 end, Optional<String> const& direction)
  1034. {
  1035. dbgln("(STUBBED) HTMLInputElement::set_selection_range(start={}, end={}, direction='{}'). Called on: {}", start, end, direction, debug_description());
  1036. return {};
  1037. }
  1038. Optional<ARIA::Role> HTMLInputElement::default_role() const
  1039. {
  1040. // https://www.w3.org/TR/html-aria/#el-input-button
  1041. if (type_state() == TypeAttributeState::Button)
  1042. return ARIA::Role::button;
  1043. // https://www.w3.org/TR/html-aria/#el-input-checkbox
  1044. if (type_state() == TypeAttributeState::Checkbox)
  1045. return ARIA::Role::checkbox;
  1046. // https://www.w3.org/TR/html-aria/#el-input-email
  1047. if (type_state() == TypeAttributeState::Email && !has_attribute(AttributeNames::list))
  1048. return ARIA::Role::textbox;
  1049. // https://www.w3.org/TR/html-aria/#el-input-image
  1050. if (type_state() == TypeAttributeState::ImageButton)
  1051. return ARIA::Role::button;
  1052. // https://www.w3.org/TR/html-aria/#el-input-number
  1053. if (type_state() == TypeAttributeState::Number)
  1054. return ARIA::Role::spinbutton;
  1055. // https://www.w3.org/TR/html-aria/#el-input-radio
  1056. if (type_state() == TypeAttributeState::RadioButton)
  1057. return ARIA::Role::radio;
  1058. // https://www.w3.org/TR/html-aria/#el-input-range
  1059. if (type_state() == TypeAttributeState::Range)
  1060. return ARIA::Role::slider;
  1061. // https://www.w3.org/TR/html-aria/#el-input-reset
  1062. if (type_state() == TypeAttributeState::ResetButton)
  1063. return ARIA::Role::button;
  1064. // https://www.w3.org/TR/html-aria/#el-input-text-list
  1065. if ((type_state() == TypeAttributeState::Text
  1066. || type_state() == TypeAttributeState::Search
  1067. || type_state() == TypeAttributeState::Telephone
  1068. || type_state() == TypeAttributeState::URL
  1069. || type_state() == TypeAttributeState::Email)
  1070. && has_attribute(AttributeNames::list))
  1071. return ARIA::Role::combobox;
  1072. // https://www.w3.org/TR/html-aria/#el-input-search
  1073. if (type_state() == TypeAttributeState::Search && !has_attribute(AttributeNames::list))
  1074. return ARIA::Role::textbox;
  1075. // https://www.w3.org/TR/html-aria/#el-input-submit
  1076. if (type_state() == TypeAttributeState::SubmitButton)
  1077. return ARIA::Role::button;
  1078. // https://www.w3.org/TR/html-aria/#el-input-tel
  1079. if (type_state() == TypeAttributeState::Telephone)
  1080. return ARIA::Role::textbox;
  1081. // https://www.w3.org/TR/html-aria/#el-input-text
  1082. if (type_state() == TypeAttributeState::Text && !has_attribute(AttributeNames::list))
  1083. return ARIA::Role::textbox;
  1084. // https://www.w3.org/TR/html-aria/#el-input-url
  1085. if (type_state() == TypeAttributeState::URL && !has_attribute(AttributeNames::list))
  1086. return ARIA::Role::textbox;
  1087. // https://www.w3.org/TR/html-aria/#el-input-color
  1088. // https://www.w3.org/TR/html-aria/#el-input-date
  1089. // https://www.w3.org/TR/html-aria/#el-input-datetime-local
  1090. // https://www.w3.org/TR/html-aria/#el-input-file
  1091. // https://www.w3.org/TR/html-aria/#el-input-hidden
  1092. // https://www.w3.org/TR/html-aria/#el-input-month
  1093. // https://www.w3.org/TR/html-aria/#el-input-password
  1094. // https://www.w3.org/TR/html-aria/#el-input-time
  1095. // https://www.w3.org/TR/html-aria/#el-input-week
  1096. return {};
  1097. }
  1098. bool HTMLInputElement::is_button() const
  1099. {
  1100. // https://html.spec.whatwg.org/multipage/input.html#submit-button-state-(type=submit):concept-button
  1101. // https://html.spec.whatwg.org/multipage/input.html#image-button-state-(type=image):concept-button
  1102. // https://html.spec.whatwg.org/multipage/input.html#reset-button-state-(type=reset):concept-button
  1103. // https://html.spec.whatwg.org/multipage/input.html#button-state-(type=button):concept-button
  1104. return type_state() == TypeAttributeState::SubmitButton
  1105. || type_state() == TypeAttributeState::ImageButton
  1106. || type_state() == TypeAttributeState::ResetButton
  1107. || type_state() == TypeAttributeState::Button;
  1108. }
  1109. bool HTMLInputElement::is_submit_button() const
  1110. {
  1111. // https://html.spec.whatwg.org/multipage/input.html#submit-button-state-(type=submit):concept-submit-button
  1112. // https://html.spec.whatwg.org/multipage/input.html#image-button-state-(type=image):concept-submit-button
  1113. return type_state() == TypeAttributeState::SubmitButton
  1114. || type_state() == TypeAttributeState::ImageButton;
  1115. }
  1116. }