FlexFormattingContext.cpp 36 KB

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