FlexFormattingContext.cpp 36 KB

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