HTMLElement.cpp 18 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442
  1. /*
  2. * Copyright (c) 2018-2020, Andreas Kling <kling@serenityos.org>
  3. *
  4. * SPDX-License-Identifier: BSD-2-Clause
  5. */
  6. #include "AK/ReverseIterator.h"
  7. #include <AK/StringBuilder.h>
  8. #include <LibJS/Interpreter.h>
  9. #include <LibJS/Parser.h>
  10. #include <LibWeb/DOM/DOMException.h>
  11. #include <LibWeb/DOM/Document.h>
  12. #include <LibWeb/DOM/ExceptionOr.h>
  13. #include <LibWeb/DOM/IDLEventListener.h>
  14. #include <LibWeb/HTML/BrowsingContext.h>
  15. #include <LibWeb/HTML/BrowsingContextContainer.h>
  16. #include <LibWeb/HTML/EventHandler.h>
  17. #include <LibWeb/HTML/HTMLAnchorElement.h>
  18. #include <LibWeb/HTML/HTMLBodyElement.h>
  19. #include <LibWeb/HTML/HTMLElement.h>
  20. #include <LibWeb/HTML/Window.h>
  21. #include <LibWeb/Layout/Box.h>
  22. #include <LibWeb/Layout/BreakNode.h>
  23. #include <LibWeb/Layout/TextNode.h>
  24. #include <LibWeb/UIEvents/EventNames.h>
  25. #include <LibWeb/UIEvents/FocusEvent.h>
  26. namespace Web::HTML {
  27. HTMLElement::HTMLElement(DOM::Document& document, DOM::QualifiedName qualified_name)
  28. : Element(document, move(qualified_name))
  29. , m_dataset(DOMStringMap::create(*this))
  30. {
  31. }
  32. HTMLElement::~HTMLElement()
  33. {
  34. }
  35. HTMLElement::ContentEditableState HTMLElement::content_editable_state() const
  36. {
  37. auto contenteditable = attribute(HTML::AttributeNames::contenteditable);
  38. // "true", an empty string or a missing value map to the "true" state.
  39. if ((!contenteditable.is_null() && contenteditable.is_empty()) || contenteditable.equals_ignoring_case("true"))
  40. return ContentEditableState::True;
  41. // "false" maps to the "false" state.
  42. if (contenteditable.equals_ignoring_case("false"))
  43. return ContentEditableState::False;
  44. // Having no such attribute or an invalid value maps to the "inherit" state.
  45. return ContentEditableState::Inherit;
  46. }
  47. bool HTMLElement::is_editable() const
  48. {
  49. switch (content_editable_state()) {
  50. case ContentEditableState::True:
  51. return true;
  52. case ContentEditableState::False:
  53. return false;
  54. case ContentEditableState::Inherit:
  55. return parent() && parent()->is_editable();
  56. default:
  57. VERIFY_NOT_REACHED();
  58. }
  59. }
  60. String HTMLElement::content_editable() const
  61. {
  62. switch (content_editable_state()) {
  63. case ContentEditableState::True:
  64. return "true";
  65. case ContentEditableState::False:
  66. return "false";
  67. case ContentEditableState::Inherit:
  68. return "inherit";
  69. default:
  70. VERIFY_NOT_REACHED();
  71. }
  72. }
  73. // https://html.spec.whatwg.org/multipage/interaction.html#contenteditable
  74. DOM::ExceptionOr<void> HTMLElement::set_content_editable(const String& content_editable)
  75. {
  76. if (content_editable.equals_ignoring_case("inherit")) {
  77. remove_attribute(HTML::AttributeNames::contenteditable);
  78. return {};
  79. }
  80. if (content_editable.equals_ignoring_case("true")) {
  81. set_attribute(HTML::AttributeNames::contenteditable, "true");
  82. return {};
  83. }
  84. if (content_editable.equals_ignoring_case("false")) {
  85. set_attribute(HTML::AttributeNames::contenteditable, "false");
  86. return {};
  87. }
  88. return DOM::SyntaxError::create("Invalid contentEditable value, must be 'true', 'false', or 'inherit'");
  89. }
  90. void HTMLElement::set_inner_text(StringView text)
  91. {
  92. remove_all_children();
  93. append_child(document().create_text_node(text));
  94. set_needs_style_update(true);
  95. }
  96. String HTMLElement::inner_text()
  97. {
  98. StringBuilder builder;
  99. // innerText for element being rendered takes visibility into account, so force a layout and then walk the layout tree.
  100. document().update_layout();
  101. if (!layout_node())
  102. return text_content();
  103. Function<void(const Layout::Node&)> recurse = [&](auto& node) {
  104. for (auto* child = node.first_child(); child; child = child->next_sibling()) {
  105. if (is<Layout::TextNode>(child))
  106. builder.append(verify_cast<Layout::TextNode>(*child).text_for_rendering());
  107. if (is<Layout::BreakNode>(child))
  108. builder.append('\n');
  109. recurse(*child);
  110. }
  111. };
  112. recurse(*layout_node());
  113. return builder.to_string();
  114. }
  115. // // https://drafts.csswg.org/cssom-view/#dom-htmlelement-offsettop
  116. int HTMLElement::offset_top() const
  117. {
  118. if (is<HTML::HTMLBodyElement>(this) || !layout_node() || !parent_element() || !parent_element()->layout_node())
  119. return 0;
  120. auto position = layout_node()->box_type_agnostic_position();
  121. auto parent_position = parent_element()->layout_node()->box_type_agnostic_position();
  122. return position.y() - parent_position.y();
  123. }
  124. // https://drafts.csswg.org/cssom-view/#dom-htmlelement-offsetleft
  125. int HTMLElement::offset_left() const
  126. {
  127. if (is<HTML::HTMLBodyElement>(this) || !layout_node() || !parent_element() || !parent_element()->layout_node())
  128. return 0;
  129. auto position = layout_node()->box_type_agnostic_position();
  130. auto parent_position = parent_element()->layout_node()->box_type_agnostic_position();
  131. return position.x() - parent_position.x();
  132. }
  133. // https://drafts.csswg.org/cssom-view/#dom-htmlelement-offsetwidth
  134. int HTMLElement::offset_width() const
  135. {
  136. if (!layout_node() || !layout_node()->is_box())
  137. return 0;
  138. return static_cast<Layout::Box const&>(*layout_node()).border_box_width();
  139. }
  140. // https://drafts.csswg.org/cssom-view/#dom-htmlelement-offsetheight
  141. int HTMLElement::offset_height() const
  142. {
  143. if (!layout_node() || !layout_node()->is_box())
  144. return 0;
  145. return static_cast<Layout::Box const&>(*layout_node()).border_box_height();
  146. }
  147. bool HTMLElement::cannot_navigate() const
  148. {
  149. // FIXME: Return true if element's node document is not fully active
  150. return !is<HTML::HTMLAnchorElement>(this) && !is_connected();
  151. }
  152. void HTMLElement::parse_attribute(const FlyString& name, const String& value)
  153. {
  154. Element::parse_attribute(name, value);
  155. // 1. If namespace is not null, or localName is not the name of an event handler content attribute on element, then return.
  156. // FIXME: Add the namespace part once we support attribute namespaces.
  157. #undef __ENUMERATE
  158. #define __ENUMERATE(attribute_name, event_name) \
  159. if (name == HTML::AttributeNames::attribute_name) { \
  160. element_event_handler_attribute_changed(event_name, value); \
  161. }
  162. ENUMERATE_GLOBAL_EVENT_HANDLERS(__ENUMERATE)
  163. #undef __ENUMERATE
  164. }
  165. // https://html.spec.whatwg.org/multipage/interaction.html#focus-update-steps
  166. static void run_focus_update_steps(NonnullRefPtrVector<DOM::Node> old_chain, NonnullRefPtrVector<DOM::Node> new_chain, DOM::Node& new_focus_target)
  167. {
  168. // 1. If the last entry in old chain and the last entry in new chain are the same,
  169. // pop the last entry from old chain and the last entry from new chain and redo this step.
  170. while (!old_chain.is_empty()
  171. && !new_chain.is_empty()
  172. && &old_chain.last() == &new_chain.last()) {
  173. (void)old_chain.take_last();
  174. (void)new_chain.take_last();
  175. }
  176. // 2. For each entry entry in old chain, in order, run these substeps:
  177. for (auto& entry : old_chain) {
  178. // FIXME: 1. If entry is an input element, and the change event applies to the element,
  179. // and the element does not have a defined activation behavior,
  180. // and the user has changed the element's value or its list of selected files
  181. // while the control was focused without committing that change
  182. // (such that it is different to what it was when the control was first focused),
  183. // then fire an event named change at the element,
  184. // with the bubbles attribute initialized to true.
  185. RefPtr<DOM::EventTarget> blur_event_target;
  186. if (is<DOM::Element>(entry)) {
  187. // 2. If entry is an element, let blur event target be entry.
  188. blur_event_target = entry;
  189. } else if (is<DOM::Document>(entry)) {
  190. // If entry is a Document object, let blur event target be that Document object's relevant global object.
  191. blur_event_target = static_cast<DOM::Document&>(entry).window();
  192. }
  193. // 3. If entry is the last entry in old chain, and entry is an Element,
  194. // and the last entry in new chain is also an Element,
  195. // then let related blur target be the last entry in new chain.
  196. // Otherwise, let related blur target be null.
  197. RefPtr<DOM::EventTarget> related_blur_target;
  198. if (!old_chain.is_empty()
  199. && &entry == &old_chain.last()
  200. && is<DOM::Element>(entry)
  201. && !new_chain.is_empty()
  202. && is<DOM::Element>(new_chain.last())) {
  203. related_blur_target = new_chain.last();
  204. }
  205. // 4. If blur event target is not null, fire a focus event named blur at blur event target,
  206. // with related blur target as the related target.
  207. if (blur_event_target) {
  208. // FIXME: Implement the "fire a focus event" spec operation.
  209. auto blur_event = UIEvents::FocusEvent::create(HTML::EventNames::blur);
  210. blur_event->set_related_target(related_blur_target);
  211. blur_event_target->dispatch_event(move(blur_event));
  212. }
  213. }
  214. // FIXME: 3. Apply any relevant platform-specific conventions for focusing new focus target.
  215. // (For example, some platforms select the contents of a text control when that control is focused.)
  216. (void)new_focus_target;
  217. // 4. For each entry entry in new chain, in reverse order, run these substeps:
  218. for (auto& entry : new_chain.in_reverse()) {
  219. // 1. If entry is a focusable area: designate entry as the focused area of the document.
  220. // FIXME: This isn't entirely right.
  221. if (is<DOM::Element>(entry))
  222. entry.document().set_focused_element(&static_cast<DOM::Element&>(entry));
  223. RefPtr<DOM::EventTarget> focus_event_target;
  224. if (is<DOM::Element>(entry)) {
  225. // 2. If entry is an element, let focus event target be entry.
  226. focus_event_target = entry;
  227. } else if (is<DOM::Document>(entry)) {
  228. // If entry is a Document object, let focus event target be that Document object's relevant global object.
  229. focus_event_target = static_cast<DOM::Document&>(entry).window();
  230. }
  231. // 3. If entry is the last entry in new chain, and entry is an Element,
  232. // and the last entry in old chain is also an Element,
  233. // then let related focus target be the last entry in old chain.
  234. // Otherwise, let related focus target be null.
  235. RefPtr<DOM::EventTarget> related_focus_target;
  236. if (!new_chain.is_empty()
  237. && &entry == &new_chain.last()
  238. && is<DOM::Element>(entry)
  239. && !old_chain.is_empty()
  240. && is<DOM::Element>(old_chain.last())) {
  241. related_focus_target = old_chain.last();
  242. }
  243. // 4. If focus event target is not null, fire a focus event named focus at focus event target,
  244. // with related focus target as the related target.
  245. if (focus_event_target) {
  246. // FIXME: Implement the "fire a focus event" spec operation.
  247. auto focus_event = UIEvents::FocusEvent::create(HTML::EventNames::focus);
  248. focus_event->set_related_target(related_focus_target);
  249. focus_event_target->dispatch_event(move(focus_event));
  250. }
  251. }
  252. }
  253. // https://html.spec.whatwg.org/multipage/interaction.html#focus-chain
  254. static NonnullRefPtrVector<DOM::Node> focus_chain(DOM::Node* subject)
  255. {
  256. // FIXME: Move this somewhere more spec-friendly.
  257. if (!subject)
  258. return {};
  259. // 1. Let output be an empty list.
  260. NonnullRefPtrVector<DOM::Node> output;
  261. // 2. Let currentObject be subject.
  262. auto* current_object = subject;
  263. // 3. While true:
  264. while (true) {
  265. // 1. Append currentObject to output.
  266. output.append(*current_object);
  267. // FIXME: 2. If currentObject is an area element's shape, then append that area element to output.
  268. // FIXME: Otherwise, if currentObject's DOM anchor is an element that is not currentObject itself, then append currentObject's DOM anchor to output.
  269. // FIXME: Everything below needs work. The conditions are not entirely right.
  270. if (!is<DOM::Document>(*current_object)) {
  271. // 3. If currentObject is a focusable area, then set currentObject to currentObject's DOM anchor's node document.
  272. current_object = &current_object->document();
  273. } else if (is<DOM::Document>(*current_object)
  274. && static_cast<DOM::Document&>(*current_object).browsing_context()
  275. && !static_cast<DOM::Document&>(*current_object).browsing_context()->is_top_level()) {
  276. // Otherwise, if currentObject is a Document whose browsing context is a child browsing context,
  277. // then set currentObject to currentObject's browsing context's container.
  278. current_object = static_cast<DOM::Document&>(*current_object).browsing_context()->container();
  279. } else {
  280. break;
  281. }
  282. }
  283. // 4. Return output.
  284. return output;
  285. }
  286. // https://html.spec.whatwg.org/multipage/interaction.html#focusing-steps
  287. // FIXME: This should accept more types.
  288. static void run_focusing_steps(DOM::Node* new_focus_target, DOM::Node* fallback_target = nullptr, [[maybe_unused]] Optional<String> focus_trigger = {})
  289. {
  290. // FIXME: 1. If new focus target is not a focusable area, then set new focus target
  291. // to the result of getting the focusable area for new focus target,
  292. // given focus trigger if it was passed.
  293. // 2. If new focus target is null, then:
  294. if (!new_focus_target) {
  295. // 1. If no fallback target was specified, then return.
  296. if (!fallback_target)
  297. return;
  298. // 2. Otherwise, set new focus target to the fallback target.
  299. new_focus_target = fallback_target;
  300. }
  301. // 3. If new focus target is a browsing context container with non-null nested browsing context,
  302. // then set new focus target to the nested browsing context's active document.
  303. if (is<BrowsingContextContainer>(*new_focus_target)) {
  304. auto& browsing_context_container = static_cast<BrowsingContextContainer&>(*new_focus_target);
  305. if (auto* nested_browsing_context = browsing_context_container.nested_browsing_context())
  306. new_focus_target = nested_browsing_context->active_document();
  307. }
  308. // FIXME: 4. If new focus target is a focusable area and its DOM anchor is inert, then return.
  309. // 5. If new focus target is the currently focused area of a top-level browsing context, then return.
  310. if (!new_focus_target->document().browsing_context())
  311. return;
  312. auto& top_level_browsing_context = new_focus_target->document().browsing_context()->top_level_browsing_context();
  313. if (new_focus_target == top_level_browsing_context.currently_focused_area())
  314. return;
  315. // 6. Let old chain be the current focus chain of the top-level browsing context in which
  316. // new focus target finds itself.
  317. auto old_chain = focus_chain(top_level_browsing_context.currently_focused_area());
  318. // 7. Let new chain be the focus chain of new focus target.
  319. auto new_chain = focus_chain(new_focus_target);
  320. run_focus_update_steps(old_chain, new_chain, *new_focus_target);
  321. }
  322. // https://html.spec.whatwg.org/multipage/interaction.html#dom-focus
  323. void HTMLElement::focus()
  324. {
  325. // 1. If the element is marked as locked for focus, then return.
  326. if (m_locked_for_focus)
  327. return;
  328. // 2. Mark the element as locked for focus.
  329. m_locked_for_focus = true;
  330. // 3. Run the focusing steps for the element.
  331. run_focusing_steps(this);
  332. // FIXME: 4. If the value of the preventScroll dictionary member of options is false,
  333. // then scroll the element into view with scroll behavior "auto",
  334. // block flow direction position set to an implementation-defined value,
  335. // and inline base direction position set to an implementation-defined value.
  336. // 5. Unmark the element as locked for focus.
  337. m_locked_for_focus = false;
  338. }
  339. // https://html.spec.whatwg.org/multipage/webappapis.html#fire-a-synthetic-pointer-event
  340. bool HTMLElement::fire_a_synthetic_pointer_event(FlyString const& type, DOM::Element& target, bool not_trusted)
  341. {
  342. // 1. Let event be the result of creating an event using PointerEvent.
  343. // 2. Initialize event's type attribute to e.
  344. // FIXME: Actually create a PointerEvent!
  345. auto event = DOM::Event::create(type);
  346. // 3. Initialize event's bubbles and cancelable attributes to true.
  347. event->set_bubbles(true);
  348. event->set_cancelable(true);
  349. // 4. Set event's composed flag.
  350. event->set_composed(true);
  351. // 5. If the not trusted flag is set, initialize event's isTrusted attribute to false.
  352. if (not_trusted) {
  353. event->set_is_trusted(false);
  354. }
  355. // FIXME: 6. Initialize event's ctrlKey, shiftKey, altKey, and metaKey attributes according to the current state
  356. // of the key input device, if any (false for any keys that are not available).
  357. // FIXME: 7. Initialize event's view attribute to target's node document's Window object, if any, and null otherwise.
  358. // FIXME: 8. event's getModifierState() method is to return values appropriately describing the current state of the key input device.
  359. // 9. Return the result of dispatching event at target.
  360. return target.dispatch_event(move(event));
  361. }
  362. // https://html.spec.whatwg.org/multipage/interaction.html#dom-click
  363. void HTMLElement::click()
  364. {
  365. // FIXME: 1. If this element is a form control that is disabled, then return.
  366. // 2. If this element's click in progress flag is set, then return.
  367. if (m_click_in_progress)
  368. return;
  369. // 3. Set this element's click in progress flag.
  370. m_click_in_progress = true;
  371. // FIXME: 4. Fire a synthetic pointer event named click at this element, with the not trusted flag set.
  372. fire_a_synthetic_pointer_event(HTML::EventNames::click, *this, true);
  373. // 5. Unset this element's click in progress flag.
  374. m_click_in_progress = false;
  375. }
  376. }