FlexFormattingContext.cpp 28 KB

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