Node.cpp 22 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547
  1. /*
  2. * Copyright (c) 2018-2020, Andreas Kling <kling@serenityos.org>
  3. *
  4. * SPDX-License-Identifier: BSD-2-Clause
  5. */
  6. #include <AK/Demangle.h>
  7. #include <LibGfx/FontDatabase.h>
  8. #include <LibGfx/Painter.h>
  9. #include <LibWeb/DOM/Document.h>
  10. #include <LibWeb/Dump.h>
  11. #include <LibWeb/HTML/BrowsingContext.h>
  12. #include <LibWeb/HTML/HTMLHtmlElement.h>
  13. #include <LibWeb/Layout/BlockContainer.h>
  14. #include <LibWeb/Layout/FormattingContext.h>
  15. #include <LibWeb/Layout/InitialContainingBlock.h>
  16. #include <LibWeb/Layout/Node.h>
  17. #include <LibWeb/Layout/TextNode.h>
  18. #include <typeinfo>
  19. namespace Web::Layout {
  20. Node::Node(DOM::Document& document, DOM::Node* node)
  21. : m_document(document)
  22. , m_dom_node(node)
  23. {
  24. if (m_dom_node)
  25. m_dom_node->set_layout_node({}, this);
  26. }
  27. Node::~Node()
  28. {
  29. if (m_dom_node && m_dom_node->layout_node() == this)
  30. m_dom_node->set_layout_node({}, nullptr);
  31. }
  32. bool Node::can_contain_boxes_with_position_absolute() const
  33. {
  34. return computed_values().position() != CSS::Position::Static || is<InitialContainingBlock>(*this);
  35. }
  36. const BlockContainer* Node::containing_block() const
  37. {
  38. auto nearest_block_ancestor = [this] {
  39. auto* ancestor = parent();
  40. while (ancestor && !is<BlockContainer>(*ancestor))
  41. ancestor = ancestor->parent();
  42. return static_cast<const BlockContainer*>(ancestor);
  43. };
  44. if (is<TextNode>(*this))
  45. return nearest_block_ancestor();
  46. auto position = computed_values().position();
  47. if (position == CSS::Position::Absolute) {
  48. auto* ancestor = parent();
  49. while (ancestor && !ancestor->can_contain_boxes_with_position_absolute())
  50. ancestor = ancestor->parent();
  51. while (ancestor && (!is<BlockContainer>(*ancestor) || ancestor->is_anonymous()))
  52. ancestor = ancestor->containing_block();
  53. return static_cast<const BlockContainer*>(ancestor);
  54. }
  55. if (position == CSS::Position::Fixed)
  56. return &root();
  57. return nearest_block_ancestor();
  58. }
  59. bool Node::establishes_stacking_context() const
  60. {
  61. if (!has_style())
  62. return false;
  63. if (dom_node() == &document().root())
  64. return true;
  65. auto position = computed_values().position();
  66. if (position == CSS::Position::Absolute || position == CSS::Position::Relative || position == CSS::Position::Fixed || position == CSS::Position::Sticky)
  67. return true;
  68. return computed_values().opacity() < 1.0f;
  69. }
  70. HitTestResult Node::hit_test(const Gfx::IntPoint& position, HitTestType type) const
  71. {
  72. HitTestResult result;
  73. for_each_child_in_paint_order([&](auto& child) {
  74. auto child_result = child.hit_test(position, type);
  75. if (child_result.layout_node)
  76. result = child_result;
  77. });
  78. return result;
  79. }
  80. HTML::BrowsingContext const& Node::browsing_context() const
  81. {
  82. VERIFY(document().browsing_context());
  83. return *document().browsing_context();
  84. }
  85. HTML::BrowsingContext& Node::browsing_context()
  86. {
  87. VERIFY(document().browsing_context());
  88. return *document().browsing_context();
  89. }
  90. const InitialContainingBlock& Node::root() const
  91. {
  92. VERIFY(document().layout_node());
  93. return *document().layout_node();
  94. }
  95. InitialContainingBlock& Node::root()
  96. {
  97. VERIFY(document().layout_node());
  98. return *document().layout_node();
  99. }
  100. void Node::split_into_lines(InlineFormattingContext& context, LayoutMode layout_mode)
  101. {
  102. for_each_child([&](auto& child) {
  103. child.split_into_lines(context, layout_mode);
  104. });
  105. }
  106. void Node::set_needs_display()
  107. {
  108. if (auto* block = containing_block()) {
  109. block->for_each_fragment([&](auto& fragment) {
  110. if (&fragment.layout_node() == this || is_ancestor_of(fragment.layout_node())) {
  111. browsing_context().set_needs_display(enclosing_int_rect(fragment.absolute_rect()));
  112. }
  113. return IterationDecision::Continue;
  114. });
  115. }
  116. }
  117. Gfx::FloatPoint Node::box_type_agnostic_position() const
  118. {
  119. if (is<Box>(*this))
  120. return verify_cast<Box>(*this).absolute_position();
  121. VERIFY(is_inline());
  122. Gfx::FloatPoint position;
  123. if (auto* block = containing_block()) {
  124. block->for_each_fragment([&](auto& fragment) {
  125. if (&fragment.layout_node() == this || is_ancestor_of(fragment.layout_node())) {
  126. position = fragment.absolute_rect().location();
  127. return IterationDecision::Break;
  128. }
  129. return IterationDecision::Continue;
  130. });
  131. }
  132. return position;
  133. }
  134. bool Node::is_floating() const
  135. {
  136. if (!has_style())
  137. return false;
  138. // flex-items don't float.
  139. if (is_flex_item())
  140. return false;
  141. return computed_values().float_() != CSS::Float::None;
  142. }
  143. bool Node::is_positioned() const
  144. {
  145. return has_style() && computed_values().position() != CSS::Position::Static;
  146. }
  147. bool Node::is_absolutely_positioned() const
  148. {
  149. if (!has_style())
  150. return false;
  151. auto position = computed_values().position();
  152. return position == CSS::Position::Absolute || position == CSS::Position::Fixed;
  153. }
  154. bool Node::is_fixed_position() const
  155. {
  156. if (!has_style())
  157. return false;
  158. auto position = computed_values().position();
  159. return position == CSS::Position::Fixed;
  160. }
  161. NodeWithStyle::NodeWithStyle(DOM::Document& document, DOM::Node* node, NonnullRefPtr<CSS::StyleProperties> specified_style)
  162. : Node(document, node)
  163. {
  164. m_has_style = true;
  165. apply_style(*specified_style);
  166. }
  167. NodeWithStyle::NodeWithStyle(DOM::Document& document, DOM::Node* node, CSS::ComputedValues computed_values)
  168. : Node(document, node)
  169. , m_computed_values(move(computed_values))
  170. {
  171. m_has_style = true;
  172. m_font = Gfx::FontDatabase::default_font();
  173. }
  174. void NodeWithStyle::apply_style(const CSS::StyleProperties& specified_style)
  175. {
  176. auto& computed_values = static_cast<CSS::MutableComputedValues&>(m_computed_values);
  177. m_font = specified_style.computed_font();
  178. m_line_height = specified_style.line_height(*this);
  179. {
  180. constexpr int default_font_size = 10;
  181. auto parent_font_size = parent() == nullptr ? default_font_size : parent()->font_size();
  182. auto length = specified_style.length_or_fallback(CSS::PropertyID::FontSize, CSS::Length(default_font_size, CSS::Length::Type::Px));
  183. // FIXME: em sizes return 0 here, for some reason
  184. m_font_size = length.resolved_or_zero(*this, parent_font_size).to_px(*this);
  185. if (m_font_size == 0)
  186. m_font_size = default_font_size;
  187. }
  188. {
  189. auto attachments = specified_style.property(CSS::PropertyID::BackgroundAttachment);
  190. auto clips = specified_style.property(CSS::PropertyID::BackgroundClip);
  191. auto images = specified_style.property(CSS::PropertyID::BackgroundImage);
  192. auto origins = specified_style.property(CSS::PropertyID::BackgroundOrigin);
  193. auto positions = specified_style.property(CSS::PropertyID::BackgroundPosition);
  194. auto repeats = specified_style.property(CSS::PropertyID::BackgroundRepeat);
  195. auto sizes = specified_style.property(CSS::PropertyID::BackgroundSize);
  196. auto count_layers = [](auto maybe_style_value) -> size_t {
  197. if (maybe_style_value.has_value() && maybe_style_value.value()->is_value_list())
  198. return maybe_style_value.value()->as_value_list().size();
  199. else
  200. return 1;
  201. };
  202. auto value_for_layer = [](auto maybe_style_value, size_t layer_index) -> RefPtr<CSS::StyleValue> {
  203. if (!maybe_style_value.has_value())
  204. return nullptr;
  205. auto& style_value = maybe_style_value.value();
  206. if (style_value->is_value_list())
  207. return style_value->as_value_list().value_at(layer_index, true);
  208. return style_value;
  209. };
  210. size_t layer_count = 1;
  211. layer_count = max(layer_count, count_layers(attachments));
  212. layer_count = max(layer_count, count_layers(clips));
  213. layer_count = max(layer_count, count_layers(images));
  214. layer_count = max(layer_count, count_layers(origins));
  215. layer_count = max(layer_count, count_layers(positions));
  216. layer_count = max(layer_count, count_layers(repeats));
  217. layer_count = max(layer_count, count_layers(sizes));
  218. Vector<CSS::BackgroundLayerData> layers;
  219. layers.ensure_capacity(layer_count);
  220. for (size_t layer_index = 0; layer_index < layer_count; layer_index++) {
  221. CSS::BackgroundLayerData layer;
  222. if (auto image_value = value_for_layer(images, layer_index); image_value && image_value->is_image()) {
  223. layer.image = image_value->as_image();
  224. layer.image->load_bitmap(document());
  225. }
  226. if (auto attachment_value = value_for_layer(attachments, layer_index); attachment_value && attachment_value->has_identifier()) {
  227. switch (attachment_value->to_identifier()) {
  228. case CSS::ValueID::Fixed:
  229. layer.attachment = CSS::BackgroundAttachment::Fixed;
  230. break;
  231. case CSS::ValueID::Local:
  232. layer.attachment = CSS::BackgroundAttachment::Local;
  233. break;
  234. case CSS::ValueID::Scroll:
  235. layer.attachment = CSS::BackgroundAttachment::Scroll;
  236. break;
  237. default:
  238. break;
  239. }
  240. }
  241. auto as_box = [](auto value_id) {
  242. switch (value_id) {
  243. case CSS::ValueID::BorderBox:
  244. return CSS::BackgroundBox::BorderBox;
  245. case CSS::ValueID::ContentBox:
  246. return CSS::BackgroundBox::ContentBox;
  247. case CSS::ValueID::PaddingBox:
  248. return CSS::BackgroundBox::PaddingBox;
  249. default:
  250. VERIFY_NOT_REACHED();
  251. }
  252. };
  253. if (auto origin_value = value_for_layer(origins, layer_index); origin_value && origin_value->has_identifier()) {
  254. layer.origin = as_box(origin_value->to_identifier());
  255. }
  256. if (auto clip_value = value_for_layer(clips, layer_index); clip_value && clip_value->has_identifier()) {
  257. layer.clip = as_box(clip_value->to_identifier());
  258. }
  259. if (auto position_value = value_for_layer(positions, layer_index); position_value && position_value->is_position()) {
  260. auto& position = position_value->as_position();
  261. layer.position_edge_x = position.edge_x();
  262. layer.position_edge_y = position.edge_y();
  263. layer.position_offset_x = position.offset_x();
  264. layer.position_offset_y = position.offset_y();
  265. }
  266. if (auto size_value = value_for_layer(sizes, layer_index); size_value) {
  267. if (size_value->is_background_size()) {
  268. auto& size = size_value->as_background_size();
  269. layer.size_type = CSS::BackgroundSize::LengthPercentage;
  270. layer.size_x = size.size_x();
  271. layer.size_y = size.size_y();
  272. } else if (size_value->has_identifier()) {
  273. switch (size_value->to_identifier()) {
  274. case CSS::ValueID::Contain:
  275. layer.size_type = CSS::BackgroundSize::Contain;
  276. break;
  277. case CSS::ValueID::Cover:
  278. layer.size_type = CSS::BackgroundSize::Cover;
  279. break;
  280. default:
  281. break;
  282. }
  283. }
  284. }
  285. if (auto repeat_value = value_for_layer(repeats, layer_index); repeat_value && repeat_value->is_background_repeat()) {
  286. layer.repeat_x = repeat_value->as_background_repeat().repeat_x();
  287. layer.repeat_y = repeat_value->as_background_repeat().repeat_y();
  288. }
  289. layers.append(move(layer));
  290. }
  291. computed_values.set_background_layers(move(layers));
  292. }
  293. computed_values.set_background_color(specified_style.color_or_fallback(CSS::PropertyID::BackgroundColor, *this, CSS::InitialValues::background_color()));
  294. computed_values.set_box_sizing(specified_style.box_sizing());
  295. // FIXME: BorderXRadius properties are now BorderRadiusStyleValues, so make use of that.
  296. auto border_bottom_left_radius = specified_style.property(CSS::PropertyID::BorderBottomLeftRadius);
  297. if (border_bottom_left_radius.has_value())
  298. computed_values.set_border_bottom_left_radius(border_bottom_left_radius.value()->to_length());
  299. auto border_bottom_right_radius = specified_style.property(CSS::PropertyID::BorderBottomRightRadius);
  300. if (border_bottom_right_radius.has_value())
  301. computed_values.set_border_bottom_right_radius(border_bottom_right_radius.value()->to_length());
  302. auto border_top_left_radius = specified_style.property(CSS::PropertyID::BorderTopLeftRadius);
  303. if (border_top_left_radius.has_value())
  304. computed_values.set_border_top_left_radius(border_top_left_radius.value()->to_length());
  305. auto border_top_right_radius = specified_style.property(CSS::PropertyID::BorderTopRightRadius);
  306. if (border_top_right_radius.has_value())
  307. computed_values.set_border_top_right_radius(border_top_right_radius.value()->to_length());
  308. computed_values.set_display(specified_style.display());
  309. auto flex_direction = specified_style.flex_direction();
  310. if (flex_direction.has_value())
  311. computed_values.set_flex_direction(flex_direction.value());
  312. auto flex_wrap = specified_style.flex_wrap();
  313. if (flex_wrap.has_value())
  314. computed_values.set_flex_wrap(flex_wrap.value());
  315. auto flex_basis = specified_style.flex_basis();
  316. if (flex_basis.has_value())
  317. computed_values.set_flex_basis(flex_basis.value());
  318. computed_values.set_flex_grow(specified_style.flex_grow());
  319. computed_values.set_flex_shrink(specified_style.flex_shrink());
  320. auto justify_content = specified_style.justify_content();
  321. if (justify_content.has_value())
  322. computed_values.set_justify_content(justify_content.value());
  323. auto align_items = specified_style.align_items();
  324. if (align_items.has_value())
  325. computed_values.set_align_items(align_items.value());
  326. auto position = specified_style.position();
  327. if (position.has_value())
  328. computed_values.set_position(position.value());
  329. auto text_align = specified_style.text_align();
  330. if (text_align.has_value())
  331. computed_values.set_text_align(text_align.value());
  332. auto white_space = specified_style.white_space();
  333. if (white_space.has_value())
  334. computed_values.set_white_space(white_space.value());
  335. auto float_ = specified_style.float_();
  336. if (float_.has_value())
  337. computed_values.set_float(float_.value());
  338. auto clear = specified_style.clear();
  339. if (clear.has_value())
  340. computed_values.set_clear(clear.value());
  341. auto overflow_x = specified_style.overflow_x();
  342. if (overflow_x.has_value())
  343. computed_values.set_overflow_x(overflow_x.value());
  344. auto overflow_y = specified_style.overflow_y();
  345. if (overflow_y.has_value())
  346. computed_values.set_overflow_y(overflow_y.value());
  347. auto cursor = specified_style.cursor();
  348. if (cursor.has_value())
  349. computed_values.set_cursor(cursor.value());
  350. auto pointer_events = specified_style.pointer_events();
  351. if (pointer_events.has_value())
  352. computed_values.set_pointer_events(pointer_events.value());
  353. auto text_decoration_line = specified_style.text_decoration_line();
  354. if (text_decoration_line.has_value())
  355. computed_values.set_text_decoration_line(text_decoration_line.value());
  356. auto text_transform = specified_style.text_transform();
  357. if (text_transform.has_value())
  358. computed_values.set_text_transform(text_transform.value());
  359. if (auto list_style_type = specified_style.list_style_type(); list_style_type.has_value())
  360. computed_values.set_list_style_type(list_style_type.value());
  361. auto list_style_image = specified_style.property(CSS::PropertyID::ListStyleImage);
  362. if (list_style_image.has_value() && list_style_image.value()->is_image()) {
  363. m_list_style_image = list_style_image.value()->as_image();
  364. m_list_style_image->load_bitmap(document());
  365. }
  366. computed_values.set_color(specified_style.color_or_fallback(CSS::PropertyID::Color, *this, CSS::InitialValues::color()));
  367. computed_values.set_z_index(specified_style.z_index());
  368. computed_values.set_opacity(specified_style.opacity());
  369. if (computed_values.opacity() == 0)
  370. m_visible = false;
  371. if (auto width = specified_style.property(CSS::PropertyID::Width); width.has_value() && !width.value()->has_auto())
  372. m_has_definite_width = true;
  373. computed_values.set_width(specified_style.length_or_fallback(CSS::PropertyID::Width, {}));
  374. computed_values.set_min_width(specified_style.length_or_fallback(CSS::PropertyID::MinWidth, {}));
  375. computed_values.set_max_width(specified_style.length_or_fallback(CSS::PropertyID::MaxWidth, {}));
  376. if (auto height = specified_style.property(CSS::PropertyID::Height); height.has_value() && !height.value()->has_auto())
  377. m_has_definite_height = true;
  378. computed_values.set_height(specified_style.length_or_fallback(CSS::PropertyID::Height, {}));
  379. computed_values.set_min_height(specified_style.length_or_fallback(CSS::PropertyID::MinHeight, {}));
  380. computed_values.set_max_height(specified_style.length_or_fallback(CSS::PropertyID::MaxHeight, {}));
  381. computed_values.set_offset(specified_style.length_box(CSS::PropertyID::Left, CSS::PropertyID::Top, CSS::PropertyID::Right, CSS::PropertyID::Bottom, CSS::Length::make_auto()));
  382. computed_values.set_margin(specified_style.length_box(CSS::PropertyID::MarginLeft, CSS::PropertyID::MarginTop, CSS::PropertyID::MarginRight, CSS::PropertyID::MarginBottom, CSS::Length::make_px(0)));
  383. computed_values.set_padding(specified_style.length_box(CSS::PropertyID::PaddingLeft, CSS::PropertyID::PaddingTop, CSS::PropertyID::PaddingRight, CSS::PropertyID::PaddingBottom, CSS::Length::make_px(0)));
  384. computed_values.set_box_shadow(specified_style.box_shadow());
  385. computed_values.set_transformations(specified_style.transformations());
  386. auto do_border_style = [&](CSS::BorderData& border, CSS::PropertyID width_property, CSS::PropertyID color_property, CSS::PropertyID style_property) {
  387. // FIXME: The default border color value is `currentcolor`, but since we can't resolve that easily,
  388. // we just manually grab the value from `color`. This makes it dependent on `color` being
  389. // specified first, so it's far from ideal.
  390. border.color = specified_style.color_or_fallback(color_property, *this, computed_values.color());
  391. border.line_style = specified_style.line_style(style_property).value_or(CSS::LineStyle::None);
  392. if (border.line_style == CSS::LineStyle::None)
  393. border.width = 0;
  394. else
  395. border.width = specified_style.length_or_fallback(width_property, {}).resolved_or_zero(*this, 0).to_px(*this);
  396. };
  397. do_border_style(computed_values.border_left(), CSS::PropertyID::BorderLeftWidth, CSS::PropertyID::BorderLeftColor, CSS::PropertyID::BorderLeftStyle);
  398. do_border_style(computed_values.border_top(), CSS::PropertyID::BorderTopWidth, CSS::PropertyID::BorderTopColor, CSS::PropertyID::BorderTopStyle);
  399. do_border_style(computed_values.border_right(), CSS::PropertyID::BorderRightWidth, CSS::PropertyID::BorderRightColor, CSS::PropertyID::BorderRightStyle);
  400. do_border_style(computed_values.border_bottom(), CSS::PropertyID::BorderBottomWidth, CSS::PropertyID::BorderBottomColor, CSS::PropertyID::BorderBottomStyle);
  401. if (auto fill = specified_style.property(CSS::PropertyID::Fill); fill.has_value())
  402. computed_values.set_fill(fill.value()->to_color(*this));
  403. if (auto stroke = specified_style.property(CSS::PropertyID::Stroke); stroke.has_value())
  404. computed_values.set_stroke(stroke.value()->to_color(*this));
  405. if (auto stroke_width = specified_style.property(CSS::PropertyID::StrokeWidth); stroke_width.has_value()) {
  406. // FIXME: Converting to pixels isn't really correct - values should be in "user units"
  407. // https://svgwg.org/svg2-draft/coords.html#TermUserUnits
  408. if (stroke_width.value()->is_numeric())
  409. computed_values.set_stroke_width(CSS::Length::make_px(stroke_width.value()->to_number()));
  410. else
  411. computed_values.set_stroke_width(stroke_width.value()->to_length());
  412. }
  413. }
  414. void Node::handle_mousedown(Badge<EventHandler>, const Gfx::IntPoint&, unsigned, unsigned)
  415. {
  416. }
  417. void Node::handle_mouseup(Badge<EventHandler>, const Gfx::IntPoint&, unsigned, unsigned)
  418. {
  419. }
  420. void Node::handle_mousemove(Badge<EventHandler>, const Gfx::IntPoint&, unsigned, unsigned)
  421. {
  422. }
  423. bool Node::handle_mousewheel(Badge<EventHandler>, const Gfx::IntPoint&, unsigned, unsigned, int wheel_delta)
  424. {
  425. if (auto* containing_block = this->containing_block()) {
  426. if (!containing_block->is_scrollable())
  427. return false;
  428. auto new_offset = containing_block->scroll_offset();
  429. new_offset.translate_by(0, wheel_delta);
  430. containing_block->set_scroll_offset(new_offset);
  431. return true;
  432. }
  433. return false;
  434. }
  435. bool Node::is_root_element() const
  436. {
  437. if (is_anonymous())
  438. return false;
  439. return is<HTML::HTMLHtmlElement>(*dom_node());
  440. }
  441. String Node::class_name() const
  442. {
  443. return demangle(typeid(*this).name());
  444. }
  445. bool Node::is_inline_block() const
  446. {
  447. return is_inline() && is<BlockContainer>(*this);
  448. }
  449. NonnullRefPtr<NodeWithStyle> NodeWithStyle::create_anonymous_wrapper() const
  450. {
  451. auto wrapper = adopt_ref(*new BlockContainer(const_cast<DOM::Document&>(document()), nullptr, m_computed_values.clone_inherited_values()));
  452. wrapper->m_font = m_font;
  453. wrapper->m_font_size = m_font_size;
  454. wrapper->m_line_height = m_line_height;
  455. return wrapper;
  456. }
  457. }