FlexFormattingContext.cpp 41 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970
  1. /*
  2. * Copyright (c) 2021, Andreas Kling <kling@serenityos.org>
  3. * Copyright (c) 2021, Tobias Christiansen <tobyase@serenityos.org>
  4. *
  5. * SPDX-License-Identifier: BSD-2-Clause
  6. */
  7. #include "InlineFormattingContext.h"
  8. #include <AK/Function.h>
  9. #include <AK/StdLibExtras.h>
  10. #include <LibWeb/Layout/BlockContainer.h>
  11. #include <LibWeb/Layout/BlockFormattingContext.h>
  12. #include <LibWeb/Layout/Box.h>
  13. #include <LibWeb/Layout/FlexFormattingContext.h>
  14. #include <LibWeb/Layout/InitialContainingBlock.h>
  15. #include <LibWeb/Layout/TextNode.h>
  16. namespace Web::Layout {
  17. static float get_pixel_size(Box const& box, CSS::Length const& length)
  18. {
  19. return length.resolved(CSS::Length::make_px(0), box, box.containing_block()->width()).to_px(box);
  20. }
  21. FlexFormattingContext::FlexFormattingContext(Box& flex_container, FormattingContext* parent)
  22. : FormattingContext(Type::Flex, flex_container, parent)
  23. , m_flex_direction(flex_container.computed_values().flex_direction())
  24. {
  25. }
  26. FlexFormattingContext::~FlexFormattingContext()
  27. {
  28. }
  29. void FlexFormattingContext::run(Box& run_box, LayoutMode)
  30. {
  31. VERIFY(&run_box == &flex_container());
  32. // This implements https://www.w3.org/TR/css-flexbox-1/#layout-algorithm
  33. // FIXME: Implement reverse and ordering.
  34. // 1. Generate anonymous flex items
  35. generate_anonymous_flex_items();
  36. // 2. Determine the available main and cross space for the flex items
  37. float main_max_size = NumericLimits<float>::max();
  38. float main_min_size = 0;
  39. float cross_max_size = NumericLimits<float>::max();
  40. float cross_min_size = 0;
  41. bool main_is_constrained = false;
  42. bool cross_is_constrained = false;
  43. bool main_size_is_infinite = false;
  44. auto available_space = determine_available_main_and_cross_space(main_size_is_infinite, main_is_constrained, cross_is_constrained, main_min_size, main_max_size, cross_min_size, cross_max_size);
  45. auto main_available_size = available_space.main;
  46. [[maybe_unused]] auto cross_available_size = available_space.cross;
  47. // 3. Determine the flex base size and hypothetical main size of each item
  48. for (auto& flex_item : m_flex_items) {
  49. determine_flex_base_size_and_hypothetical_main_size(flex_item);
  50. }
  51. // 4. Determine the main size of the flex container
  52. determine_main_size_of_flex_container(main_is_constrained, main_size_is_infinite, main_available_size, main_min_size, main_max_size);
  53. // 5. Collect flex items into flex lines:
  54. // After this step no additional items are to be added to flex_lines or any of its items!
  55. collect_flex_items_into_flex_lines(main_available_size);
  56. // 6. Resolve the flexible lengths
  57. resolve_flexible_lengths(main_available_size);
  58. // Cross Size Determination
  59. // 7. Determine the hypothetical cross size of each item
  60. for (auto& flex_item : m_flex_items) {
  61. flex_item.hypothetical_cross_size = determine_hypothetical_cross_size_of_item(flex_item.box);
  62. }
  63. // 8. Calculate the cross size of each flex line.
  64. calculate_cross_size_of_each_flex_line(cross_min_size, cross_max_size);
  65. // 9. Handle 'align-content: stretch'.
  66. // FIXME: This
  67. // 10. Collapse visibility:collapse items.
  68. // FIXME: This
  69. // 11. Determine the used cross size of each flex item.
  70. determine_used_cross_size_of_each_flex_item();
  71. // 12. Distribute any remaining free space.
  72. distribute_any_remaining_free_space(main_available_size);
  73. // 13. Resolve cross-axis auto margins.
  74. // FIXME: This
  75. // 14. Align all flex items along the cross-axis
  76. align_all_flex_items_along_the_cross_axis();
  77. // 15. Determine the flex container’s used cross size:
  78. determine_flex_container_used_cross_size(cross_min_size, cross_max_size);
  79. // 16. Align all flex lines (per align-content)
  80. align_all_flex_lines();
  81. }
  82. void FlexFormattingContext::populate_specified_margins(FlexItem& item, CSS::FlexDirection flex_direction) const
  83. {
  84. auto width_of_containing_block = item.box.width_of_logical_containing_block();
  85. // FIXME: This should also take reverse-ness into account
  86. if (flex_direction == CSS::FlexDirection::Row || flex_direction == CSS::FlexDirection::RowReverse) {
  87. item.margins.main_before = item.box.computed_values().margin().left.resolved_or_zero(item.box, width_of_containing_block).to_px(item.box);
  88. item.margins.main_after = item.box.computed_values().margin().right.resolved_or_zero(item.box, width_of_containing_block).to_px(item.box);
  89. item.margins.cross_before = item.box.computed_values().margin().top.resolved_or_zero(item.box, width_of_containing_block).to_px(item.box);
  90. item.margins.cross_after = item.box.computed_values().margin().bottom.resolved_or_zero(item.box, width_of_containing_block).to_px(item.box);
  91. } else {
  92. item.margins.main_before = item.box.computed_values().margin().top.resolved_or_zero(item.box, width_of_containing_block).to_px(item.box);
  93. item.margins.main_after = item.box.computed_values().margin().bottom.resolved_or_zero(item.box, width_of_containing_block).to_px(item.box);
  94. item.margins.cross_before = item.box.computed_values().margin().left.resolved_or_zero(item.box, width_of_containing_block).to_px(item.box);
  95. item.margins.cross_after = item.box.computed_values().margin().right.resolved_or_zero(item.box, width_of_containing_block).to_px(item.box);
  96. }
  97. };
  98. // https://www.w3.org/TR/css-flexbox-1/#flex-items
  99. void FlexFormattingContext::generate_anonymous_flex_items()
  100. {
  101. // More like, sift through the already generated items.
  102. // After this step no items are to be added or removed from flex_items!
  103. // It holds every item we need to consider and there should be nothing in the following
  104. // calculations that could change that.
  105. // This is particularly important since we take references to the items stored in flex_items
  106. // later, whose addresses won't be stable if we added or removed any items.
  107. if (!flex_container().has_definite_width()) {
  108. flex_container().set_width(flex_container().containing_block()->width());
  109. } else {
  110. flex_container().set_width(flex_container().computed_values().width().resolved_or_zero(flex_container(), flex_container().containing_block()->width()).to_px(flex_container()));
  111. }
  112. if (!flex_container().has_definite_height()) {
  113. flex_container().set_height(flex_container().containing_block()->height());
  114. } else {
  115. flex_container().set_height(flex_container().computed_values().height().resolved_or_zero(flex_container(), flex_container().containing_block()->height()).to_px(flex_container()));
  116. }
  117. flex_container().for_each_child_of_type<Box>([&](Box& child_box) {
  118. layout_inside(child_box, LayoutMode::Default);
  119. // Skip anonymous text runs that are only whitespace.
  120. if (child_box.is_anonymous() && !child_box.first_child_of_type<BlockContainer>()) {
  121. bool contains_only_white_space = true;
  122. child_box.for_each_in_inclusive_subtree_of_type<TextNode>([&contains_only_white_space](auto& text_node) {
  123. if (!text_node.text_for_rendering().is_whitespace()) {
  124. contains_only_white_space = false;
  125. return IterationDecision::Break;
  126. }
  127. return IterationDecision::Continue;
  128. });
  129. if (contains_only_white_space)
  130. return IterationDecision::Continue;
  131. }
  132. // Skip any "out-of-flow" children
  133. if (child_box.is_out_of_flow(*this))
  134. return IterationDecision::Continue;
  135. child_box.set_flex_item(true);
  136. FlexItem flex_item = { child_box };
  137. populate_specified_margins(flex_item, m_flex_direction);
  138. m_flex_items.append(move(flex_item));
  139. return IterationDecision::Continue;
  140. });
  141. }
  142. bool FlexFormattingContext::has_definite_main_size(Box const& box) const
  143. {
  144. return is_row_layout() ? box.has_definite_width() : box.has_definite_height();
  145. }
  146. float FlexFormattingContext::specified_main_size(Box const& box) const
  147. {
  148. return is_row_layout() ? box.width() : box.height();
  149. }
  150. float FlexFormattingContext::specified_cross_size(Box const& box) const
  151. {
  152. return is_row_layout() ? box.height() : box.width();
  153. }
  154. bool FlexFormattingContext::has_main_min_size(Box const& box) const
  155. {
  156. auto value = is_row_layout() ? box.computed_values().min_width() : box.computed_values().min_height();
  157. return !value.is_undefined_or_auto();
  158. }
  159. bool FlexFormattingContext::has_cross_min_size(Box const& box) const
  160. {
  161. auto value = is_row_layout() ? box.computed_values().min_height() : box.computed_values().min_width();
  162. return !value.is_undefined_or_auto();
  163. }
  164. bool FlexFormattingContext::has_definite_cross_size(Box const& box) const
  165. {
  166. return (is_row_layout() ? box.has_definite_height() : box.has_definite_width()) && cross_size_is_absolute_or_resolved_nicely(box);
  167. }
  168. bool FlexFormattingContext::cross_size_is_absolute_or_resolved_nicely(NodeWithStyle const& box) const
  169. {
  170. auto length = is_row_layout() ? box.computed_values().height() : box.computed_values().width();
  171. if (length.is_absolute() || length.is_relative())
  172. return true;
  173. if (length.is_undefined_or_auto())
  174. return false;
  175. if (!box.parent())
  176. return false;
  177. if (length.is_percentage() && cross_size_is_absolute_or_resolved_nicely(*box.parent()))
  178. return true;
  179. return false;
  180. }
  181. float FlexFormattingContext::specified_main_size_of_child_box(Box const& child_box) const
  182. {
  183. auto main_size_of_parent = specified_main_size(flex_container());
  184. auto value = is_row_layout() ? child_box.computed_values().width() : child_box.computed_values().height();
  185. return value.resolved_or_zero(child_box, main_size_of_parent).to_px(child_box);
  186. }
  187. float FlexFormattingContext::specified_main_min_size(Box const& box) const
  188. {
  189. return is_row_layout()
  190. ? get_pixel_size(box, box.computed_values().min_width())
  191. : get_pixel_size(box, box.computed_values().min_height());
  192. }
  193. float FlexFormattingContext::specified_cross_min_size(Box const& box) const
  194. {
  195. return is_row_layout()
  196. ? get_pixel_size(box, box.computed_values().min_height())
  197. : get_pixel_size(box, box.computed_values().min_width());
  198. }
  199. bool FlexFormattingContext::has_main_max_size(Box const& box) const
  200. {
  201. return is_row_layout()
  202. ? !box.computed_values().max_width().is_undefined_or_auto()
  203. : !box.computed_values().max_height().is_undefined_or_auto();
  204. }
  205. bool FlexFormattingContext::has_cross_max_size(Box const& box) const
  206. {
  207. return is_row_layout()
  208. ? !box.computed_values().max_height().is_undefined_or_auto()
  209. : !box.computed_values().max_width().is_undefined_or_auto();
  210. }
  211. float FlexFormattingContext::specified_main_max_size(Box const& box) const
  212. {
  213. return is_row_layout()
  214. ? get_pixel_size(box, box.computed_values().max_width())
  215. : get_pixel_size(box, box.computed_values().max_height());
  216. }
  217. float FlexFormattingContext::specified_cross_max_size(Box const& box) const
  218. {
  219. return is_row_layout()
  220. ? get_pixel_size(box, box.computed_values().max_height())
  221. : get_pixel_size(box, box.computed_values().max_width());
  222. }
  223. float FlexFormattingContext::calculated_main_size(Box const& box) const
  224. {
  225. return is_row_layout() ? box.width() : box.height();
  226. }
  227. bool FlexFormattingContext::is_cross_auto(Box const& box) const
  228. {
  229. return is_row_layout() ? box.computed_values().height().is_auto() : box.computed_values().width().is_auto();
  230. }
  231. bool FlexFormattingContext::is_main_axis_margin_first_auto(Box const& box) const
  232. {
  233. return is_row_layout() ? box.computed_values().margin().left.is_auto() : box.computed_values().margin().top.is_auto();
  234. }
  235. bool FlexFormattingContext::is_main_axis_margin_second_auto(Box const& box) const
  236. {
  237. return is_row_layout() ? box.computed_values().margin().right.is_auto() : box.computed_values().margin().bottom.is_auto();
  238. }
  239. void FlexFormattingContext::set_main_size(Box& box, float size)
  240. {
  241. if (is_row_layout())
  242. box.set_width(size);
  243. else
  244. box.set_height(size);
  245. }
  246. void FlexFormattingContext::set_cross_size(Box& box, float size)
  247. {
  248. if (is_row_layout())
  249. box.set_height(size);
  250. else
  251. box.set_width(size);
  252. }
  253. void FlexFormattingContext::set_offset(Box& box, float main_offset, float cross_offset)
  254. {
  255. if (is_row_layout())
  256. box.set_offset(main_offset, cross_offset);
  257. else
  258. box.set_offset(cross_offset, main_offset);
  259. }
  260. void FlexFormattingContext::set_main_axis_first_margin(Box& box, float margin)
  261. {
  262. if (is_row_layout())
  263. box.box_model().margin.left = margin;
  264. else
  265. box.box_model().margin.top = margin;
  266. }
  267. void FlexFormattingContext::set_main_axis_second_margin(Box& box, float margin)
  268. {
  269. if (is_row_layout())
  270. box.box_model().margin.right = margin;
  271. else
  272. box.box_model().margin.bottom = margin;
  273. }
  274. float FlexFormattingContext::sum_of_margin_padding_border_in_main_axis(Box const& box) const
  275. {
  276. auto& margin = box.box_model().margin;
  277. auto& padding = box.box_model().padding;
  278. auto& border = box.box_model().border;
  279. if (is_row_layout()) {
  280. return margin.left + margin.right
  281. + padding.left + padding.right
  282. + border.left + border.right;
  283. } else {
  284. return margin.top + margin.bottom
  285. + padding.top + padding.bottom
  286. + border.top + border.bottom;
  287. }
  288. }
  289. // https://www.w3.org/TR/css-flexbox-1/#algo-available
  290. FlexFormattingContext::AvailableSpace FlexFormattingContext::determine_available_main_and_cross_space(bool& main_size_is_infinite, bool& main_is_constrained, bool& cross_is_constrained, float& main_min_size, float& main_max_size, float& cross_min_size, float& cross_max_size) const
  291. {
  292. auto containing_block_effective_main_size = [&](Box const& box) {
  293. if (is_row_layout()) {
  294. if (box.containing_block()->has_definite_width())
  295. return box.containing_block()->width();
  296. main_size_is_infinite = true;
  297. return NumericLimits<float>::max();
  298. } else {
  299. if (box.containing_block()->has_definite_height())
  300. return box.containing_block()->height();
  301. main_size_is_infinite = true;
  302. return NumericLimits<float>::max();
  303. }
  304. };
  305. float main_available_space = 0;
  306. main_is_constrained = false;
  307. // For each dimension,
  308. // if that dimension of the flex container’s content box is a definite size, use that;
  309. // if that dimension of the flex container is being sized under a min or max-content constraint, the available space in that dimension is that constraint;
  310. // otherwise, subtract the flex container’s margin, border, and padding from the space available to the flex container in that dimension and use that value. (This might result in an infinite value.)
  311. if (has_definite_main_size(flex_container())) {
  312. main_is_constrained = true;
  313. main_available_space = specified_main_size(flex_container());
  314. } else {
  315. if (has_main_max_size(flex_container())) {
  316. main_max_size = specified_main_max_size(flex_container());
  317. main_available_space = main_max_size;
  318. main_is_constrained = true;
  319. }
  320. if (has_main_min_size(flex_container())) {
  321. main_min_size = specified_main_min_size(flex_container());
  322. main_is_constrained = true;
  323. }
  324. if (!main_is_constrained) {
  325. auto available_main_size = containing_block_effective_main_size(flex_container());
  326. main_available_space = available_main_size - sum_of_margin_padding_border_in_main_axis(flex_container());
  327. if (flex_container().computed_values().flex_wrap() == CSS::FlexWrap::Wrap || flex_container().computed_values().flex_wrap() == CSS::FlexWrap::WrapReverse) {
  328. main_available_space = specified_main_size(*flex_container().containing_block());
  329. main_is_constrained = true;
  330. }
  331. }
  332. }
  333. float cross_available_space = 0;
  334. cross_is_constrained = false;
  335. if (has_definite_cross_size(flex_container())) {
  336. cross_available_space = specified_cross_size(flex_container());
  337. } else {
  338. if (has_cross_max_size(flex_container())) {
  339. cross_max_size = specified_cross_max_size(flex_container());
  340. cross_is_constrained = true;
  341. }
  342. if (has_cross_min_size(flex_container())) {
  343. cross_min_size = specified_cross_min_size(flex_container());
  344. cross_is_constrained = true;
  345. }
  346. // FIXME: Is this right? Probably not.
  347. if (!cross_is_constrained)
  348. cross_available_space = cross_max_size;
  349. }
  350. return AvailableSpace { .main = main_available_space, .cross = cross_available_space };
  351. }
  352. float FlexFormattingContext::layout_for_maximum_main_size(Box& box)
  353. {
  354. bool main_constrained = false;
  355. if (is_row_layout()) {
  356. if (!box.computed_values().width().is_undefined_or_auto() || !box.computed_values().min_width().is_undefined_or_auto()) {
  357. main_constrained = true;
  358. }
  359. } else {
  360. if (!box.computed_values().height().is_undefined_or_auto() || !box.computed_values().min_height().is_undefined_or_auto()) {
  361. main_constrained = true;
  362. }
  363. }
  364. if (!main_constrained && box.children_are_inline()) {
  365. auto& block_container = verify_cast<BlockContainer>(box);
  366. BlockFormattingContext bfc(block_container, this);
  367. bfc.run(box, LayoutMode::Default);
  368. InlineFormattingContext ifc(block_container, &bfc);
  369. if (is_row_layout()) {
  370. ifc.run(box, LayoutMode::OnlyRequiredLineBreaks);
  371. return box.width();
  372. } else {
  373. ifc.run(box, LayoutMode::AllPossibleLineBreaks);
  374. return box.height();
  375. }
  376. }
  377. if (is_row_layout()) {
  378. layout_inside(box, LayoutMode::OnlyRequiredLineBreaks);
  379. return box.width();
  380. } else {
  381. return BlockFormattingContext::compute_theoretical_height(box);
  382. }
  383. }
  384. // https://www.w3.org/TR/css-flexbox-1/#algo-main-item
  385. void FlexFormattingContext::determine_flex_base_size_and_hypothetical_main_size(FlexItem& flex_item)
  386. {
  387. auto& child_box = flex_item.box;
  388. flex_item.flex_base_size = [&] {
  389. auto const& used_flex_basis = child_box.computed_values().flex_basis();
  390. // A. If the item has a definite used flex basis, that’s the flex base size.
  391. if (used_flex_basis.is_definite()) {
  392. auto specified_base_size = get_pixel_size(child_box, used_flex_basis.length);
  393. if (specified_base_size == 0)
  394. return calculated_main_size(flex_item.box);
  395. return specified_base_size;
  396. }
  397. // B. If the flex item has ...
  398. // - an intrinsic aspect ratio,
  399. // - a used flex basis of content, and
  400. // - a definite cross size,
  401. if (flex_item.box.has_intrinsic_aspect_ratio()
  402. && used_flex_basis.type == CSS::FlexBasis::Content
  403. && has_definite_cross_size(child_box)) {
  404. TODO();
  405. // flex_base_size is calculated from definite cross size and intrinsic aspect ratio
  406. }
  407. // C. If the used flex basis is content or depends on its available space,
  408. // and the flex container is being sized under a min-content or max-content constraint
  409. // (e.g. when performing automatic table layout [CSS21]), size the item under that constraint.
  410. // The flex base size is the item’s resulting main size.
  411. if (used_flex_basis.type == CSS::FlexBasis::Content
  412. // FIXME: && sized under min-content or max-content constraints
  413. && false) {
  414. TODO();
  415. // Size child_box under the constraints, flex_base_size is then the resulting main_size.
  416. }
  417. // D. Otherwise, if the used flex basis is content or depends on its available space,
  418. // the available main size is infinite, and the flex item’s inline axis is parallel to the main axis,
  419. // lay the item out using the rules for a box in an orthogonal flow [CSS3-WRITING-MODES].
  420. // The flex base size is the item’s max-content main size.
  421. if (used_flex_basis.type == CSS::FlexBasis::Content
  422. // FIXME: && main_size is infinite && inline axis is parallel to the main axis
  423. && false && false) {
  424. TODO();
  425. // Use rules for a flex_container in orthogonal flow
  426. }
  427. // E. Otherwise, size the item into the available space using its used flex basis in place of its main size,
  428. // treating a value of content as max-content. If a cross size is needed to determine the main size
  429. // (e.g. when the flex item’s main size is in its block axis) and the flex item’s cross size is auto and not definite,
  430. // in this calculation use fit-content as the flex item’s cross size.
  431. // The flex base size is the item’s resulting main size.
  432. // FIXME: This is probably too naive.
  433. // FIXME: Care about FlexBasis::Auto
  434. if (has_definite_main_size(child_box))
  435. return specified_main_size_of_child_box(child_box);
  436. return layout_for_maximum_main_size(child_box);
  437. }();
  438. // The hypothetical main size is the item’s flex base size clamped according to its used min and max main sizes (and flooring the content box size at zero).
  439. auto clamp_min = has_main_min_size(child_box) ? specified_main_min_size(child_box) : 0;
  440. auto clamp_max = has_main_max_size(child_box) ? specified_main_max_size(child_box) : NumericLimits<float>::max();
  441. flex_item.hypothetical_main_size = clamp(flex_item.flex_base_size, clamp_min, clamp_max);
  442. }
  443. // https://www.w3.org/TR/css-flexbox-1/#algo-main-container
  444. void FlexFormattingContext::determine_main_size_of_flex_container(bool const main_is_constrained, bool const main_size_is_infinite, float& main_available_size, float const main_min_size, float const main_max_size)
  445. {
  446. if ((!main_is_constrained && main_size_is_infinite) || main_available_size == 0) {
  447. // Uses https://www.w3.org/TR/css-flexbox-1/#intrinsic-main-sizes
  448. // 9.9.1
  449. // 1.
  450. float largest_max_content_flex_fraction = 0;
  451. for (auto& flex_item : m_flex_items) {
  452. // FIXME: This needs some serious work.
  453. float max_content_contribution = calculated_main_size(flex_item.box);
  454. float max_content_flex_fraction = max_content_contribution - flex_item.flex_base_size;
  455. if (max_content_flex_fraction > 0) {
  456. max_content_flex_fraction /= max(flex_item.box.computed_values().flex_grow(), 1.0f);
  457. } else {
  458. max_content_flex_fraction /= max(flex_item.box.computed_values().flex_shrink(), 1.0f) * flex_item.flex_base_size;
  459. }
  460. flex_item.max_content_flex_fraction = max_content_flex_fraction;
  461. if (max_content_flex_fraction > largest_max_content_flex_fraction)
  462. largest_max_content_flex_fraction = max_content_flex_fraction;
  463. }
  464. // 2. Omitted
  465. // 3.
  466. float result = 0;
  467. for (auto& flex_item : m_flex_items) {
  468. auto product = 0;
  469. if (flex_item.max_content_flex_fraction > 0) {
  470. product = largest_max_content_flex_fraction * flex_item.box.computed_values().flex_grow();
  471. } else {
  472. product = largest_max_content_flex_fraction * max(flex_item.box.computed_values().flex_shrink(), 1.0f) * flex_item.flex_base_size;
  473. }
  474. result += flex_item.flex_base_size + product;
  475. }
  476. main_available_size = clamp(result, main_min_size, main_max_size);
  477. }
  478. set_main_size(flex_container(), main_available_size);
  479. }
  480. // https://www.w3.org/TR/css-flexbox-1/#algo-line-break
  481. void FlexFormattingContext::collect_flex_items_into_flex_lines(float const main_available_size)
  482. {
  483. // FIXME: Also support wrap-reverse
  484. // If the flex container is single-line, collect all the flex items into a single flex line.
  485. if (is_single_line()) {
  486. FlexLine line;
  487. for (auto& flex_item : m_flex_items) {
  488. line.items.append(&flex_item);
  489. }
  490. m_flex_lines.append(move(line));
  491. return;
  492. }
  493. // Otherwise, starting from the first uncollected item, collect consecutive items one by one
  494. // until the first time that the next collected item would not fit into the flex container’s inner main size
  495. // (or until a forced break is encountered, see §10 Fragmenting Flex Layout).
  496. // If the very first uncollected item wouldn't fit, collect just it into the line.
  497. // For this step, the size of a flex item is its outer hypothetical main size. (Note: This can be negative.)
  498. // Repeat until all flex items have been collected into flex lines.
  499. FlexLine line;
  500. float line_main_size = 0;
  501. for (auto& flex_item : m_flex_items) {
  502. if ((line_main_size + flex_item.hypothetical_main_size) > main_available_size) {
  503. m_flex_lines.append(move(line));
  504. line = {};
  505. line_main_size = 0;
  506. }
  507. line.items.append(&flex_item);
  508. line_main_size += flex_item.hypothetical_main_size;
  509. }
  510. m_flex_lines.append(move(line));
  511. }
  512. // https://www.w3.org/TR/css-flexbox-1/#resolve-flexible-lengths
  513. void FlexFormattingContext::resolve_flexible_lengths(float const main_available_size)
  514. {
  515. enum FlexFactor {
  516. FlexGrowFactor,
  517. FlexShrinkFactor
  518. };
  519. FlexFactor used_flex_factor;
  520. // 6.1. Determine used flex factor
  521. for (auto& flex_line : m_flex_lines) {
  522. size_t number_of_unfrozen_items_on_line = flex_line.items.size();
  523. float sum_of_hypothetical_main_sizes = 0;
  524. for (auto& flex_item : flex_line.items) {
  525. sum_of_hypothetical_main_sizes += flex_item->hypothetical_main_size;
  526. }
  527. if (sum_of_hypothetical_main_sizes < main_available_size)
  528. used_flex_factor = FlexFactor::FlexGrowFactor;
  529. else
  530. used_flex_factor = FlexFactor::FlexShrinkFactor;
  531. for (auto& flex_item : flex_line.items) {
  532. if (used_flex_factor == FlexFactor::FlexGrowFactor)
  533. flex_item->flex_factor = flex_item->box.computed_values().flex_grow();
  534. else if (used_flex_factor == FlexFactor::FlexShrinkFactor)
  535. flex_item->flex_factor = flex_item->box.computed_values().flex_shrink();
  536. }
  537. // 6.2. Size inflexible items
  538. auto freeze_item_setting_target_main_size_to_hypothetical_main_size = [&number_of_unfrozen_items_on_line](FlexItem& item) {
  539. item.target_main_size = item.hypothetical_main_size;
  540. number_of_unfrozen_items_on_line--;
  541. item.frozen = true;
  542. };
  543. for (auto& flex_item : flex_line.items) {
  544. if (flex_item->flex_factor.has_value() && flex_item->flex_factor.value() == 0) {
  545. freeze_item_setting_target_main_size_to_hypothetical_main_size(*flex_item);
  546. } else if (used_flex_factor == FlexFactor::FlexGrowFactor) {
  547. // FIXME: Spec doesn't include the == case, but we take a too basic approach to calculating the values used so this is appropriate
  548. if (flex_item->flex_base_size > flex_item->hypothetical_main_size) {
  549. freeze_item_setting_target_main_size_to_hypothetical_main_size(*flex_item);
  550. }
  551. } else if (used_flex_factor == FlexFactor::FlexShrinkFactor) {
  552. if (flex_item->flex_base_size < flex_item->hypothetical_main_size) {
  553. freeze_item_setting_target_main_size_to_hypothetical_main_size(*flex_item);
  554. }
  555. }
  556. }
  557. // 6.3. Calculate initial free space
  558. auto calculate_free_space = [&]() {
  559. float sum_of_items_on_line = 0;
  560. for (auto& flex_item : flex_line.items) {
  561. if (flex_item->frozen)
  562. sum_of_items_on_line += flex_item->target_main_size;
  563. else
  564. sum_of_items_on_line += flex_item->flex_base_size;
  565. }
  566. return main_available_size - sum_of_items_on_line;
  567. };
  568. float initial_free_space = calculate_free_space();
  569. // 6.4 Loop
  570. auto for_each_unfrozen_item = [&flex_line](auto callback) {
  571. for (auto& flex_item : flex_line.items) {
  572. if (!flex_item->frozen)
  573. callback(flex_item);
  574. }
  575. };
  576. while (number_of_unfrozen_items_on_line > 0) {
  577. // b Calculate the remaining free space
  578. auto remaining_free_space = calculate_free_space();
  579. float sum_of_unfrozen_flex_items_flex_factors = 0;
  580. for_each_unfrozen_item([&](FlexItem* item) {
  581. sum_of_unfrozen_flex_items_flex_factors += item->flex_factor.value_or(1);
  582. });
  583. if (sum_of_unfrozen_flex_items_flex_factors < 1) {
  584. auto intermediate_free_space = initial_free_space * sum_of_unfrozen_flex_items_flex_factors;
  585. if (AK::abs(intermediate_free_space) < AK::abs(remaining_free_space))
  586. remaining_free_space = intermediate_free_space;
  587. }
  588. // c Distribute free space proportional to the flex factors
  589. if (remaining_free_space != 0) {
  590. if (used_flex_factor == FlexFactor::FlexGrowFactor) {
  591. float sum_of_flex_grow_factor_of_unfrozen_items = sum_of_unfrozen_flex_items_flex_factors;
  592. for_each_unfrozen_item([&](FlexItem* flex_item) {
  593. float ratio = flex_item->flex_factor.value_or(1) / sum_of_flex_grow_factor_of_unfrozen_items;
  594. flex_item->target_main_size = flex_item->flex_base_size + (remaining_free_space * ratio);
  595. });
  596. } else if (used_flex_factor == FlexFactor::FlexShrinkFactor) {
  597. float sum_of_scaled_flex_shrink_factor_of_unfrozen_items = 0;
  598. for_each_unfrozen_item([&](FlexItem* flex_item) {
  599. flex_item->scaled_flex_shrink_factor = flex_item->flex_factor.value_or(1) * flex_item->flex_base_size;
  600. sum_of_scaled_flex_shrink_factor_of_unfrozen_items += flex_item->scaled_flex_shrink_factor;
  601. });
  602. for_each_unfrozen_item([&](FlexItem* flex_item) {
  603. float ratio = 1.0f;
  604. if (sum_of_scaled_flex_shrink_factor_of_unfrozen_items != 0.0f)
  605. ratio = flex_item->scaled_flex_shrink_factor / sum_of_scaled_flex_shrink_factor_of_unfrozen_items;
  606. flex_item->target_main_size = flex_item->flex_base_size - (AK::abs(remaining_free_space) * ratio);
  607. });
  608. }
  609. } else {
  610. // This isn't spec but makes sense.
  611. for_each_unfrozen_item([&](FlexItem* flex_item) {
  612. flex_item->target_main_size = flex_item->flex_base_size;
  613. });
  614. }
  615. // d Fix min/max violations.
  616. float adjustments = 0.0f;
  617. for_each_unfrozen_item([&](FlexItem* item) {
  618. auto min_main = has_main_min_size(item->box)
  619. ? specified_main_min_size(item->box)
  620. : 0;
  621. auto max_main = has_main_max_size(item->box)
  622. ? specified_main_max_size(item->box)
  623. : NumericLimits<float>::max();
  624. float original_target_size = item->target_main_size;
  625. if (item->target_main_size < min_main) {
  626. item->target_main_size = min_main;
  627. item->is_min_violation = true;
  628. }
  629. if (item->target_main_size > max_main) {
  630. item->target_main_size = max_main;
  631. item->is_max_violation = true;
  632. }
  633. float delta = item->target_main_size - original_target_size;
  634. adjustments += delta;
  635. });
  636. // e Freeze over-flexed items
  637. float total_violation = adjustments;
  638. if (total_violation == 0) {
  639. for_each_unfrozen_item([&](FlexItem* item) {
  640. --number_of_unfrozen_items_on_line;
  641. item->frozen = true;
  642. });
  643. } else if (total_violation > 0) {
  644. for_each_unfrozen_item([&](FlexItem* item) {
  645. if (item->is_min_violation) {
  646. --number_of_unfrozen_items_on_line;
  647. item->frozen = true;
  648. }
  649. });
  650. } else if (total_violation < 0) {
  651. for_each_unfrozen_item([&](FlexItem* item) {
  652. if (item->is_max_violation) {
  653. --number_of_unfrozen_items_on_line;
  654. item->frozen = true;
  655. }
  656. });
  657. }
  658. }
  659. // 6.5.
  660. for (auto& flex_item : flex_line.items) {
  661. flex_item->main_size = flex_item->target_main_size;
  662. }
  663. }
  664. }
  665. // https://www.w3.org/TR/css-flexbox-1/#algo-cross-item
  666. float FlexFormattingContext::determine_hypothetical_cross_size_of_item(Box& box)
  667. {
  668. bool cross_constrained = false;
  669. if (is_row_layout()) {
  670. if (!box.computed_values().height().is_undefined_or_auto() || !box.computed_values().min_height().is_undefined_or_auto()) {
  671. cross_constrained = true;
  672. }
  673. } else {
  674. if (!box.computed_values().width().is_undefined_or_auto() || !box.computed_values().min_width().is_undefined_or_auto()) {
  675. cross_constrained = true;
  676. }
  677. }
  678. if (!cross_constrained && box.children_are_inline()) {
  679. auto& block_container = verify_cast<BlockContainer>(box);
  680. BlockFormattingContext bfc(block_container, this);
  681. bfc.run(box, LayoutMode::Default);
  682. InlineFormattingContext ifc(block_container, &bfc);
  683. ifc.run(box, LayoutMode::OnlyRequiredLineBreaks);
  684. return is_row_layout() ? box.height() : box.width();
  685. }
  686. if (is_row_layout())
  687. return BlockFormattingContext::compute_theoretical_height(box);
  688. BlockFormattingContext context(verify_cast<BlockContainer>(box), this);
  689. context.compute_width(box);
  690. return box.width();
  691. }
  692. // https://www.w3.org/TR/css-flexbox-1/#algo-cross-line
  693. void FlexFormattingContext::calculate_cross_size_of_each_flex_line(float const cross_min_size, float const cross_max_size)
  694. {
  695. if (m_flex_lines.size() == 1 && has_definite_cross_size(flex_container())) {
  696. m_flex_lines[0].cross_size = specified_cross_size(flex_container());
  697. } else {
  698. for (auto& flex_line : m_flex_lines) {
  699. // FIXME: Implement 8.1
  700. // FIXME: This isn't spec but makes sense here
  701. if (has_definite_cross_size(flex_container()) && flex_container().computed_values().align_items() == CSS::AlignItems::Stretch) {
  702. flex_line.cross_size = specified_cross_size(flex_container()) / m_flex_lines.size();
  703. continue;
  704. }
  705. // 8.2
  706. float largest_hypothetical_cross_size = 0;
  707. for (auto& flex_item : flex_line.items) {
  708. if (largest_hypothetical_cross_size < flex_item->hypothetical_cross_size_with_margins())
  709. largest_hypothetical_cross_size = flex_item->hypothetical_cross_size_with_margins();
  710. }
  711. // 8.3
  712. flex_line.cross_size = max(0.0f, largest_hypothetical_cross_size);
  713. }
  714. if (m_flex_lines.size() == 1) {
  715. clamp(m_flex_lines[0].cross_size, cross_min_size, cross_max_size);
  716. }
  717. }
  718. }
  719. // https://www.w3.org/TR/css-flexbox-1/#algo-stretch
  720. void FlexFormattingContext::determine_used_cross_size_of_each_flex_item()
  721. {
  722. // FIXME: Get the alignment via "align-self" of the item (which accesses "align-items" of the parent if unset)
  723. for (auto& flex_line : m_flex_lines) {
  724. for (auto& flex_item : flex_line.items) {
  725. if (is_cross_auto(flex_item->box) && flex_container().computed_values().align_items() == CSS::AlignItems::Stretch) {
  726. flex_item->cross_size = flex_line.cross_size;
  727. } else {
  728. flex_item->cross_size = flex_item->hypothetical_cross_size;
  729. }
  730. }
  731. }
  732. }
  733. // https://www.w3.org/TR/css-flexbox-1/#algo-main-align
  734. void FlexFormattingContext::distribute_any_remaining_free_space(float const main_available_size)
  735. {
  736. for (auto& flex_line : m_flex_lines) {
  737. // 12.1.
  738. float used_main_space = 0;
  739. size_t auto_margins = 0;
  740. for (auto& flex_item : flex_line.items) {
  741. used_main_space += flex_item->main_size;
  742. if (is_main_axis_margin_first_auto(flex_item->box))
  743. ++auto_margins;
  744. if (is_main_axis_margin_second_auto(flex_item->box))
  745. ++auto_margins;
  746. }
  747. float remaining_free_space = main_available_size - used_main_space;
  748. if (remaining_free_space > 0) {
  749. float size_per_auto_margin = remaining_free_space / (float)auto_margins;
  750. for (auto& flex_item : flex_line.items) {
  751. if (is_main_axis_margin_first_auto(flex_item->box))
  752. set_main_axis_first_margin(flex_item->box, size_per_auto_margin);
  753. if (is_main_axis_margin_second_auto(flex_item->box))
  754. set_main_axis_second_margin(flex_item->box, size_per_auto_margin);
  755. }
  756. } else {
  757. for (auto& flex_item : flex_line.items) {
  758. if (is_main_axis_margin_first_auto(flex_item->box))
  759. set_main_axis_first_margin(flex_item->box, 0);
  760. if (is_main_axis_margin_second_auto(flex_item->box))
  761. set_main_axis_second_margin(flex_item->box, 0);
  762. }
  763. }
  764. // 12.2.
  765. float space_between_items = 0;
  766. float space_before_first_item = 0;
  767. auto number_of_items = flex_line.items.size();
  768. switch (flex_container().computed_values().justify_content()) {
  769. case CSS::JustifyContent::FlexStart:
  770. break;
  771. case CSS::JustifyContent::FlexEnd:
  772. space_before_first_item = main_available_size - used_main_space;
  773. break;
  774. case CSS::JustifyContent::Center:
  775. space_before_first_item = (main_available_size - used_main_space) / 2.0f;
  776. break;
  777. case CSS::JustifyContent::SpaceBetween:
  778. space_between_items = remaining_free_space / (number_of_items - 1);
  779. break;
  780. case CSS::JustifyContent::SpaceAround:
  781. space_between_items = remaining_free_space / number_of_items;
  782. space_before_first_item = space_between_items / 2.0f;
  783. break;
  784. }
  785. // FIXME: Support reverse
  786. float main_offset = space_before_first_item;
  787. for (auto& flex_item : flex_line.items) {
  788. flex_item->main_offset = main_offset;
  789. main_offset += flex_item->main_size + space_between_items;
  790. }
  791. }
  792. }
  793. void FlexFormattingContext::align_all_flex_items_along_the_cross_axis()
  794. {
  795. // FIXME: Get the alignment via "align-self" of the item (which accesses "align-items" of the parent if unset)
  796. // FIXME: Take better care of margins
  797. float line_cross_offset = 0;
  798. for (auto& flex_line : m_flex_lines) {
  799. for (auto* flex_item : flex_line.items) {
  800. switch (flex_container().computed_values().align_items()) {
  801. case CSS::AlignItems::Baseline:
  802. // FIXME: Implement this
  803. // Fallthrough
  804. case CSS::AlignItems::FlexStart:
  805. case CSS::AlignItems::Stretch:
  806. flex_item->cross_offset = line_cross_offset + flex_item->margins.cross_before;
  807. break;
  808. case CSS::AlignItems::FlexEnd:
  809. flex_item->cross_offset = line_cross_offset + flex_line.cross_size - flex_item->cross_size;
  810. break;
  811. case CSS::AlignItems::Center:
  812. flex_item->cross_offset = line_cross_offset + (flex_line.cross_size / 2.0f) - (flex_item->cross_size / 2.0f);
  813. break;
  814. default:
  815. break;
  816. }
  817. }
  818. line_cross_offset += flex_line.cross_size;
  819. }
  820. }
  821. // https://www.w3.org/TR/css-flexbox-1/#algo-cross-container
  822. void FlexFormattingContext::determine_flex_container_used_cross_size(float const cross_min_size, float const cross_max_size)
  823. {
  824. if (has_definite_cross_size(flex_container())) {
  825. float clamped_cross_size = clamp(specified_cross_size(flex_container()), cross_min_size, cross_max_size);
  826. set_cross_size(flex_container(), clamped_cross_size);
  827. } else {
  828. float sum_of_flex_lines_cross_sizes = 0;
  829. for (auto& flex_line : m_flex_lines) {
  830. sum_of_flex_lines_cross_sizes += flex_line.cross_size;
  831. }
  832. float clamped_cross_size = clamp(sum_of_flex_lines_cross_sizes, cross_min_size, cross_max_size);
  833. set_cross_size(flex_container(), clamped_cross_size);
  834. }
  835. }
  836. // https://www.w3.org/TR/css-flexbox-1/#algo-line-align
  837. void FlexFormattingContext::align_all_flex_lines()
  838. {
  839. // FIXME: Support align-content
  840. // FIXME: Support reverse
  841. for (auto& flex_line : m_flex_lines) {
  842. for (auto* flex_item : flex_line.items) {
  843. set_main_size(flex_item->box, flex_item->main_size);
  844. set_cross_size(flex_item->box, flex_item->cross_size);
  845. set_offset(flex_item->box, flex_item->main_offset, flex_item->cross_offset);
  846. }
  847. }
  848. }
  849. }