FlexFormattingContext.cpp 86 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697989910010110210310410510610710810911011111211311411511611711811912012112212312412512612712812913013113213313413513613713813914014114214314414514614714814915015115215315415515615715815916016116216316416516616716816917017117217317417517617717817918018118218318418518618718818919019119219319419519619719819920020120220320420520620720820921021121221321421521621721821922022122222322422522622722822923023123223323423523623723823924024124224324424524624724824925025125225325425525625725825926026126226326426526626726826927027127227327427527627727827928028128228328428528628728828929029129229329429529629729829930030130230330430530630730830931031131231331431531631731831932032132232332432532632732832933033133233333433533633733833934034134234334434534634734834935035135235335435535635735835936036136236336436536636736836937037137237337437537637737837938038138238338438538638738838939039139239339439539639739839940040140240340440540640740840941041141241341441541641741841942042142242342442542642742842943043143243343443543643743843944044144244344444544644744844945045145245345445545645745845946046146246346446546646746846947047147247347447547647747847948048148248348448548648748848949049149249349449549649749849950050150250350450550650750850951051151251351451551651751851952052152252352452552652752852953053153253353453553653753853954054154254354454554654754854955055155255355455555655755855956056156256356456556656756856957057157257357457557657757857958058158258358458558658758858959059159259359459559659759859960060160260360460560660760860961061161261361461561661761861962062162262362462562662762862963063163263363463563663763863964064164264364464564664764864965065165265365465565665765865966066166266366466566666766866967067167267367467567667767867968068168268368468568668768868969069169269369469569669769869970070170270370470570670770870971071171271371471571671771871972072172272372472572672772872973073173273373473573673773873974074174274374474574674774874975075175275375475575675775875976076176276376476576676776876977077177277377477577677777877978078178278378478578678778878979079179279379479579679779879980080180280380480580680780880981081181281381481581681781881982082182282382482582682782882983083183283383483583683783883984084184284384484584684784884985085185285385485585685785885986086186286386486586686786886987087187287387487587687787887988088188288388488588688788888989089189289389489589689789889990090190290390490590690790890991091191291391491591691791891992092192292392492592692792892993093193293393493593693793893994094194294394494594694794894995095195295395495595695795895996096196296396496596696796896997097197297397497597697797897998098198298398498598698798898999099199299399499599699799899910001001100210031004100510061007100810091010101110121013101410151016101710181019102010211022102310241025102610271028102910301031103210331034103510361037103810391040104110421043104410451046104710481049105010511052105310541055105610571058105910601061106210631064106510661067106810691070107110721073107410751076107710781079108010811082108310841085108610871088108910901091109210931094109510961097109810991100110111021103110411051106110711081109111011111112111311141115111611171118111911201121112211231124112511261127112811291130113111321133113411351136113711381139114011411142114311441145114611471148114911501151115211531154115511561157115811591160116111621163116411651166116711681169117011711172117311741175117611771178117911801181118211831184118511861187118811891190119111921193119411951196119711981199120012011202120312041205120612071208120912101211121212131214121512161217121812191220122112221223122412251226122712281229123012311232123312341235123612371238123912401241124212431244124512461247124812491250125112521253125412551256125712581259126012611262126312641265126612671268126912701271127212731274127512761277127812791280128112821283128412851286128712881289129012911292129312941295129612971298129913001301130213031304130513061307130813091310131113121313131413151316131713181319132013211322132313241325132613271328132913301331133213331334133513361337133813391340134113421343134413451346134713481349135013511352135313541355135613571358135913601361136213631364136513661367136813691370137113721373137413751376137713781379138013811382138313841385138613871388138913901391139213931394139513961397139813991400140114021403140414051406140714081409141014111412141314141415141614171418141914201421142214231424142514261427142814291430143114321433143414351436143714381439144014411442144314441445144614471448144914501451145214531454145514561457145814591460146114621463146414651466146714681469147014711472147314741475147614771478147914801481148214831484148514861487148814891490149114921493149414951496149714981499150015011502150315041505150615071508150915101511151215131514151515161517151815191520152115221523152415251526152715281529153015311532153315341535153615371538153915401541154215431544154515461547154815491550155115521553155415551556155715581559156015611562156315641565156615671568156915701571157215731574157515761577157815791580158115821583158415851586158715881589159015911592159315941595159615971598159916001601160216031604160516061607160816091610161116121613161416151616161716181619162016211622162316241625162616271628162916301631163216331634163516361637163816391640164116421643164416451646164716481649165016511652165316541655165616571658165916601661166216631664166516661667166816691670167116721673167416751676167716781679168016811682168316841685168616871688168916901691169216931694169516961697169816991700170117021703170417051706170717081709171017111712171317141715171617171718171917201721172217231724172517261727172817291730173117321733173417351736173717381739174017411742174317441745174617471748174917501751175217531754175517561757175817591760176117621763176417651766176717681769
  1. /*
  2. * Copyright (c) 2021-2022, 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/QuickSort.h>
  10. #include <AK/StdLibExtras.h>
  11. #include <LibWeb/Layout/BlockContainer.h>
  12. #include <LibWeb/Layout/BlockFormattingContext.h>
  13. #include <LibWeb/Layout/Box.h>
  14. #include <LibWeb/Layout/FlexFormattingContext.h>
  15. #include <LibWeb/Layout/InitialContainingBlock.h>
  16. #include <LibWeb/Layout/ReplacedBox.h>
  17. #include <LibWeb/Layout/TextNode.h>
  18. namespace Web::Layout {
  19. // NOTE: We use a custom clamping function here instead of AK::clamp(), since the AK version
  20. // will VERIFY(max >= min) and CSS explicitly allows that (see css-values-4.)
  21. template<typename T>
  22. [[nodiscard]] constexpr T css_clamp(T const& value, T const& min, T const& max)
  23. {
  24. return ::max(min, ::min(value, max));
  25. }
  26. float FlexFormattingContext::get_pixel_width(Box const& box, Optional<CSS::LengthPercentage> const& length_percentage) const
  27. {
  28. if (!length_percentage.has_value())
  29. return 0;
  30. auto inner_width = CSS::Length::make_px(containing_block_width_for(box));
  31. return length_percentage->resolved(box, inner_width).to_px(box);
  32. }
  33. float FlexFormattingContext::get_pixel_height(Box const& box, Optional<CSS::LengthPercentage> const& length_percentage) const
  34. {
  35. if (!length_percentage.has_value())
  36. return 0;
  37. auto inner_height = CSS::Length::make_px(containing_block_height_for(box));
  38. return length_percentage->resolved(box, inner_height).to_px(box);
  39. }
  40. FlexFormattingContext::FlexFormattingContext(LayoutState& state, Box const& flex_container, FormattingContext* parent)
  41. : FormattingContext(Type::Flex, state, flex_container, parent)
  42. , m_flex_container_state(m_state.get_mutable(flex_container))
  43. , m_flex_direction(flex_container.computed_values().flex_direction())
  44. {
  45. }
  46. FlexFormattingContext::~FlexFormattingContext() = default;
  47. void FlexFormattingContext::run(Box const& run_box, LayoutMode layout_mode)
  48. {
  49. VERIFY(&run_box == &flex_container());
  50. // This implements https://www.w3.org/TR/css-flexbox-1/#layout-algorithm
  51. // 1. Generate anonymous flex items
  52. generate_anonymous_flex_items();
  53. {
  54. // https://drafts.csswg.org/css-flexbox-1/#definite-sizes
  55. // 3. If a single-line flex container has a definite cross size,
  56. // the automatic preferred outer cross size of any stretched flex items is the flex container’s inner cross size
  57. // (clamped to the flex item’s min and max cross size) and is considered definite.
  58. if (is_single_line() && has_definite_cross_size(flex_container())) {
  59. auto flex_container_inner_cross_size = specified_cross_size(flex_container());
  60. for (auto& item : m_flex_items) {
  61. if (!flex_item_is_stretched(item))
  62. continue;
  63. auto item_min_cross_size = has_cross_min_size(item.box) ? specified_cross_min_size(item.box) : automatic_minimum_size(item);
  64. auto item_max_cross_size = has_cross_max_size(item.box) ? specified_cross_max_size(item.box) : INFINITY;
  65. auto item_preferred_outer_cross_size = css_clamp(flex_container_inner_cross_size, item_min_cross_size, item_max_cross_size);
  66. auto item_inner_cross_size = item_preferred_outer_cross_size - item.margins.cross_before - item.margins.cross_after - item.padding.cross_before - item.padding.cross_after - item.borders.cross_before - item.borders.cross_after;
  67. set_cross_size(item.box, item_inner_cross_size);
  68. set_has_definite_cross_size(item.box, true);
  69. }
  70. }
  71. }
  72. // 2. Determine the available main and cross space for the flex items
  73. float main_max_size = NumericLimits<float>::max();
  74. float main_min_size = 0;
  75. float cross_max_size = NumericLimits<float>::max();
  76. float cross_min_size = 0;
  77. bool main_is_constrained = false;
  78. bool cross_is_constrained = false;
  79. determine_available_main_and_cross_space(main_is_constrained, cross_is_constrained, main_min_size, main_max_size, cross_min_size, cross_max_size);
  80. if (m_flex_container_state.width_constraint == SizeConstraint::MaxContent || m_flex_container_state.height_constraint == SizeConstraint::MaxContent) {
  81. if (is_row_layout())
  82. m_available_space->main = INFINITY;
  83. else
  84. m_available_space->cross = INFINITY;
  85. }
  86. if (m_flex_container_state.width_constraint == SizeConstraint::MinContent || m_flex_container_state.height_constraint == SizeConstraint::MinContent) {
  87. if (is_row_layout())
  88. m_available_space->main = 0;
  89. else
  90. m_available_space->cross = 0;
  91. }
  92. // 3. Determine the flex base size and hypothetical main size of each item
  93. for (auto& flex_item : m_flex_items) {
  94. if (flex_item.box.is_replaced_box()) {
  95. // FIXME: Get rid of prepare_for_replaced_layout() and make replaced elements figure out their intrinsic size lazily.
  96. static_cast<ReplacedBox&>(flex_item.box).prepare_for_replaced_layout();
  97. }
  98. determine_flex_base_size_and_hypothetical_main_size(flex_item);
  99. }
  100. if (m_flex_container_state.width_constraint != SizeConstraint::None || m_flex_container_state.height_constraint != SizeConstraint::None) {
  101. // We're computing intrinsic size for the flex container.
  102. determine_intrinsic_size_of_flex_container(layout_mode);
  103. // Our caller is only interested in the content-width and content-height results,
  104. // which have now been set on m_flex_container_state, so there's no need to continue
  105. // the main layout algorithm after this point.
  106. return;
  107. }
  108. // 4. Determine the main size of the flex container
  109. determine_main_size_of_flex_container(main_is_constrained, main_min_size, main_max_size);
  110. // 5. Collect flex items into flex lines:
  111. // After this step no additional items are to be added to flex_lines or any of its items!
  112. collect_flex_items_into_flex_lines();
  113. // 6. Resolve the flexible lengths
  114. resolve_flexible_lengths();
  115. // Cross Size Determination
  116. // 7. Determine the hypothetical cross size of each item
  117. for (auto& flex_item : m_flex_items) {
  118. determine_hypothetical_cross_size_of_item(flex_item, false);
  119. }
  120. // 8. Calculate the cross size of each flex line.
  121. calculate_cross_size_of_each_flex_line(cross_min_size, cross_max_size);
  122. // 9. Handle 'align-content: stretch'.
  123. // FIXME: This
  124. // 10. Collapse visibility:collapse items.
  125. // FIXME: This
  126. // 11. Determine the used cross size of each flex item.
  127. determine_used_cross_size_of_each_flex_item();
  128. // 12. Distribute any remaining free space.
  129. distribute_any_remaining_free_space();
  130. // 13. Resolve cross-axis auto margins.
  131. // FIXME: This
  132. // 14. Align all flex items along the cross-axis
  133. align_all_flex_items_along_the_cross_axis();
  134. // 15. Determine the flex container’s used cross size:
  135. determine_flex_container_used_cross_size(cross_min_size, cross_max_size);
  136. {
  137. // https://drafts.csswg.org/css-flexbox-1/#definite-sizes
  138. // 4. Once the cross size of a flex line has been determined,
  139. // the cross sizes of items in auto-sized flex containers are also considered definite for the purpose of layout.
  140. auto const& flex_container_computed_cross_size = is_row_layout() ? flex_container().computed_values().height() : flex_container().computed_values().width();
  141. if (flex_container_computed_cross_size.is_auto()) {
  142. for (auto& item : m_flex_items) {
  143. set_cross_size(item.box, item.cross_size);
  144. set_has_definite_cross_size(item.box, true);
  145. }
  146. }
  147. }
  148. {
  149. // NOTE: We re-resolve cross sizes here, now that we can resolve percentages.
  150. // 7. Determine the hypothetical cross size of each item
  151. for (auto& flex_item : m_flex_items) {
  152. determine_hypothetical_cross_size_of_item(flex_item, true);
  153. }
  154. // 11. Determine the used cross size of each flex item.
  155. determine_used_cross_size_of_each_flex_item();
  156. }
  157. // 16. Align all flex lines (per align-content)
  158. align_all_flex_lines();
  159. // AD-HOC: Layout the inside of all flex items.
  160. copy_dimensions_from_flex_items_to_boxes();
  161. for (auto& flex_item : m_flex_items) {
  162. if (auto independent_formatting_context = layout_inside(flex_item.box, LayoutMode::Normal))
  163. independent_formatting_context->parent_context_did_dimension_child_root_box();
  164. }
  165. // FIXME: We run the "copy dimensions" step *again* here, in order to override any sizes
  166. // assigned to the flex item by the "layout inside" step above. This is definitely not
  167. // part of the spec, and simply covering up the fact that our inside layout currently
  168. // mutates the height of BFC roots.
  169. copy_dimensions_from_flex_items_to_boxes();
  170. }
  171. void FlexFormattingContext::parent_context_did_dimension_child_root_box()
  172. {
  173. flex_container().for_each_child_of_type<Box>([&](Layout::Box& box) {
  174. if (box.is_absolutely_positioned())
  175. layout_absolutely_positioned_element(box);
  176. });
  177. }
  178. void FlexFormattingContext::populate_specified_margins(FlexItem& item, CSS::FlexDirection flex_direction) const
  179. {
  180. auto width_of_containing_block = m_state.get(*item.box.containing_block()).content_width();
  181. auto width_of_containing_block_as_length = CSS::Length::make_px(width_of_containing_block);
  182. // FIXME: This should also take reverse-ness into account
  183. if (flex_direction == CSS::FlexDirection::Row || flex_direction == CSS::FlexDirection::RowReverse) {
  184. item.borders.main_before = item.box.computed_values().border_left().width;
  185. item.borders.main_after = item.box.computed_values().border_right().width;
  186. item.borders.cross_before = item.box.computed_values().border_top().width;
  187. item.borders.cross_after = item.box.computed_values().border_bottom().width;
  188. item.padding.main_before = item.box.computed_values().padding().left.resolved(item.box, width_of_containing_block_as_length).to_px(item.box);
  189. item.padding.main_after = item.box.computed_values().padding().right.resolved(item.box, width_of_containing_block_as_length).to_px(item.box);
  190. item.padding.cross_before = item.box.computed_values().padding().top.resolved(item.box, width_of_containing_block_as_length).to_px(item.box);
  191. item.padding.cross_after = item.box.computed_values().padding().bottom.resolved(item.box, width_of_containing_block_as_length).to_px(item.box);
  192. item.margins.main_before = item.box.computed_values().margin().left.resolved(item.box, width_of_containing_block_as_length).to_px(item.box);
  193. item.margins.main_after = item.box.computed_values().margin().right.resolved(item.box, width_of_containing_block_as_length).to_px(item.box);
  194. item.margins.cross_before = item.box.computed_values().margin().top.resolved(item.box, width_of_containing_block_as_length).to_px(item.box);
  195. item.margins.cross_after = item.box.computed_values().margin().bottom.resolved(item.box, width_of_containing_block_as_length).to_px(item.box);
  196. item.margins.main_before_is_auto = item.box.computed_values().margin().left.is_auto();
  197. item.margins.main_after_is_auto = item.box.computed_values().margin().right.is_auto();
  198. item.margins.cross_before_is_auto = item.box.computed_values().margin().top.is_auto();
  199. item.margins.cross_after_is_auto = item.box.computed_values().margin().bottom.is_auto();
  200. } else {
  201. item.borders.main_before = item.box.computed_values().border_top().width;
  202. item.borders.main_after = item.box.computed_values().border_bottom().width;
  203. item.borders.cross_before = item.box.computed_values().border_left().width;
  204. item.borders.cross_after = item.box.computed_values().border_right().width;
  205. item.padding.main_before = item.box.computed_values().padding().top.resolved(item.box, width_of_containing_block_as_length).to_px(item.box);
  206. item.padding.main_after = item.box.computed_values().padding().bottom.resolved(item.box, width_of_containing_block_as_length).to_px(item.box);
  207. item.padding.cross_before = item.box.computed_values().padding().left.resolved(item.box, width_of_containing_block_as_length).to_px(item.box);
  208. item.padding.cross_after = item.box.computed_values().padding().right.resolved(item.box, width_of_containing_block_as_length).to_px(item.box);
  209. item.margins.main_before = item.box.computed_values().margin().top.resolved(item.box, width_of_containing_block_as_length).to_px(item.box);
  210. item.margins.main_after = item.box.computed_values().margin().bottom.resolved(item.box, width_of_containing_block_as_length).to_px(item.box);
  211. item.margins.cross_before = item.box.computed_values().margin().left.resolved(item.box, width_of_containing_block_as_length).to_px(item.box);
  212. item.margins.cross_after = item.box.computed_values().margin().right.resolved(item.box, width_of_containing_block_as_length).to_px(item.box);
  213. item.margins.main_before_is_auto = item.box.computed_values().margin().top.is_auto();
  214. item.margins.main_after_is_auto = item.box.computed_values().margin().bottom.is_auto();
  215. item.margins.cross_before_is_auto = item.box.computed_values().margin().left.is_auto();
  216. item.margins.cross_after_is_auto = item.box.computed_values().margin().right.is_auto();
  217. }
  218. };
  219. // https://www.w3.org/TR/css-flexbox-1/#flex-items
  220. void FlexFormattingContext::generate_anonymous_flex_items()
  221. {
  222. // More like, sift through the already generated items.
  223. // After this step no items are to be added or removed from flex_items!
  224. // It holds every item we need to consider and there should be nothing in the following
  225. // calculations that could change that.
  226. // This is particularly important since we take references to the items stored in flex_items
  227. // later, whose addresses won't be stable if we added or removed any items.
  228. HashMap<int, Vector<FlexItem>> order_item_bucket;
  229. flex_container().for_each_child_of_type<Box>([&](Box& child_box) {
  230. // Skip anonymous text runs that are only whitespace.
  231. if (child_box.is_anonymous() && !child_box.first_child_of_type<BlockContainer>()) {
  232. bool contains_only_white_space = true;
  233. child_box.for_each_in_subtree([&](auto const& node) {
  234. if (!is<TextNode>(node) || !static_cast<TextNode const&>(node).dom_node().data().is_whitespace()) {
  235. contains_only_white_space = false;
  236. return IterationDecision::Break;
  237. }
  238. return IterationDecision::Continue;
  239. });
  240. if (contains_only_white_space)
  241. return IterationDecision::Continue;
  242. }
  243. // Skip any "out-of-flow" children
  244. if (child_box.is_out_of_flow(*this))
  245. return IterationDecision::Continue;
  246. child_box.set_flex_item(true);
  247. FlexItem flex_item = { child_box };
  248. populate_specified_margins(flex_item, m_flex_direction);
  249. auto& order_bucket = order_item_bucket.ensure(child_box.computed_values().order());
  250. order_bucket.append(move(flex_item));
  251. return IterationDecision::Continue;
  252. });
  253. auto keys = order_item_bucket.keys();
  254. if (is_direction_reverse()) {
  255. quick_sort(keys, [](auto& a, auto& b) { return a > b; });
  256. } else {
  257. quick_sort(keys, [](auto& a, auto& b) { return a < b; });
  258. }
  259. for (auto key : keys) {
  260. auto order_bucket = order_item_bucket.get(key);
  261. if (order_bucket.has_value()) {
  262. auto items = order_bucket.value();
  263. if (is_direction_reverse()) {
  264. for (auto flex_item : items.in_reverse()) {
  265. m_flex_items.append(move(flex_item));
  266. }
  267. } else {
  268. for (auto flex_item : items) {
  269. m_flex_items.append(move(flex_item));
  270. }
  271. }
  272. }
  273. }
  274. }
  275. bool FlexFormattingContext::has_definite_main_size(Box const& box) const
  276. {
  277. auto const& used_values = m_state.get(box);
  278. return is_row_layout() ? used_values.has_definite_width() : used_values.has_definite_height();
  279. }
  280. float FlexFormattingContext::specified_main_size(Box const& box) const
  281. {
  282. auto const& box_state = m_state.get(box);
  283. return is_row_layout() ? box_state.content_width() : box_state.content_height();
  284. }
  285. float FlexFormattingContext::specified_cross_size(Box const& box) const
  286. {
  287. auto const& box_state = m_state.get(box);
  288. return is_row_layout() ? box_state.content_height() : box_state.content_width();
  289. }
  290. float FlexFormattingContext::resolved_definite_cross_size(Box const& box) const
  291. {
  292. auto const& cross_value = is_row_layout() ? box.computed_values().height() : box.computed_values().width();
  293. if (cross_value.is_auto())
  294. return specified_cross_size(flex_container());
  295. if (cross_value.is_length())
  296. return specified_cross_size(box);
  297. auto containing_block_size = !is_row_layout() ? containing_block_width_for(box) : containing_block_height_for(box);
  298. return cross_value.resolved(box, CSS::Length::make_px(containing_block_size)).to_px(box);
  299. }
  300. float FlexFormattingContext::resolved_definite_main_size(Box const& box) const
  301. {
  302. auto const& main_value = is_row_layout() ? box.computed_values().width() : box.computed_values().height();
  303. if (main_value.is_auto())
  304. return specified_main_size(flex_container());
  305. if (main_value.is_length())
  306. return specified_main_size(box);
  307. auto containing_block_size = is_row_layout() ? containing_block_width_for(box) : containing_block_height_for(box);
  308. return main_value.resolved(box, CSS::Length::make_px(containing_block_size)).to_px(box);
  309. }
  310. bool FlexFormattingContext::has_main_min_size(Box const& box) const
  311. {
  312. auto const& value = is_row_layout() ? box.computed_values().min_width() : box.computed_values().min_height();
  313. return !value.is_auto();
  314. }
  315. bool FlexFormattingContext::has_cross_min_size(Box const& box) const
  316. {
  317. auto const& value = is_row_layout() ? box.computed_values().min_height() : box.computed_values().min_width();
  318. return !value.is_auto();
  319. }
  320. bool FlexFormattingContext::has_definite_cross_size(Box const& box) const
  321. {
  322. auto const& used_values = m_state.get(box);
  323. return is_row_layout() ? used_values.has_definite_height() : used_values.has_definite_width();
  324. }
  325. float FlexFormattingContext::specified_main_size_of_child_box(Box const& child_box) const
  326. {
  327. auto main_size_of_parent = specified_main_size(flex_container());
  328. auto& value = is_row_layout() ? child_box.computed_values().width() : child_box.computed_values().height();
  329. return value.resolved(child_box, CSS::Length::make_px(main_size_of_parent)).to_px(child_box);
  330. }
  331. float FlexFormattingContext::specified_main_min_size(Box const& box) const
  332. {
  333. return is_row_layout()
  334. ? get_pixel_width(box, box.computed_values().min_width())
  335. : get_pixel_height(box, box.computed_values().min_height());
  336. }
  337. float FlexFormattingContext::specified_cross_min_size(Box const& box) const
  338. {
  339. return is_row_layout()
  340. ? get_pixel_height(box, box.computed_values().min_height())
  341. : get_pixel_width(box, box.computed_values().min_width());
  342. }
  343. bool FlexFormattingContext::has_main_max_size(Box const& box) const
  344. {
  345. auto const& value = is_row_layout() ? box.computed_values().max_width() : box.computed_values().max_height();
  346. return !value.is_auto();
  347. }
  348. bool FlexFormattingContext::has_cross_max_size(Box const& box) const
  349. {
  350. auto const& value = !is_row_layout() ? box.computed_values().max_width() : box.computed_values().max_height();
  351. return !value.is_auto();
  352. }
  353. float FlexFormattingContext::specified_main_max_size(Box const& box) const
  354. {
  355. return is_row_layout()
  356. ? get_pixel_width(box, box.computed_values().max_width())
  357. : get_pixel_height(box, box.computed_values().max_height());
  358. }
  359. float FlexFormattingContext::specified_cross_max_size(Box const& box) const
  360. {
  361. return is_row_layout()
  362. ? get_pixel_height(box, box.computed_values().max_height())
  363. : get_pixel_width(box, box.computed_values().max_width());
  364. }
  365. float FlexFormattingContext::calculated_main_size(Box const& box) const
  366. {
  367. auto const& box_state = m_state.get(box);
  368. return is_row_layout() ? box_state.content_width() : box_state.content_height();
  369. }
  370. bool FlexFormattingContext::is_cross_auto(Box const& box) const
  371. {
  372. auto& cross_length = is_row_layout() ? box.computed_values().height() : box.computed_values().width();
  373. return cross_length.is_auto();
  374. }
  375. void FlexFormattingContext::set_main_size(Box const& box, float size)
  376. {
  377. if (is_row_layout())
  378. m_state.get_mutable(box).set_content_width(size);
  379. else
  380. m_state.get_mutable(box).set_content_height(size);
  381. }
  382. void FlexFormattingContext::set_cross_size(Box const& box, float size)
  383. {
  384. if (is_row_layout())
  385. m_state.get_mutable(box).set_content_height(size);
  386. else
  387. m_state.get_mutable(box).set_content_width(size);
  388. }
  389. void FlexFormattingContext::set_has_definite_main_size(Box const& box, bool definite)
  390. {
  391. auto& used_values = m_state.get_mutable(box);
  392. if (is_row_layout())
  393. used_values.set_has_definite_width(definite);
  394. else
  395. used_values.set_has_definite_height(definite);
  396. }
  397. void FlexFormattingContext::set_has_definite_cross_size(Box const& box, bool definite)
  398. {
  399. auto& used_values = m_state.get_mutable(box);
  400. if (!is_row_layout())
  401. used_values.set_has_definite_width(definite);
  402. else
  403. used_values.set_has_definite_height(definite);
  404. }
  405. void FlexFormattingContext::set_offset(Box const& box, float main_offset, float cross_offset)
  406. {
  407. if (is_row_layout())
  408. m_state.get_mutable(box).offset = Gfx::FloatPoint { main_offset, cross_offset };
  409. else
  410. m_state.get_mutable(box).offset = Gfx::FloatPoint { cross_offset, main_offset };
  411. }
  412. void FlexFormattingContext::set_main_axis_first_margin(FlexItem& item, float margin)
  413. {
  414. item.margins.main_before = margin;
  415. if (is_row_layout())
  416. m_state.get_mutable(item.box).margin_left = margin;
  417. else
  418. m_state.get_mutable(item.box).margin_top = margin;
  419. }
  420. void FlexFormattingContext::set_main_axis_second_margin(FlexItem& item, float margin)
  421. {
  422. item.margins.main_after = margin;
  423. if (is_row_layout())
  424. m_state.get_mutable(item.box).margin_right = margin;
  425. else
  426. m_state.get_mutable(item.box).margin_bottom = margin;
  427. }
  428. float FlexFormattingContext::sum_of_margin_padding_border_in_main_axis(Box const& box) const
  429. {
  430. auto const& box_state = m_state.get(box);
  431. if (is_row_layout()) {
  432. return box_state.margin_left + box_state.margin_right
  433. + box_state.padding_left + box_state.padding_right
  434. + box_state.border_left + box_state.border_right;
  435. } else {
  436. return box_state.margin_top + box_state.margin_bottom
  437. + box_state.padding_top + box_state.padding_bottom
  438. + box_state.border_top + box_state.border_bottom;
  439. }
  440. }
  441. // https://www.w3.org/TR/css-flexbox-1/#algo-available
  442. void FlexFormattingContext::determine_available_main_and_cross_space(bool& main_is_constrained, bool& cross_is_constrained, float& main_min_size, float& main_max_size, float& cross_min_size, float& cross_max_size)
  443. {
  444. auto containing_block_effective_main_size = [&](Box const& box) -> Optional<float> {
  445. auto& containing_block = *box.containing_block();
  446. if (has_definite_main_size(containing_block))
  447. return resolved_definite_main_size(containing_block);
  448. return {};
  449. };
  450. Optional<float> main_available_space;
  451. main_is_constrained = false;
  452. // For each dimension,
  453. // if that dimension of the flex container’s content box is a definite size, use that;
  454. // if that dimension of the flex container is being sized under a min or max-content constraint, the available space in that dimension is that constraint;
  455. // otherwise, subtract the flex container’s margin, border, and padding from the space available to the flex container in that dimension and use that value. (This might result in an infinite value.)
  456. if (has_definite_main_size(flex_container())) {
  457. main_is_constrained = true;
  458. main_available_space = specified_main_size(flex_container());
  459. } else {
  460. if (has_main_max_size(flex_container())) {
  461. bool main_max_size_behaves_like_auto = false;
  462. if (computed_main_max_size(flex_container()).is_percentage())
  463. main_max_size_behaves_like_auto = !has_definite_main_size(*flex_container().containing_block());
  464. if (!main_max_size_behaves_like_auto) {
  465. main_max_size = specified_main_max_size(flex_container());
  466. main_available_space = main_max_size;
  467. main_is_constrained = true;
  468. }
  469. }
  470. if (has_main_min_size(flex_container())) {
  471. main_min_size = specified_main_min_size(flex_container());
  472. main_is_constrained = true;
  473. }
  474. if (!main_is_constrained) {
  475. auto available_main_size = containing_block_effective_main_size(flex_container());
  476. main_available_space = available_main_size.value_or(NumericLimits<float>::max()) - sum_of_margin_padding_border_in_main_axis(flex_container());
  477. if (flex_container().computed_values().flex_wrap() == CSS::FlexWrap::Wrap || flex_container().computed_values().flex_wrap() == CSS::FlexWrap::WrapReverse) {
  478. main_available_space = specified_main_size(*flex_container().containing_block());
  479. main_is_constrained = true;
  480. }
  481. }
  482. }
  483. Optional<float> cross_available_space;
  484. cross_is_constrained = false;
  485. if (has_definite_cross_size(flex_container())) {
  486. cross_available_space = specified_cross_size(flex_container());
  487. } else {
  488. if (has_cross_max_size(flex_container())) {
  489. bool cross_max_size_behaves_like_auto = false;
  490. if (computed_cross_max_size(flex_container()).is_percentage())
  491. cross_max_size_behaves_like_auto = !has_definite_cross_size(*flex_container().containing_block());
  492. if (!cross_max_size_behaves_like_auto) {
  493. cross_max_size = specified_cross_max_size(flex_container());
  494. cross_is_constrained = true;
  495. }
  496. }
  497. if (has_cross_min_size(flex_container())) {
  498. cross_min_size = specified_cross_min_size(flex_container());
  499. cross_is_constrained = true;
  500. }
  501. // FIXME: Is this right? Probably not.
  502. if (!cross_is_constrained)
  503. cross_available_space = cross_max_size;
  504. }
  505. m_available_space = AvailableSpace { .main = main_available_space, .cross = cross_available_space };
  506. }
  507. float FlexFormattingContext::calculate_indefinite_main_size(FlexItem const& item)
  508. {
  509. VERIFY(!has_definite_main_size(item.box));
  510. if (has_definite_cross_size(item.box))
  511. return calculate_max_content_main_size(item);
  512. // Item has indefinite cross size, layout with "fit-content"
  513. // If we're in a row layout and looking for the width, just use the fit-content width.
  514. if (is_row_layout())
  515. return calculate_fit_content_width(item.box, m_state.get(item.box).width_constraint, m_available_space->main);
  516. // We're in a column layout, looking for the height. Figure out the fit-content width,
  517. // then layout with that and see what height comes out of it.
  518. float fit_content_cross_size = calculate_fit_content_width(item.box, m_state.get(item.box).width_constraint, m_available_space->cross);
  519. LayoutState throwaway_state(&m_state);
  520. auto& box_state = throwaway_state.get_mutable(item.box);
  521. // Item has definite cross size, layout with that as the used cross size.
  522. auto independent_formatting_context = create_independent_formatting_context_if_needed(throwaway_state, item.box);
  523. // NOTE: Flex items should always create an independent formatting context!
  524. VERIFY(independent_formatting_context);
  525. box_state.set_content_width(fit_content_cross_size);
  526. independent_formatting_context->run(item.box, LayoutMode::Normal);
  527. return BlockFormattingContext::compute_theoretical_height(throwaway_state, item.box);
  528. }
  529. // https://drafts.csswg.org/css-flexbox-1/#propdef-flex-basis
  530. CSS::FlexBasisData FlexFormattingContext::used_flex_basis_for_item(FlexItem const& item) const
  531. {
  532. auto flex_basis = item.box.computed_values().flex_basis();
  533. if (flex_basis.type == CSS::FlexBasis::Auto) {
  534. // https://drafts.csswg.org/css-flexbox-1/#valdef-flex-basis-auto
  535. // When specified on a flex item, the auto keyword retrieves the value of the main size property as the used flex-basis.
  536. // If that value is itself auto, then the used value is content.
  537. auto const& main_size = is_row_layout() ? item.box.computed_values().width() : item.box.computed_values().height();
  538. if (main_size.is_auto()) {
  539. flex_basis.type = CSS::FlexBasis::Content;
  540. } else {
  541. flex_basis.type = CSS::FlexBasis::LengthPercentage;
  542. flex_basis.length_percentage = main_size;
  543. }
  544. }
  545. return flex_basis;
  546. }
  547. // https://www.w3.org/TR/css-flexbox-1/#algo-main-item
  548. void FlexFormattingContext::determine_flex_base_size_and_hypothetical_main_size(FlexItem& flex_item)
  549. {
  550. auto& child_box = flex_item.box;
  551. flex_item.flex_base_size = [&] {
  552. flex_item.used_flex_basis = used_flex_basis_for_item(flex_item);
  553. flex_item.used_flex_basis_is_definite = [&](CSS::FlexBasisData const& flex_basis) -> bool {
  554. if (flex_basis.type != CSS::FlexBasis::LengthPercentage)
  555. return false;
  556. if (flex_basis.length_percentage->is_auto())
  557. return false;
  558. if (flex_basis.length_percentage->is_length())
  559. return true;
  560. if (flex_basis.length_percentage->is_calculated()) {
  561. // FIXME: Handle calc() in used flex basis.
  562. return false;
  563. }
  564. if (is_row_layout())
  565. return m_flex_container_state.has_definite_width();
  566. return m_flex_container_state.has_definite_height();
  567. }(flex_item.used_flex_basis);
  568. // A. If the item has a definite used flex basis, that’s the flex base size.
  569. if (flex_item.used_flex_basis_is_definite) {
  570. if (is_row_layout())
  571. return get_pixel_width(child_box, flex_item.used_flex_basis.length_percentage.value());
  572. return get_pixel_height(child_box, flex_item.used_flex_basis.length_percentage.value());
  573. }
  574. // B. If the flex item has ...
  575. // - an intrinsic aspect ratio,
  576. // - a used flex basis of content, and
  577. // - a definite cross size,
  578. if (flex_item.box.has_intrinsic_aspect_ratio()
  579. && flex_item.used_flex_basis.type == CSS::FlexBasis::Content
  580. && has_definite_cross_size(flex_item.box)) {
  581. // flex_base_size is calculated from definite cross size and intrinsic aspect ratio
  582. return resolved_definite_cross_size(flex_item.box) * flex_item.box.intrinsic_aspect_ratio().value();
  583. }
  584. // C. If the used flex basis is content or depends on its available space,
  585. // and the flex container is being sized under a min-content or max-content constraint
  586. // (e.g. when performing automatic table layout [CSS21]), size the item under that constraint.
  587. // The flex base size is the item’s resulting main size.
  588. auto flex_container_main_size_constraint = is_row_layout() ? m_flex_container_state.width_constraint : m_flex_container_state.height_constraint;
  589. if (flex_item.used_flex_basis.type == CSS::FlexBasis::Content && flex_container_main_size_constraint != SizeConstraint::None) {
  590. if (flex_container_main_size_constraint == SizeConstraint::MinContent)
  591. return calculate_min_content_main_size(flex_item);
  592. return calculate_max_content_main_size(flex_item);
  593. }
  594. // D. Otherwise, if the used flex basis is content or depends on its available space,
  595. // the available main size is infinite, and the flex item’s inline axis is parallel to the main axis,
  596. // lay the item out using the rules for a box in an orthogonal flow [CSS3-WRITING-MODES].
  597. // The flex base size is the item’s max-content main size.
  598. if (flex_item.used_flex_basis.type == CSS::FlexBasis::Content
  599. // FIXME: && main_size is infinite && inline axis is parallel to the main axis
  600. && false && false) {
  601. TODO();
  602. // Use rules for a flex_container in orthogonal flow
  603. }
  604. // E. Otherwise, size the item into the available space using its used flex basis in place of its main size,
  605. // treating a value of content as max-content. If a cross size is needed to determine the main size
  606. // (e.g. when the flex item’s main size is in its block axis) and the flex item’s cross size is auto and not definite,
  607. // in this calculation use fit-content as the flex item’s cross size.
  608. // The flex base size is the item’s resulting main size.
  609. // FIXME: This is probably too naive.
  610. // FIXME: Care about FlexBasis::Auto
  611. if (has_definite_main_size(child_box))
  612. return resolved_definite_main_size(child_box);
  613. // NOTE: To avoid repeated layout work, we keep a cache of flex item main sizes on the
  614. // root LayoutState object. It's available through a full layout cycle.
  615. // FIXME: Make sure this cache isn't overly permissive..
  616. auto& size_cache = m_state.m_root.flex_item_size_cache;
  617. auto it = size_cache.find(&flex_item.box);
  618. if (it != size_cache.end())
  619. return it->value;
  620. auto main_size = calculate_indefinite_main_size(flex_item);
  621. size_cache.set(&flex_item.box, main_size);
  622. return main_size;
  623. }();
  624. // The hypothetical main size is the item’s flex base size clamped according to its used min and max main sizes (and flooring the content box size at zero).
  625. auto clamp_min = has_main_min_size(child_box) ? specified_main_min_size(child_box) : automatic_minimum_size(flex_item);
  626. auto clamp_max = has_main_max_size(child_box) ? specified_main_max_size(child_box) : NumericLimits<float>::max();
  627. flex_item.hypothetical_main_size = max(0.0f, css_clamp(flex_item.flex_base_size, clamp_min, clamp_max));
  628. }
  629. // https://drafts.csswg.org/css-flexbox-1/#min-size-auto
  630. float FlexFormattingContext::automatic_minimum_size(FlexItem const& item) const
  631. {
  632. // FIXME: Deal with scroll containers.
  633. return content_based_minimum_size(item);
  634. }
  635. // https://drafts.csswg.org/css-flexbox-1/#specified-size-suggestion
  636. Optional<float> FlexFormattingContext::specified_size_suggestion(FlexItem const& item) const
  637. {
  638. // If the item’s preferred main size is definite and not automatic,
  639. // then the specified size suggestion is that size. It is otherwise undefined.
  640. if (has_definite_main_size(item.box))
  641. return specified_main_size(item.box);
  642. return {};
  643. }
  644. // https://drafts.csswg.org/css-flexbox-1/#content-size-suggestion
  645. float FlexFormattingContext::content_size_suggestion(FlexItem const& item) const
  646. {
  647. // FIXME: Apply clamps
  648. return calculate_min_content_main_size(item);
  649. }
  650. // https://drafts.csswg.org/css-flexbox-1/#transferred-size-suggestion
  651. Optional<float> FlexFormattingContext::transferred_size_suggestion(FlexItem const& item) const
  652. {
  653. // If the item has a preferred aspect ratio and its preferred cross size is definite,
  654. // then the transferred size suggestion is that size
  655. // (clamped by its minimum and maximum cross sizes if they are definite), converted through the aspect ratio.
  656. if (item.box.has_intrinsic_aspect_ratio() && has_definite_cross_size(item.box)) {
  657. auto aspect_ratio = item.box.intrinsic_aspect_ratio().value();
  658. // FIXME: Clamp cross size to min/max cross size before this conversion.
  659. return resolved_definite_cross_size(item.box) * aspect_ratio;
  660. }
  661. // It is otherwise undefined.
  662. return {};
  663. }
  664. // https://drafts.csswg.org/css-flexbox-1/#content-based-minimum-size
  665. float FlexFormattingContext::content_based_minimum_size(FlexItem const& item) const
  666. {
  667. auto unclamped_size = [&] {
  668. // The content-based minimum size of a flex item is the smaller of its specified size suggestion
  669. // and its content size suggestion if its specified size suggestion exists;
  670. if (auto specified_size_suggestion = this->specified_size_suggestion(item); specified_size_suggestion.has_value()) {
  671. return min(specified_size_suggestion.value(), content_size_suggestion(item));
  672. }
  673. // otherwise, the smaller of its transferred size suggestion and its content size suggestion
  674. // if the element is replaced and its transferred size suggestion exists;
  675. if (item.box.is_replaced_box()) {
  676. if (auto transferred_size_suggestion = this->transferred_size_suggestion(item); transferred_size_suggestion.has_value()) {
  677. return min(transferred_size_suggestion.value(), content_size_suggestion(item));
  678. }
  679. }
  680. // otherwise its content size suggestion.
  681. return content_size_suggestion(item);
  682. }();
  683. // In all cases, the size is clamped by the maximum main size if it’s definite.
  684. if (has_main_max_size(item.box)) {
  685. return min(unclamped_size, specified_main_max_size(item.box));
  686. }
  687. return unclamped_size;
  688. }
  689. // https://www.w3.org/TR/css-flexbox-1/#algo-main-container
  690. void FlexFormattingContext::determine_main_size_of_flex_container(bool const main_is_constrained, float const main_min_size, float const main_max_size)
  691. {
  692. // FIXME: This needs to be reworked.
  693. if (!main_is_constrained || !m_available_space->main.has_value()) {
  694. auto result = is_row_layout() ? calculate_max_content_width(flex_container()) : calculate_max_content_height(flex_container());
  695. m_available_space->main = css_clamp(result, main_min_size, main_max_size);
  696. }
  697. set_main_size(flex_container(), m_available_space->main.value_or(NumericLimits<float>::max()));
  698. }
  699. // https://www.w3.org/TR/css-flexbox-1/#algo-line-break
  700. void FlexFormattingContext::collect_flex_items_into_flex_lines()
  701. {
  702. // FIXME: Also support wrap-reverse
  703. // If the flex container is single-line, collect all the flex items into a single flex line.
  704. if (is_single_line()) {
  705. FlexLine line;
  706. for (auto& flex_item : m_flex_items) {
  707. line.items.append(&flex_item);
  708. }
  709. m_flex_lines.append(move(line));
  710. return;
  711. }
  712. // Otherwise, starting from the first uncollected item, collect consecutive items one by one
  713. // until the first time that the next collected item would not fit into the flex container’s inner main size
  714. // (or until a forced break is encountered, see §10 Fragmenting Flex Layout).
  715. // If the very first uncollected item wouldn't fit, collect just it into the line.
  716. // For this step, the size of a flex item is its outer hypothetical main size. (Note: This can be negative.)
  717. // Repeat until all flex items have been collected into flex lines.
  718. FlexLine line;
  719. float line_main_size = 0;
  720. for (auto& flex_item : m_flex_items) {
  721. auto outer_hypothetical_main_size = flex_item.hypothetical_main_size + flex_item.margins.main_before + flex_item.margins.main_after + flex_item.borders.main_before + flex_item.borders.main_after + flex_item.padding.main_before + flex_item.padding.main_after;
  722. if ((line_main_size + outer_hypothetical_main_size) > m_available_space->main.value_or(NumericLimits<float>::max())) {
  723. m_flex_lines.append(move(line));
  724. line = {};
  725. line_main_size = 0;
  726. }
  727. line.items.append(&flex_item);
  728. line_main_size += outer_hypothetical_main_size;
  729. }
  730. m_flex_lines.append(move(line));
  731. }
  732. // https://www.w3.org/TR/css-flexbox-1/#resolve-flexible-lengths
  733. void FlexFormattingContext::resolve_flexible_lengths()
  734. {
  735. enum FlexFactor {
  736. FlexGrowFactor,
  737. FlexShrinkFactor
  738. };
  739. FlexFactor used_flex_factor;
  740. // 6.1. Determine used flex factor
  741. for (auto& flex_line : m_flex_lines) {
  742. size_t number_of_unfrozen_items_on_line = flex_line.items.size();
  743. float sum_of_hypothetical_main_sizes = 0;
  744. for (auto& flex_item : flex_line.items) {
  745. sum_of_hypothetical_main_sizes += (flex_item->hypothetical_main_size + flex_item->margins.main_before + flex_item->margins.main_after + flex_item->borders.main_before + flex_item->borders.main_after + flex_item->padding.main_before + flex_item->padding.main_after);
  746. }
  747. if (sum_of_hypothetical_main_sizes < m_available_space->main.value_or(NumericLimits<float>::max()))
  748. used_flex_factor = FlexFactor::FlexGrowFactor;
  749. else
  750. used_flex_factor = FlexFactor::FlexShrinkFactor;
  751. for (auto& flex_item : flex_line.items) {
  752. if (used_flex_factor == FlexFactor::FlexGrowFactor)
  753. flex_item->flex_factor = flex_item->box.computed_values().flex_grow();
  754. else if (used_flex_factor == FlexFactor::FlexShrinkFactor)
  755. flex_item->flex_factor = flex_item->box.computed_values().flex_shrink();
  756. }
  757. // 6.2. Size inflexible items
  758. auto freeze_item_setting_target_main_size_to_hypothetical_main_size = [&number_of_unfrozen_items_on_line](FlexItem& item) {
  759. item.target_main_size = item.hypothetical_main_size;
  760. number_of_unfrozen_items_on_line--;
  761. item.frozen = true;
  762. };
  763. for (auto& flex_item : flex_line.items) {
  764. if (flex_item->flex_factor.has_value() && flex_item->flex_factor.value() == 0) {
  765. freeze_item_setting_target_main_size_to_hypothetical_main_size(*flex_item);
  766. } else if (used_flex_factor == FlexFactor::FlexGrowFactor) {
  767. // FIXME: Spec doesn't include the == case, but we take a too basic approach to calculating the values used so this is appropriate
  768. if (flex_item->flex_base_size > flex_item->hypothetical_main_size) {
  769. freeze_item_setting_target_main_size_to_hypothetical_main_size(*flex_item);
  770. }
  771. } else if (used_flex_factor == FlexFactor::FlexShrinkFactor) {
  772. if (flex_item->flex_base_size < flex_item->hypothetical_main_size) {
  773. freeze_item_setting_target_main_size_to_hypothetical_main_size(*flex_item);
  774. }
  775. }
  776. }
  777. // 6.3. Calculate initial free space
  778. auto calculate_free_space = [&]() {
  779. float sum_of_items_on_line = 0;
  780. for (auto& flex_item : flex_line.items) {
  781. if (flex_item->frozen)
  782. sum_of_items_on_line += flex_item->target_main_size + flex_item->margins.main_before + flex_item->margins.main_after + flex_item->borders.main_before + flex_item->borders.main_after + flex_item->padding.main_before + flex_item->padding.main_after;
  783. else
  784. sum_of_items_on_line += flex_item->flex_base_size + flex_item->margins.main_before + flex_item->margins.main_after + flex_item->borders.main_before + flex_item->borders.main_after + flex_item->padding.main_before + flex_item->padding.main_after;
  785. }
  786. return specified_main_size(flex_container()) - sum_of_items_on_line;
  787. };
  788. float initial_free_space = calculate_free_space();
  789. flex_line.remaining_free_space = initial_free_space;
  790. // 6.4 Loop
  791. auto for_each_unfrozen_item = [&flex_line](auto callback) {
  792. for (auto& flex_item : flex_line.items) {
  793. if (!flex_item->frozen)
  794. callback(flex_item);
  795. }
  796. };
  797. while (number_of_unfrozen_items_on_line > 0) {
  798. // b Calculate the remaining free space
  799. flex_line.remaining_free_space = calculate_free_space();
  800. float sum_of_unfrozen_flex_items_flex_factors = 0;
  801. for_each_unfrozen_item([&](FlexItem* item) {
  802. sum_of_unfrozen_flex_items_flex_factors += item->flex_factor.value_or(1);
  803. });
  804. if (sum_of_unfrozen_flex_items_flex_factors < 1) {
  805. auto intermediate_free_space = initial_free_space * sum_of_unfrozen_flex_items_flex_factors;
  806. if (AK::abs(intermediate_free_space) < AK::abs(flex_line.remaining_free_space))
  807. flex_line.remaining_free_space = intermediate_free_space;
  808. }
  809. // c Distribute free space proportional to the flex factors
  810. if (flex_line.remaining_free_space != 0) {
  811. if (used_flex_factor == FlexFactor::FlexGrowFactor) {
  812. float sum_of_flex_grow_factor_of_unfrozen_items = sum_of_unfrozen_flex_items_flex_factors;
  813. for_each_unfrozen_item([&](FlexItem* flex_item) {
  814. float ratio = flex_item->flex_factor.value_or(1) / sum_of_flex_grow_factor_of_unfrozen_items;
  815. flex_item->target_main_size = flex_item->flex_base_size + (flex_line.remaining_free_space * ratio);
  816. });
  817. } else if (used_flex_factor == FlexFactor::FlexShrinkFactor) {
  818. float sum_of_scaled_flex_shrink_factor_of_unfrozen_items = 0;
  819. for_each_unfrozen_item([&](FlexItem* flex_item) {
  820. flex_item->scaled_flex_shrink_factor = flex_item->flex_factor.value_or(1) * flex_item->flex_base_size;
  821. sum_of_scaled_flex_shrink_factor_of_unfrozen_items += flex_item->scaled_flex_shrink_factor;
  822. });
  823. for_each_unfrozen_item([&](FlexItem* flex_item) {
  824. float ratio = 1.0f;
  825. if (sum_of_scaled_flex_shrink_factor_of_unfrozen_items != 0.0f)
  826. ratio = flex_item->scaled_flex_shrink_factor / sum_of_scaled_flex_shrink_factor_of_unfrozen_items;
  827. flex_item->target_main_size = flex_item->flex_base_size - (AK::abs(flex_line.remaining_free_space) * ratio);
  828. });
  829. }
  830. } else {
  831. // This isn't spec but makes sense.
  832. for_each_unfrozen_item([&](FlexItem* flex_item) {
  833. flex_item->target_main_size = flex_item->flex_base_size;
  834. });
  835. }
  836. // d Fix min/max violations.
  837. float adjustments = 0.0f;
  838. for_each_unfrozen_item([&](FlexItem* item) {
  839. auto min_main = has_main_min_size(item->box)
  840. ? specified_main_min_size(item->box)
  841. : automatic_minimum_size(*item);
  842. auto max_main = has_main_max_size(item->box)
  843. ? specified_main_max_size(item->box)
  844. : NumericLimits<float>::max();
  845. float original_target_size = item->target_main_size;
  846. if (item->target_main_size < min_main) {
  847. item->target_main_size = min_main;
  848. item->is_min_violation = true;
  849. }
  850. if (item->target_main_size > max_main) {
  851. item->target_main_size = max_main;
  852. item->is_max_violation = true;
  853. }
  854. float delta = item->target_main_size - original_target_size;
  855. adjustments += delta;
  856. });
  857. // e Freeze over-flexed items
  858. float total_violation = adjustments;
  859. if (total_violation == 0) {
  860. for_each_unfrozen_item([&](FlexItem* item) {
  861. --number_of_unfrozen_items_on_line;
  862. item->frozen = true;
  863. });
  864. } else if (total_violation > 0) {
  865. for_each_unfrozen_item([&](FlexItem* item) {
  866. if (item->is_min_violation) {
  867. --number_of_unfrozen_items_on_line;
  868. item->frozen = true;
  869. }
  870. });
  871. } else if (total_violation < 0) {
  872. for_each_unfrozen_item([&](FlexItem* item) {
  873. if (item->is_max_violation) {
  874. --number_of_unfrozen_items_on_line;
  875. item->frozen = true;
  876. }
  877. });
  878. }
  879. }
  880. // 6.5.
  881. for (auto& flex_item : flex_line.items) {
  882. flex_item->main_size = flex_item->target_main_size;
  883. set_main_size(flex_item->box, flex_item->main_size);
  884. // https://drafts.csswg.org/css-flexbox-1/#definite-sizes
  885. // 1. If the flex container has a definite main size, then the post-flexing main sizes of its flex items are treated as definite.
  886. // 2. If a flex-item’s flex basis is definite, then its post-flexing main size is also definite.
  887. if (has_definite_main_size(flex_container()) || flex_item->used_flex_basis_is_definite) {
  888. set_has_definite_main_size(flex_item->box, true);
  889. }
  890. }
  891. flex_line.remaining_free_space = calculate_free_space();
  892. }
  893. }
  894. // https://drafts.csswg.org/css-flexbox-1/#algo-cross-item
  895. void FlexFormattingContext::determine_hypothetical_cross_size_of_item(FlexItem& item, bool resolve_percentage_min_max_sizes)
  896. {
  897. // Determine the hypothetical cross size of each item by performing layout
  898. // as if it were an in-flow block-level box with the used main size
  899. // and the given available space, treating auto as fit-content.
  900. auto const& computed_min_size = this->computed_cross_min_size(item.box);
  901. auto const& computed_max_size = this->computed_cross_max_size(item.box);
  902. auto clamp_min = (!computed_min_size.is_auto() && (resolve_percentage_min_max_sizes || !computed_min_size.is_percentage())) ? specified_cross_min_size(item.box) : 0;
  903. auto clamp_max = (!computed_max_size.is_auto() && (resolve_percentage_min_max_sizes || !computed_max_size.is_percentage())) ? specified_cross_max_size(item.box) : NumericLimits<float>::max();
  904. // If we have a definite cross size, this is easy! No need to perform layout, we can just use it as-is.
  905. if (has_definite_cross_size(item.box)) {
  906. item.hypothetical_cross_size = css_clamp(resolved_definite_cross_size(item.box), clamp_min, clamp_max);
  907. return;
  908. }
  909. if (computed_cross_size(item.box).is_auto()) {
  910. // Item has automatic cross size, layout with "fit-content"
  911. item.hypothetical_cross_size = css_clamp(calculate_fit_content_cross_size(item), clamp_min, clamp_max);
  912. return;
  913. }
  914. // For indefinite cross sizes, we perform a throwaway layout and then measure it.
  915. LayoutState throwaway_state(&m_state);
  916. auto& containing_block_state = throwaway_state.get_mutable(flex_container());
  917. if (is_row_layout()) {
  918. containing_block_state.set_content_width(item.main_size);
  919. containing_block_state.set_has_definite_width(true);
  920. } else {
  921. containing_block_state.set_content_height(item.main_size);
  922. containing_block_state.set_has_definite_height(true);
  923. }
  924. auto& box_state = throwaway_state.get_mutable(item.box);
  925. // Item has definite main size, layout with that as the used main size.
  926. auto independent_formatting_context = create_independent_formatting_context_if_needed(throwaway_state, item.box);
  927. // NOTE: Flex items should always create an independent formatting context!
  928. VERIFY(independent_formatting_context);
  929. independent_formatting_context->run(item.box, LayoutMode::Normal);
  930. auto automatic_cross_size = is_row_layout() ? BlockFormattingContext::compute_theoretical_height(throwaway_state, item.box)
  931. : box_state.content_width();
  932. item.hypothetical_cross_size = css_clamp(automatic_cross_size, clamp_min, clamp_max);
  933. }
  934. // https://www.w3.org/TR/css-flexbox-1/#algo-cross-line
  935. void FlexFormattingContext::calculate_cross_size_of_each_flex_line(float const cross_min_size, float const cross_max_size)
  936. {
  937. // If the flex container is single-line and has a definite cross size, the cross size of the flex line is the flex container’s inner cross size.
  938. if (is_single_line() && has_definite_cross_size(flex_container())) {
  939. m_flex_lines[0].cross_size = specified_cross_size(flex_container());
  940. return;
  941. }
  942. // Otherwise, for each flex line:
  943. for (auto& flex_line : m_flex_lines) {
  944. // FIXME: 1. Collect all the flex items whose inline-axis is parallel to the main-axis, whose align-self is baseline,
  945. // and whose cross-axis margins are both non-auto. Find the largest of the distances between each item’s baseline
  946. // and its hypothetical outer cross-start edge, and the largest of the distances between each item’s baseline
  947. // and its hypothetical outer cross-end edge, and sum these two values.
  948. // FIXME: This isn't spec but makes sense here
  949. if (has_definite_cross_size(flex_container()) && flex_container().computed_values().align_items() == CSS::AlignItems::Stretch) {
  950. flex_line.cross_size = specified_cross_size(flex_container()) / m_flex_lines.size();
  951. continue;
  952. }
  953. // 2. Among all the items not collected by the previous step, find the largest outer hypothetical cross size.
  954. float largest_hypothetical_cross_size = 0;
  955. for (auto& flex_item : flex_line.items) {
  956. if (largest_hypothetical_cross_size < flex_item->hypothetical_cross_size_with_margins())
  957. largest_hypothetical_cross_size = flex_item->hypothetical_cross_size_with_margins();
  958. }
  959. // 3. The used cross-size of the flex line is the largest of the numbers found in the previous two steps and zero.
  960. flex_line.cross_size = max(0.0f, largest_hypothetical_cross_size);
  961. }
  962. // If the flex container is single-line, then clamp the line’s cross-size to be within the container’s computed min and max cross sizes.
  963. // Note that if CSS 2.1’s definition of min/max-width/height applied more generally, this behavior would fall out automatically.
  964. if (is_single_line())
  965. m_flex_lines[0].cross_size = css_clamp(m_flex_lines[0].cross_size, cross_min_size, cross_max_size);
  966. }
  967. // https://www.w3.org/TR/css-flexbox-1/#algo-stretch
  968. void FlexFormattingContext::determine_used_cross_size_of_each_flex_item()
  969. {
  970. for (auto& flex_line : m_flex_lines) {
  971. for (auto& flex_item : flex_line.items) {
  972. // If a flex item has align-self: stretch, its computed cross size property is auto,
  973. // and neither of its cross-axis margins are auto, the used outer cross size is the used cross size of its flex line,
  974. // clamped according to the item’s used min and max cross sizes.
  975. if (alignment_for_item(*flex_item) == CSS::AlignItems::Stretch
  976. && is_cross_auto(flex_item->box)
  977. && !flex_item->margins.cross_before_is_auto
  978. && !flex_item->margins.cross_after_is_auto) {
  979. // FIXME: Clamp to the item's used min and max cross sizes.
  980. flex_item->cross_size = flex_line.cross_size - flex_item->margins.cross_before - flex_item->margins.cross_after;
  981. } else {
  982. // Otherwise, the used cross size is the item’s hypothetical cross size.
  983. flex_item->cross_size = flex_item->hypothetical_cross_size;
  984. }
  985. }
  986. }
  987. }
  988. // https://www.w3.org/TR/css-flexbox-1/#algo-main-align
  989. void FlexFormattingContext::distribute_any_remaining_free_space()
  990. {
  991. for (auto& flex_line : m_flex_lines) {
  992. // 12.1.
  993. float used_main_space = 0;
  994. size_t auto_margins = 0;
  995. for (auto& flex_item : flex_line.items) {
  996. used_main_space += flex_item->main_size;
  997. if (flex_item->margins.main_before_is_auto)
  998. ++auto_margins;
  999. if (flex_item->margins.main_after_is_auto)
  1000. ++auto_margins;
  1001. used_main_space += flex_item->margins.main_before + flex_item->margins.main_after
  1002. + flex_item->borders.main_before + flex_item->borders.main_after
  1003. + flex_item->padding.main_before + flex_item->padding.main_after;
  1004. }
  1005. if (flex_line.remaining_free_space > 0) {
  1006. float size_per_auto_margin = flex_line.remaining_free_space / (float)auto_margins;
  1007. for (auto& flex_item : flex_line.items) {
  1008. if (flex_item->margins.main_before_is_auto)
  1009. set_main_axis_first_margin(*flex_item, size_per_auto_margin);
  1010. if (flex_item->margins.main_after_is_auto)
  1011. set_main_axis_second_margin(*flex_item, size_per_auto_margin);
  1012. }
  1013. } else {
  1014. for (auto& flex_item : flex_line.items) {
  1015. if (flex_item->margins.main_before_is_auto)
  1016. set_main_axis_first_margin(*flex_item, 0);
  1017. if (flex_item->margins.main_after_is_auto)
  1018. set_main_axis_second_margin(*flex_item, 0);
  1019. }
  1020. }
  1021. // 12.2.
  1022. float space_between_items = 0;
  1023. float initial_offset = 0;
  1024. auto number_of_items = flex_line.items.size();
  1025. enum class FlexRegionRenderCursor {
  1026. Left,
  1027. Right
  1028. };
  1029. auto flex_region_render_cursor = FlexRegionRenderCursor::Left;
  1030. switch (flex_container().computed_values().justify_content()) {
  1031. case CSS::JustifyContent::FlexStart:
  1032. initial_offset = 0;
  1033. break;
  1034. case CSS::JustifyContent::FlexEnd:
  1035. flex_region_render_cursor = FlexRegionRenderCursor::Right;
  1036. initial_offset = m_available_space->main.value_or(NumericLimits<float>::max());
  1037. break;
  1038. case CSS::JustifyContent::Center:
  1039. initial_offset = (m_available_space->main.value_or(NumericLimits<float>::max()) - used_main_space) / 2.0f;
  1040. break;
  1041. case CSS::JustifyContent::SpaceBetween:
  1042. space_between_items = flex_line.remaining_free_space / (number_of_items - 1);
  1043. break;
  1044. case CSS::JustifyContent::SpaceAround:
  1045. space_between_items = flex_line.remaining_free_space / number_of_items;
  1046. initial_offset = space_between_items / 2.0f;
  1047. break;
  1048. }
  1049. // For reverse, we use FlexRegionRenderCursor::Right
  1050. // to indicate the cursor offset is the end and render backwards
  1051. // Otherwise the cursor offset is the 'start' of the region or initial offset
  1052. float cursor_offset = initial_offset;
  1053. auto place_item = [&](FlexItem& item) {
  1054. auto amount_of_main_size_used = item.main_size
  1055. + item.margins.main_before
  1056. + item.borders.main_before
  1057. + item.padding.main_before
  1058. + item.margins.main_after
  1059. + item.borders.main_after
  1060. + item.padding.main_after
  1061. + space_between_items;
  1062. if (is_direction_reverse()) {
  1063. item.main_offset = cursor_offset - item.main_size - item.margins.main_after - item.borders.main_after - item.padding.main_after;
  1064. cursor_offset -= amount_of_main_size_used;
  1065. } else if (flex_region_render_cursor == FlexRegionRenderCursor::Right) {
  1066. cursor_offset -= amount_of_main_size_used;
  1067. item.main_offset = cursor_offset + item.margins.main_before + item.borders.main_before + item.padding.main_before;
  1068. } else {
  1069. item.main_offset = cursor_offset + item.margins.main_before + item.borders.main_before + item.padding.main_before;
  1070. cursor_offset += amount_of_main_size_used;
  1071. }
  1072. };
  1073. if (is_direction_reverse() || flex_region_render_cursor == FlexRegionRenderCursor::Right) {
  1074. for (auto& item : flex_line.items.in_reverse()) {
  1075. place_item(*item);
  1076. }
  1077. } else {
  1078. for (auto& item : flex_line.items) {
  1079. place_item(*item);
  1080. }
  1081. }
  1082. }
  1083. }
  1084. void FlexFormattingContext::dump_items() const
  1085. {
  1086. dbgln("\033[34;1mflex-container\033[0m {}, direction: {}, current-size: {}x{}", flex_container().debug_description(), is_row_layout() ? "row" : "column", m_flex_container_state.content_width(), m_flex_container_state.content_height());
  1087. for (size_t i = 0; i < m_flex_lines.size(); ++i) {
  1088. dbgln("{} flex-line #{}:", flex_container().debug_description(), i);
  1089. for (size_t j = 0; j < m_flex_lines[i].items.size(); ++j) {
  1090. auto& item = *m_flex_lines[i].items[j];
  1091. dbgln("{} flex-item #{}: {} (main:{}, cross:{})", flex_container().debug_description(), j, item.box.debug_description(), item.main_size, item.cross_size);
  1092. }
  1093. }
  1094. }
  1095. CSS::AlignItems FlexFormattingContext::alignment_for_item(FlexItem const& item) const
  1096. {
  1097. switch (item.box.computed_values().align_self()) {
  1098. case CSS::AlignSelf::Auto:
  1099. return flex_container().computed_values().align_items();
  1100. case CSS::AlignSelf::Normal:
  1101. return CSS::AlignItems::Normal;
  1102. case CSS::AlignSelf::SelfStart:
  1103. return CSS::AlignItems::SelfStart;
  1104. case CSS::AlignSelf::SelfEnd:
  1105. return CSS::AlignItems::SelfEnd;
  1106. case CSS::AlignSelf::FlexStart:
  1107. return CSS::AlignItems::FlexStart;
  1108. case CSS::AlignSelf::FlexEnd:
  1109. return CSS::AlignItems::FlexEnd;
  1110. case CSS::AlignSelf::Center:
  1111. return CSS::AlignItems::Center;
  1112. case CSS::AlignSelf::Baseline:
  1113. return CSS::AlignItems::Baseline;
  1114. case CSS::AlignSelf::Stretch:
  1115. return CSS::AlignItems::Stretch;
  1116. case CSS::AlignSelf::Safe:
  1117. return CSS::AlignItems::Safe;
  1118. case CSS::AlignSelf::Unsafe:
  1119. return CSS::AlignItems::Unsafe;
  1120. default:
  1121. VERIFY_NOT_REACHED();
  1122. }
  1123. }
  1124. void FlexFormattingContext::align_all_flex_items_along_the_cross_axis()
  1125. {
  1126. // FIXME: Take better care of margins
  1127. for (auto& flex_line : m_flex_lines) {
  1128. for (auto* flex_item : flex_line.items) {
  1129. float half_line_size = flex_line.cross_size / 2.0f;
  1130. switch (alignment_for_item(*flex_item)) {
  1131. case CSS::AlignItems::Baseline:
  1132. // FIXME: Implement this
  1133. // Fallthrough
  1134. case CSS::AlignItems::FlexStart:
  1135. case CSS::AlignItems::Stretch:
  1136. flex_item->cross_offset = 0 - half_line_size + flex_item->margins.cross_before + flex_item->borders.cross_before + flex_item->padding.cross_before;
  1137. break;
  1138. case CSS::AlignItems::FlexEnd:
  1139. flex_item->cross_offset = half_line_size - flex_item->cross_size - flex_item->margins.cross_after - flex_item->borders.cross_after - flex_item->padding.cross_after;
  1140. break;
  1141. case CSS::AlignItems::Center:
  1142. flex_item->cross_offset = 0 - (flex_item->cross_size / 2.0f);
  1143. break;
  1144. default:
  1145. break;
  1146. }
  1147. }
  1148. }
  1149. }
  1150. // https://www.w3.org/TR/css-flexbox-1/#algo-cross-container
  1151. void FlexFormattingContext::determine_flex_container_used_cross_size(float const cross_min_size, float const cross_max_size)
  1152. {
  1153. float cross_size = 0;
  1154. if (has_definite_cross_size(flex_container())) {
  1155. // Flex container has definite cross size: easy-peasy.
  1156. cross_size = specified_cross_size(flex_container());
  1157. } else {
  1158. // Flex container has indefinite cross size.
  1159. auto cross_size_value = is_row_layout() ? flex_container().computed_values().height() : flex_container().computed_values().width();
  1160. if (cross_size_value.is_auto() || cross_size_value.is_percentage()) {
  1161. // If a content-based cross size is needed, use the sum of the flex lines' cross sizes.
  1162. float sum_of_flex_lines_cross_sizes = 0;
  1163. for (auto& flex_line : m_flex_lines) {
  1164. sum_of_flex_lines_cross_sizes += flex_line.cross_size;
  1165. }
  1166. cross_size = sum_of_flex_lines_cross_sizes;
  1167. if (cross_size_value.is_percentage()) {
  1168. // FIXME: Handle percentage values here! Right now we're just treating them as "auto"
  1169. }
  1170. } else {
  1171. // Otherwise, resolve the indefinite size at this point.
  1172. cross_size = cross_size_value.resolved(flex_container(), CSS::Length::make_px(specified_cross_size(*flex_container().containing_block()))).to_px(flex_container());
  1173. }
  1174. }
  1175. set_cross_size(flex_container(), css_clamp(cross_size, cross_min_size, cross_max_size));
  1176. }
  1177. // https://www.w3.org/TR/css-flexbox-1/#algo-line-align
  1178. void FlexFormattingContext::align_all_flex_lines()
  1179. {
  1180. // FIXME: Support reverse
  1181. float cross_size_of_flex_container = specified_cross_size(flex_container());
  1182. if (is_single_line()) {
  1183. // For single-line flex containers, we only need to center the line along the cross axis.
  1184. auto& flex_line = m_flex_lines[0];
  1185. float center_of_line = cross_size_of_flex_container / 2.0f;
  1186. for (auto* flex_item : flex_line.items) {
  1187. flex_item->cross_offset += center_of_line;
  1188. }
  1189. } else {
  1190. // FIXME: Support align-content
  1191. float cross_size_per_flex_line = cross_size_of_flex_container / m_flex_lines.size();
  1192. float half_a_flex_line = cross_size_per_flex_line / 2.0f;
  1193. float center_of_current_line = 0 + half_a_flex_line;
  1194. for (auto& flex_line : m_flex_lines) {
  1195. for (auto* flex_item : flex_line.items) {
  1196. flex_item->cross_offset += center_of_current_line;
  1197. }
  1198. center_of_current_line += cross_size_per_flex_line;
  1199. }
  1200. }
  1201. }
  1202. void FlexFormattingContext::copy_dimensions_from_flex_items_to_boxes()
  1203. {
  1204. for (auto& flex_item : m_flex_items) {
  1205. auto const& box = flex_item.box;
  1206. auto& box_state = m_state.get_mutable(box);
  1207. box_state.padding_left = box.computed_values().padding().left.resolved(box, CSS::Length::make_px(m_flex_container_state.content_width())).to_px(box);
  1208. box_state.padding_right = box.computed_values().padding().right.resolved(box, CSS::Length::make_px(m_flex_container_state.content_width())).to_px(box);
  1209. box_state.padding_top = box.computed_values().padding().top.resolved(box, CSS::Length::make_px(m_flex_container_state.content_width())).to_px(box);
  1210. box_state.padding_bottom = box.computed_values().padding().bottom.resolved(box, CSS::Length::make_px(m_flex_container_state.content_width())).to_px(box);
  1211. box_state.margin_left = box.computed_values().margin().left.resolved(box, CSS::Length::make_px(m_flex_container_state.content_width())).to_px(box);
  1212. box_state.margin_right = box.computed_values().margin().right.resolved(box, CSS::Length::make_px(m_flex_container_state.content_width())).to_px(box);
  1213. box_state.margin_top = box.computed_values().margin().top.resolved(box, CSS::Length::make_px(m_flex_container_state.content_width())).to_px(box);
  1214. box_state.margin_bottom = box.computed_values().margin().bottom.resolved(box, CSS::Length::make_px(m_flex_container_state.content_width())).to_px(box);
  1215. box_state.border_left = box.computed_values().border_left().width;
  1216. box_state.border_right = box.computed_values().border_right().width;
  1217. box_state.border_top = box.computed_values().border_top().width;
  1218. box_state.border_bottom = box.computed_values().border_bottom().width;
  1219. set_main_size(box, flex_item.main_size);
  1220. set_cross_size(box, flex_item.cross_size);
  1221. set_offset(box, flex_item.main_offset, flex_item.cross_offset);
  1222. }
  1223. }
  1224. // https://drafts.csswg.org/css-flexbox-1/#intrinsic-sizes
  1225. void FlexFormattingContext::determine_intrinsic_size_of_flex_container(LayoutMode layout_mode)
  1226. {
  1227. VERIFY(layout_mode != LayoutMode::Normal);
  1228. float main_size = calculate_intrinsic_main_size_of_flex_container(layout_mode);
  1229. float cross_size = calculate_intrinsic_cross_size_of_flex_container(layout_mode);
  1230. if (is_row_layout()) {
  1231. m_flex_container_state.set_content_width(main_size);
  1232. m_flex_container_state.set_content_height(cross_size);
  1233. } else {
  1234. m_flex_container_state.set_content_height(main_size);
  1235. m_flex_container_state.set_content_width(cross_size);
  1236. }
  1237. }
  1238. // https://drafts.csswg.org/css-flexbox-1/#intrinsic-main-sizes
  1239. float FlexFormattingContext::calculate_intrinsic_main_size_of_flex_container(LayoutMode layout_mode)
  1240. {
  1241. VERIFY(layout_mode != LayoutMode::Normal);
  1242. // The min-content main size of a single-line flex container is calculated identically to the max-content main size,
  1243. // except that the flex items’ min-content contributions are used instead of their max-content contributions.
  1244. // However, for a multi-line container, it is simply the largest min-content contribution of all the non-collapsed flex items in the flex container.
  1245. if (!is_single_line() && flex_container_main_constraint() == SizeConstraint::MinContent) {
  1246. float largest_contribution = 0;
  1247. for (auto const& flex_item : m_flex_items) {
  1248. // FIXME: Skip collapsed flex items.
  1249. largest_contribution = max(largest_contribution, calculate_main_min_content_contribution(flex_item));
  1250. }
  1251. return largest_contribution;
  1252. }
  1253. // The max-content main size of a flex container is, fundamentally, the smallest size the flex container
  1254. // can take such that when flex layout is run with that container size, each flex item ends up at least
  1255. // as large as its max-content contribution, to the extent allowed by the items’ flexibility.
  1256. // It is calculated, considering only non-collapsed flex items, by:
  1257. // 1. For each flex item, subtract its outer flex base size from its max-content contribution size.
  1258. // If that result is positive, divide it by the item’s flex grow factor if the flex grow factor is ≥ 1,
  1259. // or multiply it by the flex grow factor if the flex grow factor is < 1; if the result is negative,
  1260. // divide it by the item’s scaled flex shrink factor (if dividing by zero, treat the result as negative infinity).
  1261. // This is the item’s desired flex fraction.
  1262. for (auto& flex_item : m_flex_items) {
  1263. float contribution;
  1264. if (m_flex_container_state.width_constraint == SizeConstraint::MinContent || m_flex_container_state.height_constraint == SizeConstraint::MinContent)
  1265. contribution = calculate_main_min_content_contribution(flex_item);
  1266. else
  1267. contribution = calculate_main_max_content_contribution(flex_item);
  1268. float outer_flex_base_size = flex_item.flex_base_size + flex_item.margins.main_before + flex_item.margins.main_after + flex_item.borders.main_before + flex_item.borders.main_after + flex_item.padding.main_before + flex_item.padding.main_after;
  1269. float result = contribution - outer_flex_base_size;
  1270. if (result > 0) {
  1271. if (flex_item.box.computed_values().flex_grow() >= 1) {
  1272. result /= flex_item.box.computed_values().flex_grow();
  1273. } else {
  1274. result *= flex_item.box.computed_values().flex_grow();
  1275. }
  1276. } else if (result < 0) {
  1277. if (flex_item.scaled_flex_shrink_factor == 0)
  1278. result = -INFINITY;
  1279. else
  1280. result /= flex_item.scaled_flex_shrink_factor;
  1281. }
  1282. flex_item.desired_flex_fraction = result;
  1283. }
  1284. // 2. Place all flex items into lines of infinite length.
  1285. m_flex_lines.clear();
  1286. if (!m_flex_items.is_empty())
  1287. m_flex_lines.append(FlexLine {});
  1288. for (auto& flex_item : m_flex_items) {
  1289. // FIXME: Honor breaking requests.
  1290. m_flex_lines.last().items.append(&flex_item);
  1291. }
  1292. // Within each line, find the greatest (most positive) desired flex fraction among all the flex items.
  1293. // This is the line’s chosen flex fraction.
  1294. for (auto& flex_line : m_flex_lines) {
  1295. float greatest_desired_flex_fraction = 0;
  1296. float sum_of_flex_grow_factors = 0;
  1297. float sum_of_flex_shrink_factors = 0;
  1298. for (auto& flex_item : flex_line.items) {
  1299. greatest_desired_flex_fraction = max(greatest_desired_flex_fraction, flex_item->desired_flex_fraction);
  1300. sum_of_flex_grow_factors += flex_item->box.computed_values().flex_grow();
  1301. sum_of_flex_shrink_factors += flex_item->box.computed_values().flex_shrink();
  1302. }
  1303. float chosen_flex_fraction = greatest_desired_flex_fraction;
  1304. // 3. If the chosen flex fraction is positive, and the sum of the line’s flex grow factors is less than 1,
  1305. // divide the chosen flex fraction by that sum.
  1306. if (chosen_flex_fraction > 0 && sum_of_flex_grow_factors < 1)
  1307. chosen_flex_fraction /= sum_of_flex_grow_factors;
  1308. // If the chosen flex fraction is negative, and the sum of the line’s flex shrink factors is less than 1,
  1309. // multiply the chosen flex fraction by that sum.
  1310. if (chosen_flex_fraction < 0 && sum_of_flex_shrink_factors < 1)
  1311. chosen_flex_fraction *= sum_of_flex_shrink_factors;
  1312. flex_line.chosen_flex_fraction = chosen_flex_fraction;
  1313. }
  1314. auto determine_main_size = [&](bool resolve_percentage_min_max_sizes) -> float {
  1315. float largest_sum = 0;
  1316. for (auto& flex_line : m_flex_lines) {
  1317. // 4. Add each item’s flex base size to the product of its flex grow factor (scaled flex shrink factor, if shrinking)
  1318. // and the chosen flex fraction, then clamp that result by the max main size floored by the min main size.
  1319. float sum = 0;
  1320. for (auto& flex_item : flex_line.items) {
  1321. float product = 0;
  1322. if (flex_item->desired_flex_fraction > 0)
  1323. product = flex_line.chosen_flex_fraction * flex_item->box.computed_values().flex_grow();
  1324. else if (flex_item->desired_flex_fraction < 0)
  1325. product = flex_line.chosen_flex_fraction * flex_item->scaled_flex_shrink_factor;
  1326. auto result = flex_item->flex_base_size + product;
  1327. auto const& computed_min_size = this->computed_main_min_size(flex_item->box);
  1328. auto const& computed_max_size = this->computed_main_max_size(flex_item->box);
  1329. auto clamp_min = (!computed_min_size.is_auto() && (resolve_percentage_min_max_sizes || !computed_min_size.is_percentage())) ? specified_main_min_size(flex_item->box) : automatic_minimum_size(*flex_item);
  1330. auto clamp_max = (!computed_max_size.is_auto() && (resolve_percentage_min_max_sizes || !computed_max_size.is_percentage())) ? specified_main_max_size(flex_item->box) : NumericLimits<float>::max();
  1331. result = css_clamp(result, clamp_min, clamp_max);
  1332. // NOTE: The spec doesn't mention anything about the *outer* size here, but if we don't add the margin box,
  1333. // flex items with non-zero padding/border/margin in the main axis end up overflowing the container.
  1334. result = flex_item->add_main_margin_box_sizes(result);
  1335. sum += result;
  1336. }
  1337. largest_sum = max(largest_sum, sum);
  1338. }
  1339. // 5. The flex container’s max-content size is the largest sum (among all the lines) of the afore-calculated sizes of all items within a single line.
  1340. return largest_sum;
  1341. };
  1342. auto first_pass_main_size = determine_main_size(false);
  1343. set_main_size(flex_container(), first_pass_main_size);
  1344. auto second_pass_main_size = determine_main_size(true);
  1345. return second_pass_main_size;
  1346. }
  1347. // https://drafts.csswg.org/css-flexbox-1/#intrinsic-cross-sizes
  1348. float FlexFormattingContext::calculate_intrinsic_cross_size_of_flex_container(LayoutMode layout_mode)
  1349. {
  1350. VERIFY(layout_mode != LayoutMode::Normal);
  1351. // The min-content/max-content cross size of a single-line flex container
  1352. // is the largest min-content contribution/max-content contribution (respectively) of its flex items.
  1353. if (is_single_line()) {
  1354. auto calculate_largest_contribution = [&](bool resolve_percentage_min_max_sizes) {
  1355. float largest_contribution = 0;
  1356. for (auto& flex_item : m_flex_items) {
  1357. float contribution;
  1358. if (m_flex_container_state.width_constraint == SizeConstraint::MinContent || m_flex_container_state.height_constraint == SizeConstraint::MinContent)
  1359. contribution = calculate_cross_min_content_contribution(flex_item, resolve_percentage_min_max_sizes);
  1360. else if (m_flex_container_state.width_constraint == SizeConstraint::MaxContent || m_flex_container_state.height_constraint == SizeConstraint::MaxContent)
  1361. contribution = calculate_cross_max_content_contribution(flex_item, resolve_percentage_min_max_sizes);
  1362. largest_contribution = max(largest_contribution, contribution);
  1363. }
  1364. return largest_contribution;
  1365. };
  1366. auto first_pass_largest_contribution = calculate_largest_contribution(false);
  1367. set_cross_size(flex_container(), first_pass_largest_contribution);
  1368. auto second_pass_largest_contribution = calculate_largest_contribution(true);
  1369. return second_pass_largest_contribution;
  1370. }
  1371. // For a multi-line flex container, the min-content/max-content cross size is the sum of the flex line cross sizes
  1372. // resulting from sizing the flex container under a cross-axis min-content constraint/max-content constraint (respectively).
  1373. // FIXME: However, if the flex container is flex-flow: column wrap;, then it’s sized by first finding the largest
  1374. // min-content/max-content cross-size contribution among the flex items (respectively), then using that size
  1375. // as the available space in the cross axis for each of the flex items during layout.
  1376. float sum_of_flex_line_cross_sizes = 0;
  1377. for (auto& flex_line : m_flex_lines) {
  1378. sum_of_flex_line_cross_sizes += flex_line.cross_size;
  1379. }
  1380. return sum_of_flex_line_cross_sizes;
  1381. }
  1382. // https://drafts.csswg.org/css-flexbox-1/#intrinsic-item-contributions
  1383. float FlexFormattingContext::calculate_main_min_content_contribution(FlexItem const& item) const
  1384. {
  1385. // The main-size min-content contribution of a flex item is
  1386. // the larger of its outer min-content size and outer preferred size if that is not auto,
  1387. // clamped by its min/max main size.
  1388. auto larger_size = [&] {
  1389. auto inner_min_content_size = calculate_min_content_main_size(item);
  1390. if (computed_main_size(item.box).is_auto())
  1391. return inner_min_content_size;
  1392. auto inner_preferred_size = is_row_layout() ? get_pixel_width(item.box, computed_main_size(item.box)) : get_pixel_height(item.box, computed_main_size(item.box));
  1393. return max(inner_min_content_size, inner_preferred_size);
  1394. }();
  1395. auto clamp_min = has_main_min_size(item.box) ? specified_main_min_size(item.box) : automatic_minimum_size(item);
  1396. auto clamp_max = has_main_max_size(item.box) ? specified_main_max_size(item.box) : NumericLimits<float>::max();
  1397. auto clamped_inner_size = css_clamp(larger_size, clamp_min, clamp_max);
  1398. return item.add_main_margin_box_sizes(clamped_inner_size);
  1399. }
  1400. // https://drafts.csswg.org/css-flexbox-1/#intrinsic-item-contributions
  1401. float FlexFormattingContext::calculate_main_max_content_contribution(FlexItem const& item) const
  1402. {
  1403. // The main-size max-content contribution of a flex item is
  1404. // the larger of its outer max-content size and outer preferred size if that is not auto,
  1405. // clamped by its min/max main size.
  1406. auto larger_size = [&] {
  1407. auto inner_max_content_size = calculate_max_content_main_size(item);
  1408. if (computed_main_size(item.box).is_auto())
  1409. return inner_max_content_size;
  1410. auto inner_preferred_size = is_row_layout() ? get_pixel_width(item.box, computed_main_size(item.box)) : get_pixel_height(item.box, computed_main_size(item.box));
  1411. return max(inner_max_content_size, inner_preferred_size);
  1412. }();
  1413. auto clamp_min = has_main_min_size(item.box) ? specified_main_min_size(item.box) : automatic_minimum_size(item);
  1414. auto clamp_max = has_main_max_size(item.box) ? specified_main_max_size(item.box) : NumericLimits<float>::max();
  1415. auto clamped_inner_size = css_clamp(larger_size, clamp_min, clamp_max);
  1416. return item.add_main_margin_box_sizes(clamped_inner_size);
  1417. }
  1418. float FlexFormattingContext::calculate_cross_min_content_contribution(FlexItem const& item, bool resolve_percentage_min_max_sizes) const
  1419. {
  1420. auto larger_size = [&] {
  1421. auto inner_min_content_size = calculate_min_content_cross_size(item);
  1422. if (computed_cross_size(item.box).is_auto())
  1423. return inner_min_content_size;
  1424. auto inner_preferred_size = !is_row_layout() ? get_pixel_width(item.box, computed_cross_size(item.box)) : get_pixel_height(item.box, computed_cross_size(item.box));
  1425. return max(inner_min_content_size, inner_preferred_size);
  1426. }();
  1427. auto const& computed_min_size = this->computed_cross_min_size(item.box);
  1428. auto const& computed_max_size = this->computed_cross_max_size(item.box);
  1429. auto clamp_min = (!computed_min_size.is_auto() && (resolve_percentage_min_max_sizes || !computed_min_size.is_percentage())) ? specified_cross_min_size(item.box) : 0;
  1430. auto clamp_max = (!computed_max_size.is_auto() && (resolve_percentage_min_max_sizes || !computed_max_size.is_percentage())) ? specified_cross_max_size(item.box) : NumericLimits<float>::max();
  1431. auto clamped_inner_size = css_clamp(larger_size, clamp_min, clamp_max);
  1432. return item.add_cross_margin_box_sizes(clamped_inner_size);
  1433. }
  1434. float FlexFormattingContext::calculate_cross_max_content_contribution(FlexItem const& item, bool resolve_percentage_min_max_sizes) const
  1435. {
  1436. auto larger_size = [&] {
  1437. auto inner_max_content_size = calculate_max_content_cross_size(item);
  1438. if (computed_cross_size(item.box).is_auto())
  1439. return inner_max_content_size;
  1440. auto inner_preferred_size = !is_row_layout() ? get_pixel_width(item.box, computed_cross_size(item.box)) : get_pixel_height(item.box, computed_cross_size(item.box));
  1441. return max(inner_max_content_size, inner_preferred_size);
  1442. }();
  1443. auto const& computed_min_size = this->computed_cross_min_size(item.box);
  1444. auto const& computed_max_size = this->computed_cross_max_size(item.box);
  1445. auto clamp_min = (!computed_min_size.is_auto() && (resolve_percentage_min_max_sizes || !computed_min_size.is_percentage())) ? specified_cross_min_size(item.box) : 0;
  1446. auto clamp_max = (!computed_max_size.is_auto() && (resolve_percentage_min_max_sizes || !computed_max_size.is_percentage())) ? specified_cross_max_size(item.box) : NumericLimits<float>::max();
  1447. auto clamped_inner_size = css_clamp(larger_size, clamp_min, clamp_max);
  1448. return item.add_cross_margin_box_sizes(clamped_inner_size);
  1449. }
  1450. float FlexFormattingContext::calculate_min_content_main_size(FlexItem const& item) const
  1451. {
  1452. return is_row_layout() ? calculate_min_content_width(item.box) : calculate_min_content_height(item.box);
  1453. }
  1454. float FlexFormattingContext::calculate_fit_content_main_size(FlexItem const& item) const
  1455. {
  1456. return is_row_layout() ? calculate_fit_content_width(item.box, m_state.get(item.box).width_constraint, m_available_space->main)
  1457. : calculate_fit_content_height(item.box, m_state.get(item.box).height_constraint, m_available_space->main);
  1458. }
  1459. float FlexFormattingContext::calculate_fit_content_cross_size(FlexItem const& item) const
  1460. {
  1461. return !is_row_layout() ? calculate_fit_content_width(item.box, m_state.get(item.box).width_constraint, m_available_space->cross)
  1462. : calculate_fit_content_height(item.box, m_state.get(item.box).height_constraint, m_available_space->cross);
  1463. }
  1464. float FlexFormattingContext::calculate_max_content_main_size(FlexItem const& item) const
  1465. {
  1466. return is_row_layout() ? calculate_max_content_width(item.box) : calculate_max_content_height(item.box);
  1467. }
  1468. float FlexFormattingContext::calculate_min_content_cross_size(FlexItem const& item) const
  1469. {
  1470. return is_row_layout() ? calculate_min_content_height(item.box) : calculate_min_content_width(item.box);
  1471. }
  1472. float FlexFormattingContext::calculate_max_content_cross_size(FlexItem const& item) const
  1473. {
  1474. return is_row_layout() ? calculate_max_content_height(item.box) : calculate_max_content_width(item.box);
  1475. }
  1476. SizeConstraint FlexFormattingContext::flex_container_main_constraint() const
  1477. {
  1478. return is_row_layout() ? m_flex_container_state.width_constraint : m_flex_container_state.height_constraint;
  1479. }
  1480. SizeConstraint FlexFormattingContext::flex_container_cross_constraint() const
  1481. {
  1482. return is_row_layout() ? m_flex_container_state.height_constraint : m_flex_container_state.width_constraint;
  1483. }
  1484. // https://drafts.csswg.org/css-flexbox-1/#stretched
  1485. bool FlexFormattingContext::flex_item_is_stretched(FlexItem const& item) const
  1486. {
  1487. auto alignment = alignment_for_item(item);
  1488. if (alignment != CSS::AlignItems::Stretch)
  1489. return false;
  1490. // If the cross size property of the flex item computes to auto, and neither of the cross-axis margins are auto, the flex item is stretched.
  1491. auto const& computed_cross_size = is_row_layout() ? item.box.computed_values().height() : item.box.computed_values().width();
  1492. return computed_cross_size.is_auto() && !item.margins.cross_before_is_auto && !item.margins.cross_after_is_auto;
  1493. }
  1494. CSS::LengthPercentage const& FlexFormattingContext::computed_main_size(Box const& box) const
  1495. {
  1496. return is_row_layout() ? box.computed_values().width() : box.computed_values().height();
  1497. }
  1498. CSS::LengthPercentage const& FlexFormattingContext::computed_main_min_size(Box const& box) const
  1499. {
  1500. return is_row_layout() ? box.computed_values().min_width() : box.computed_values().min_height();
  1501. }
  1502. CSS::LengthPercentage const& FlexFormattingContext::computed_main_max_size(Box const& box) const
  1503. {
  1504. return is_row_layout() ? box.computed_values().max_width() : box.computed_values().max_height();
  1505. }
  1506. CSS::LengthPercentage const& FlexFormattingContext::computed_cross_size(Box const& box) const
  1507. {
  1508. return !is_row_layout() ? box.computed_values().width() : box.computed_values().height();
  1509. }
  1510. CSS::LengthPercentage const& FlexFormattingContext::computed_cross_min_size(Box const& box) const
  1511. {
  1512. return !is_row_layout() ? box.computed_values().min_width() : box.computed_values().min_height();
  1513. }
  1514. CSS::LengthPercentage const& FlexFormattingContext::computed_cross_max_size(Box const& box) const
  1515. {
  1516. return !is_row_layout() ? box.computed_values().max_width() : box.computed_values().max_height();
  1517. }
  1518. }