HTMLInputElement.cpp 44 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989
  1. /*
  2. * Copyright (c) 2018-2022, Andreas Kling <kling@serenityos.org>
  3. * Copyright (c) 2022, Adam Hodgen <ant1441@gmail.com>
  4. * Copyright (c) 2022, Andrew Kaster <akaster@serenityos.org>
  5. *
  6. * SPDX-License-Identifier: BSD-2-Clause
  7. */
  8. #include <LibWeb/CSS/StyleValues/IdentifierStyleValue.h>
  9. #include <LibWeb/DOM/Document.h>
  10. #include <LibWeb/DOM/Event.h>
  11. #include <LibWeb/DOM/ShadowRoot.h>
  12. #include <LibWeb/DOM/Text.h>
  13. #include <LibWeb/HTML/BrowsingContext.h>
  14. #include <LibWeb/HTML/EventNames.h>
  15. #include <LibWeb/HTML/HTMLFormElement.h>
  16. #include <LibWeb/HTML/HTMLInputElement.h>
  17. #include <LibWeb/HTML/Scripting/Environments.h>
  18. #include <LibWeb/Infra/CharacterTypes.h>
  19. #include <LibWeb/Layout/BlockContainer.h>
  20. #include <LibWeb/Layout/ButtonBox.h>
  21. #include <LibWeb/Layout/CheckBox.h>
  22. #include <LibWeb/Layout/RadioButton.h>
  23. #include <LibWeb/WebIDL/DOMException.h>
  24. #include <LibWeb/WebIDL/ExceptionOr.h>
  25. namespace Web::HTML {
  26. HTMLInputElement::HTMLInputElement(DOM::Document& document, DOM::QualifiedName qualified_name)
  27. : HTMLElement(document, move(qualified_name))
  28. , m_value(DeprecatedString::empty())
  29. {
  30. activation_behavior = [this](auto&) {
  31. // The activation behavior for input elements are these steps:
  32. // FIXME: 1. If this element is not mutable and is not in the Checkbox state and is not in the Radio state, then return.
  33. // 2. Run this element's input activation behavior, if any, and do nothing otherwise.
  34. run_input_activation_behavior().release_value_but_fixme_should_propagate_errors();
  35. };
  36. }
  37. HTMLInputElement::~HTMLInputElement() = default;
  38. JS::ThrowCompletionOr<void> HTMLInputElement::initialize(JS::Realm& realm)
  39. {
  40. MUST_OR_THROW_OOM(Base::initialize(realm));
  41. set_prototype(&Bindings::ensure_web_prototype<Bindings::HTMLInputElementPrototype>(realm, "HTMLInputElement"));
  42. return {};
  43. }
  44. void HTMLInputElement::visit_edges(Cell::Visitor& visitor)
  45. {
  46. Base::visit_edges(visitor);
  47. visitor.visit(m_text_node.ptr());
  48. visitor.visit(m_legacy_pre_activation_behavior_checked_element_in_group.ptr());
  49. visitor.visit(m_selected_files);
  50. }
  51. JS::GCPtr<Layout::Node> HTMLInputElement::create_layout_node(NonnullRefPtr<CSS::StyleProperties> style)
  52. {
  53. if (type_state() == TypeAttributeState::Hidden)
  54. return nullptr;
  55. if (type_state() == TypeAttributeState::SubmitButton || type_state() == TypeAttributeState::Button || type_state() == TypeAttributeState::ResetButton || type_state() == TypeAttributeState::FileUpload)
  56. return heap().allocate_without_realm<Layout::ButtonBox>(document(), *this, move(style));
  57. if (type_state() == TypeAttributeState::Checkbox)
  58. return heap().allocate_without_realm<Layout::CheckBox>(document(), *this, move(style));
  59. if (type_state() == TypeAttributeState::RadioButton)
  60. return heap().allocate_without_realm<Layout::RadioButton>(document(), *this, move(style));
  61. // AD-HOC: We rewrite `display: inline` to `display: inline-block`.
  62. // This is required for the internal shadow tree to work correctly in layout.
  63. if (style->display().is_inline_outside() && style->display().is_flow_inside())
  64. style->set_property(CSS::PropertyID::Display, CSS::IdentifierStyleValue::create(CSS::ValueID::InlineBlock));
  65. return Element::create_layout_node_for_display_type(document(), style->display(), style, this);
  66. }
  67. void HTMLInputElement::set_checked(bool checked, ChangeSource change_source)
  68. {
  69. if (m_checked == checked)
  70. return;
  71. // The dirty checkedness flag must be initially set to false when the element is created,
  72. // and must be set to true whenever the user interacts with the control in a way that changes the checkedness.
  73. if (change_source == ChangeSource::User)
  74. m_dirty_checkedness = true;
  75. m_checked = checked;
  76. // This element's :checked pseudo-class could be used in a sibling's sibling-selector,
  77. // so we need to invalidate the style of all siblings.
  78. if (parent()) {
  79. parent()->for_each_child([&](auto& child) {
  80. child.invalidate_style();
  81. });
  82. }
  83. }
  84. void HTMLInputElement::set_checked_binding(bool checked)
  85. {
  86. if (type_state() == TypeAttributeState::RadioButton) {
  87. if (checked)
  88. set_checked_within_group();
  89. else
  90. set_checked(false, ChangeSource::Programmatic);
  91. } else {
  92. set_checked(checked, ChangeSource::Programmatic);
  93. }
  94. }
  95. // https://html.spec.whatwg.org/multipage/input.html#dom-input-indeterminate
  96. void HTMLInputElement::set_indeterminate(bool value)
  97. {
  98. // On setting, it must be set to the new value. It has no effect except for changing the appearance of checkbox controls.
  99. m_indeterminate = value;
  100. }
  101. // https://html.spec.whatwg.org/multipage/input.html#dom-input-files
  102. JS::GCPtr<FileAPI::FileList> HTMLInputElement::files()
  103. {
  104. // On getting, if the IDL attribute applies, it must return a FileList object that represents the current selected files.
  105. // The same object must be returned until the list of selected files changes.
  106. // If the IDL attribute does not apply, then it must instead return null.
  107. if (m_type != TypeAttributeState::FileUpload)
  108. return nullptr;
  109. if (!m_selected_files)
  110. m_selected_files = FileAPI::FileList::create(realm(), {}).release_value_but_fixme_should_propagate_errors();
  111. return m_selected_files;
  112. }
  113. // https://html.spec.whatwg.org/multipage/input.html#dom-input-files
  114. void HTMLInputElement::set_files(JS::GCPtr<FileAPI::FileList> files)
  115. {
  116. // 1. If the IDL attribute does not apply or the given value is null, then return.
  117. if (m_type != TypeAttributeState::FileUpload || files == nullptr)
  118. return;
  119. // 2. Replace the element's selected files with the given value.
  120. m_selected_files = files;
  121. }
  122. // https://html.spec.whatwg.org/multipage/input.html#update-the-file-selection
  123. void HTMLInputElement::update_the_file_selection(JS::NonnullGCPtr<FileAPI::FileList> files)
  124. {
  125. // 1. Queue an element task on the user interaction task source given element and the following steps:
  126. queue_an_element_task(Task::Source::UserInteraction, [this, files] {
  127. // 1. Update element's selected files so that it represents the user's selection.
  128. this->set_files(files.ptr());
  129. // 2. Fire an event named input at the input element, with the bubbles and composed attributes initialized to true.
  130. auto input_event = DOM::Event::create(this->realm(), EventNames::input, { .bubbles = true, .composed = true }).release_value_but_fixme_should_propagate_errors();
  131. this->dispatch_event(input_event);
  132. // 3. Fire an event named change at the input element, with the bubbles attribute initialized to true.
  133. auto change_event = DOM::Event::create(this->realm(), EventNames::change, { .bubbles = true }).release_value_but_fixme_should_propagate_errors();
  134. this->dispatch_event(change_event);
  135. });
  136. }
  137. // https://html.spec.whatwg.org/multipage/input.html#show-the-picker,-if-applicable
  138. static void show_the_picker_if_applicable(HTMLInputElement& element)
  139. {
  140. // To show the picker, if applicable for an input element element:
  141. // 1. If element's relevant global object does not have transient activation, then return.
  142. auto& global_object = relevant_global_object(element);
  143. if (!is<HTML::Window>(global_object) || !static_cast<HTML::Window&>(global_object).has_transient_activation())
  144. return;
  145. // FIXME: 2. If element is not mutable, then return.
  146. // 3. If element's type attribute is in the File Upload state, then run these steps in parallel:
  147. if (element.type_state() == HTMLInputElement::TypeAttributeState::FileUpload) {
  148. // NOTE: These steps cannot be fully implemented here, and must be done in the PageClient when the response comes back from the PageHost
  149. // 1. Optionally, wait until any prior execution of this algorithm has terminated.
  150. // 2. Display a prompt to the user requesting that the user specify some files.
  151. // If the multiple attribute is not set on element, there must be no more than one file selected; otherwise, any number may be selected.
  152. // 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.
  153. // 3. Wait for the user to have made their selection.
  154. // 4. If the user dismissed the prompt without changing their selection,
  155. // then queue an element task on the user interaction task source given element to fire an event named cancel at element,
  156. // with the bubbles attribute initialized to true.
  157. // 5. Otherwise, update the file selection for element.
  158. bool const multiple = element.has_attribute(HTML::AttributeNames::multiple);
  159. auto weak_element = element.make_weak_ptr<DOM::EventTarget>();
  160. // FIXME: Pass along accept attribute information https://html.spec.whatwg.org/multipage/input.html#attr-input-accept
  161. // The accept attribute may be specified to provide user agents with a hint of what file types will be accepted.
  162. element.document().browsing_context()->top_level_browsing_context().page()->client().page_did_request_file_picker(weak_element, multiple);
  163. return;
  164. }
  165. // FIXME: show "any relevant user interface" for other type attribute states "in the way [the user agent] normally would"
  166. // 4. Otherwise, the user agent should show any relevant user interface for selecting a value for element,
  167. // 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.)
  168. // If such a user interface is shown, it must respect the requirements stated in the relevant parts of the specification for how element
  169. // behaves given its type attribute state. (For example, various sections describe restrictions on the resulting value string.)
  170. // This step can have side effects, such as closing other pickers that were previously shown by this algorithm.
  171. // (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.)
  172. }
  173. // https://html.spec.whatwg.org/multipage/input.html#dom-input-showpicker
  174. WebIDL::ExceptionOr<void> HTMLInputElement::show_picker()
  175. {
  176. // The showPicker() method steps are:
  177. // FIXME: 1. If this is not mutable, then throw an "InvalidStateError" DOMException.
  178. // 2. If this's relevant settings object's origin is not same origin with this's relevant settings object's top-level origin,
  179. // and this's type attribute is not in the File Upload state or Color state, then throw a "SecurityError" DOMException.
  180. // NOTE: File and Color inputs are exempted from this check for historical reason: their input activation behavior also shows their pickers,
  181. // and has never been guarded by an origin check.
  182. if (!relevant_settings_object(*this).origin().is_same_origin(relevant_settings_object(*this).top_level_origin)
  183. && m_type != TypeAttributeState::FileUpload && m_type != TypeAttributeState::Color) {
  184. return WebIDL::SecurityError::create(realm(), "Cross origin pickers are not allowed"sv);
  185. }
  186. // 3. If this's relevant global object does not have transient activation, then throw a "NotAllowedError" DOMException.
  187. // FIXME: The global object we get here should probably not need casted to Window to check for transient activation
  188. auto& global_object = relevant_global_object(*this);
  189. if (!is<HTML::Window>(global_object) || !static_cast<HTML::Window&>(global_object).has_transient_activation()) {
  190. return WebIDL::NotAllowedError::create(realm(), "Too long since user activation to show picker"sv);
  191. }
  192. // 4. Show the picker, if applicable, for this.
  193. show_the_picker_if_applicable(*this);
  194. return {};
  195. }
  196. // https://html.spec.whatwg.org/multipage/input.html#input-activation-behavior
  197. ErrorOr<void> HTMLInputElement::run_input_activation_behavior()
  198. {
  199. if (type_state() == TypeAttributeState::Checkbox || type_state() == TypeAttributeState::RadioButton) {
  200. // 1. If the element is not connected, then return.
  201. if (!is_connected())
  202. return {};
  203. // 2. Fire an event named input at the element with the bubbles and composed attributes initialized to true.
  204. auto input_event = DOM::Event::create(realm(), HTML::EventNames::input).release_value_but_fixme_should_propagate_errors();
  205. input_event->set_bubbles(true);
  206. input_event->set_composed(true);
  207. dispatch_event(input_event);
  208. // 3. Fire an event named change at the element with the bubbles attribute initialized to true.
  209. auto change_event = DOM::Event::create(realm(), HTML::EventNames::change).release_value_but_fixme_should_propagate_errors();
  210. change_event->set_bubbles(true);
  211. dispatch_event(*change_event);
  212. } else if (type_state() == TypeAttributeState::SubmitButton) {
  213. JS::GCPtr<HTMLFormElement> form;
  214. // 1. If the element does not have a form owner, then return.
  215. if (!(form = this->form()))
  216. return {};
  217. // 2. If the element's node document is not fully active, then return.
  218. if (!document().is_fully_active())
  219. return {};
  220. // 3. Submit the form owner from the element.
  221. TRY(form->submit_form(this));
  222. } else if (type_state() == TypeAttributeState::FileUpload) {
  223. show_the_picker_if_applicable(*this);
  224. } else {
  225. dispatch_event(DOM::Event::create(realm(), EventNames::change).release_value_but_fixme_should_propagate_errors());
  226. }
  227. return {};
  228. }
  229. void HTMLInputElement::did_edit_text_node(Badge<BrowsingContext>)
  230. {
  231. // 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.
  232. m_value = value_sanitization_algorithm(m_text_node->data());
  233. m_dirty_value = true;
  234. // NOTE: This is a bit ad-hoc, but basically implements part of "4.10.5.5 Common event behaviors"
  235. // https://html.spec.whatwg.org/multipage/input.html#common-input-element-events
  236. queue_an_element_task(HTML::Task::Source::UserInteraction, [this] {
  237. auto input_event = DOM::Event::create(realm(), HTML::EventNames::input).release_value_but_fixme_should_propagate_errors();
  238. input_event->set_bubbles(true);
  239. input_event->set_composed(true);
  240. dispatch_event(*input_event);
  241. // FIXME: This should only fire when the input is "committed", whatever that means.
  242. auto change_event = DOM::Event::create(realm(), HTML::EventNames::change).release_value_but_fixme_should_propagate_errors();
  243. change_event->set_bubbles(true);
  244. dispatch_event(change_event);
  245. });
  246. }
  247. DeprecatedString HTMLInputElement::value() const
  248. {
  249. // https://html.spec.whatwg.org/multipage/input.html#dom-input-value-filename
  250. if (type_state() == TypeAttributeState::FileUpload) {
  251. // NOTE: This "fakepath" requirement is a sad accident of history. See the example in the File Upload state section for more information.
  252. // NOTE: Since path components are not permitted in filenames in the list of selected files, the "\fakepath\" cannot be mistaken for a path component.
  253. if (m_selected_files && m_selected_files->item(0))
  254. return DeprecatedString::formatted("C:\\fakepath\\{}", m_selected_files->item(0)->name());
  255. return "C:\\fakepath\\"sv;
  256. }
  257. // https://html.spec.whatwg.org/multipage/input.html#dom-input-value-value
  258. // Return the current value of the element.
  259. return m_value;
  260. }
  261. WebIDL::ExceptionOr<void> HTMLInputElement::set_value(DeprecatedString value)
  262. {
  263. // https://html.spec.whatwg.org/multipage/input.html#dom-input-value-filename
  264. if (type_state() == TypeAttributeState::FileUpload) {
  265. // On setting, if the new value is the empty string, empty the list of selected files; otherwise, throw an "InvalidStateError" DOMException.
  266. if (value != DeprecatedString::empty())
  267. return WebIDL::InvalidStateError::create(realm(), "Setting value of input type file to non-empty string"sv);
  268. m_selected_files = nullptr;
  269. return {};
  270. }
  271. // https://html.spec.whatwg.org/multipage/input.html#dom-input-value-value
  272. // 1. Let oldValue be the element's value.
  273. auto old_value = move(m_value);
  274. // 2. Set the element's value to the new value.
  275. // NOTE: This is done as part of step 4 below.
  276. // 3. Set the element's dirty value flag to true.
  277. m_dirty_value = true;
  278. // 4. Invoke the value sanitization algorithm, if the element's type attribute's current state defines one.
  279. m_value = value_sanitization_algorithm(move(value));
  280. // 5. If the element's value (after applying the value sanitization algorithm) is different from oldValue,
  281. // and the element has a text entry cursor position, move the text entry cursor position to the end of the
  282. // text control, unselecting any selected text and resetting the selection direction to "none".
  283. if (m_text_node && (m_value != old_value))
  284. m_text_node->set_data(m_value);
  285. return {};
  286. }
  287. // https://html.spec.whatwg.org/multipage/input.html#the-input-element:attr-input-placeholder-3
  288. static bool is_allowed_to_have_placeholder(HTML::HTMLInputElement::TypeAttributeState state)
  289. {
  290. switch (state) {
  291. case HTML::HTMLInputElement::TypeAttributeState::Text:
  292. case HTML::HTMLInputElement::TypeAttributeState::Search:
  293. case HTML::HTMLInputElement::TypeAttributeState::URL:
  294. case HTML::HTMLInputElement::TypeAttributeState::Telephone:
  295. case HTML::HTMLInputElement::TypeAttributeState::Email:
  296. case HTML::HTMLInputElement::TypeAttributeState::Password:
  297. case HTML::HTMLInputElement::TypeAttributeState::Number:
  298. return true;
  299. default:
  300. return false;
  301. }
  302. }
  303. // https://html.spec.whatwg.org/multipage/input.html#attr-input-placeholder
  304. Optional<DeprecatedString> HTMLInputElement::placeholder_value() const
  305. {
  306. if (!m_text_node || !m_text_node->data().is_empty())
  307. return {};
  308. if (!is_allowed_to_have_placeholder(type_state()))
  309. return {};
  310. if (!has_attribute(HTML::AttributeNames::placeholder))
  311. return {};
  312. auto placeholder = attribute(HTML::AttributeNames::placeholder);
  313. if (placeholder.contains('\r') || placeholder.contains('\n')) {
  314. StringBuilder builder;
  315. for (auto ch : placeholder) {
  316. if (ch != '\r' && ch != '\n')
  317. builder.append(ch);
  318. }
  319. placeholder = builder.to_deprecated_string();
  320. }
  321. return placeholder;
  322. }
  323. void HTMLInputElement::create_shadow_tree_if_needed()
  324. {
  325. if (shadow_root_internal())
  326. return;
  327. // FIXME: This could be better factored. Everything except the below types becomes a text input.
  328. switch (type_state()) {
  329. case TypeAttributeState::RadioButton:
  330. case TypeAttributeState::Checkbox:
  331. case TypeAttributeState::Button:
  332. case TypeAttributeState::SubmitButton:
  333. case TypeAttributeState::ResetButton:
  334. case TypeAttributeState::ImageButton:
  335. return;
  336. default:
  337. break;
  338. }
  339. auto shadow_root = heap().allocate<DOM::ShadowRoot>(realm(), document(), *this, Bindings::ShadowRootMode::Closed).release_allocated_value_but_fixme_should_propagate_errors();
  340. auto initial_value = m_value;
  341. if (initial_value.is_null())
  342. initial_value = DeprecatedString::empty();
  343. auto element = document().create_element(HTML::TagNames::div).release_value();
  344. MUST(element->set_attribute(HTML::AttributeNames::style, "white-space: pre; padding-top: 1px; padding-bottom: 1px; padding-left: 2px; padding-right: 2px; height: 1lh;"));
  345. m_text_node = heap().allocate<DOM::Text>(realm(), document(), initial_value).release_allocated_value_but_fixme_should_propagate_errors();
  346. m_text_node->set_always_editable(m_type != TypeAttributeState::FileUpload);
  347. m_text_node->set_owner_input_element({}, *this);
  348. if (m_type == TypeAttributeState::Password)
  349. m_text_node->set_is_password_input({}, true);
  350. MUST(element->append_child(*m_text_node));
  351. MUST(shadow_root->append_child(element));
  352. set_shadow_root(shadow_root);
  353. }
  354. void HTMLInputElement::did_receive_focus()
  355. {
  356. auto* browsing_context = document().browsing_context();
  357. if (!browsing_context)
  358. return;
  359. if (!m_text_node)
  360. return;
  361. browsing_context->set_cursor_position(DOM::Position { *m_text_node, 0 });
  362. }
  363. void HTMLInputElement::parse_attribute(DeprecatedFlyString const& name, DeprecatedString const& value)
  364. {
  365. HTMLElement::parse_attribute(name, value);
  366. if (name == HTML::AttributeNames::checked) {
  367. // When the checked content attribute is added, if the control does not have dirty checkedness,
  368. // the user agent must set the checkedness of the element to true
  369. if (!m_dirty_checkedness)
  370. set_checked(true, ChangeSource::Programmatic);
  371. } else if (name == HTML::AttributeNames::type) {
  372. m_type = parse_type_attribute(value);
  373. } else if (name == HTML::AttributeNames::value) {
  374. if (!m_dirty_value)
  375. m_value = value_sanitization_algorithm(value);
  376. }
  377. }
  378. HTMLInputElement::TypeAttributeState HTMLInputElement::parse_type_attribute(StringView type)
  379. {
  380. #define __ENUMERATE_HTML_INPUT_TYPE_ATTRIBUTE(keyword, state) \
  381. if (type.equals_ignoring_ascii_case(#keyword##sv)) \
  382. return HTMLInputElement::TypeAttributeState::state;
  383. ENUMERATE_HTML_INPUT_TYPE_ATTRIBUTES
  384. #undef __ENUMERATE_HTML_INPUT_TYPE_ATTRIBUTE
  385. // The missing value default and the invalid value default are the Text state.
  386. // https://html.spec.whatwg.org/multipage/input.html#the-input-element:missing-value-default
  387. // https://html.spec.whatwg.org/multipage/input.html#the-input-element:invalid-value-default
  388. return HTMLInputElement::TypeAttributeState::Text;
  389. }
  390. void HTMLInputElement::did_remove_attribute(DeprecatedFlyString const& name)
  391. {
  392. HTMLElement::did_remove_attribute(name);
  393. if (name == HTML::AttributeNames::checked) {
  394. // When the checked content attribute is removed, if the control does not have dirty checkedness,
  395. // the user agent must set the checkedness of the element to false.
  396. if (!m_dirty_checkedness)
  397. set_checked(false, ChangeSource::Programmatic);
  398. } else if (name == HTML::AttributeNames::value) {
  399. if (!m_dirty_value)
  400. m_value = DeprecatedString::empty();
  401. }
  402. }
  403. DeprecatedString HTMLInputElement::type() const
  404. {
  405. switch (m_type) {
  406. #define __ENUMERATE_HTML_INPUT_TYPE_ATTRIBUTE(keyword, state) \
  407. case TypeAttributeState::state: \
  408. return #keyword##sv;
  409. ENUMERATE_HTML_INPUT_TYPE_ATTRIBUTES
  410. #undef __ENUMERATE_HTML_INPUT_TYPE_ATTRIBUTE
  411. }
  412. VERIFY_NOT_REACHED();
  413. }
  414. void HTMLInputElement::set_type(DeprecatedString const& type)
  415. {
  416. MUST(set_attribute(HTML::AttributeNames::type, type));
  417. }
  418. // https://html.spec.whatwg.org/multipage/common-microsyntaxes.html#valid-simple-colour
  419. static bool is_valid_simple_color(DeprecatedString const& value)
  420. {
  421. // if it is exactly seven characters long,
  422. if (value.length() != 7)
  423. return false;
  424. // and the first character is a U+0023 NUMBER SIGN character (#),
  425. if (!value.starts_with('#'))
  426. return false;
  427. // and the remaining six characters are all ASCII hex digits
  428. for (size_t i = 1; i < value.length(); i++)
  429. if (!is_ascii_hex_digit(value[i]))
  430. return false;
  431. return true;
  432. }
  433. // https://html.spec.whatwg.org/multipage/common-microsyntaxes.html#valid-time-string
  434. static bool is_valid_time_string(DeprecatedString const& value)
  435. {
  436. // 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:
  437. // 1. Two ASCII digits, representing hour, in the range 0 ≤ hour ≤ 23
  438. // 2. A U+003A COLON character (:)
  439. // 3. Two ASCII digits, representing minute, in the range 0 ≤ minute ≤ 59
  440. // 4. If second is nonzero, or optionally if second is zero:
  441. // 1. A U+003A COLON character (:)
  442. // 2. Two ASCII digits, representing the integer part of second, in the range 0 ≤ s ≤ 59
  443. // 3. If second is not an integer, or optionally if second is an integer:
  444. // 1. A U+002E FULL STOP character (.)
  445. // 2. One, two, or three ASCII digits, representing the fractional part of second
  446. auto parts = value.split(':');
  447. if (parts.size() != 2 || parts.size() != 3)
  448. return false;
  449. if (parts[0].length() != 2)
  450. return false;
  451. auto hour = (parse_ascii_digit(parts[0][0]) * 10) + parse_ascii_digit(parts[0][1]);
  452. if (hour > 23)
  453. return false;
  454. if (parts[1].length() != 2)
  455. return false;
  456. auto minute = (parse_ascii_digit(parts[1][0]) * 10) + parse_ascii_digit(parts[1][1]);
  457. if (minute > 59)
  458. return false;
  459. if (parts.size() == 2)
  460. return true;
  461. if (parts[2].length() < 2)
  462. return false;
  463. auto second = (parse_ascii_digit(parts[2][0]) * 10) + parse_ascii_digit(parts[2][1]);
  464. if (second > 59)
  465. return false;
  466. if (parts[2].length() == 2)
  467. return true;
  468. auto second_parts = parts[2].split('.');
  469. if (second_parts.size() != 2)
  470. return false;
  471. if (second_parts[1].length() < 1 || second_parts[1].length() > 3)
  472. return false;
  473. for (auto digit : second_parts[1])
  474. if (!is_ascii_digit(digit))
  475. return false;
  476. return true;
  477. }
  478. // https://html.spec.whatwg.org/multipage/common-microsyntaxes.html#week-number-of-the-last-day
  479. static u32 week_number_of_the_last_day(u64)
  480. {
  481. // FIXME: sometimes return 53 (!)
  482. // https://html.spec.whatwg.org/multipage/common-microsyntaxes.html#weeks
  483. return 52;
  484. }
  485. // https://html.spec.whatwg.org/multipage/common-microsyntaxes.html#valid-week-string
  486. static bool is_valid_week_string(DeprecatedString const& value)
  487. {
  488. // 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:
  489. // 1. Four or more ASCII digits, representing year, where year > 0
  490. // 2. A U+002D HYPHEN-MINUS character (-)
  491. // 3. A U+0057 LATIN CAPITAL LETTER W character (W)
  492. // 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
  493. auto parts = value.split('-');
  494. if (parts.size() != 2)
  495. return false;
  496. if (parts[0].length() < 4)
  497. return false;
  498. for (auto digit : parts[0])
  499. if (!is_ascii_digit(digit))
  500. return false;
  501. if (parts[1].length() != 3)
  502. return false;
  503. if (!parts[1].starts_with('W'))
  504. return false;
  505. if (!is_ascii_digit(parts[1][1]))
  506. return false;
  507. if (!is_ascii_digit(parts[1][2]))
  508. return false;
  509. u64 year = 0;
  510. for (auto d : parts[0]) {
  511. year *= 10;
  512. year += parse_ascii_digit(d);
  513. }
  514. auto week = (parse_ascii_digit(parts[1][1]) * 10) + parse_ascii_digit(parts[1][2]);
  515. return week >= 1 && week <= week_number_of_the_last_day(year);
  516. }
  517. // https://html.spec.whatwg.org/multipage/common-microsyntaxes.html#valid-month-string
  518. static bool is_valid_month_string(DeprecatedString const& value)
  519. {
  520. // 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:
  521. // 1. Four or more ASCII digits, representing year, where year > 0
  522. // 2. A U+002D HYPHEN-MINUS character (-)
  523. // 3. Two ASCII digits, representing the month month, in the range 1 ≤ month ≤ 12
  524. auto parts = value.split('-');
  525. if (parts.size() != 2)
  526. return false;
  527. if (parts[0].length() < 4)
  528. return false;
  529. for (auto digit : parts[0])
  530. if (!is_ascii_digit(digit))
  531. return false;
  532. if (parts[1].length() != 2)
  533. return false;
  534. if (!is_ascii_digit(parts[1][0]))
  535. return false;
  536. if (!is_ascii_digit(parts[1][1]))
  537. return false;
  538. auto month = (parse_ascii_digit(parts[1][0]) * 10) + parse_ascii_digit(parts[1][1]);
  539. return month >= 1 && month <= 12;
  540. }
  541. // https://html.spec.whatwg.org/multipage/common-microsyntaxes.html#valid-date-string
  542. static bool is_valid_date_string(DeprecatedString const& value)
  543. {
  544. // 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:
  545. // 1. A valid month string, representing year and month
  546. // 2. A U+002D HYPHEN-MINUS character (-)
  547. // 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
  548. auto parts = value.split('-');
  549. if (parts.size() != 3)
  550. return false;
  551. if (!is_valid_month_string(DeprecatedString::formatted("{}-{}", parts[0], parts[1])))
  552. return false;
  553. if (parts[2].length() != 2)
  554. return false;
  555. i64 year = 0;
  556. for (auto d : parts[0]) {
  557. year *= 10;
  558. year += parse_ascii_digit(d);
  559. }
  560. auto month = (parse_ascii_digit(parts[1][0]) * 10) + parse_ascii_digit(parts[1][1]);
  561. i64 day = (parse_ascii_digit(parts[2][0]) * 10) + parse_ascii_digit(parts[2][1]);
  562. return day >= 1 && day <= AK::days_in_month(year, month);
  563. }
  564. // https://html.spec.whatwg.org/multipage/common-microsyntaxes.html#valid-local-date-and-time-string
  565. static bool is_valid_local_date_and_time_string(DeprecatedString const& value)
  566. {
  567. auto parts_split_by_T = value.split('T');
  568. if (parts_split_by_T.size() == 2)
  569. return is_valid_date_string(parts_split_by_T[0]) && is_valid_time_string(parts_split_by_T[1]);
  570. auto parts_split_by_space = value.split(' ');
  571. if (parts_split_by_space.size() == 2)
  572. return is_valid_date_string(parts_split_by_space[0]) && is_valid_time_string(parts_split_by_space[1]);
  573. return false;
  574. }
  575. // https://html.spec.whatwg.org/multipage/common-microsyntaxes.html#valid-normalised-local-date-and-time-string
  576. static DeprecatedString normalize_local_date_and_time_string(DeprecatedString const& value)
  577. {
  578. VERIFY(value.count(" "sv) == 1);
  579. return value.replace(" "sv, "T"sv, ReplaceMode::FirstOnly);
  580. }
  581. // https://html.spec.whatwg.org/multipage/input.html#value-sanitization-algorithm
  582. DeprecatedString HTMLInputElement::value_sanitization_algorithm(DeprecatedString value) const
  583. {
  584. if (type_state() == HTMLInputElement::TypeAttributeState::Text || type_state() == HTMLInputElement::TypeAttributeState::Search || type_state() == HTMLInputElement::TypeAttributeState::Telephone || type_state() == HTMLInputElement::TypeAttributeState::Password) {
  585. // Strip newlines from the value.
  586. if (value.contains('\r') || value.contains('\n')) {
  587. StringBuilder builder;
  588. for (auto c : value) {
  589. if (!(c == '\r' || c == '\n'))
  590. builder.append(c);
  591. }
  592. return builder.to_deprecated_string();
  593. }
  594. } else if (type_state() == HTMLInputElement::TypeAttributeState::URL) {
  595. // Strip newlines from the value, then strip leading and trailing ASCII whitespace from the value.
  596. if (value.contains('\r') || value.contains('\n')) {
  597. StringBuilder builder;
  598. for (auto c : value) {
  599. if (!(c == '\r' || c == '\n'))
  600. builder.append(c);
  601. }
  602. return builder.string_view().trim(Infra::ASCII_WHITESPACE);
  603. }
  604. } else if (type_state() == HTMLInputElement::TypeAttributeState::Email) {
  605. // https://html.spec.whatwg.org/multipage/input.html#email-state-(type=email):value-sanitization-algorithm
  606. // FIXME: handle the `multiple` attribute
  607. // Strip newlines from the value, then strip leading and trailing ASCII whitespace from the value.
  608. if (value.contains('\r') || value.contains('\n')) {
  609. StringBuilder builder;
  610. for (auto c : value) {
  611. if (!(c == '\r' || c == '\n'))
  612. builder.append(c);
  613. }
  614. return builder.string_view().trim(Infra::ASCII_WHITESPACE);
  615. }
  616. } else if (type_state() == HTMLInputElement::TypeAttributeState::Number) {
  617. // If the value of the element is not a valid floating-point number, then set it to the empty string instead.
  618. // https://html.spec.whatwg.org/multipage/common-microsyntaxes.html#rules-for-parsing-floating-point-number-values
  619. // 6. Skip ASCII whitespace within input given position.
  620. auto maybe_double = value.to_double(TrimWhitespace::Yes);
  621. if (!maybe_double.has_value() || !isfinite(maybe_double.value()))
  622. return "";
  623. } else if (type_state() == HTMLInputElement::TypeAttributeState::Date) {
  624. // https://html.spec.whatwg.org/multipage/input.html#date-state-(type=date):value-sanitization-algorithm
  625. if (!is_valid_date_string(value))
  626. return "";
  627. } else if (type_state() == HTMLInputElement::TypeAttributeState::Month) {
  628. // https://html.spec.whatwg.org/multipage/input.html#month-state-(type=month):value-sanitization-algorithm
  629. if (!is_valid_month_string(value))
  630. return "";
  631. } else if (type_state() == HTMLInputElement::TypeAttributeState::Week) {
  632. // https://html.spec.whatwg.org/multipage/input.html#week-state-(type=week):value-sanitization-algorithm
  633. if (!is_valid_week_string(value))
  634. return "";
  635. } else if (type_state() == HTMLInputElement::TypeAttributeState::Time) {
  636. // https://html.spec.whatwg.org/multipage/input.html#time-state-(type=time):value-sanitization-algorithm
  637. if (!is_valid_time_string(value))
  638. return "";
  639. } else if (type_state() == HTMLInputElement::TypeAttributeState::LocalDateAndTime) {
  640. // https://html.spec.whatwg.org/multipage/input.html#local-date-and-time-state-(type=datetime-local):value-sanitization-algorithm
  641. if (is_valid_local_date_and_time_string(value))
  642. return normalize_local_date_and_time_string(value);
  643. return "";
  644. } else if (type_state() == HTMLInputElement::TypeAttributeState::Range) {
  645. // https://html.spec.whatwg.org/multipage/input.html#range-state-(type=range):value-sanitization-algorithm
  646. auto maybe_double = value.to_double(TrimWhitespace::Yes);
  647. if (!maybe_double.has_value() || !isfinite(maybe_double.value()))
  648. return JS::number_to_deprecated_string(maybe_double.value_or(0));
  649. } else if (type_state() == HTMLInputElement::TypeAttributeState::Color) {
  650. // https://html.spec.whatwg.org/multipage/input.html#color-state-(type=color):value-sanitization-algorithm
  651. // If the value of the element is a valid simple color, then set it to the value of the element converted to ASCII lowercase;
  652. if (is_valid_simple_color(value))
  653. return value.to_lowercase();
  654. // otherwise, set it to the string "#000000".
  655. return "#000000";
  656. }
  657. return value;
  658. }
  659. // https://html.spec.whatwg.org/multipage/input.html#the-input-element:concept-form-reset-control
  660. void HTMLInputElement::reset_algorithm()
  661. {
  662. // The reset algorithm for input elements is to set the dirty value flag and dirty checkedness flag back to false,
  663. m_dirty_value = false;
  664. m_dirty_checkedness = false;
  665. // set the value of the element to the value of the value content attribute, if there is one, or the empty string otherwise,
  666. m_value = has_attribute(AttributeNames::value) ? get_attribute(AttributeNames::value) : DeprecatedString::empty();
  667. // set the checkedness of the element to true if the element has a checked content attribute and false if it does not,
  668. m_checked = has_attribute(AttributeNames::checked);
  669. // empty the list of selected files,
  670. m_selected_files = FileAPI::FileList::create(realm(), {}).release_value_but_fixme_should_propagate_errors();
  671. // and then invoke the value sanitization algorithm, if the type attribute's current state defines one.
  672. m_value = value_sanitization_algorithm(m_value);
  673. if (m_text_node)
  674. m_text_node->set_data(m_value);
  675. }
  676. void HTMLInputElement::form_associated_element_was_inserted()
  677. {
  678. create_shadow_tree_if_needed();
  679. }
  680. void HTMLInputElement::set_checked_within_group()
  681. {
  682. if (checked())
  683. return;
  684. set_checked(true, ChangeSource::User);
  685. DeprecatedString name = this->name();
  686. document().for_each_in_inclusive_subtree_of_type<HTML::HTMLInputElement>([&](auto& element) {
  687. if (element.checked() && &element != this && element.name() == name)
  688. element.set_checked(false, ChangeSource::User);
  689. return IterationDecision::Continue;
  690. });
  691. }
  692. // https://html.spec.whatwg.org/multipage/input.html#the-input-element:legacy-pre-activation-behavior
  693. void HTMLInputElement::legacy_pre_activation_behavior()
  694. {
  695. m_before_legacy_pre_activation_behavior_checked = checked();
  696. m_before_legacy_pre_activation_behavior_indeterminate = indeterminate();
  697. // 1. If this element's type attribute is in the Checkbox state, then set
  698. // this element's checkedness to its opposite value (i.e. true if it is
  699. // false, false if it is true) and set this element's indeterminate IDL
  700. // attribute to false.
  701. if (type_state() == TypeAttributeState::Checkbox) {
  702. set_checked(!checked(), ChangeSource::User);
  703. set_indeterminate(false);
  704. }
  705. // 2. If this element's type attribute is in the Radio Button state, then
  706. // get a reference to the element in this element's radio button group that
  707. // has its checkedness set to true, if any, and then set this element's
  708. // checkedness to true.
  709. if (type_state() == TypeAttributeState::RadioButton) {
  710. DeprecatedString name = this->name();
  711. document().for_each_in_inclusive_subtree_of_type<HTML::HTMLInputElement>([&](auto& element) {
  712. if (element.checked() && element.name() == name) {
  713. m_legacy_pre_activation_behavior_checked_element_in_group = &element;
  714. return IterationDecision::Break;
  715. }
  716. return IterationDecision::Continue;
  717. });
  718. set_checked_within_group();
  719. }
  720. }
  721. // https://html.spec.whatwg.org/multipage/input.html#the-input-element:legacy-canceled-activation-behavior
  722. void HTMLInputElement::legacy_cancelled_activation_behavior()
  723. {
  724. // 1. If the element's type attribute is in the Checkbox state, then set the
  725. // element's checkedness and the element's indeterminate IDL attribute back
  726. // to the values they had before the legacy-pre-activation behavior was run.
  727. if (type_state() == TypeAttributeState::Checkbox) {
  728. set_checked(m_before_legacy_pre_activation_behavior_checked, ChangeSource::Programmatic);
  729. set_indeterminate(m_before_legacy_pre_activation_behavior_indeterminate);
  730. }
  731. // 2. If this element 's type attribute is in the Radio Button state, then
  732. // if the element to which a reference was obtained in the
  733. // legacy-pre-activation behavior, if any, is still in what is now this
  734. // element' s radio button group, if it still has one, and if so, setting
  735. // that element 's checkedness to true; or else, if there was no such
  736. // element, or that element is no longer in this element' s radio button
  737. // group, or if this element no longer has a radio button group, setting
  738. // this element's checkedness to false.
  739. if (type_state() == TypeAttributeState::RadioButton) {
  740. DeprecatedString name = this->name();
  741. bool did_reselect_previous_element = false;
  742. if (m_legacy_pre_activation_behavior_checked_element_in_group) {
  743. auto& element_in_group = *m_legacy_pre_activation_behavior_checked_element_in_group;
  744. if (name == element_in_group.name()) {
  745. element_in_group.set_checked_within_group();
  746. did_reselect_previous_element = true;
  747. }
  748. m_legacy_pre_activation_behavior_checked_element_in_group = nullptr;
  749. }
  750. if (!did_reselect_previous_element)
  751. set_checked(false, ChangeSource::User);
  752. }
  753. }
  754. void HTMLInputElement::legacy_cancelled_activation_behavior_was_not_called()
  755. {
  756. m_legacy_pre_activation_behavior_checked_element_in_group = nullptr;
  757. }
  758. // https://html.spec.whatwg.org/multipage/interaction.html#dom-tabindex
  759. i32 HTMLInputElement::default_tab_index_value() const
  760. {
  761. // See the base function for the spec comments.
  762. return 0;
  763. }
  764. // https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#dom-cva-checkvalidity
  765. WebIDL::ExceptionOr<bool> HTMLInputElement::check_validity()
  766. {
  767. dbgln("(STUBBED) HTMLInputElement::check_validity(). Called on: {}", debug_description());
  768. return true;
  769. }
  770. // https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#dom-cva-reportvalidity
  771. WebIDL::ExceptionOr<bool> HTMLInputElement::report_validity()
  772. {
  773. dbgln("(STUBBED) HTMLInputElement::report_validity(). Called on: {}", debug_description());
  774. return true;
  775. }
  776. // https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#dom-cva-setcustomvalidity
  777. void HTMLInputElement::set_custom_validity(DeprecatedString const& error)
  778. {
  779. dbgln("(STUBBED) HTMLInputElement::set_custom_validity(error={}). Called on: {}", error, debug_description());
  780. return;
  781. }
  782. // https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#dom-textarea/input-select
  783. WebIDL::ExceptionOr<void> HTMLInputElement::select()
  784. {
  785. dbgln("(STUBBED) HTMLInputElement::select(). Called on: {}", debug_description());
  786. return {};
  787. }
  788. // https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#dom-textarea/input-setselectionrange
  789. WebIDL::ExceptionOr<void> HTMLInputElement::set_selection_range(u32 start, u32 end, DeprecatedString const& direction)
  790. {
  791. dbgln("(STUBBED) HTMLInputElement::set_selection_range(start={}, end={}, direction='{}'). Called on: {}", start, end, direction, debug_description());
  792. return {};
  793. }
  794. Optional<ARIA::Role> HTMLInputElement::default_role() const
  795. {
  796. // https://www.w3.org/TR/html-aria/#el-input-button
  797. if (type_state() == TypeAttributeState::Button)
  798. return ARIA::Role::button;
  799. // https://www.w3.org/TR/html-aria/#el-input-checkbox
  800. if (type_state() == TypeAttributeState::Checkbox)
  801. return ARIA::Role::checkbox;
  802. // https://www.w3.org/TR/html-aria/#el-input-email
  803. if (type_state() == TypeAttributeState::Email && attribute("list").is_null())
  804. return ARIA::Role::textbox;
  805. // https://www.w3.org/TR/html-aria/#el-input-image
  806. if (type_state() == TypeAttributeState::ImageButton)
  807. return ARIA::Role::button;
  808. // https://www.w3.org/TR/html-aria/#el-input-number
  809. if (type_state() == TypeAttributeState::Number)
  810. return ARIA::Role::spinbutton;
  811. // https://www.w3.org/TR/html-aria/#el-input-radio
  812. if (type_state() == TypeAttributeState::RadioButton)
  813. return ARIA::Role::radio;
  814. // https://www.w3.org/TR/html-aria/#el-input-range
  815. if (type_state() == TypeAttributeState::Range)
  816. return ARIA::Role::slider;
  817. // https://www.w3.org/TR/html-aria/#el-input-reset
  818. if (type_state() == TypeAttributeState::ResetButton)
  819. return ARIA::Role::button;
  820. // https://www.w3.org/TR/html-aria/#el-input-text-list
  821. if ((type_state() == TypeAttributeState::Text
  822. || type_state() == TypeAttributeState::Search
  823. || type_state() == TypeAttributeState::Telephone
  824. || type_state() == TypeAttributeState::URL
  825. || type_state() == TypeAttributeState::Email)
  826. && !attribute("list").is_null())
  827. return ARIA::Role::combobox;
  828. // https://www.w3.org/TR/html-aria/#el-input-search
  829. if (type_state() == TypeAttributeState::Search && attribute("list").is_null())
  830. return ARIA::Role::textbox;
  831. // https://www.w3.org/TR/html-aria/#el-input-submit
  832. if (type_state() == TypeAttributeState::SubmitButton)
  833. return ARIA::Role::button;
  834. // https://www.w3.org/TR/html-aria/#el-input-tel
  835. if (type_state() == TypeAttributeState::Telephone)
  836. return ARIA::Role::textbox;
  837. // https://www.w3.org/TR/html-aria/#el-input-text
  838. if (type_state() == TypeAttributeState::Text && attribute("list").is_null())
  839. return ARIA::Role::textbox;
  840. // https://www.w3.org/TR/html-aria/#el-input-url
  841. if (type_state() == TypeAttributeState::URL && attribute("list").is_null())
  842. return ARIA::Role::textbox;
  843. // https://www.w3.org/TR/html-aria/#el-input-color
  844. // https://www.w3.org/TR/html-aria/#el-input-date
  845. // https://www.w3.org/TR/html-aria/#el-input-datetime-local
  846. // https://www.w3.org/TR/html-aria/#el-input-file
  847. // https://www.w3.org/TR/html-aria/#el-input-hidden
  848. // https://www.w3.org/TR/html-aria/#el-input-month
  849. // https://www.w3.org/TR/html-aria/#el-input-password
  850. // https://www.w3.org/TR/html-aria/#el-input-time
  851. // https://www.w3.org/TR/html-aria/#el-input-week
  852. return {};
  853. }
  854. }