InlineFormattingContext.cpp 18 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417
  1. /*
  2. * Copyright (c) 2020-2022, Andreas Kling <kling@serenityos.org>
  3. *
  4. * SPDX-License-Identifier: BSD-2-Clause
  5. */
  6. #include <LibWeb/CSS/Length.h>
  7. #include <LibWeb/DOM/Node.h>
  8. #include <LibWeb/Dump.h>
  9. #include <LibWeb/Layout/BlockContainer.h>
  10. #include <LibWeb/Layout/BlockFormattingContext.h>
  11. #include <LibWeb/Layout/Box.h>
  12. #include <LibWeb/Layout/InlineFormattingContext.h>
  13. #include <LibWeb/Layout/InlineLevelIterator.h>
  14. #include <LibWeb/Layout/LineBuilder.h>
  15. #include <LibWeb/Layout/ReplacedBox.h>
  16. #include <LibWeb/Layout/SVGSVGBox.h>
  17. namespace Web::Layout {
  18. InlineFormattingContext::InlineFormattingContext(LayoutState& state, BlockContainer const& containing_block, BlockFormattingContext& parent)
  19. : FormattingContext(Type::Inline, state, containing_block, &parent)
  20. , m_containing_block_state(state.get(containing_block))
  21. {
  22. }
  23. InlineFormattingContext::~InlineFormattingContext() = default;
  24. BlockFormattingContext& InlineFormattingContext::parent()
  25. {
  26. return static_cast<BlockFormattingContext&>(*FormattingContext::parent());
  27. }
  28. BlockFormattingContext const& InlineFormattingContext::parent() const
  29. {
  30. return static_cast<BlockFormattingContext const&>(*FormattingContext::parent());
  31. }
  32. CSSPixels InlineFormattingContext::leftmost_x_offset_at(CSSPixels y) const
  33. {
  34. // NOTE: Floats are relative to the BFC root box, not necessarily the containing block of this IFC.
  35. auto box_in_root_rect = content_box_rect_in_ancestor_coordinate_space(containing_block(), parent().root());
  36. CSSPixels y_in_root = box_in_root_rect.y() + y;
  37. auto space_and_containing_margin = parent().space_used_and_containing_margin_for_floats(y_in_root);
  38. auto left_side_floats_limit_to_right = space_and_containing_margin.left_total_containing_margin + space_and_containing_margin.left_used_space;
  39. if (box_in_root_rect.x() >= left_side_floats_limit_to_right) {
  40. // The left edge of the containing block is to the right of the rightmost left-side float.
  41. // We start placing inline content at the left edge of the containing block.
  42. return 0;
  43. }
  44. // The left edge of the containing block is to the left of the rightmost left-side float.
  45. // We adjust the inline content insertion point by the overlap between the containing block and the float.
  46. return left_side_floats_limit_to_right - max(CSSPixels(0), box_in_root_rect.x());
  47. }
  48. AvailableSize InlineFormattingContext::available_space_for_line(CSSPixels y) const
  49. {
  50. auto intrusions = parent().intrusion_by_floats_into_box(containing_block(), y);
  51. if (m_available_space->width.is_definite()) {
  52. return AvailableSize::make_definite(m_available_space->width.to_px_or_zero() - (intrusions.left + intrusions.right));
  53. } else {
  54. return m_available_space->width;
  55. }
  56. }
  57. CSSPixels InlineFormattingContext::automatic_content_width() const
  58. {
  59. return m_automatic_content_width;
  60. }
  61. CSSPixels InlineFormattingContext::automatic_content_height() const
  62. {
  63. return m_automatic_content_height;
  64. }
  65. void InlineFormattingContext::run(Box const&, LayoutMode layout_mode, AvailableSpace const& available_space)
  66. {
  67. VERIFY(containing_block().children_are_inline());
  68. m_available_space = available_space;
  69. generate_line_boxes(layout_mode);
  70. CSSPixels content_height = 0;
  71. for (auto& line_box : m_containing_block_state.line_boxes) {
  72. content_height += line_box.height();
  73. }
  74. // NOTE: We ask the parent BFC to calculate the automatic content width of this IFC.
  75. // This ensures that any floated boxes are taken into account.
  76. m_automatic_content_width = parent().greatest_child_width(containing_block());
  77. m_automatic_content_height = content_height;
  78. }
  79. void InlineFormattingContext::dimension_box_on_line(Box const& box, LayoutMode layout_mode)
  80. {
  81. auto width_of_containing_block = m_available_space->width.to_px_or_zero();
  82. auto& box_state = m_state.get_mutable(box);
  83. auto const& computed_values = box.computed_values();
  84. box_state.margin_left = computed_values.margin().left().to_px(box, width_of_containing_block);
  85. box_state.border_left = computed_values.border_left().width;
  86. box_state.padding_left = computed_values.padding().left().to_px(box, width_of_containing_block);
  87. box_state.margin_right = computed_values.margin().right().to_px(box, width_of_containing_block);
  88. box_state.border_right = computed_values.border_right().width;
  89. box_state.padding_right = computed_values.padding().right().to_px(box, width_of_containing_block);
  90. box_state.margin_top = computed_values.margin().top().to_px(box, width_of_containing_block);
  91. box_state.border_top = computed_values.border_top().width;
  92. box_state.padding_top = computed_values.padding().top().to_px(box, width_of_containing_block);
  93. box_state.padding_bottom = computed_values.padding().bottom().to_px(box, width_of_containing_block);
  94. box_state.border_bottom = computed_values.border_bottom().width;
  95. box_state.margin_bottom = computed_values.margin().bottom().to_px(box, width_of_containing_block);
  96. if (box_is_sized_as_replaced_element(box)) {
  97. box_state.set_content_width(compute_width_for_replaced_element(box, *m_available_space));
  98. box_state.set_content_height(compute_height_for_replaced_element(box, *m_available_space));
  99. if (is<SVGSVGBox>(box))
  100. (void)layout_inside(box, layout_mode, box_state.available_inner_space_or_constraints_from(*m_available_space));
  101. return;
  102. }
  103. // Any box that has simple flow inside should have generated line box fragments already.
  104. if (box.display().is_flow_inside()) {
  105. dbgln("FIXME: InlineFormattingContext::dimension_box_on_line got unexpected box in inline context:");
  106. dump_tree(box);
  107. return;
  108. }
  109. auto const& width_value = box.computed_values().width();
  110. CSSPixels unconstrained_width = 0;
  111. if (should_treat_width_as_auto(box, *m_available_space)) {
  112. auto result = calculate_shrink_to_fit_widths(box);
  113. if (m_available_space->width.is_definite()) {
  114. auto available_width = m_available_space->width.to_px_or_zero()
  115. - box_state.margin_left
  116. - box_state.border_left
  117. - box_state.padding_left
  118. - box_state.padding_right
  119. - box_state.border_right
  120. - box_state.margin_right;
  121. unconstrained_width = min(max(result.preferred_minimum_width, available_width), result.preferred_width);
  122. } else if (m_available_space->width.is_min_content()) {
  123. unconstrained_width = result.preferred_minimum_width;
  124. } else {
  125. unconstrained_width = result.preferred_width;
  126. }
  127. } else {
  128. if (width_value.contains_percentage() && !m_available_space->width.is_definite()) {
  129. // NOTE: We can't resolve percentages yet. We'll have to wait until after inner layout.
  130. } else {
  131. auto inner_width = calculate_inner_width(box, m_available_space->width, width_value);
  132. unconstrained_width = inner_width;
  133. }
  134. }
  135. CSSPixels width = unconstrained_width;
  136. if (!should_treat_max_width_as_none(box, m_available_space->width)) {
  137. auto max_width = calculate_inner_width(box, m_available_space->width, box.computed_values().max_width());
  138. width = min(width, max_width);
  139. }
  140. auto computed_min_width = box.computed_values().min_width();
  141. if (!computed_min_width.is_auto()) {
  142. auto min_width = calculate_inner_width(box, m_available_space->width, computed_min_width);
  143. width = max(width, min_width);
  144. }
  145. box_state.set_content_width(width);
  146. auto independent_formatting_context = layout_inside(box, layout_mode, box_state.available_inner_space_or_constraints_from(*m_available_space));
  147. auto const& height_value = box.computed_values().height();
  148. if (should_treat_height_as_auto(box, *m_available_space)) {
  149. // FIXME: (10.6.6) If 'height' is 'auto', the height depends on the element's descendants per 10.6.7.
  150. parent().compute_height(box, AvailableSpace(AvailableSize::make_indefinite(), AvailableSize::make_indefinite()));
  151. } else {
  152. auto inner_height = calculate_inner_height(box, AvailableSize::make_definite(m_containing_block_state.content_height()), height_value);
  153. box_state.set_content_height(inner_height.to_px(box));
  154. }
  155. if (independent_formatting_context)
  156. independent_formatting_context->parent_context_did_dimension_child_root_box();
  157. }
  158. void InlineFormattingContext::apply_justification_to_fragments(CSS::TextJustify text_justify, LineBox& line_box, bool is_last_line)
  159. {
  160. switch (text_justify) {
  161. case CSS::TextJustify::None:
  162. return;
  163. // FIXME: These two cases currently fall back to auto, handle them as well.
  164. case CSS::TextJustify::InterCharacter:
  165. case CSS::TextJustify::InterWord:
  166. case CSS::TextJustify::Auto:
  167. break;
  168. }
  169. // https://www.w3.org/TR/css-text-3/#text-align-property
  170. // Unless otherwise specified by text-align-last, the last line before a forced break or the end of the block is start-aligned.
  171. // FIXME: Support text-align-last.
  172. if (is_last_line || line_box.m_has_forced_break)
  173. return;
  174. CSSPixels excess_horizontal_space = line_box.original_available_width().to_px_or_zero() - line_box.width();
  175. CSSPixels excess_horizontal_space_including_whitespace = excess_horizontal_space;
  176. size_t whitespace_count = 0;
  177. for (auto& fragment : line_box.fragments()) {
  178. if (fragment.is_justifiable_whitespace()) {
  179. ++whitespace_count;
  180. excess_horizontal_space_including_whitespace += fragment.width();
  181. }
  182. }
  183. CSSPixels justified_space_width = whitespace_count > 0 ? (excess_horizontal_space_including_whitespace / whitespace_count) : 0;
  184. // This is the amount that each fragment will be offset by. If a whitespace
  185. // fragment is shorter than the justified space width, it increases to push
  186. // subsequent fragments, and decreases to pull them back otherwise.
  187. CSSPixels running_diff = 0;
  188. for (size_t i = 0; i < line_box.fragments().size(); ++i) {
  189. auto& fragment = line_box.fragments()[i];
  190. auto offset = fragment.offset();
  191. offset.translate_by(running_diff, 0);
  192. fragment.set_offset(offset);
  193. if (fragment.is_justifiable_whitespace()
  194. && fragment.width() != justified_space_width) {
  195. running_diff += justified_space_width - fragment.width();
  196. fragment.set_width(justified_space_width);
  197. }
  198. }
  199. }
  200. void InlineFormattingContext::generate_line_boxes(LayoutMode layout_mode)
  201. {
  202. auto& containing_block_state = m_state.get_mutable(containing_block());
  203. auto& line_boxes = containing_block_state.line_boxes;
  204. line_boxes.clear_with_capacity();
  205. InlineLevelIterator iterator(*this, m_state, containing_block(), layout_mode);
  206. LineBuilder line_builder(*this, m_state);
  207. for (;;) {
  208. auto item_opt = iterator.next();
  209. if (!item_opt.has_value())
  210. break;
  211. auto& item = item_opt.value();
  212. // Ignore collapsible whitespace chunks at the start of line, and if the last fragment already ends in whitespace.
  213. if (item.is_collapsible_whitespace && (line_boxes.is_empty() || line_boxes.last().is_empty_or_ends_in_whitespace())) {
  214. if (item.node->computed_values().white_space() != CSS::WhiteSpace::Nowrap) {
  215. auto next_width = iterator.next_non_whitespace_sequence_width();
  216. if (next_width > 0)
  217. line_builder.break_if_needed(next_width);
  218. }
  219. continue;
  220. }
  221. switch (item.type) {
  222. case InlineLevelIterator::Item::Type::ForcedBreak: {
  223. line_builder.break_line(LineBuilder::ForcedBreak::Yes);
  224. if (item.node) {
  225. auto introduce_clearance = parent().clear_floating_boxes(*item.node, *this);
  226. if (introduce_clearance == BlockFormattingContext::DidIntroduceClearance::Yes)
  227. parent().reset_margin_state();
  228. }
  229. break;
  230. }
  231. case InlineLevelIterator::Item::Type::Element: {
  232. auto& box = verify_cast<Layout::Box>(*item.node);
  233. compute_inset(box);
  234. if (containing_block().computed_values().white_space() != CSS::WhiteSpace::Nowrap) {
  235. auto minimum_space_needed_on_line = item.border_box_width();
  236. if (item.margin_start < 0)
  237. minimum_space_needed_on_line += item.margin_start;
  238. if (item.margin_end < 0)
  239. minimum_space_needed_on_line += item.margin_end;
  240. line_builder.break_if_needed(minimum_space_needed_on_line);
  241. }
  242. line_builder.append_box(box, item.border_start + item.padding_start, item.padding_end + item.border_end, item.margin_start, item.margin_end);
  243. break;
  244. }
  245. case InlineLevelIterator::Item::Type::AbsolutelyPositionedElement:
  246. if (is<Box>(*item.node))
  247. parent().add_absolutely_positioned_box(static_cast<Layout::Box const&>(*item.node));
  248. break;
  249. case InlineLevelIterator::Item::Type::FloatingElement:
  250. if (is<Box>(*item.node)) {
  251. auto introduce_clearance = parent().clear_floating_boxes(*item.node, *this);
  252. if (introduce_clearance == BlockFormattingContext::DidIntroduceClearance::Yes)
  253. parent().reset_margin_state();
  254. parent().layout_floating_box(static_cast<Layout::Box const&>(*item.node), containing_block(), layout_mode, *m_available_space, 0, &line_builder);
  255. }
  256. break;
  257. case InlineLevelIterator::Item::Type::Text: {
  258. auto& text_node = verify_cast<Layout::TextNode>(*item.node);
  259. if (text_node.computed_values().white_space() != CSS::WhiteSpace::Nowrap) {
  260. bool is_whitespace = false;
  261. CSSPixels next_width = 0;
  262. // If we're in a whitespace-collapsing context, we can simply check the flag.
  263. if (item.is_collapsible_whitespace) {
  264. is_whitespace = true;
  265. next_width = iterator.next_non_whitespace_sequence_width();
  266. } else {
  267. // In whitespace-preserving contexts (white-space: pre*), we have to check manually.
  268. auto view = text_node.text_for_rendering().bytes_as_string_view().substring_view(item.offset_in_node, item.length_in_node);
  269. is_whitespace = view.is_whitespace();
  270. if (is_whitespace)
  271. next_width = iterator.next_non_whitespace_sequence_width();
  272. }
  273. // If whitespace caused us to break, we swallow the whitespace instead of
  274. // putting it on the next line.
  275. if (is_whitespace && next_width > 0 && line_builder.break_if_needed(item.border_box_width() + next_width))
  276. break;
  277. }
  278. line_builder.append_text_chunk(
  279. text_node,
  280. item.offset_in_node,
  281. item.length_in_node,
  282. item.border_start + item.padding_start,
  283. item.padding_end + item.border_end,
  284. item.margin_start,
  285. item.margin_end,
  286. item.width,
  287. text_node.line_height(),
  288. item.glyph_run);
  289. break;
  290. }
  291. }
  292. }
  293. for (auto& line_box : line_boxes) {
  294. line_box.trim_trailing_whitespace();
  295. }
  296. line_builder.remove_last_line_if_empty();
  297. auto const& containing_block = this->containing_block();
  298. auto text_align = containing_block.computed_values().text_align();
  299. auto text_justify = containing_block.computed_values().text_justify();
  300. if (text_align == CSS::TextAlign::Justify) {
  301. for (size_t i = 0; i < line_boxes.size(); i++) {
  302. auto& line_box = line_boxes[i];
  303. auto is_last_line = i == line_boxes.size() - 1;
  304. apply_justification_to_fragments(text_justify, line_box, is_last_line);
  305. }
  306. }
  307. }
  308. bool InlineFormattingContext::any_floats_intrude_at_y(CSSPixels y) const
  309. {
  310. auto box_in_root_rect = content_box_rect_in_ancestor_coordinate_space(containing_block(), parent().root());
  311. CSSPixels y_in_root = box_in_root_rect.y() + y;
  312. auto space_and_containing_margin = parent().space_used_and_containing_margin_for_floats(y_in_root);
  313. return space_and_containing_margin.left_used_space > 0 || space_and_containing_margin.right_used_space > 0;
  314. }
  315. bool InlineFormattingContext::can_fit_new_line_at_y(CSSPixels y) const
  316. {
  317. auto top_intrusions = parent().intrusion_by_floats_into_box(containing_block(), y);
  318. auto bottom_intrusions = parent().intrusion_by_floats_into_box(containing_block(), y + containing_block().line_height() - 1);
  319. auto left_edge = [](auto& space) -> CSSPixels {
  320. return space.left;
  321. };
  322. auto right_edge = [this](auto& space) -> CSSPixels {
  323. return m_available_space->width.to_px_or_zero() - space.right;
  324. };
  325. auto top_left_edge = left_edge(top_intrusions);
  326. auto top_right_edge = right_edge(top_intrusions);
  327. auto bottom_left_edge = left_edge(bottom_intrusions);
  328. auto bottom_right_edge = right_edge(bottom_intrusions);
  329. if (top_left_edge > bottom_right_edge)
  330. return false;
  331. if (bottom_left_edge > top_right_edge)
  332. return false;
  333. return true;
  334. }
  335. bool InlineFormattingContext::can_determine_size_of_child() const
  336. {
  337. return parent().can_determine_size_of_child();
  338. }
  339. void InlineFormattingContext::determine_width_of_child(Box const& box, AvailableSpace const& available_space)
  340. {
  341. return parent().determine_width_of_child(box, available_space);
  342. }
  343. void InlineFormattingContext::determine_height_of_child(Box const& box, AvailableSpace const& available_space)
  344. {
  345. return parent().determine_height_of_child(box, available_space);
  346. }
  347. CSSPixels InlineFormattingContext::vertical_float_clearance() const
  348. {
  349. return m_vertical_float_clearance;
  350. }
  351. void InlineFormattingContext::set_vertical_float_clearance(CSSPixels vertical_float_clearance)
  352. {
  353. m_vertical_float_clearance = vertical_float_clearance;
  354. }
  355. }