FlexFormattingContext.cpp 33 KB

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