Node.cpp 27 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666
  1. /*
  2. * Copyright (c) 2018-2022, Andreas Kling <kling@serenityos.org>
  3. *
  4. * SPDX-License-Identifier: BSD-2-Clause
  5. */
  6. #include <AK/Demangle.h>
  7. #include <LibWeb/DOM/Document.h>
  8. #include <LibWeb/Dump.h>
  9. #include <LibWeb/HTML/BrowsingContext.h>
  10. #include <LibWeb/HTML/HTMLHtmlElement.h>
  11. #include <LibWeb/Layout/BlockContainer.h>
  12. #include <LibWeb/Layout/FormattingContext.h>
  13. #include <LibWeb/Layout/InitialContainingBlock.h>
  14. #include <LibWeb/Layout/Node.h>
  15. #include <LibWeb/Layout/TextNode.h>
  16. #include <LibWeb/Platform/FontPlugin.h>
  17. namespace Web::Layout {
  18. Node::Node(DOM::Document& document, DOM::Node* node)
  19. : m_dom_node(node ? *node : document)
  20. , m_browsing_context(*document.browsing_context())
  21. , m_anonymous(node == nullptr)
  22. {
  23. m_serial_id = document.next_layout_node_serial_id({});
  24. if (node)
  25. node->set_layout_node({}, *this);
  26. }
  27. Node::~Node() = default;
  28. void Node::visit_edges(Cell::Visitor& visitor)
  29. {
  30. Base::visit_edges(visitor);
  31. visitor.visit(m_dom_node);
  32. visitor.visit(m_browsing_context);
  33. TreeNode::visit_edges(visitor);
  34. }
  35. // https://www.w3.org/TR/css-display-3/#out-of-flow
  36. bool Node::is_out_of_flow(FormattingContext const& formatting_context) const
  37. {
  38. // A layout node is out of flow if either:
  39. // 1. It is floated (which requires that floating is not inhibited).
  40. if (!formatting_context.inhibits_floating() && computed_values().float_() != CSS::Float::None)
  41. return true;
  42. // 2. It is "absolutely positioned".
  43. if (is_absolutely_positioned())
  44. return true;
  45. return false;
  46. }
  47. bool Node::can_contain_boxes_with_position_absolute() const
  48. {
  49. return computed_values().position() != CSS::Position::Static || is<InitialContainingBlock>(*this);
  50. }
  51. BlockContainer const* Node::containing_block() const
  52. {
  53. if (is<TextNode>(*this))
  54. return first_ancestor_of_type<BlockContainer>();
  55. auto position = computed_values().position();
  56. if (position == CSS::Position::Absolute) {
  57. auto* ancestor = parent();
  58. while (ancestor && !ancestor->can_contain_boxes_with_position_absolute())
  59. ancestor = ancestor->parent();
  60. while (ancestor && (!is<BlockContainer>(*ancestor) || ancestor->is_anonymous()))
  61. ancestor = ancestor->containing_block();
  62. return static_cast<BlockContainer const*>(ancestor);
  63. }
  64. if (position == CSS::Position::Fixed)
  65. return &root();
  66. return first_ancestor_of_type<BlockContainer>();
  67. }
  68. // https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context
  69. bool Node::establishes_stacking_context() const
  70. {
  71. // NOTE: While MDN is not authoritative, there isn't a single convenient location
  72. // in the CSS specifications where the rules for stacking contexts is described.
  73. // That's why the "spec link" here points to MDN.
  74. if (!has_style())
  75. return false;
  76. if (dom_node() == &document().root())
  77. return true;
  78. auto position = computed_values().position();
  79. // Element with a position value absolute or relative and z-index value other than auto.
  80. if (position == CSS::Position::Absolute || position == CSS::Position::Relative) {
  81. if (computed_values().z_index().has_value()) {
  82. return true;
  83. }
  84. }
  85. // Element with a position value fixed or sticky.
  86. if (position == CSS::Position::Fixed || position == CSS::Position::Sticky)
  87. return true;
  88. if (!computed_values().transformations().is_empty())
  89. return true;
  90. // Element that is a child of a flex container, with z-index value other than auto.
  91. if (parent() && parent()->display().is_flex_inside() && computed_values().z_index().has_value())
  92. return true;
  93. // Element that is a child of a grid container, with z-index value other than auto.
  94. if (parent() && parent()->display().is_grid_inside() && computed_values().z_index().has_value())
  95. return true;
  96. return computed_values().opacity() < 1.0f;
  97. }
  98. HTML::BrowsingContext const& Node::browsing_context() const
  99. {
  100. return *m_browsing_context;
  101. }
  102. HTML::BrowsingContext& Node::browsing_context()
  103. {
  104. return *m_browsing_context;
  105. }
  106. InitialContainingBlock const& Node::root() const
  107. {
  108. VERIFY(document().layout_node());
  109. return *document().layout_node();
  110. }
  111. InitialContainingBlock& Node::root()
  112. {
  113. VERIFY(document().layout_node());
  114. return *document().layout_node();
  115. }
  116. void Node::set_needs_display()
  117. {
  118. auto* containing_block = this->containing_block();
  119. if (!containing_block)
  120. return;
  121. if (!containing_block->paint_box())
  122. return;
  123. containing_block->paint_box()->for_each_fragment([&](auto& fragment) {
  124. if (&fragment.layout_node() == this || is_ancestor_of(fragment.layout_node())) {
  125. browsing_context().set_needs_display(enclosing_int_rect(fragment.absolute_rect()));
  126. }
  127. return IterationDecision::Continue;
  128. });
  129. }
  130. Gfx::FloatPoint Node::box_type_agnostic_position() const
  131. {
  132. if (is<Box>(*this))
  133. return verify_cast<Box>(*this).paint_box()->absolute_position();
  134. VERIFY(is_inline());
  135. Gfx::FloatPoint position;
  136. if (auto* block = containing_block()) {
  137. block->paint_box()->for_each_fragment([&](auto& fragment) {
  138. if (&fragment.layout_node() == this || is_ancestor_of(fragment.layout_node())) {
  139. position = fragment.absolute_rect().location();
  140. return IterationDecision::Break;
  141. }
  142. return IterationDecision::Continue;
  143. });
  144. }
  145. return position;
  146. }
  147. bool Node::is_floating() const
  148. {
  149. if (!has_style())
  150. return false;
  151. // flex-items don't float.
  152. if (is_flex_item())
  153. return false;
  154. return computed_values().float_() != CSS::Float::None;
  155. }
  156. bool Node::is_positioned() const
  157. {
  158. return has_style() && computed_values().position() != CSS::Position::Static;
  159. }
  160. bool Node::is_absolutely_positioned() const
  161. {
  162. if (!has_style())
  163. return false;
  164. auto position = computed_values().position();
  165. return position == CSS::Position::Absolute || position == CSS::Position::Fixed;
  166. }
  167. bool Node::is_fixed_position() const
  168. {
  169. if (!has_style())
  170. return false;
  171. auto position = computed_values().position();
  172. return position == CSS::Position::Fixed;
  173. }
  174. NodeWithStyle::NodeWithStyle(DOM::Document& document, DOM::Node* node, NonnullRefPtr<CSS::StyleProperties> computed_style)
  175. : Node(document, node)
  176. {
  177. m_has_style = true;
  178. apply_style(*computed_style);
  179. }
  180. NodeWithStyle::NodeWithStyle(DOM::Document& document, DOM::Node* node, CSS::ComputedValues computed_values)
  181. : Node(document, node)
  182. , m_computed_values(move(computed_values))
  183. {
  184. m_has_style = true;
  185. m_font = Platform::FontPlugin::the().default_font();
  186. }
  187. void NodeWithStyle::apply_style(const CSS::StyleProperties& computed_style)
  188. {
  189. auto& computed_values = static_cast<CSS::MutableComputedValues&>(m_computed_values);
  190. // NOTE: We have to be careful that font-related properties get set in the right order.
  191. // m_font is used by Length::to_px() when resolving sizes against this layout node.
  192. // That's why it has to be set before everything else.
  193. m_font = computed_style.computed_font();
  194. computed_values.set_font_size(computed_style.property(CSS::PropertyID::FontSize)->to_length().to_px(*this));
  195. computed_values.set_font_weight(computed_style.property(CSS::PropertyID::FontWeight)->to_integer());
  196. m_line_height = computed_style.line_height(*this);
  197. computed_values.set_vertical_align(computed_style.vertical_align());
  198. {
  199. auto attachments = computed_style.property(CSS::PropertyID::BackgroundAttachment);
  200. auto clips = computed_style.property(CSS::PropertyID::BackgroundClip);
  201. auto images = computed_style.property(CSS::PropertyID::BackgroundImage);
  202. auto origins = computed_style.property(CSS::PropertyID::BackgroundOrigin);
  203. auto positions = computed_style.property(CSS::PropertyID::BackgroundPosition);
  204. auto repeats = computed_style.property(CSS::PropertyID::BackgroundRepeat);
  205. auto sizes = computed_style.property(CSS::PropertyID::BackgroundSize);
  206. auto count_layers = [](auto maybe_style_value) -> size_t {
  207. if (maybe_style_value->is_value_list())
  208. return maybe_style_value->as_value_list().size();
  209. else
  210. return 1;
  211. };
  212. auto value_for_layer = [](auto& style_value, size_t layer_index) -> RefPtr<CSS::StyleValue> {
  213. if (style_value->is_value_list())
  214. return style_value->as_value_list().value_at(layer_index, true);
  215. return style_value;
  216. };
  217. size_t layer_count = 1;
  218. layer_count = max(layer_count, count_layers(attachments));
  219. layer_count = max(layer_count, count_layers(clips));
  220. layer_count = max(layer_count, count_layers(images));
  221. layer_count = max(layer_count, count_layers(origins));
  222. layer_count = max(layer_count, count_layers(positions));
  223. layer_count = max(layer_count, count_layers(repeats));
  224. layer_count = max(layer_count, count_layers(sizes));
  225. Vector<CSS::BackgroundLayerData> layers;
  226. layers.ensure_capacity(layer_count);
  227. for (size_t layer_index = 0; layer_index < layer_count; layer_index++) {
  228. CSS::BackgroundLayerData layer;
  229. if (auto image_value = value_for_layer(images, layer_index); image_value) {
  230. if (image_value->is_abstract_image()) {
  231. layer.background_image = image_value->as_abstract_image();
  232. layer.background_image->load_any_resources(document());
  233. }
  234. }
  235. if (auto attachment_value = value_for_layer(attachments, layer_index); attachment_value && attachment_value->has_identifier()) {
  236. switch (attachment_value->to_identifier()) {
  237. case CSS::ValueID::Fixed:
  238. layer.attachment = CSS::BackgroundAttachment::Fixed;
  239. break;
  240. case CSS::ValueID::Local:
  241. layer.attachment = CSS::BackgroundAttachment::Local;
  242. break;
  243. case CSS::ValueID::Scroll:
  244. layer.attachment = CSS::BackgroundAttachment::Scroll;
  245. break;
  246. default:
  247. break;
  248. }
  249. }
  250. auto as_box = [](auto value_id) {
  251. switch (value_id) {
  252. case CSS::ValueID::BorderBox:
  253. return CSS::BackgroundBox::BorderBox;
  254. case CSS::ValueID::ContentBox:
  255. return CSS::BackgroundBox::ContentBox;
  256. case CSS::ValueID::PaddingBox:
  257. return CSS::BackgroundBox::PaddingBox;
  258. default:
  259. VERIFY_NOT_REACHED();
  260. }
  261. };
  262. if (auto origin_value = value_for_layer(origins, layer_index); origin_value && origin_value->has_identifier()) {
  263. layer.origin = as_box(origin_value->to_identifier());
  264. }
  265. if (auto clip_value = value_for_layer(clips, layer_index); clip_value && clip_value->has_identifier()) {
  266. layer.clip = as_box(clip_value->to_identifier());
  267. }
  268. if (auto position_value = value_for_layer(positions, layer_index); position_value && position_value->is_position()) {
  269. auto& position = position_value->as_position();
  270. layer.position_edge_x = position.edge_x();
  271. layer.position_edge_y = position.edge_y();
  272. layer.position_offset_x = position.offset_x();
  273. layer.position_offset_y = position.offset_y();
  274. }
  275. if (auto size_value = value_for_layer(sizes, layer_index); size_value) {
  276. if (size_value->is_background_size()) {
  277. auto& size = size_value->as_background_size();
  278. layer.size_type = CSS::BackgroundSize::LengthPercentage;
  279. layer.size_x = size.size_x();
  280. layer.size_y = size.size_y();
  281. } else if (size_value->has_identifier()) {
  282. switch (size_value->to_identifier()) {
  283. case CSS::ValueID::Contain:
  284. layer.size_type = CSS::BackgroundSize::Contain;
  285. break;
  286. case CSS::ValueID::Cover:
  287. layer.size_type = CSS::BackgroundSize::Cover;
  288. break;
  289. default:
  290. break;
  291. }
  292. }
  293. }
  294. if (auto repeat_value = value_for_layer(repeats, layer_index); repeat_value && repeat_value->is_background_repeat()) {
  295. layer.repeat_x = repeat_value->as_background_repeat().repeat_x();
  296. layer.repeat_y = repeat_value->as_background_repeat().repeat_y();
  297. }
  298. layers.append(move(layer));
  299. }
  300. computed_values.set_background_layers(move(layers));
  301. }
  302. computed_values.set_background_color(computed_style.color_or_fallback(CSS::PropertyID::BackgroundColor, *this, CSS::InitialValues::background_color()));
  303. if (auto box_sizing = computed_style.box_sizing(); box_sizing.has_value())
  304. computed_values.set_box_sizing(box_sizing.release_value());
  305. if (auto maybe_font_variant = computed_style.font_variant(); maybe_font_variant.has_value())
  306. computed_values.set_font_variant(maybe_font_variant.release_value());
  307. // FIXME: BorderXRadius properties are now BorderRadiusStyleValues, so make use of that.
  308. auto border_bottom_left_radius = computed_style.property(CSS::PropertyID::BorderBottomLeftRadius);
  309. if (border_bottom_left_radius->is_border_radius()) {
  310. computed_values.set_border_bottom_left_radius(
  311. CSS::BorderRadiusData {
  312. border_bottom_left_radius->as_border_radius().horizontal_radius(),
  313. border_bottom_left_radius->as_border_radius().vertical_radius() });
  314. }
  315. auto border_bottom_right_radius = computed_style.property(CSS::PropertyID::BorderBottomRightRadius);
  316. if (border_bottom_right_radius->is_border_radius()) {
  317. computed_values.set_border_bottom_right_radius(
  318. CSS::BorderRadiusData {
  319. border_bottom_right_radius->as_border_radius().horizontal_radius(),
  320. border_bottom_right_radius->as_border_radius().vertical_radius() });
  321. }
  322. auto border_top_left_radius = computed_style.property(CSS::PropertyID::BorderTopLeftRadius);
  323. if (border_top_left_radius->is_border_radius()) {
  324. computed_values.set_border_top_left_radius(
  325. CSS::BorderRadiusData {
  326. border_top_left_radius->as_border_radius().horizontal_radius(),
  327. border_top_left_radius->as_border_radius().vertical_radius() });
  328. }
  329. auto border_top_right_radius = computed_style.property(CSS::PropertyID::BorderTopRightRadius);
  330. if (border_top_right_radius->is_border_radius()) {
  331. computed_values.set_border_top_right_radius(
  332. CSS::BorderRadiusData {
  333. border_top_right_radius->as_border_radius().horizontal_radius(),
  334. border_top_right_radius->as_border_radius().vertical_radius() });
  335. }
  336. computed_values.set_display(computed_style.display());
  337. auto flex_direction = computed_style.flex_direction();
  338. if (flex_direction.has_value())
  339. computed_values.set_flex_direction(flex_direction.value());
  340. auto flex_wrap = computed_style.flex_wrap();
  341. if (flex_wrap.has_value())
  342. computed_values.set_flex_wrap(flex_wrap.value());
  343. auto flex_basis = computed_style.flex_basis();
  344. if (flex_basis.has_value())
  345. computed_values.set_flex_basis(flex_basis.value());
  346. computed_values.set_flex_grow(computed_style.flex_grow());
  347. computed_values.set_flex_shrink(computed_style.flex_shrink());
  348. computed_values.set_order(computed_style.order());
  349. computed_values.set_clip(computed_style.clip());
  350. computed_values.set_backdrop_filter(computed_style.backdrop_filter());
  351. auto justify_content = computed_style.justify_content();
  352. if (justify_content.has_value())
  353. computed_values.set_justify_content(justify_content.value());
  354. auto align_content = computed_style.align_content();
  355. if (align_content.has_value())
  356. computed_values.set_align_content(align_content.value());
  357. auto align_items = computed_style.align_items();
  358. if (align_items.has_value())
  359. computed_values.set_align_items(align_items.value());
  360. auto align_self = computed_style.align_self();
  361. if (align_self.has_value())
  362. computed_values.set_align_self(align_self.value());
  363. auto appearance = computed_style.appearance();
  364. if (appearance.has_value())
  365. computed_values.set_appearance(appearance.value());
  366. auto position = computed_style.position();
  367. if (position.has_value())
  368. computed_values.set_position(position.value());
  369. auto text_align = computed_style.text_align();
  370. if (text_align.has_value())
  371. computed_values.set_text_align(text_align.value());
  372. auto text_justify = computed_style.text_justify();
  373. if (text_align.has_value())
  374. computed_values.set_text_justify(text_justify.value());
  375. auto white_space = computed_style.white_space();
  376. if (white_space.has_value())
  377. computed_values.set_white_space(white_space.value());
  378. auto float_ = computed_style.float_();
  379. if (float_.has_value())
  380. computed_values.set_float(float_.value());
  381. auto clear = computed_style.clear();
  382. if (clear.has_value())
  383. computed_values.set_clear(clear.value());
  384. auto overflow_x = computed_style.overflow_x();
  385. if (overflow_x.has_value())
  386. computed_values.set_overflow_x(overflow_x.value());
  387. auto overflow_y = computed_style.overflow_y();
  388. if (overflow_y.has_value())
  389. computed_values.set_overflow_y(overflow_y.value());
  390. auto cursor = computed_style.cursor();
  391. if (cursor.has_value())
  392. computed_values.set_cursor(cursor.value());
  393. auto image_rendering = computed_style.image_rendering();
  394. if (image_rendering.has_value())
  395. computed_values.set_image_rendering(image_rendering.value());
  396. auto pointer_events = computed_style.pointer_events();
  397. if (pointer_events.has_value())
  398. computed_values.set_pointer_events(pointer_events.value());
  399. computed_values.set_text_decoration_line(computed_style.text_decoration_line());
  400. auto text_decoration_style = computed_style.text_decoration_style();
  401. if (text_decoration_style.has_value())
  402. computed_values.set_text_decoration_style(text_decoration_style.value());
  403. auto text_transform = computed_style.text_transform();
  404. if (text_transform.has_value())
  405. computed_values.set_text_transform(text_transform.value());
  406. if (auto list_style_type = computed_style.list_style_type(); list_style_type.has_value())
  407. computed_values.set_list_style_type(list_style_type.value());
  408. auto list_style_image = computed_style.property(CSS::PropertyID::ListStyleImage);
  409. if (list_style_image->is_abstract_image()) {
  410. m_list_style_image = list_style_image->as_abstract_image();
  411. m_list_style_image->load_any_resources(document());
  412. }
  413. computed_values.set_color(computed_style.color_or_fallback(CSS::PropertyID::Color, *this, CSS::InitialValues::color()));
  414. // FIXME: The default text decoration color value is `currentcolor`, but since we can't resolve that easily,
  415. // we just manually grab the value from `color`. This makes it dependent on `color` being
  416. // specified first, so it's far from ideal.
  417. computed_values.set_text_decoration_color(computed_style.color_or_fallback(CSS::PropertyID::TextDecorationColor, *this, computed_values.color()));
  418. if (auto maybe_text_decoration_thickness = computed_style.length_percentage(CSS::PropertyID::TextDecorationThickness); maybe_text_decoration_thickness.has_value())
  419. computed_values.set_text_decoration_thickness(maybe_text_decoration_thickness.release_value());
  420. computed_values.set_text_shadow(computed_style.text_shadow());
  421. computed_values.set_z_index(computed_style.z_index());
  422. computed_values.set_opacity(computed_style.opacity());
  423. if (auto maybe_visibility = computed_style.visibility(); maybe_visibility.has_value())
  424. computed_values.set_visibility(maybe_visibility.release_value());
  425. m_visible = computed_values.opacity() != 0 && computed_values.visibility() == CSS::Visibility::Visible;
  426. computed_values.set_width(computed_style.size_value(CSS::PropertyID::Width));
  427. computed_values.set_min_width(computed_style.size_value(CSS::PropertyID::MinWidth));
  428. computed_values.set_max_width(computed_style.size_value(CSS::PropertyID::MaxWidth));
  429. computed_values.set_height(computed_style.size_value(CSS::PropertyID::Height));
  430. computed_values.set_min_height(computed_style.size_value(CSS::PropertyID::MinHeight));
  431. computed_values.set_max_height(computed_style.size_value(CSS::PropertyID::MaxHeight));
  432. computed_values.set_inset(computed_style.length_box(CSS::PropertyID::Left, CSS::PropertyID::Top, CSS::PropertyID::Right, CSS::PropertyID::Bottom, CSS::Length::make_auto()));
  433. computed_values.set_margin(computed_style.length_box(CSS::PropertyID::MarginLeft, CSS::PropertyID::MarginTop, CSS::PropertyID::MarginRight, CSS::PropertyID::MarginBottom, CSS::Length::make_px(0)));
  434. computed_values.set_padding(computed_style.length_box(CSS::PropertyID::PaddingLeft, CSS::PropertyID::PaddingTop, CSS::PropertyID::PaddingRight, CSS::PropertyID::PaddingBottom, CSS::Length::make_px(0)));
  435. computed_values.set_box_shadow(computed_style.box_shadow());
  436. computed_values.set_transformations(computed_style.transformations());
  437. computed_values.set_transform_origin(computed_style.transform_origin());
  438. auto do_border_style = [&](CSS::BorderData& border, CSS::PropertyID width_property, CSS::PropertyID color_property, CSS::PropertyID style_property) {
  439. // FIXME: The default border color value is `currentcolor`, but since we can't resolve that easily,
  440. // we just manually grab the value from `color`. This makes it dependent on `color` being
  441. // specified first, so it's far from ideal.
  442. border.color = computed_style.color_or_fallback(color_property, *this, computed_values.color());
  443. border.line_style = computed_style.line_style(style_property).value_or(CSS::LineStyle::None);
  444. if (border.line_style == CSS::LineStyle::None)
  445. border.width = 0;
  446. else
  447. border.width = computed_style.length_or_fallback(width_property, CSS::Length::make_px(0)).to_px(*this);
  448. };
  449. do_border_style(computed_values.border_left(), CSS::PropertyID::BorderLeftWidth, CSS::PropertyID::BorderLeftColor, CSS::PropertyID::BorderLeftStyle);
  450. do_border_style(computed_values.border_top(), CSS::PropertyID::BorderTopWidth, CSS::PropertyID::BorderTopColor, CSS::PropertyID::BorderTopStyle);
  451. do_border_style(computed_values.border_right(), CSS::PropertyID::BorderRightWidth, CSS::PropertyID::BorderRightColor, CSS::PropertyID::BorderRightStyle);
  452. do_border_style(computed_values.border_bottom(), CSS::PropertyID::BorderBottomWidth, CSS::PropertyID::BorderBottomColor, CSS::PropertyID::BorderBottomStyle);
  453. computed_values.set_content(computed_style.content());
  454. computed_values.set_grid_template_columns(computed_style.grid_template_columns());
  455. computed_values.set_grid_template_rows(computed_style.grid_template_rows());
  456. computed_values.set_grid_column_end(computed_style.grid_column_end());
  457. computed_values.set_grid_column_start(computed_style.grid_column_start());
  458. computed_values.set_grid_row_end(computed_style.grid_row_end());
  459. computed_values.set_grid_row_start(computed_style.grid_row_start());
  460. if (auto fill = computed_style.property(CSS::PropertyID::Fill); fill->has_color())
  461. computed_values.set_fill(fill->to_color(*this));
  462. if (auto stroke = computed_style.property(CSS::PropertyID::Stroke); stroke->has_color())
  463. computed_values.set_stroke(stroke->to_color(*this));
  464. auto stroke_width = computed_style.property(CSS::PropertyID::StrokeWidth);
  465. // FIXME: Converting to pixels isn't really correct - values should be in "user units"
  466. // https://svgwg.org/svg2-draft/coords.html#TermUserUnits
  467. if (stroke_width->is_numeric())
  468. computed_values.set_stroke_width(CSS::Length::make_px(stroke_width->to_number()));
  469. else
  470. computed_values.set_stroke_width(stroke_width->to_length());
  471. }
  472. bool Node::is_root_element() const
  473. {
  474. if (is_anonymous())
  475. return false;
  476. return is<HTML::HTMLHtmlElement>(*dom_node());
  477. }
  478. String Node::debug_description() const
  479. {
  480. StringBuilder builder;
  481. builder.append(class_name());
  482. if (dom_node()) {
  483. builder.appendff("<{}>", dom_node()->node_name());
  484. if (dom_node()->is_element()) {
  485. auto& element = static_cast<DOM::Element const&>(*dom_node());
  486. if (auto id = element.get_attribute(HTML::AttributeNames::id); !id.is_null())
  487. builder.appendff("#{}", id);
  488. for (auto const& class_name : element.class_names())
  489. builder.appendff(".{}", class_name);
  490. }
  491. } else {
  492. builder.append("(anonymous)"sv);
  493. }
  494. return builder.to_string();
  495. }
  496. CSS::Display Node::display() const
  497. {
  498. if (!has_style()) {
  499. // NOTE: No style means this is dumb text content.
  500. return CSS::Display(CSS::Display::Outside::Inline, CSS::Display::Inside::Flow);
  501. }
  502. return computed_values().display();
  503. }
  504. bool Node::is_inline() const
  505. {
  506. return display().is_inline_outside();
  507. }
  508. bool Node::is_inline_block() const
  509. {
  510. auto display = this->display();
  511. return display.is_inline_outside() && display.is_flow_root_inside();
  512. }
  513. JS::NonnullGCPtr<NodeWithStyle> NodeWithStyle::create_anonymous_wrapper() const
  514. {
  515. auto wrapper = heap().allocate_without_realm<BlockContainer>(const_cast<DOM::Document&>(document()), nullptr, m_computed_values.clone_inherited_values());
  516. static_cast<CSS::MutableComputedValues&>(wrapper->m_computed_values).set_display(CSS::Display(CSS::Display::Outside::Block, CSS::Display::Inside::Flow));
  517. wrapper->m_font = m_font;
  518. wrapper->m_line_height = m_line_height;
  519. return *wrapper;
  520. }
  521. void Node::set_paintable(RefPtr<Painting::Paintable> paintable)
  522. {
  523. m_paintable = move(paintable);
  524. }
  525. RefPtr<Painting::Paintable> Node::create_paintable() const
  526. {
  527. return nullptr;
  528. }
  529. bool Node::is_anonymous() const
  530. {
  531. return m_anonymous;
  532. }
  533. DOM::Node const* Node::dom_node() const
  534. {
  535. if (m_anonymous)
  536. return nullptr;
  537. return m_dom_node.ptr();
  538. }
  539. DOM::Node* Node::dom_node()
  540. {
  541. if (m_anonymous)
  542. return nullptr;
  543. return m_dom_node.ptr();
  544. }
  545. DOM::Document& Node::document()
  546. {
  547. return m_dom_node->document();
  548. }
  549. DOM::Document const& Node::document() const
  550. {
  551. return m_dom_node->document();
  552. }
  553. }