FlexFormattingContext.cpp 102 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697989910010110210310410510610710810911011111211311411511611711811912012112212312412512612712812913013113213313413513613713813914014114214314414514614714814915015115215315415515615715815916016116216316416516616716816917017117217317417517617717817918018118218318418518618718818919019119219319419519619719819920020120220320420520620720820921021121221321421521621721821922022122222322422522622722822923023123223323423523623723823924024124224324424524624724824925025125225325425525625725825926026126226326426526626726826927027127227327427527627727827928028128228328428528628728828929029129229329429529629729829930030130230330430530630730830931031131231331431531631731831932032132232332432532632732832933033133233333433533633733833934034134234334434534634734834935035135235335435535635735835936036136236336436536636736836937037137237337437537637737837938038138238338438538638738838939039139239339439539639739839940040140240340440540640740840941041141241341441541641741841942042142242342442542642742842943043143243343443543643743843944044144244344444544644744844945045145245345445545645745845946046146246346446546646746846947047147247347447547647747847948048148248348448548648748848949049149249349449549649749849950050150250350450550650750850951051151251351451551651751851952052152252352452552652752852953053153253353453553653753853954054154254354454554654754854955055155255355455555655755855956056156256356456556656756856957057157257357457557657757857958058158258358458558658758858959059159259359459559659759859960060160260360460560660760860961061161261361461561661761861962062162262362462562662762862963063163263363463563663763863964064164264364464564664764864965065165265365465565665765865966066166266366466566666766866967067167267367467567667767867968068168268368468568668768868969069169269369469569669769869970070170270370470570670770870971071171271371471571671771871972072172272372472572672772872973073173273373473573673773873974074174274374474574674774874975075175275375475575675775875976076176276376476576676776876977077177277377477577677777877978078178278378478578678778878979079179279379479579679779879980080180280380480580680780880981081181281381481581681781881982082182282382482582682782882983083183283383483583683783883984084184284384484584684784884985085185285385485585685785885986086186286386486586686786886987087187287387487587687787887988088188288388488588688788888989089189289389489589689789889990090190290390490590690790890991091191291391491591691791891992092192292392492592692792892993093193293393493593693793893994094194294394494594694794894995095195295395495595695795895996096196296396496596696796896997097197297397497597697797897998098198298398498598698798898999099199299399499599699799899910001001100210031004100510061007100810091010101110121013101410151016101710181019102010211022102310241025102610271028102910301031103210331034103510361037103810391040104110421043104410451046104710481049105010511052105310541055105610571058105910601061106210631064106510661067106810691070107110721073107410751076107710781079108010811082108310841085108610871088108910901091109210931094109510961097109810991100110111021103110411051106110711081109111011111112111311141115111611171118111911201121112211231124112511261127112811291130113111321133113411351136113711381139114011411142114311441145114611471148114911501151115211531154115511561157115811591160116111621163116411651166116711681169117011711172117311741175117611771178117911801181118211831184118511861187118811891190119111921193119411951196119711981199120012011202120312041205120612071208120912101211121212131214121512161217121812191220122112221223122412251226122712281229123012311232123312341235123612371238123912401241124212431244124512461247124812491250125112521253125412551256125712581259126012611262126312641265126612671268126912701271127212731274127512761277127812791280128112821283128412851286128712881289129012911292129312941295129612971298129913001301130213031304130513061307130813091310131113121313131413151316131713181319132013211322132313241325132613271328132913301331133213331334133513361337133813391340134113421343134413451346134713481349135013511352135313541355135613571358135913601361136213631364136513661367136813691370137113721373137413751376137713781379138013811382138313841385138613871388138913901391139213931394139513961397139813991400140114021403140414051406140714081409141014111412141314141415141614171418141914201421142214231424142514261427142814291430143114321433143414351436143714381439144014411442144314441445144614471448144914501451145214531454145514561457145814591460146114621463146414651466146714681469147014711472147314741475147614771478147914801481148214831484148514861487148814891490149114921493149414951496149714981499150015011502150315041505150615071508150915101511151215131514151515161517151815191520152115221523152415251526152715281529153015311532153315341535153615371538153915401541154215431544154515461547154815491550155115521553155415551556155715581559156015611562156315641565156615671568156915701571157215731574157515761577157815791580158115821583158415851586158715881589159015911592159315941595159615971598159916001601160216031604160516061607160816091610161116121613161416151616161716181619162016211622162316241625162616271628162916301631163216331634163516361637163816391640164116421643164416451646164716481649165016511652165316541655165616571658165916601661166216631664166516661667166816691670167116721673167416751676167716781679168016811682168316841685168616871688168916901691169216931694169516961697169816991700170117021703170417051706170717081709171017111712171317141715171617171718171917201721172217231724172517261727172817291730173117321733173417351736173717381739174017411742174317441745174617471748174917501751175217531754175517561757175817591760176117621763176417651766176717681769177017711772177317741775177617771778177917801781178217831784178517861787178817891790179117921793179417951796179717981799180018011802180318041805180618071808180918101811181218131814181518161817181818191820182118221823182418251826182718281829183018311832183318341835183618371838183918401841184218431844184518461847184818491850185118521853185418551856185718581859186018611862186318641865186618671868186918701871187218731874187518761877187818791880188118821883188418851886188718881889189018911892189318941895189618971898189919001901190219031904190519061907190819091910191119121913191419151916191719181919192019211922192319241925192619271928192919301931193219331934193519361937193819391940194119421943194419451946194719481949195019511952195319541955195619571958195919601961196219631964196519661967196819691970197119721973197419751976197719781979198019811982198319841985198619871988198919901991199219931994199519961997199819992000200120022003200420052006200720082009201020112012201320142015201620172018201920202021202220232024202520262027202820292030203120322033203420352036203720382039204020412042204320442045204620472048204920502051205220532054205520562057205820592060206120622063206420652066206720682069207020712072207320742075207620772078207920802081208220832084208520862087208820892090209120922093
  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. // FIXME: This is a hack helper, remove it when no longer needed.
  27. static CSS::Size to_css_size(CSS::LengthPercentage const& length_percentage)
  28. {
  29. if (length_percentage.is_auto())
  30. return CSS::Size::make_auto();
  31. if (length_percentage.is_length())
  32. return CSS::Size::make_length(length_percentage.length());
  33. return CSS::Size::make_percentage(length_percentage.percentage());
  34. }
  35. CSSPixels FlexFormattingContext::get_pixel_width(Box const& box, Optional<CSS::Size> const& size) const
  36. {
  37. if (!size.has_value())
  38. return 0;
  39. auto inner_width = CSS::Length::make_px(containing_block_width_for(box));
  40. auto border_left = box.computed_values().border_left().width;
  41. auto border_right = box.computed_values().border_right().width;
  42. auto padding_left = box.computed_values().padding().left().resolved(box, inner_width).to_px(box);
  43. auto padding_right = box.computed_values().padding().right().resolved(box, inner_width).to_px(box);
  44. if (box.computed_values().box_sizing() == CSS::BoxSizing::BorderBox) {
  45. return size->resolved(box, inner_width).to_px(box) - border_left - border_right - padding_left - padding_right;
  46. }
  47. return size->resolved(box, inner_width).to_px(box);
  48. }
  49. CSSPixels FlexFormattingContext::get_pixel_height(Box const& box, Optional<CSS::Size> const& length_percentage) const
  50. {
  51. if (!length_percentage.has_value())
  52. return 0;
  53. auto inner_height = CSS::Length::make_px(containing_block_height_for(box));
  54. auto border_top = box.computed_values().border_top().width;
  55. auto border_bottom = box.computed_values().border_bottom().width;
  56. auto padding_top = box.computed_values().padding().top().resolved(box, inner_height).to_px(box);
  57. auto padding_bottom = box.computed_values().padding().bottom().resolved(box, inner_height).to_px(box);
  58. if (box.computed_values().box_sizing() == CSS::BoxSizing::BorderBox) {
  59. return length_percentage->resolved(box, inner_height).to_px(box) - border_top - border_bottom - padding_top - padding_bottom;
  60. }
  61. return length_percentage->resolved(box, inner_height).to_px(box);
  62. }
  63. FlexFormattingContext::FlexFormattingContext(LayoutState& state, Box const& flex_container, FormattingContext* parent)
  64. : FormattingContext(Type::Flex, state, flex_container, parent)
  65. , m_flex_container_state(m_state.get_mutable(flex_container))
  66. , m_flex_direction(flex_container.computed_values().flex_direction())
  67. {
  68. }
  69. FlexFormattingContext::~FlexFormattingContext() = default;
  70. CSSPixels FlexFormattingContext::automatic_content_height() const
  71. {
  72. return m_state.get(flex_container()).content_height();
  73. }
  74. void FlexFormattingContext::run(Box const& run_box, LayoutMode, AvailableSpace const& available_content_space)
  75. {
  76. VERIFY(&run_box == &flex_container());
  77. // NOTE: The available space provided by the parent context is basically our *content box*.
  78. // FFC is currently written in a way that expects that to include padding and border as well,
  79. // so we pad out the available space here to accommodate that.
  80. // FIXME: Refactor the necessary parts of FFC so we don't need this hack!
  81. auto available_width = available_content_space.width;
  82. if (available_width.is_definite())
  83. available_width = AvailableSize::make_definite(available_width.to_px() + m_flex_container_state.border_box_left() + m_flex_container_state.border_box_right());
  84. auto available_height = available_content_space.height;
  85. if (available_height.is_definite())
  86. available_height = AvailableSize::make_definite(available_height.to_px() + m_flex_container_state.border_box_top() + m_flex_container_state.border_box_bottom());
  87. m_available_space_for_flex_container = AxisAgnosticAvailableSpace {
  88. .main = is_row_layout() ? available_width : available_height,
  89. .cross = !is_row_layout() ? available_width : available_height,
  90. .space = { available_width, available_height },
  91. };
  92. // This implements https://www.w3.org/TR/css-flexbox-1/#layout-algorithm
  93. // 1. Generate anonymous flex items
  94. generate_anonymous_flex_items();
  95. // 2. Determine the available main and cross space for the flex items
  96. determine_available_space_for_items(AvailableSpace(available_width, available_height));
  97. {
  98. // https://drafts.csswg.org/css-flexbox-1/#definite-sizes
  99. // 3. If a single-line flex container has a definite cross size,
  100. // the automatic preferred outer cross size of any stretched flex items is the flex container’s inner cross size
  101. // (clamped to the flex item’s min and max cross size) and is considered definite.
  102. if (is_single_line() && has_definite_cross_size(flex_container())) {
  103. auto flex_container_inner_cross_size = specified_cross_size(flex_container());
  104. for (auto& item : m_flex_items) {
  105. if (!flex_item_is_stretched(item))
  106. continue;
  107. auto item_min_cross_size = has_cross_min_size(item.box) ? specified_cross_min_size(item.box) : automatic_minimum_size(item);
  108. auto item_max_cross_size = has_cross_max_size(item.box) ? specified_cross_max_size(item.box) : INFINITY;
  109. auto item_preferred_outer_cross_size = css_clamp(flex_container_inner_cross_size, item_min_cross_size, item_max_cross_size);
  110. 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;
  111. set_cross_size(item.box, item_inner_cross_size);
  112. }
  113. }
  114. }
  115. // 3. Determine the flex base size and hypothetical main size of each item
  116. for (auto& flex_item : m_flex_items) {
  117. if (flex_item.box.is_replaced_box()) {
  118. // FIXME: Get rid of prepare_for_replaced_layout() and make replaced elements figure out their intrinsic size lazily.
  119. static_cast<ReplacedBox&>(flex_item.box).prepare_for_replaced_layout();
  120. }
  121. determine_flex_base_size_and_hypothetical_main_size(flex_item);
  122. }
  123. if (available_width.is_intrinsic_sizing_constraint() || available_height.is_intrinsic_sizing_constraint()) {
  124. // We're computing intrinsic size for the flex container. This happens at the end of run().
  125. } else {
  126. // 4. Determine the main size of the flex container
  127. determine_main_size_of_flex_container();
  128. }
  129. // 5. Collect flex items into flex lines:
  130. // After this step no additional items are to be added to flex_lines or any of its items!
  131. collect_flex_items_into_flex_lines();
  132. // 6. Resolve the flexible lengths
  133. resolve_flexible_lengths();
  134. // Cross Size Determination
  135. // 7. Determine the hypothetical cross size of each item
  136. for (auto& flex_item : m_flex_items) {
  137. determine_hypothetical_cross_size_of_item(flex_item, false);
  138. }
  139. // 8. Calculate the cross size of each flex line.
  140. calculate_cross_size_of_each_flex_line();
  141. // 9. Handle 'align-content: stretch'.
  142. handle_align_content_stretch();
  143. // 10. Collapse visibility:collapse items.
  144. // FIXME: This
  145. // 11. Determine the used cross size of each flex item.
  146. determine_used_cross_size_of_each_flex_item();
  147. // 12. Distribute any remaining free space.
  148. distribute_any_remaining_free_space();
  149. // 13. Resolve cross-axis auto margins.
  150. resolve_cross_axis_auto_margins();
  151. // 14. Align all flex items along the cross-axis
  152. align_all_flex_items_along_the_cross_axis();
  153. // 15. Determine the flex container’s used cross size:
  154. determine_flex_container_used_cross_size();
  155. {
  156. // https://drafts.csswg.org/css-flexbox-1/#definite-sizes
  157. // 4. Once the cross size of a flex line has been determined,
  158. // the cross sizes of items in auto-sized flex containers are also considered definite for the purpose of layout.
  159. auto const& flex_container_computed_cross_size = is_row_layout() ? flex_container().computed_values().height() : flex_container().computed_values().width();
  160. if (flex_container_computed_cross_size.is_auto()) {
  161. for (auto& item : m_flex_items) {
  162. set_cross_size(item.box, item.cross_size.value());
  163. }
  164. }
  165. }
  166. {
  167. // NOTE: We re-resolve cross sizes here, now that we can resolve percentages.
  168. // 7. Determine the hypothetical cross size of each item
  169. for (auto& flex_item : m_flex_items) {
  170. determine_hypothetical_cross_size_of_item(flex_item, true);
  171. }
  172. // 11. Determine the used cross size of each flex item.
  173. determine_used_cross_size_of_each_flex_item();
  174. }
  175. // 16. Align all flex lines (per align-content)
  176. align_all_flex_lines();
  177. // AD-HOC: Layout the inside of all flex items.
  178. copy_dimensions_from_flex_items_to_boxes();
  179. for (auto& flex_item : m_flex_items) {
  180. auto& box_state = m_state.get(flex_item.box);
  181. if (auto independent_formatting_context = layout_inside(flex_item.box, LayoutMode::Normal, box_state.available_inner_space_or_constraints_from(m_available_space_for_flex_container->space)))
  182. independent_formatting_context->parent_context_did_dimension_child_root_box();
  183. }
  184. // FIXME: We run the "copy dimensions" step *again* here, in order to override any sizes
  185. // assigned to the flex item by the "layout inside" step above. This is definitely not
  186. // part of the spec, and simply covering up the fact that our inside layout currently
  187. // mutates the height of BFC roots.
  188. copy_dimensions_from_flex_items_to_boxes();
  189. if (available_width.is_intrinsic_sizing_constraint() || available_height.is_intrinsic_sizing_constraint()) {
  190. // We're computing intrinsic size for the flex container.
  191. determine_intrinsic_size_of_flex_container();
  192. // Our caller is only interested in the content-width and content-height results,
  193. // which have now been set on m_flex_container_state, so there's no need to continue
  194. // the main layout algorithm after this point.
  195. }
  196. }
  197. void FlexFormattingContext::parent_context_did_dimension_child_root_box()
  198. {
  199. flex_container().for_each_child_of_type<Box>([&](Layout::Box& box) {
  200. if (box.is_absolutely_positioned()) {
  201. auto& cb_state = m_state.get(*box.containing_block());
  202. auto available_width = AvailableSize::make_definite(cb_state.content_width() + cb_state.padding_left + cb_state.padding_right);
  203. auto available_height = AvailableSize::make_definite(cb_state.content_height() + cb_state.padding_top + cb_state.padding_bottom);
  204. layout_absolutely_positioned_element(box, AvailableSpace(available_width, available_height));
  205. }
  206. });
  207. }
  208. void FlexFormattingContext::populate_specified_margins(FlexItem& item, CSS::FlexDirection flex_direction) const
  209. {
  210. auto width_of_containing_block = m_state.get(*item.box.containing_block()).content_width();
  211. auto width_of_containing_block_as_length = CSS::Length::make_px(width_of_containing_block);
  212. // FIXME: This should also take reverse-ness into account
  213. if (flex_direction == CSS::FlexDirection::Row || flex_direction == CSS::FlexDirection::RowReverse) {
  214. item.borders.main_before = item.box.computed_values().border_left().width;
  215. item.borders.main_after = item.box.computed_values().border_right().width;
  216. item.borders.cross_before = item.box.computed_values().border_top().width;
  217. item.borders.cross_after = item.box.computed_values().border_bottom().width;
  218. item.padding.main_before = item.box.computed_values().padding().left().resolved(item.box, width_of_containing_block_as_length).to_px(item.box);
  219. item.padding.main_after = item.box.computed_values().padding().right().resolved(item.box, width_of_containing_block_as_length).to_px(item.box);
  220. item.padding.cross_before = item.box.computed_values().padding().top().resolved(item.box, width_of_containing_block_as_length).to_px(item.box);
  221. item.padding.cross_after = item.box.computed_values().padding().bottom().resolved(item.box, width_of_containing_block_as_length).to_px(item.box);
  222. item.margins.main_before = item.box.computed_values().margin().left().resolved(item.box, width_of_containing_block_as_length).to_px(item.box);
  223. item.margins.main_after = item.box.computed_values().margin().right().resolved(item.box, width_of_containing_block_as_length).to_px(item.box);
  224. item.margins.cross_before = item.box.computed_values().margin().top().resolved(item.box, width_of_containing_block_as_length).to_px(item.box);
  225. item.margins.cross_after = item.box.computed_values().margin().bottom().resolved(item.box, width_of_containing_block_as_length).to_px(item.box);
  226. item.margins.main_before_is_auto = item.box.computed_values().margin().left().is_auto();
  227. item.margins.main_after_is_auto = item.box.computed_values().margin().right().is_auto();
  228. item.margins.cross_before_is_auto = item.box.computed_values().margin().top().is_auto();
  229. item.margins.cross_after_is_auto = item.box.computed_values().margin().bottom().is_auto();
  230. } else {
  231. item.borders.main_before = item.box.computed_values().border_top().width;
  232. item.borders.main_after = item.box.computed_values().border_bottom().width;
  233. item.borders.cross_before = item.box.computed_values().border_left().width;
  234. item.borders.cross_after = item.box.computed_values().border_right().width;
  235. item.padding.main_before = item.box.computed_values().padding().top().resolved(item.box, width_of_containing_block_as_length).to_px(item.box);
  236. item.padding.main_after = item.box.computed_values().padding().bottom().resolved(item.box, width_of_containing_block_as_length).to_px(item.box);
  237. item.padding.cross_before = item.box.computed_values().padding().left().resolved(item.box, width_of_containing_block_as_length).to_px(item.box);
  238. item.padding.cross_after = item.box.computed_values().padding().right().resolved(item.box, width_of_containing_block_as_length).to_px(item.box);
  239. item.margins.main_before = item.box.computed_values().margin().top().resolved(item.box, width_of_containing_block_as_length).to_px(item.box);
  240. item.margins.main_after = item.box.computed_values().margin().bottom().resolved(item.box, width_of_containing_block_as_length).to_px(item.box);
  241. item.margins.cross_before = item.box.computed_values().margin().left().resolved(item.box, width_of_containing_block_as_length).to_px(item.box);
  242. item.margins.cross_after = item.box.computed_values().margin().right().resolved(item.box, width_of_containing_block_as_length).to_px(item.box);
  243. item.margins.main_before_is_auto = item.box.computed_values().margin().top().is_auto();
  244. item.margins.main_after_is_auto = item.box.computed_values().margin().bottom().is_auto();
  245. item.margins.cross_before_is_auto = item.box.computed_values().margin().left().is_auto();
  246. item.margins.cross_after_is_auto = item.box.computed_values().margin().right().is_auto();
  247. }
  248. };
  249. // https://www.w3.org/TR/css-flexbox-1/#flex-items
  250. void FlexFormattingContext::generate_anonymous_flex_items()
  251. {
  252. // More like, sift through the already generated items.
  253. // After this step no items are to be added or removed from flex_items!
  254. // It holds every item we need to consider and there should be nothing in the following
  255. // calculations that could change that.
  256. // This is particularly important since we take references to the items stored in flex_items
  257. // later, whose addresses won't be stable if we added or removed any items.
  258. HashMap<int, Vector<FlexItem>> order_item_bucket;
  259. flex_container().for_each_child_of_type<Box>([&](Box& child_box) {
  260. if (can_skip_is_anonymous_text_run(child_box))
  261. return IterationDecision::Continue;
  262. // Skip any "out-of-flow" children
  263. if (child_box.is_out_of_flow(*this))
  264. return IterationDecision::Continue;
  265. child_box.set_flex_item(true);
  266. FlexItem flex_item = { child_box };
  267. populate_specified_margins(flex_item, m_flex_direction);
  268. auto& order_bucket = order_item_bucket.ensure(child_box.computed_values().order());
  269. order_bucket.append(move(flex_item));
  270. return IterationDecision::Continue;
  271. });
  272. auto keys = order_item_bucket.keys();
  273. if (is_direction_reverse()) {
  274. quick_sort(keys, [](auto& a, auto& b) { return a > b; });
  275. } else {
  276. quick_sort(keys, [](auto& a, auto& b) { return a < b; });
  277. }
  278. for (auto key : keys) {
  279. auto order_bucket = order_item_bucket.get(key);
  280. if (order_bucket.has_value()) {
  281. auto items = order_bucket.value();
  282. if (is_direction_reverse()) {
  283. for (auto flex_item : items.in_reverse()) {
  284. m_flex_items.append(move(flex_item));
  285. }
  286. } else {
  287. for (auto flex_item : items) {
  288. m_flex_items.append(move(flex_item));
  289. }
  290. }
  291. }
  292. }
  293. }
  294. bool FlexFormattingContext::has_definite_main_size(Box const& box) const
  295. {
  296. auto const& used_values = m_state.get(box);
  297. return is_row_layout() ? used_values.has_definite_width() : used_values.has_definite_height();
  298. }
  299. CSSPixels FlexFormattingContext::specified_main_size(Box const& box) const
  300. {
  301. auto const& box_state = m_state.get(box);
  302. return is_row_layout() ? box_state.content_width() : box_state.content_height();
  303. }
  304. CSSPixels FlexFormattingContext::specified_cross_size(Box const& box) const
  305. {
  306. auto const& box_state = m_state.get(box);
  307. return is_row_layout() ? box_state.content_height() : box_state.content_width();
  308. }
  309. CSSPixels FlexFormattingContext::resolved_definite_cross_size(FlexItem const& item) const
  310. {
  311. return !is_row_layout() ? m_state.resolved_definite_width(item.box) : m_state.resolved_definite_height(item.box);
  312. }
  313. CSSPixels FlexFormattingContext::resolved_definite_main_size(FlexItem const& item) const
  314. {
  315. return is_row_layout() ? m_state.resolved_definite_width(item.box) : m_state.resolved_definite_height(item.box);
  316. }
  317. bool FlexFormattingContext::has_main_min_size(Box const& box) const
  318. {
  319. auto const& value = is_row_layout() ? box.computed_values().min_width() : box.computed_values().min_height();
  320. return !value.is_auto();
  321. }
  322. bool FlexFormattingContext::has_cross_min_size(Box const& box) const
  323. {
  324. auto const& value = is_row_layout() ? box.computed_values().min_height() : box.computed_values().min_width();
  325. return !value.is_auto();
  326. }
  327. bool FlexFormattingContext::has_definite_cross_size(Box const& box) const
  328. {
  329. auto const& used_values = m_state.get(box);
  330. return is_row_layout() ? used_values.has_definite_height() : used_values.has_definite_width();
  331. }
  332. CSSPixels FlexFormattingContext::specified_main_min_size(Box const& box) const
  333. {
  334. return is_row_layout()
  335. ? get_pixel_width(box, box.computed_values().min_width())
  336. : get_pixel_height(box, box.computed_values().min_height());
  337. }
  338. CSSPixels FlexFormattingContext::specified_cross_min_size(Box const& box) const
  339. {
  340. return is_row_layout()
  341. ? get_pixel_height(box, box.computed_values().min_height())
  342. : get_pixel_width(box, box.computed_values().min_width());
  343. }
  344. bool FlexFormattingContext::has_main_max_size(Box const& box) const
  345. {
  346. auto const& value = is_row_layout() ? box.computed_values().max_width() : box.computed_values().max_height();
  347. return !value.is_none();
  348. }
  349. bool FlexFormattingContext::has_cross_max_size(Box const& box) const
  350. {
  351. auto const& value = !is_row_layout() ? box.computed_values().max_width() : box.computed_values().max_height();
  352. return !value.is_none();
  353. }
  354. CSSPixels FlexFormattingContext::specified_main_max_size(Box const& box) const
  355. {
  356. return is_row_layout()
  357. ? get_pixel_width(box, box.computed_values().max_width())
  358. : get_pixel_height(box, box.computed_values().max_height());
  359. }
  360. CSSPixels FlexFormattingContext::specified_cross_max_size(Box const& box) const
  361. {
  362. return is_row_layout()
  363. ? get_pixel_height(box, box.computed_values().max_height())
  364. : get_pixel_width(box, box.computed_values().max_width());
  365. }
  366. bool FlexFormattingContext::is_cross_auto(Box const& box) const
  367. {
  368. auto& cross_length = is_row_layout() ? box.computed_values().height() : box.computed_values().width();
  369. return cross_length.is_auto();
  370. }
  371. void FlexFormattingContext::set_main_size(Box const& box, CSSPixels size)
  372. {
  373. if (is_row_layout())
  374. m_state.get_mutable(box).set_content_width(size);
  375. else
  376. m_state.get_mutable(box).set_content_height(size);
  377. }
  378. void FlexFormattingContext::set_cross_size(Box const& box, CSSPixels size)
  379. {
  380. if (is_row_layout())
  381. m_state.get_mutable(box).set_content_height(size);
  382. else
  383. m_state.get_mutable(box).set_content_width(size);
  384. }
  385. void FlexFormattingContext::set_offset(Box const& box, CSSPixels main_offset, CSSPixels cross_offset)
  386. {
  387. if (is_row_layout())
  388. m_state.get_mutable(box).offset = CSSPixelPoint { main_offset, cross_offset };
  389. else
  390. m_state.get_mutable(box).offset = CSSPixelPoint { cross_offset, main_offset };
  391. }
  392. void FlexFormattingContext::set_main_axis_first_margin(FlexItem& item, CSSPixels margin)
  393. {
  394. item.margins.main_before = margin;
  395. if (is_row_layout())
  396. m_state.get_mutable(item.box).margin_left = margin;
  397. else
  398. m_state.get_mutable(item.box).margin_top = margin;
  399. }
  400. void FlexFormattingContext::set_main_axis_second_margin(FlexItem& item, CSSPixels margin)
  401. {
  402. item.margins.main_after = margin;
  403. if (is_row_layout())
  404. m_state.get_mutable(item.box).margin_right = margin;
  405. else
  406. m_state.get_mutable(item.box).margin_bottom = margin;
  407. }
  408. // https://drafts.csswg.org/css-flexbox-1/#algo-available
  409. void FlexFormattingContext::determine_available_space_for_items(AvailableSpace const& available_space)
  410. {
  411. // For each dimension, if that dimension of the flex container’s content box is a definite size, use that;
  412. // 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;
  413. // 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.
  414. // This might result in an infinite value.
  415. Optional<AvailableSize> available_width_for_items;
  416. if (m_flex_container_state.has_definite_width()) {
  417. available_width_for_items = AvailableSize::make_definite(m_state.resolved_definite_width(flex_container()));
  418. } else {
  419. if (available_space.width.is_intrinsic_sizing_constraint()) {
  420. available_width_for_items = available_space.width;
  421. } else {
  422. if (available_space.width.is_definite()) {
  423. auto remaining = available_space.width.to_px()
  424. - m_flex_container_state.margin_left
  425. - m_flex_container_state.margin_right
  426. - m_flex_container_state.border_left
  427. - m_flex_container_state.padding_right
  428. - m_flex_container_state.padding_left
  429. - m_flex_container_state.padding_right;
  430. available_width_for_items = AvailableSize::make_definite(remaining);
  431. } else {
  432. available_width_for_items = AvailableSize::make_indefinite();
  433. }
  434. }
  435. }
  436. Optional<AvailableSize> available_height_for_items;
  437. if (m_flex_container_state.has_definite_height()) {
  438. available_height_for_items = AvailableSize::make_definite(m_state.resolved_definite_height(flex_container()));
  439. } else {
  440. if (available_space.height.is_intrinsic_sizing_constraint()) {
  441. available_height_for_items = available_space.height;
  442. } else {
  443. if (available_space.height.is_definite()) {
  444. auto remaining = available_space.height.to_px()
  445. - m_flex_container_state.margin_top
  446. - m_flex_container_state.margin_bottom
  447. - m_flex_container_state.border_top
  448. - m_flex_container_state.padding_bottom
  449. - m_flex_container_state.padding_top
  450. - m_flex_container_state.padding_bottom;
  451. available_height_for_items = AvailableSize::make_definite(remaining);
  452. } else {
  453. available_height_for_items = AvailableSize::make_indefinite();
  454. }
  455. }
  456. }
  457. if (is_row_layout()) {
  458. m_available_space_for_items = AxisAgnosticAvailableSpace {
  459. .main = *available_width_for_items,
  460. .cross = *available_height_for_items,
  461. .space = { *available_width_for_items, *available_height_for_items },
  462. };
  463. } else {
  464. m_available_space_for_items = AxisAgnosticAvailableSpace {
  465. .main = *available_height_for_items,
  466. .cross = *available_width_for_items,
  467. .space = { *available_width_for_items, *available_height_for_items },
  468. };
  469. }
  470. }
  471. CSSPixels FlexFormattingContext::calculate_indefinite_main_size(FlexItem const& item)
  472. {
  473. VERIFY(!has_definite_main_size(item.box));
  474. // Otherwise, size the item into the available space using its used flex basis in place of its main size,
  475. // treating a value of content as max-content.
  476. if (item.used_flex_basis.type == CSS::FlexBasis::Content)
  477. return calculate_max_content_main_size(item);
  478. // If a cross size is needed to determine the main size
  479. // (e.g. when the flex item’s main size is in its block axis, or when it has a preferred aspect ratio)
  480. // and the flex item’s cross size is auto and not definite,
  481. // in this calculation use fit-content as the flex item’s cross size.
  482. // The flex base size is the item’s resulting main size.
  483. bool main_size_is_in_block_axis = !is_row_layout();
  484. // FIXME: Figure out if we have a preferred aspect ratio.
  485. bool has_preferred_aspect_ratio = false;
  486. bool cross_size_needed_to_determine_main_size = main_size_is_in_block_axis || has_preferred_aspect_ratio;
  487. if (cross_size_needed_to_determine_main_size) {
  488. // Figure out the fit-content cross size, then layout with that and see what height comes out of it.
  489. CSSPixels fit_content_cross_size = calculate_fit_content_cross_size(item);
  490. LayoutState throwaway_state(&m_state);
  491. auto& box_state = throwaway_state.get_mutable(item.box);
  492. // Item has definite cross size, layout with that as the used cross size.
  493. auto independent_formatting_context = create_independent_formatting_context_if_needed(throwaway_state, item.box);
  494. // NOTE: Flex items should always create an independent formatting context!
  495. VERIFY(independent_formatting_context);
  496. box_state.set_content_width(fit_content_cross_size);
  497. independent_formatting_context->run(item.box, LayoutMode::Normal, m_available_space_for_items->space);
  498. return independent_formatting_context->automatic_content_height();
  499. }
  500. return calculate_fit_content_main_size(item);
  501. }
  502. // https://drafts.csswg.org/css-flexbox-1/#propdef-flex-basis
  503. CSS::FlexBasisData FlexFormattingContext::used_flex_basis_for_item(FlexItem const& item) const
  504. {
  505. auto flex_basis = item.box.computed_values().flex_basis();
  506. if (flex_basis.type == CSS::FlexBasis::Auto) {
  507. // https://drafts.csswg.org/css-flexbox-1/#valdef-flex-basis-auto
  508. // When specified on a flex item, the auto keyword retrieves the value of the main size property as the used flex-basis.
  509. // If that value is itself auto, then the used value is content.
  510. auto const& main_size = is_row_layout() ? item.box.computed_values().width() : item.box.computed_values().height();
  511. if (main_size.is_auto()) {
  512. flex_basis.type = CSS::FlexBasis::Content;
  513. } else {
  514. flex_basis.type = CSS::FlexBasis::LengthPercentage;
  515. if (main_size.is_length()) {
  516. flex_basis.length_percentage = main_size.length();
  517. } else if (main_size.is_percentage()) {
  518. flex_basis.length_percentage = main_size.percentage();
  519. } else {
  520. // FIXME: Support other size values!
  521. dbgln("FIXME: Unsupported main size for flex-basis!");
  522. flex_basis.type = CSS::FlexBasis::Content;
  523. }
  524. }
  525. }
  526. return flex_basis;
  527. }
  528. // https://www.w3.org/TR/css-flexbox-1/#algo-main-item
  529. void FlexFormattingContext::determine_flex_base_size_and_hypothetical_main_size(FlexItem& flex_item)
  530. {
  531. auto& child_box = flex_item.box;
  532. flex_item.flex_base_size = [&] {
  533. flex_item.used_flex_basis = used_flex_basis_for_item(flex_item);
  534. flex_item.used_flex_basis_is_definite = [&](CSS::FlexBasisData const& flex_basis) -> bool {
  535. if (flex_basis.type != CSS::FlexBasis::LengthPercentage)
  536. return false;
  537. if (flex_basis.length_percentage->is_auto())
  538. return false;
  539. if (flex_basis.length_percentage->is_length())
  540. return true;
  541. if (flex_basis.length_percentage->is_calculated()) {
  542. // FIXME: Handle calc() in used flex basis.
  543. return false;
  544. }
  545. if (is_row_layout())
  546. return m_flex_container_state.has_definite_width();
  547. return m_flex_container_state.has_definite_height();
  548. }(flex_item.used_flex_basis);
  549. // A. If the item has a definite used flex basis, that’s the flex base size.
  550. if (flex_item.used_flex_basis_is_definite) {
  551. if (is_row_layout())
  552. return get_pixel_width(child_box, to_css_size(flex_item.used_flex_basis.length_percentage.value()));
  553. return get_pixel_height(child_box, to_css_size(flex_item.used_flex_basis.length_percentage.value()));
  554. }
  555. // B. If the flex item has ...
  556. // - an intrinsic aspect ratio,
  557. // - a used flex basis of content, and
  558. // - a definite cross size,
  559. if (flex_item.box.has_intrinsic_aspect_ratio()
  560. && flex_item.used_flex_basis.type == CSS::FlexBasis::Content
  561. && has_definite_cross_size(flex_item.box)) {
  562. // flex_base_size is calculated from definite cross size and intrinsic aspect ratio
  563. return resolved_definite_cross_size(flex_item) * flex_item.box.intrinsic_aspect_ratio().value();
  564. }
  565. // C. If the used flex basis is content or depends on its available space,
  566. // and the flex container is being sized under a min-content or max-content constraint
  567. // (e.g. when performing automatic table layout [CSS21]), size the item under that constraint.
  568. // The flex base size is the item’s resulting main size.
  569. if (flex_item.used_flex_basis.type == CSS::FlexBasis::Content && m_available_space_for_items->main.is_intrinsic_sizing_constraint()) {
  570. if (m_available_space_for_items->main.is_min_content())
  571. return calculate_min_content_main_size(flex_item);
  572. return calculate_max_content_main_size(flex_item);
  573. }
  574. // D. Otherwise, if the used flex basis is content or depends on its available space,
  575. // the available main size is infinite, and the flex item’s inline axis is parallel to the main axis,
  576. // lay the item out using the rules for a box in an orthogonal flow [CSS3-WRITING-MODES].
  577. // The flex base size is the item’s max-content main size.
  578. if (flex_item.used_flex_basis.type == CSS::FlexBasis::Content
  579. // FIXME: && main_size is infinite && inline axis is parallel to the main axis
  580. && false && false) {
  581. TODO();
  582. // Use rules for a flex_container in orthogonal flow
  583. }
  584. // E. Otherwise, size the item into the available space using its used flex basis in place of its main size,
  585. // treating a value of content as max-content. If a cross size is needed to determine the main size
  586. // (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,
  587. // in this calculation use fit-content as the flex item’s cross size.
  588. // The flex base size is the item’s resulting main size.
  589. // FIXME: This is probably too naive.
  590. // FIXME: Care about FlexBasis::Auto
  591. if (has_definite_main_size(child_box))
  592. return resolved_definite_main_size(flex_item);
  593. return calculate_indefinite_main_size(flex_item);
  594. }();
  595. // 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).
  596. auto clamp_min = has_main_min_size(child_box) ? specified_main_min_size(child_box) : automatic_minimum_size(flex_item);
  597. auto clamp_max = has_main_max_size(child_box) ? specified_main_max_size(child_box) : NumericLimits<float>::max();
  598. flex_item.hypothetical_main_size = max(CSSPixels(0.0f), css_clamp(flex_item.flex_base_size, clamp_min, clamp_max));
  599. // NOTE: At this point, we set the hypothetical main size as the flex item's *temporary* main size.
  600. // The size may change again when we resolve flexible lengths, but this is necessary in order for
  601. // descendants of this flex item to resolve percentage sizes against something.
  602. //
  603. // The spec just barely hand-waves about this, but it seems to *roughly* match what other engines do.
  604. // See "Note" section here: https://drafts.csswg.org/css-flexbox-1/#definite-sizes
  605. if (is_row_layout())
  606. m_state.get_mutable(flex_item.box).set_temporary_content_width(flex_item.hypothetical_main_size);
  607. else
  608. m_state.get_mutable(flex_item.box).set_temporary_content_height(flex_item.hypothetical_main_size);
  609. }
  610. // https://drafts.csswg.org/css-flexbox-1/#min-size-auto
  611. CSSPixels FlexFormattingContext::automatic_minimum_size(FlexItem const& item) const
  612. {
  613. // FIXME: Deal with scroll containers.
  614. return content_based_minimum_size(item);
  615. }
  616. // https://drafts.csswg.org/css-flexbox-1/#specified-size-suggestion
  617. Optional<CSSPixels> FlexFormattingContext::specified_size_suggestion(FlexItem const& item) const
  618. {
  619. // If the item’s preferred main size is definite and not automatic,
  620. // then the specified size suggestion is that size. It is otherwise undefined.
  621. if (has_definite_main_size(item.box))
  622. return specified_main_size(item.box);
  623. return {};
  624. }
  625. // https://drafts.csswg.org/css-flexbox-1/#content-size-suggestion
  626. CSSPixels FlexFormattingContext::content_size_suggestion(FlexItem const& item) const
  627. {
  628. // FIXME: Apply clamps
  629. return calculate_min_content_main_size(item);
  630. }
  631. // https://drafts.csswg.org/css-flexbox-1/#transferred-size-suggestion
  632. Optional<CSSPixels> FlexFormattingContext::transferred_size_suggestion(FlexItem const& item) const
  633. {
  634. // If the item has a preferred aspect ratio and its preferred cross size is definite,
  635. // then the transferred size suggestion is that size
  636. // (clamped by its minimum and maximum cross sizes if they are definite), converted through the aspect ratio.
  637. if (item.box.has_intrinsic_aspect_ratio() && has_definite_cross_size(item.box)) {
  638. auto aspect_ratio = item.box.intrinsic_aspect_ratio().value();
  639. // FIXME: Clamp cross size to min/max cross size before this conversion.
  640. return resolved_definite_cross_size(item) * aspect_ratio;
  641. }
  642. // It is otherwise undefined.
  643. return {};
  644. }
  645. // https://drafts.csswg.org/css-flexbox-1/#content-based-minimum-size
  646. CSSPixels FlexFormattingContext::content_based_minimum_size(FlexItem const& item) const
  647. {
  648. auto unclamped_size = [&] {
  649. // The content-based minimum size of a flex item is the smaller of its specified size suggestion
  650. // and its content size suggestion if its specified size suggestion exists;
  651. if (auto specified_size_suggestion = this->specified_size_suggestion(item); specified_size_suggestion.has_value()) {
  652. return min(specified_size_suggestion.value(), content_size_suggestion(item));
  653. }
  654. // otherwise, the smaller of its transferred size suggestion and its content size suggestion
  655. // if the element is replaced and its transferred size suggestion exists;
  656. if (item.box.is_replaced_box()) {
  657. if (auto transferred_size_suggestion = this->transferred_size_suggestion(item); transferred_size_suggestion.has_value()) {
  658. return min(transferred_size_suggestion.value(), content_size_suggestion(item));
  659. }
  660. }
  661. // otherwise its content size suggestion.
  662. return content_size_suggestion(item);
  663. }();
  664. // In all cases, the size is clamped by the maximum main size if it’s definite.
  665. if (has_main_max_size(item.box)) {
  666. return min(unclamped_size, specified_main_max_size(item.box));
  667. }
  668. return unclamped_size;
  669. }
  670. bool FlexFormattingContext::can_determine_size_of_child() const
  671. {
  672. return true;
  673. }
  674. void FlexFormattingContext::determine_width_of_child(Box const&, AvailableSpace const&)
  675. {
  676. // NOTE: For now, we simply do nothing here. If a child context is calling up to us
  677. // and asking us to determine its width, we've already done so as part of the
  678. // flex layout algorithm.
  679. }
  680. void FlexFormattingContext::determine_height_of_child(Box const&, AvailableSpace const&)
  681. {
  682. // NOTE: For now, we simply do nothing here. If a child context is calling up to us
  683. // and asking us to determine its height, we've already done so as part of the
  684. // flex layout algorithm.
  685. }
  686. // https://drafts.csswg.org/css-flexbox-1/#algo-main-container
  687. void FlexFormattingContext::determine_main_size_of_flex_container()
  688. {
  689. // Determine the main size of the flex container using the rules of the formatting context in which it participates.
  690. // NOTE: The automatic block size of a block-level flex container is its max-content size.
  691. // FIXME: The code below doesn't know how to size absolutely positioned flex containers at all.
  692. // We just leave it alone for now and let the parent context deal with it.
  693. if (flex_container().is_absolutely_positioned())
  694. return;
  695. // FIXME: Once all parent contexts now how to size a given child, we can remove
  696. // `can_determine_size_of_child()`.
  697. if (parent()->can_determine_size_of_child()) {
  698. if (is_row_layout()) {
  699. parent()->determine_width_of_child(flex_container(), m_available_space_for_flex_container->space);
  700. } else {
  701. parent()->determine_height_of_child(flex_container(), m_available_space_for_flex_container->space);
  702. }
  703. return;
  704. }
  705. if (is_row_layout()) {
  706. if (!flex_container().is_out_of_flow(*parent()) && m_state.get(*flex_container().containing_block()).has_definite_width()) {
  707. set_main_size(flex_container(), calculate_stretch_fit_width(flex_container(), m_available_space_for_flex_container->space.width));
  708. } else {
  709. set_main_size(flex_container(), calculate_max_content_width(flex_container()));
  710. }
  711. } else {
  712. if (!has_definite_main_size(flex_container()))
  713. set_main_size(flex_container(), calculate_max_content_height(flex_container(), m_available_space_for_flex_container->space.width));
  714. }
  715. }
  716. // https://www.w3.org/TR/css-flexbox-1/#algo-line-break
  717. void FlexFormattingContext::collect_flex_items_into_flex_lines()
  718. {
  719. // FIXME: Also support wrap-reverse
  720. // If the flex container is single-line, collect all the flex items into a single flex line.
  721. if (is_single_line()) {
  722. FlexLine line;
  723. for (auto& flex_item : m_flex_items) {
  724. line.items.append(&flex_item);
  725. }
  726. m_flex_lines.append(move(line));
  727. return;
  728. }
  729. // Otherwise, starting from the first uncollected item, collect consecutive items one by one
  730. // until the first time that the next collected item would not fit into the flex container’s inner main size
  731. // (or until a forced break is encountered, see §10 Fragmenting Flex Layout).
  732. // If the very first uncollected item wouldn't fit, collect just it into the line.
  733. // For this step, the size of a flex item is its outer hypothetical main size. (Note: This can be negative.)
  734. // Repeat until all flex items have been collected into flex lines.
  735. FlexLine line;
  736. CSSPixels line_main_size = 0;
  737. for (auto& flex_item : m_flex_items) {
  738. 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;
  739. if (!line.items.is_empty() && (line_main_size + outer_hypothetical_main_size) > specified_main_size(flex_container())) {
  740. m_flex_lines.append(move(line));
  741. line = {};
  742. line_main_size = 0;
  743. }
  744. line.items.append(&flex_item);
  745. line_main_size += outer_hypothetical_main_size;
  746. }
  747. m_flex_lines.append(move(line));
  748. }
  749. // https://www.w3.org/TR/css-flexbox-1/#resolve-flexible-lengths
  750. void FlexFormattingContext::resolve_flexible_lengths()
  751. {
  752. enum FlexFactor {
  753. FlexGrowFactor,
  754. FlexShrinkFactor
  755. };
  756. FlexFactor used_flex_factor;
  757. // 6.1. Determine used flex factor
  758. for (auto& flex_line : m_flex_lines) {
  759. size_t number_of_unfrozen_items_on_line = flex_line.items.size();
  760. CSSPixels sum_of_hypothetical_main_sizes = 0;
  761. for (auto& flex_item : flex_line.items) {
  762. 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);
  763. }
  764. if (sum_of_hypothetical_main_sizes < specified_main_size(flex_container()))
  765. used_flex_factor = FlexFactor::FlexGrowFactor;
  766. else
  767. used_flex_factor = FlexFactor::FlexShrinkFactor;
  768. for (auto& flex_item : flex_line.items) {
  769. if (used_flex_factor == FlexFactor::FlexGrowFactor)
  770. flex_item->flex_factor = flex_item->box.computed_values().flex_grow();
  771. else if (used_flex_factor == FlexFactor::FlexShrinkFactor)
  772. flex_item->flex_factor = flex_item->box.computed_values().flex_shrink();
  773. }
  774. // 6.2. Size inflexible items
  775. auto freeze_item_setting_target_main_size_to_hypothetical_main_size = [&number_of_unfrozen_items_on_line](FlexItem& item) {
  776. item.target_main_size = item.hypothetical_main_size;
  777. number_of_unfrozen_items_on_line--;
  778. item.frozen = true;
  779. };
  780. for (auto& flex_item : flex_line.items) {
  781. if (flex_item->flex_factor.has_value() && flex_item->flex_factor.value() == 0) {
  782. freeze_item_setting_target_main_size_to_hypothetical_main_size(*flex_item);
  783. } else if (used_flex_factor == FlexFactor::FlexGrowFactor) {
  784. // FIXME: Spec doesn't include the == case, but we take a too basic approach to calculating the values used so this is appropriate
  785. if (flex_item->flex_base_size > flex_item->hypothetical_main_size) {
  786. freeze_item_setting_target_main_size_to_hypothetical_main_size(*flex_item);
  787. }
  788. } else if (used_flex_factor == FlexFactor::FlexShrinkFactor) {
  789. if (flex_item->flex_base_size < flex_item->hypothetical_main_size) {
  790. freeze_item_setting_target_main_size_to_hypothetical_main_size(*flex_item);
  791. }
  792. }
  793. }
  794. // 6.3. Calculate initial free space
  795. auto calculate_free_space = [&]() {
  796. CSSPixels sum_of_items_on_line = 0;
  797. for (auto& flex_item : flex_line.items) {
  798. if (flex_item->frozen)
  799. 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;
  800. else
  801. 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;
  802. }
  803. return specified_main_size(flex_container()) - sum_of_items_on_line;
  804. };
  805. CSSPixels initial_free_space = calculate_free_space();
  806. flex_line.remaining_free_space = initial_free_space;
  807. // 6.4 Loop
  808. auto for_each_unfrozen_item = [&flex_line](auto callback) {
  809. for (auto& flex_item : flex_line.items) {
  810. if (!flex_item->frozen)
  811. callback(flex_item);
  812. }
  813. };
  814. while (number_of_unfrozen_items_on_line > 0) {
  815. // b Calculate the remaining free space
  816. flex_line.remaining_free_space = calculate_free_space();
  817. float sum_of_unfrozen_flex_items_flex_factors = 0;
  818. for_each_unfrozen_item([&](FlexItem* item) {
  819. sum_of_unfrozen_flex_items_flex_factors += item->flex_factor.value_or(1);
  820. });
  821. if (sum_of_unfrozen_flex_items_flex_factors < 1) {
  822. auto intermediate_free_space = initial_free_space * sum_of_unfrozen_flex_items_flex_factors;
  823. if (abs(intermediate_free_space) < abs(flex_line.remaining_free_space))
  824. flex_line.remaining_free_space = intermediate_free_space;
  825. }
  826. // c Distribute free space proportional to the flex factors
  827. if (flex_line.remaining_free_space != 0) {
  828. if (used_flex_factor == FlexFactor::FlexGrowFactor) {
  829. float sum_of_flex_grow_factor_of_unfrozen_items = sum_of_unfrozen_flex_items_flex_factors;
  830. for_each_unfrozen_item([&](FlexItem* flex_item) {
  831. float ratio = flex_item->flex_factor.value_or(1) / sum_of_flex_grow_factor_of_unfrozen_items;
  832. flex_item->target_main_size = flex_item->flex_base_size + (flex_line.remaining_free_space * ratio);
  833. });
  834. } else if (used_flex_factor == FlexFactor::FlexShrinkFactor) {
  835. float sum_of_scaled_flex_shrink_factor_of_unfrozen_items = 0;
  836. for_each_unfrozen_item([&](FlexItem* flex_item) {
  837. flex_item->scaled_flex_shrink_factor = flex_item->flex_factor.value_or(1) * flex_item->flex_base_size.value();
  838. sum_of_scaled_flex_shrink_factor_of_unfrozen_items += flex_item->scaled_flex_shrink_factor;
  839. });
  840. for_each_unfrozen_item([&](FlexItem* flex_item) {
  841. float ratio = 1.0f;
  842. if (sum_of_scaled_flex_shrink_factor_of_unfrozen_items != 0.0f)
  843. ratio = flex_item->scaled_flex_shrink_factor / sum_of_scaled_flex_shrink_factor_of_unfrozen_items;
  844. flex_item->target_main_size = flex_item->flex_base_size - (abs(flex_line.remaining_free_space) * ratio);
  845. });
  846. }
  847. } else {
  848. // This isn't spec but makes sense.
  849. for_each_unfrozen_item([&](FlexItem* flex_item) {
  850. flex_item->target_main_size = flex_item->flex_base_size;
  851. });
  852. }
  853. // d Fix min/max violations.
  854. CSSPixels adjustments = 0.0f;
  855. for_each_unfrozen_item([&](FlexItem* item) {
  856. auto min_main = has_main_min_size(item->box)
  857. ? specified_main_min_size(item->box)
  858. : automatic_minimum_size(*item);
  859. auto max_main = has_main_max_size(item->box)
  860. ? specified_main_max_size(item->box)
  861. : NumericLimits<float>::max();
  862. CSSPixels original_target_size = item->target_main_size;
  863. if (item->target_main_size < min_main) {
  864. item->target_main_size = min_main;
  865. item->is_min_violation = true;
  866. }
  867. if (item->target_main_size > max_main) {
  868. item->target_main_size = max_main;
  869. item->is_max_violation = true;
  870. }
  871. CSSPixels delta = item->target_main_size - original_target_size;
  872. adjustments += delta;
  873. });
  874. // e Freeze over-flexed items
  875. CSSPixels total_violation = adjustments;
  876. if (total_violation == 0) {
  877. for_each_unfrozen_item([&](FlexItem* item) {
  878. --number_of_unfrozen_items_on_line;
  879. item->frozen = true;
  880. });
  881. } else if (total_violation > 0) {
  882. for_each_unfrozen_item([&](FlexItem* item) {
  883. if (item->is_min_violation) {
  884. --number_of_unfrozen_items_on_line;
  885. item->frozen = true;
  886. }
  887. });
  888. } else if (total_violation < 0) {
  889. for_each_unfrozen_item([&](FlexItem* item) {
  890. if (item->is_max_violation) {
  891. --number_of_unfrozen_items_on_line;
  892. item->frozen = true;
  893. }
  894. });
  895. }
  896. }
  897. // 6.5.
  898. for (auto& flex_item : flex_line.items) {
  899. flex_item->main_size = flex_item->target_main_size;
  900. set_main_size(flex_item->box, flex_item->main_size.value());
  901. }
  902. flex_line.remaining_free_space = calculate_free_space();
  903. }
  904. }
  905. // https://drafts.csswg.org/css-flexbox-1/#algo-cross-item
  906. void FlexFormattingContext::determine_hypothetical_cross_size_of_item(FlexItem& item, bool resolve_percentage_min_max_sizes)
  907. {
  908. // Determine the hypothetical cross size of each item by performing layout
  909. // as if it were an in-flow block-level box with the used main size
  910. // and the given available space, treating auto as fit-content.
  911. auto const& computed_min_size = this->computed_cross_min_size(item.box);
  912. auto const& computed_max_size = this->computed_cross_max_size(item.box);
  913. auto clamp_min = (!computed_min_size.is_auto() && (resolve_percentage_min_max_sizes || !computed_min_size.contains_percentage())) ? specified_cross_min_size(item.box) : 0;
  914. auto clamp_max = (!computed_max_size.is_none() && (resolve_percentage_min_max_sizes || !computed_max_size.contains_percentage())) ? specified_cross_max_size(item.box) : NumericLimits<float>::max();
  915. // If we have a definite cross size, this is easy! No need to perform layout, we can just use it as-is.
  916. if (has_definite_cross_size(item.box)) {
  917. // To avoid subtracting padding and border twice for `box-sizing: border-box` only min and max clamp should happen on a second pass
  918. if (resolve_percentage_min_max_sizes) {
  919. item.hypothetical_cross_size = css_clamp(item.hypothetical_cross_size, clamp_min, clamp_max);
  920. return;
  921. }
  922. auto cross_size = [&]() {
  923. if (item.box.computed_values().box_sizing() == CSS::BoxSizing::BorderBox) {
  924. return max(CSSPixels(0.0f), resolved_definite_cross_size(item) - item.padding.cross_before - item.padding.cross_after - item.borders.cross_before - item.borders.cross_after);
  925. }
  926. return resolved_definite_cross_size(item);
  927. }();
  928. item.hypothetical_cross_size = css_clamp(cross_size, clamp_min, clamp_max);
  929. return;
  930. }
  931. if (computed_cross_size(item.box).is_auto()) {
  932. // Item has automatic cross size, layout with "fit-content"
  933. CSSPixels fit_content_cross_size = 0;
  934. if (is_row_layout()) {
  935. auto available_width = item.main_size.has_value() ? AvailableSize::make_definite(item.main_size.value()) : AvailableSize::make_indefinite();
  936. auto available_height = AvailableSize::make_indefinite();
  937. fit_content_cross_size = calculate_fit_content_height(item.box, AvailableSpace(available_width, available_height));
  938. } else {
  939. fit_content_cross_size = calculate_fit_content_width(item.box, m_available_space_for_items->space);
  940. }
  941. item.hypothetical_cross_size = css_clamp(fit_content_cross_size, clamp_min, clamp_max);
  942. return;
  943. }
  944. // For indefinite cross sizes, we perform a throwaway layout and then measure it.
  945. LayoutState throwaway_state(&m_state);
  946. auto& box_state = throwaway_state.get_mutable(item.box);
  947. if (is_row_layout()) {
  948. box_state.set_content_width(item.main_size.value());
  949. } else {
  950. box_state.set_content_height(item.main_size.value());
  951. }
  952. // Item has definite main size, layout with that as the used main size.
  953. auto independent_formatting_context = create_independent_formatting_context_if_needed(throwaway_state, item.box);
  954. // NOTE: Flex items should always create an independent formatting context!
  955. VERIFY(independent_formatting_context);
  956. auto available_width = is_row_layout() ? AvailableSize::make_definite(item.main_size.value()) : AvailableSize::make_indefinite();
  957. auto available_height = is_row_layout() ? AvailableSize::make_indefinite() : AvailableSize::make_definite(item.main_size.value());
  958. independent_formatting_context->run(item.box, LayoutMode::Normal, AvailableSpace(available_width, available_height));
  959. auto automatic_cross_size = is_row_layout() ? independent_formatting_context->automatic_content_height()
  960. : independent_formatting_context->automatic_content_width();
  961. item.hypothetical_cross_size = css_clamp(automatic_cross_size, clamp_min, clamp_max);
  962. }
  963. // https://www.w3.org/TR/css-flexbox-1/#algo-cross-line
  964. void FlexFormattingContext::calculate_cross_size_of_each_flex_line()
  965. {
  966. // 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.
  967. if (is_single_line() && has_definite_cross_size(flex_container())) {
  968. m_flex_lines[0].cross_size = specified_cross_size(flex_container());
  969. return;
  970. }
  971. // Otherwise, for each flex line:
  972. for (auto& flex_line : m_flex_lines) {
  973. // FIXME: 1. Collect all the flex items whose inline-axis is parallel to the main-axis, whose align-self is baseline,
  974. // and whose cross-axis margins are both non-auto. Find the largest of the distances between each item’s baseline
  975. // and its hypothetical outer cross-start edge, and the largest of the distances between each item’s baseline
  976. // and its hypothetical outer cross-end edge, and sum these two values.
  977. // 2. Among all the items not collected by the previous step, find the largest outer hypothetical cross size.
  978. CSSPixels largest_hypothetical_cross_size = 0;
  979. for (auto& flex_item : flex_line.items) {
  980. if (largest_hypothetical_cross_size < flex_item->hypothetical_cross_size_with_margins())
  981. largest_hypothetical_cross_size = flex_item->hypothetical_cross_size_with_margins();
  982. }
  983. // 3. The used cross-size of the flex line is the largest of the numbers found in the previous two steps and zero.
  984. flex_line.cross_size = max(CSSPixels(0.0f), largest_hypothetical_cross_size);
  985. }
  986. // 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.
  987. // Note that if CSS 2.1’s definition of min/max-width/height applied more generally, this behavior would fall out automatically.
  988. if (is_single_line()) {
  989. auto const& computed_min_size = this->computed_cross_min_size(flex_container());
  990. auto const& computed_max_size = this->computed_cross_max_size(flex_container());
  991. auto cross_min_size = (!computed_min_size.is_auto() && !computed_min_size.contains_percentage()) ? specified_cross_min_size(flex_container()) : 0;
  992. auto cross_max_size = (!computed_max_size.is_none() && !computed_max_size.contains_percentage()) ? specified_cross_max_size(flex_container()) : INFINITY;
  993. m_flex_lines[0].cross_size = css_clamp(m_flex_lines[0].cross_size, cross_min_size, cross_max_size);
  994. }
  995. }
  996. // https://www.w3.org/TR/css-flexbox-1/#algo-stretch
  997. void FlexFormattingContext::determine_used_cross_size_of_each_flex_item()
  998. {
  999. for (auto& flex_line : m_flex_lines) {
  1000. for (auto& flex_item : flex_line.items) {
  1001. // If a flex item has align-self: stretch, its computed cross size property is auto,
  1002. // and neither of its cross-axis margins are auto, the used outer cross size is the used cross size of its flex line,
  1003. // clamped according to the item’s used min and max cross sizes.
  1004. if (alignment_for_item(flex_item->box) == CSS::AlignItems::Stretch
  1005. && is_cross_auto(flex_item->box)
  1006. && !flex_item->margins.cross_before_is_auto
  1007. && !flex_item->margins.cross_after_is_auto) {
  1008. auto unclamped_cross_size = flex_line.cross_size
  1009. - flex_item->margins.cross_before - flex_item->margins.cross_after
  1010. - flex_item->padding.cross_before - flex_item->padding.cross_after
  1011. - flex_item->borders.cross_before - flex_item->borders.cross_after;
  1012. auto const& computed_min_size = computed_cross_min_size(flex_item->box);
  1013. auto const& computed_max_size = computed_cross_max_size(flex_item->box);
  1014. auto cross_min_size = (!computed_min_size.is_auto() && !computed_min_size.contains_percentage()) ? specified_cross_min_size(flex_item->box) : 0;
  1015. auto cross_max_size = (!computed_max_size.is_none() && !computed_max_size.contains_percentage()) ? specified_cross_max_size(flex_item->box) : INFINITY;
  1016. flex_item->cross_size = css_clamp(unclamped_cross_size, cross_min_size, cross_max_size);
  1017. } else {
  1018. // Otherwise, the used cross size is the item’s hypothetical cross size.
  1019. flex_item->cross_size = flex_item->hypothetical_cross_size;
  1020. }
  1021. }
  1022. }
  1023. }
  1024. // https://www.w3.org/TR/css-flexbox-1/#algo-main-align
  1025. void FlexFormattingContext::distribute_any_remaining_free_space()
  1026. {
  1027. for (auto& flex_line : m_flex_lines) {
  1028. // 12.1.
  1029. CSSPixels used_main_space = 0;
  1030. size_t auto_margins = 0;
  1031. for (auto& flex_item : flex_line.items) {
  1032. used_main_space += flex_item->main_size.value();
  1033. if (flex_item->margins.main_before_is_auto)
  1034. ++auto_margins;
  1035. if (flex_item->margins.main_after_is_auto)
  1036. ++auto_margins;
  1037. used_main_space += flex_item->margins.main_before + flex_item->margins.main_after
  1038. + flex_item->borders.main_before + flex_item->borders.main_after
  1039. + flex_item->padding.main_before + flex_item->padding.main_after;
  1040. }
  1041. if (flex_line.remaining_free_space > 0) {
  1042. CSSPixels size_per_auto_margin = flex_line.remaining_free_space / (float)auto_margins;
  1043. for (auto& flex_item : flex_line.items) {
  1044. if (flex_item->margins.main_before_is_auto)
  1045. set_main_axis_first_margin(*flex_item, size_per_auto_margin);
  1046. if (flex_item->margins.main_after_is_auto)
  1047. set_main_axis_second_margin(*flex_item, size_per_auto_margin);
  1048. }
  1049. } else {
  1050. for (auto& flex_item : flex_line.items) {
  1051. if (flex_item->margins.main_before_is_auto)
  1052. set_main_axis_first_margin(*flex_item, 0);
  1053. if (flex_item->margins.main_after_is_auto)
  1054. set_main_axis_second_margin(*flex_item, 0);
  1055. }
  1056. }
  1057. // 12.2.
  1058. CSSPixels space_between_items = 0;
  1059. CSSPixels initial_offset = 0;
  1060. auto number_of_items = flex_line.items.size();
  1061. enum class FlexRegionRenderCursor {
  1062. Left,
  1063. Right
  1064. };
  1065. auto flex_region_render_cursor = FlexRegionRenderCursor::Left;
  1066. bool justification_is_centered = false;
  1067. switch (flex_container().computed_values().justify_content()) {
  1068. case CSS::JustifyContent::Start:
  1069. case CSS::JustifyContent::FlexStart:
  1070. if (is_direction_reverse()) {
  1071. flex_region_render_cursor = FlexRegionRenderCursor::Right;
  1072. initial_offset = specified_main_size(flex_container());
  1073. } else {
  1074. initial_offset = 0;
  1075. }
  1076. break;
  1077. case CSS::JustifyContent::End:
  1078. case CSS::JustifyContent::FlexEnd:
  1079. if (is_direction_reverse()) {
  1080. initial_offset = 0;
  1081. } else {
  1082. flex_region_render_cursor = FlexRegionRenderCursor::Right;
  1083. initial_offset = specified_main_size(flex_container());
  1084. }
  1085. break;
  1086. case CSS::JustifyContent::Center:
  1087. initial_offset = (specified_main_size(flex_container()) - used_main_space) / 2.0f;
  1088. justification_is_centered = true;
  1089. break;
  1090. case CSS::JustifyContent::SpaceBetween:
  1091. space_between_items = flex_line.remaining_free_space / (number_of_items - 1);
  1092. break;
  1093. case CSS::JustifyContent::SpaceAround:
  1094. space_between_items = flex_line.remaining_free_space / number_of_items;
  1095. initial_offset = space_between_items / 2.0f;
  1096. justification_is_centered = true;
  1097. break;
  1098. }
  1099. // For reverse, we use FlexRegionRenderCursor::Right
  1100. // to indicate the cursor offset is the end and render backwards
  1101. // Otherwise the cursor offset is the 'start' of the region or initial offset
  1102. CSSPixels cursor_offset = initial_offset;
  1103. auto place_item = [&](FlexItem& item, bool is_first_item, bool is_last_item) {
  1104. // NOTE: For centered justifications (`center` and `space-around`) we ignore any margin
  1105. // before the first item, and after the last item.
  1106. auto item_margin_before = item.margins.main_before;
  1107. auto item_margin_after = item.margins.main_after;
  1108. if (justification_is_centered) {
  1109. if (is_first_item)
  1110. item_margin_before = 0;
  1111. if (is_last_item)
  1112. item_margin_after = 0;
  1113. }
  1114. auto amount_of_main_size_used = item.main_size.value()
  1115. + item_margin_before
  1116. + item.borders.main_before
  1117. + item.padding.main_before
  1118. + item_margin_after
  1119. + item.borders.main_after
  1120. + item.padding.main_after
  1121. + space_between_items;
  1122. if (is_direction_reverse()) {
  1123. item.main_offset = cursor_offset - item.main_size.value() - item_margin_after - item.borders.main_after - item.padding.main_after;
  1124. cursor_offset -= amount_of_main_size_used;
  1125. } else if (flex_region_render_cursor == FlexRegionRenderCursor::Right) {
  1126. cursor_offset -= amount_of_main_size_used;
  1127. item.main_offset = cursor_offset + item_margin_before + item.borders.main_before + item.padding.main_before;
  1128. } else {
  1129. item.main_offset = cursor_offset + item_margin_before + item.borders.main_before + item.padding.main_before;
  1130. cursor_offset += amount_of_main_size_used;
  1131. }
  1132. };
  1133. if (is_direction_reverse() || flex_region_render_cursor == FlexRegionRenderCursor::Right) {
  1134. for (ssize_t i = flex_line.items.size() - 1; i >= 0; --i) {
  1135. auto& item = flex_line.items[i];
  1136. place_item(*item, i == static_cast<ssize_t>(flex_line.items.size()) - 1, i == 0);
  1137. }
  1138. } else {
  1139. for (size_t i = 0; i < flex_line.items.size(); ++i) {
  1140. auto& item = flex_line.items[i];
  1141. place_item(*item, i == 0, i == flex_line.items.size() - 1);
  1142. }
  1143. }
  1144. }
  1145. }
  1146. void FlexFormattingContext::dump_items() const
  1147. {
  1148. 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());
  1149. for (size_t i = 0; i < m_flex_lines.size(); ++i) {
  1150. dbgln("{} flex-line #{}:", flex_container().debug_description(), i);
  1151. for (size_t j = 0; j < m_flex_lines[i].items.size(); ++j) {
  1152. auto& item = *m_flex_lines[i].items[j];
  1153. dbgln("{} flex-item #{}: {} (main:{}, cross:{})", flex_container().debug_description(), j, item.box.debug_description(), item.main_size.value_or(-1), item.cross_size.value_or(-1));
  1154. }
  1155. }
  1156. }
  1157. CSS::AlignItems FlexFormattingContext::alignment_for_item(Box const& box) const
  1158. {
  1159. switch (box.computed_values().align_self()) {
  1160. case CSS::AlignSelf::Auto:
  1161. return flex_container().computed_values().align_items();
  1162. case CSS::AlignSelf::Normal:
  1163. return CSS::AlignItems::Normal;
  1164. case CSS::AlignSelf::SelfStart:
  1165. return CSS::AlignItems::SelfStart;
  1166. case CSS::AlignSelf::SelfEnd:
  1167. return CSS::AlignItems::SelfEnd;
  1168. case CSS::AlignSelf::FlexStart:
  1169. return CSS::AlignItems::FlexStart;
  1170. case CSS::AlignSelf::FlexEnd:
  1171. return CSS::AlignItems::FlexEnd;
  1172. case CSS::AlignSelf::Center:
  1173. return CSS::AlignItems::Center;
  1174. case CSS::AlignSelf::Baseline:
  1175. return CSS::AlignItems::Baseline;
  1176. case CSS::AlignSelf::Stretch:
  1177. return CSS::AlignItems::Stretch;
  1178. case CSS::AlignSelf::Safe:
  1179. return CSS::AlignItems::Safe;
  1180. case CSS::AlignSelf::Unsafe:
  1181. return CSS::AlignItems::Unsafe;
  1182. default:
  1183. VERIFY_NOT_REACHED();
  1184. }
  1185. }
  1186. void FlexFormattingContext::align_all_flex_items_along_the_cross_axis()
  1187. {
  1188. // FIXME: Take better care of margins
  1189. for (auto& flex_line : m_flex_lines) {
  1190. for (auto* flex_item : flex_line.items) {
  1191. CSSPixels half_line_size = flex_line.cross_size / 2.0f;
  1192. switch (alignment_for_item(flex_item->box)) {
  1193. case CSS::AlignItems::Baseline:
  1194. // FIXME: Implement this
  1195. // Fallthrough
  1196. case CSS::AlignItems::FlexStart:
  1197. case CSS::AlignItems::Stretch:
  1198. flex_item->cross_offset = -half_line_size + flex_item->margins.cross_before + flex_item->borders.cross_before + flex_item->padding.cross_before;
  1199. break;
  1200. case CSS::AlignItems::FlexEnd:
  1201. flex_item->cross_offset = half_line_size - flex_item->cross_size.value() - flex_item->margins.cross_after - flex_item->borders.cross_after - flex_item->padding.cross_after;
  1202. break;
  1203. case CSS::AlignItems::Center:
  1204. flex_item->cross_offset = -(flex_item->cross_size.value() / 2.0f);
  1205. break;
  1206. default:
  1207. break;
  1208. }
  1209. }
  1210. }
  1211. }
  1212. // https://www.w3.org/TR/css-flexbox-1/#algo-cross-container
  1213. void FlexFormattingContext::determine_flex_container_used_cross_size()
  1214. {
  1215. CSSPixels cross_size = 0;
  1216. if (has_definite_cross_size(flex_container())) {
  1217. // Flex container has definite cross size: easy-peasy.
  1218. cross_size = specified_cross_size(flex_container());
  1219. } else {
  1220. // Flex container has indefinite cross size.
  1221. auto cross_size_value = is_row_layout() ? flex_container().computed_values().height() : flex_container().computed_values().width();
  1222. if (cross_size_value.is_auto() || cross_size_value.contains_percentage()) {
  1223. // If a content-based cross size is needed, use the sum of the flex lines' cross sizes.
  1224. CSSPixels sum_of_flex_lines_cross_sizes = 0;
  1225. for (auto& flex_line : m_flex_lines) {
  1226. sum_of_flex_lines_cross_sizes += flex_line.cross_size;
  1227. }
  1228. cross_size = sum_of_flex_lines_cross_sizes;
  1229. if (cross_size_value.contains_percentage()) {
  1230. // FIXME: Handle percentage values here! Right now we're just treating them as "auto"
  1231. }
  1232. } else {
  1233. // Otherwise, resolve the indefinite size at this point.
  1234. cross_size = cross_size_value.resolved(flex_container(), CSS::Length::make_px(specified_cross_size(*flex_container().containing_block()))).to_px(flex_container());
  1235. }
  1236. }
  1237. auto const& computed_min_size = this->computed_cross_min_size(flex_container());
  1238. auto const& computed_max_size = this->computed_cross_max_size(flex_container());
  1239. auto cross_min_size = (!computed_min_size.is_auto() && !computed_min_size.contains_percentage()) ? specified_cross_min_size(flex_container()) : 0;
  1240. auto cross_max_size = (!computed_max_size.is_none() && !computed_max_size.contains_percentage()) ? specified_cross_max_size(flex_container()) : INFINITY;
  1241. set_cross_size(flex_container(), css_clamp(cross_size, cross_min_size, cross_max_size));
  1242. }
  1243. // https://www.w3.org/TR/css-flexbox-1/#algo-line-align
  1244. void FlexFormattingContext::align_all_flex_lines()
  1245. {
  1246. if (m_flex_lines.is_empty())
  1247. return;
  1248. // FIXME: Support reverse
  1249. CSSPixels cross_size_of_flex_container = specified_cross_size(flex_container());
  1250. if (is_single_line()) {
  1251. // For single-line flex containers, we only need to center the line along the cross axis.
  1252. auto& flex_line = m_flex_lines[0];
  1253. CSSPixels center_of_line = cross_size_of_flex_container / 2.0f;
  1254. for (auto* flex_item : flex_line.items) {
  1255. flex_item->cross_offset += center_of_line;
  1256. }
  1257. } else {
  1258. CSSPixels sum_of_flex_line_cross_sizes = 0;
  1259. for (auto& line : m_flex_lines)
  1260. sum_of_flex_line_cross_sizes += line.cross_size;
  1261. CSSPixels start_of_current_line = 0;
  1262. CSSPixels gap_size = 0;
  1263. switch (flex_container().computed_values().align_content()) {
  1264. case CSS::AlignContent::FlexStart:
  1265. start_of_current_line = 0;
  1266. break;
  1267. case CSS::AlignContent::FlexEnd:
  1268. start_of_current_line = cross_size_of_flex_container - sum_of_flex_line_cross_sizes;
  1269. break;
  1270. case CSS::AlignContent::Center:
  1271. start_of_current_line = (cross_size_of_flex_container / 2) - (sum_of_flex_line_cross_sizes / 2);
  1272. break;
  1273. case CSS::AlignContent::SpaceBetween: {
  1274. start_of_current_line = 0;
  1275. auto leftover_free_space = cross_size_of_flex_container - sum_of_flex_line_cross_sizes;
  1276. if (leftover_free_space >= 0) {
  1277. int gap_count = m_flex_lines.size() - 1;
  1278. gap_size = leftover_free_space / gap_count;
  1279. }
  1280. break;
  1281. }
  1282. case CSS::AlignContent::SpaceAround: {
  1283. auto leftover_free_space = cross_size_of_flex_container - sum_of_flex_line_cross_sizes;
  1284. if (leftover_free_space < 0) {
  1285. // If the leftover free-space is negative this value is identical to center.
  1286. start_of_current_line = (cross_size_of_flex_container / 2) - (sum_of_flex_line_cross_sizes / 2);
  1287. break;
  1288. }
  1289. gap_size = leftover_free_space / m_flex_lines.size();
  1290. // The spacing between the first/last lines and the flex container edges is half the size of the spacing between flex lines.
  1291. start_of_current_line = gap_size / 2;
  1292. break;
  1293. }
  1294. case CSS::AlignContent::Stretch:
  1295. start_of_current_line = 0;
  1296. break;
  1297. }
  1298. for (auto& flex_line : m_flex_lines) {
  1299. CSSPixels center_of_current_line = start_of_current_line + (flex_line.cross_size / 2);
  1300. for (auto* flex_item : flex_line.items) {
  1301. flex_item->cross_offset += center_of_current_line;
  1302. }
  1303. start_of_current_line += flex_line.cross_size + gap_size;
  1304. }
  1305. }
  1306. }
  1307. void FlexFormattingContext::copy_dimensions_from_flex_items_to_boxes()
  1308. {
  1309. for (auto& flex_item : m_flex_items) {
  1310. auto const& box = flex_item.box;
  1311. auto& box_state = m_state.get_mutable(box);
  1312. box_state.padding_left = box.computed_values().padding().left().resolved(box, CSS::Length::make_px(m_flex_container_state.content_width())).to_px(box);
  1313. box_state.padding_right = box.computed_values().padding().right().resolved(box, CSS::Length::make_px(m_flex_container_state.content_width())).to_px(box);
  1314. box_state.padding_top = box.computed_values().padding().top().resolved(box, CSS::Length::make_px(m_flex_container_state.content_width())).to_px(box);
  1315. box_state.padding_bottom = box.computed_values().padding().bottom().resolved(box, CSS::Length::make_px(m_flex_container_state.content_width())).to_px(box);
  1316. box_state.margin_left = box.computed_values().margin().left().resolved(box, CSS::Length::make_px(m_flex_container_state.content_width())).to_px(box);
  1317. box_state.margin_right = box.computed_values().margin().right().resolved(box, CSS::Length::make_px(m_flex_container_state.content_width())).to_px(box);
  1318. box_state.margin_top = box.computed_values().margin().top().resolved(box, CSS::Length::make_px(m_flex_container_state.content_width())).to_px(box);
  1319. box_state.margin_bottom = box.computed_values().margin().bottom().resolved(box, CSS::Length::make_px(m_flex_container_state.content_width())).to_px(box);
  1320. box_state.border_left = box.computed_values().border_left().width;
  1321. box_state.border_right = box.computed_values().border_right().width;
  1322. box_state.border_top = box.computed_values().border_top().width;
  1323. box_state.border_bottom = box.computed_values().border_bottom().width;
  1324. set_main_size(box, flex_item.main_size.value());
  1325. set_cross_size(box, flex_item.cross_size.value());
  1326. set_offset(box, flex_item.main_offset, flex_item.cross_offset);
  1327. }
  1328. }
  1329. // https://drafts.csswg.org/css-flexbox-1/#intrinsic-sizes
  1330. void FlexFormattingContext::determine_intrinsic_size_of_flex_container()
  1331. {
  1332. if (m_available_space_for_flex_container->main.is_intrinsic_sizing_constraint()) {
  1333. CSSPixels main_size = calculate_intrinsic_main_size_of_flex_container();
  1334. set_main_size(flex_container(), main_size);
  1335. }
  1336. if (m_available_space_for_items->cross.is_intrinsic_sizing_constraint()) {
  1337. CSSPixels cross_size = calculate_intrinsic_cross_size_of_flex_container();
  1338. set_cross_size(flex_container(), cross_size);
  1339. }
  1340. }
  1341. // https://drafts.csswg.org/css-flexbox-1/#intrinsic-main-sizes
  1342. CSSPixels FlexFormattingContext::calculate_intrinsic_main_size_of_flex_container()
  1343. {
  1344. // The min-content main size of a single-line flex container is calculated identically to the max-content main size,
  1345. // except that the flex items’ min-content contributions are used instead of their max-content contributions.
  1346. // 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.
  1347. if (!is_single_line() && m_available_space_for_items->main.is_min_content()) {
  1348. CSSPixels largest_contribution = 0;
  1349. for (auto const& flex_item : m_flex_items) {
  1350. // FIXME: Skip collapsed flex items.
  1351. largest_contribution = max(largest_contribution, calculate_main_min_content_contribution(flex_item));
  1352. }
  1353. return largest_contribution;
  1354. }
  1355. // The max-content main size of a flex container is, fundamentally, the smallest size the flex container
  1356. // can take such that when flex layout is run with that container size, each flex item ends up at least
  1357. // as large as its max-content contribution, to the extent allowed by the items’ flexibility.
  1358. // It is calculated, considering only non-collapsed flex items, by:
  1359. // 1. For each flex item, subtract its outer flex base size from its max-content contribution size.
  1360. // If that result is positive, divide it by the item’s flex grow factor if the flex grow factor is ≥ 1,
  1361. // or multiply it by the flex grow factor if the flex grow factor is < 1; if the result is negative,
  1362. // divide it by the item’s scaled flex shrink factor (if dividing by zero, treat the result as negative infinity).
  1363. // This is the item’s desired flex fraction.
  1364. for (auto& flex_item : m_flex_items) {
  1365. CSSPixels contribution = 0;
  1366. if (m_available_space_for_items->main.is_min_content())
  1367. contribution = calculate_main_min_content_contribution(flex_item);
  1368. else if (m_available_space_for_items->main.is_max_content())
  1369. contribution = calculate_main_max_content_contribution(flex_item);
  1370. CSSPixels 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;
  1371. CSSPixels result = contribution - outer_flex_base_size;
  1372. if (result > 0) {
  1373. if (flex_item.box.computed_values().flex_grow() >= 1) {
  1374. result /= flex_item.box.computed_values().flex_grow();
  1375. } else {
  1376. result *= flex_item.box.computed_values().flex_grow();
  1377. }
  1378. } else if (result < 0) {
  1379. if (flex_item.scaled_flex_shrink_factor == 0)
  1380. result = -INFINITY;
  1381. else
  1382. result /= flex_item.scaled_flex_shrink_factor;
  1383. }
  1384. flex_item.desired_flex_fraction = result.value();
  1385. }
  1386. // 2. Place all flex items into lines of infinite length.
  1387. m_flex_lines.clear();
  1388. if (!m_flex_items.is_empty())
  1389. m_flex_lines.append(FlexLine {});
  1390. for (auto& flex_item : m_flex_items) {
  1391. // FIXME: Honor breaking requests.
  1392. m_flex_lines.last().items.append(&flex_item);
  1393. }
  1394. // Within each line, find the greatest (most positive) desired flex fraction among all the flex items.
  1395. // This is the line’s chosen flex fraction.
  1396. for (auto& flex_line : m_flex_lines) {
  1397. float greatest_desired_flex_fraction = 0;
  1398. float sum_of_flex_grow_factors = 0;
  1399. float sum_of_flex_shrink_factors = 0;
  1400. for (auto& flex_item : flex_line.items) {
  1401. greatest_desired_flex_fraction = max(greatest_desired_flex_fraction, flex_item->desired_flex_fraction);
  1402. sum_of_flex_grow_factors += flex_item->box.computed_values().flex_grow();
  1403. sum_of_flex_shrink_factors += flex_item->box.computed_values().flex_shrink();
  1404. }
  1405. float chosen_flex_fraction = greatest_desired_flex_fraction;
  1406. // 3. If the chosen flex fraction is positive, and the sum of the line’s flex grow factors is less than 1,
  1407. // divide the chosen flex fraction by that sum.
  1408. if (chosen_flex_fraction > 0 && sum_of_flex_grow_factors < 1)
  1409. chosen_flex_fraction /= sum_of_flex_grow_factors;
  1410. // If the chosen flex fraction is negative, and the sum of the line’s flex shrink factors is less than 1,
  1411. // multiply the chosen flex fraction by that sum.
  1412. if (chosen_flex_fraction < 0 && sum_of_flex_shrink_factors < 1)
  1413. chosen_flex_fraction *= sum_of_flex_shrink_factors;
  1414. flex_line.chosen_flex_fraction = chosen_flex_fraction;
  1415. }
  1416. auto determine_main_size = [&]() -> CSSPixels {
  1417. CSSPixels largest_sum = 0;
  1418. for (auto& flex_line : m_flex_lines) {
  1419. // 4. Add each item’s flex base size to the product of its flex grow factor (scaled flex shrink factor, if shrinking)
  1420. // and the chosen flex fraction, then clamp that result by the max main size floored by the min main size.
  1421. CSSPixels sum = 0;
  1422. for (auto& flex_item : flex_line.items) {
  1423. float product = 0;
  1424. if (flex_item->desired_flex_fraction > 0)
  1425. product = flex_line.chosen_flex_fraction * flex_item->box.computed_values().flex_grow();
  1426. else if (flex_item->desired_flex_fraction < 0)
  1427. product = flex_line.chosen_flex_fraction * flex_item->scaled_flex_shrink_factor;
  1428. auto result = flex_item->flex_base_size + product;
  1429. auto const& computed_min_size = this->computed_main_min_size(flex_item->box);
  1430. auto const& computed_max_size = this->computed_main_max_size(flex_item->box);
  1431. auto clamp_min = (!computed_min_size.is_auto() && !computed_min_size.contains_percentage()) ? specified_main_min_size(flex_item->box) : automatic_minimum_size(*flex_item);
  1432. auto clamp_max = (!computed_max_size.is_none() && !computed_max_size.contains_percentage()) ? specified_main_max_size(flex_item->box) : NumericLimits<float>::max();
  1433. result = css_clamp(result, clamp_min, clamp_max);
  1434. // NOTE: The spec doesn't mention anything about the *outer* size here, but if we don't add the margin box,
  1435. // flex items with non-zero padding/border/margin in the main axis end up overflowing the container.
  1436. result = flex_item->add_main_margin_box_sizes(result);
  1437. sum += result;
  1438. }
  1439. largest_sum = max(largest_sum, sum);
  1440. }
  1441. // 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.
  1442. return largest_sum;
  1443. };
  1444. auto main_size = determine_main_size();
  1445. set_main_size(flex_container(), main_size);
  1446. return main_size;
  1447. }
  1448. // https://drafts.csswg.org/css-flexbox-1/#intrinsic-cross-sizes
  1449. CSSPixels FlexFormattingContext::calculate_intrinsic_cross_size_of_flex_container()
  1450. {
  1451. // The min-content/max-content cross size of a single-line flex container
  1452. // is the largest min-content contribution/max-content contribution (respectively) of its flex items.
  1453. if (is_single_line()) {
  1454. auto calculate_largest_contribution = [&](bool resolve_percentage_min_max_sizes) {
  1455. CSSPixels largest_contribution = 0;
  1456. for (auto& flex_item : m_flex_items) {
  1457. CSSPixels contribution = 0;
  1458. if (m_available_space_for_items->cross.is_min_content())
  1459. contribution = calculate_cross_min_content_contribution(flex_item, resolve_percentage_min_max_sizes);
  1460. else if (m_available_space_for_items->cross.is_max_content())
  1461. contribution = calculate_cross_max_content_contribution(flex_item, resolve_percentage_min_max_sizes);
  1462. largest_contribution = max(largest_contribution, contribution);
  1463. }
  1464. return largest_contribution;
  1465. };
  1466. auto first_pass_largest_contribution = calculate_largest_contribution(false);
  1467. set_cross_size(flex_container(), first_pass_largest_contribution);
  1468. auto second_pass_largest_contribution = calculate_largest_contribution(true);
  1469. return second_pass_largest_contribution;
  1470. }
  1471. if (is_row_layout()) {
  1472. // row multi-line flex container cross-size
  1473. // The min-content/max-content cross size is the sum of the flex line cross sizes resulting from
  1474. // sizing the flex container under a cross-axis min-content constraint/max-content constraint (respectively).
  1475. // NOTE: We fall through to the ad-hoc section below.
  1476. } else {
  1477. // column multi-line flex container cross-size
  1478. // The min-content cross size is the largest min-content contribution among all of its flex items.
  1479. if (m_available_space_for_items->cross.is_min_content()) {
  1480. auto calculate_largest_contribution = [&](bool resolve_percentage_min_max_sizes) {
  1481. CSSPixels largest_contribution = 0;
  1482. for (auto& flex_item : m_flex_items) {
  1483. CSSPixels contribution = calculate_cross_min_content_contribution(flex_item, resolve_percentage_min_max_sizes);
  1484. largest_contribution = max(largest_contribution, contribution);
  1485. }
  1486. return largest_contribution;
  1487. };
  1488. auto first_pass_largest_contribution = calculate_largest_contribution(false);
  1489. set_cross_size(flex_container(), first_pass_largest_contribution);
  1490. auto second_pass_largest_contribution = calculate_largest_contribution(true);
  1491. return second_pass_largest_contribution;
  1492. }
  1493. // The max-content cross size is the sum of the flex line cross sizes resulting from
  1494. // sizing the flex container under a cross-axis max-content constraint,
  1495. // using the largest max-content cross-size contribution among the flex items
  1496. // as the available space in the cross axis for each of the flex items during layout.
  1497. // NOTE: We fall through to the ad-hoc section below.
  1498. }
  1499. // HACK: We run steps 5, 7, 9 and 11 from the main algorithm. This gives us *some* cross size information to work with.
  1500. m_flex_lines.clear();
  1501. collect_flex_items_into_flex_lines();
  1502. for (auto& flex_item : m_flex_items) {
  1503. determine_hypothetical_cross_size_of_item(flex_item, false);
  1504. }
  1505. calculate_cross_size_of_each_flex_line();
  1506. determine_used_cross_size_of_each_flex_item();
  1507. CSSPixels sum_of_flex_line_cross_sizes = 0;
  1508. for (auto& flex_line : m_flex_lines) {
  1509. sum_of_flex_line_cross_sizes += flex_line.cross_size;
  1510. }
  1511. return sum_of_flex_line_cross_sizes;
  1512. }
  1513. // https://drafts.csswg.org/css-flexbox-1/#intrinsic-item-contributions
  1514. CSSPixels FlexFormattingContext::calculate_main_min_content_contribution(FlexItem const& item) const
  1515. {
  1516. // The main-size min-content contribution of a flex item is
  1517. // the larger of its outer min-content size and outer preferred size if that is not auto,
  1518. // clamped by its min/max main size.
  1519. auto larger_size = [&] {
  1520. auto inner_min_content_size = calculate_min_content_main_size(item);
  1521. if (computed_main_size(item.box).is_auto())
  1522. return inner_min_content_size;
  1523. 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));
  1524. return max(inner_min_content_size, inner_preferred_size);
  1525. }();
  1526. auto clamp_min = has_main_min_size(item.box) ? specified_main_min_size(item.box) : automatic_minimum_size(item);
  1527. auto clamp_max = has_main_max_size(item.box) ? specified_main_max_size(item.box) : NumericLimits<float>::max();
  1528. auto clamped_inner_size = css_clamp(larger_size, clamp_min, clamp_max);
  1529. return item.add_main_margin_box_sizes(clamped_inner_size);
  1530. }
  1531. // https://drafts.csswg.org/css-flexbox-1/#intrinsic-item-contributions
  1532. CSSPixels FlexFormattingContext::calculate_main_max_content_contribution(FlexItem const& item) const
  1533. {
  1534. // The main-size max-content contribution of a flex item is
  1535. // the larger of its outer max-content size and outer preferred size if that is not auto,
  1536. // clamped by its min/max main size.
  1537. auto larger_size = [&] {
  1538. auto inner_max_content_size = calculate_max_content_main_size(item);
  1539. if (computed_main_size(item.box).is_auto())
  1540. return inner_max_content_size;
  1541. 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));
  1542. return max(inner_max_content_size, inner_preferred_size);
  1543. }();
  1544. auto clamp_min = has_main_min_size(item.box) ? specified_main_min_size(item.box) : automatic_minimum_size(item);
  1545. auto clamp_max = has_main_max_size(item.box) ? specified_main_max_size(item.box) : NumericLimits<float>::max();
  1546. auto clamped_inner_size = css_clamp(larger_size, clamp_min, clamp_max);
  1547. return item.add_main_margin_box_sizes(clamped_inner_size);
  1548. }
  1549. bool FlexFormattingContext::should_treat_main_size_as_auto(Box const& box) const
  1550. {
  1551. if (is_row_layout())
  1552. return should_treat_width_as_auto(box, m_available_space_for_items->space);
  1553. return should_treat_height_as_auto(box, m_available_space_for_items->space);
  1554. }
  1555. bool FlexFormattingContext::should_treat_cross_size_as_auto(Box const& box) const
  1556. {
  1557. if (is_row_layout())
  1558. return should_treat_height_as_auto(box, m_available_space_for_items->space);
  1559. return should_treat_width_as_auto(box, m_available_space_for_items->space);
  1560. }
  1561. CSSPixels FlexFormattingContext::calculate_cross_min_content_contribution(FlexItem const& item, bool resolve_percentage_min_max_sizes) const
  1562. {
  1563. auto size = [&] {
  1564. if (should_treat_cross_size_as_auto(item.box))
  1565. return calculate_min_content_cross_size(item);
  1566. return !is_row_layout() ? get_pixel_width(item.box, computed_cross_size(item.box)) : get_pixel_height(item.box, computed_cross_size(item.box));
  1567. }();
  1568. auto const& computed_min_size = this->computed_cross_min_size(item.box);
  1569. auto const& computed_max_size = this->computed_cross_max_size(item.box);
  1570. auto clamp_min = (!computed_min_size.is_auto() && (resolve_percentage_min_max_sizes || !computed_min_size.contains_percentage())) ? specified_cross_min_size(item.box) : 0;
  1571. auto clamp_max = (!computed_max_size.is_none() && (resolve_percentage_min_max_sizes || !computed_max_size.contains_percentage())) ? specified_cross_max_size(item.box) : NumericLimits<float>::max();
  1572. auto clamped_inner_size = css_clamp(size, clamp_min, clamp_max);
  1573. return item.add_cross_margin_box_sizes(clamped_inner_size);
  1574. }
  1575. CSSPixels FlexFormattingContext::calculate_cross_max_content_contribution(FlexItem const& item, bool resolve_percentage_min_max_sizes) const
  1576. {
  1577. auto size = [&] {
  1578. if (should_treat_cross_size_as_auto(item.box))
  1579. return calculate_max_content_cross_size(item);
  1580. return !is_row_layout() ? get_pixel_width(item.box, computed_cross_size(item.box)) : get_pixel_height(item.box, computed_cross_size(item.box));
  1581. }();
  1582. auto const& computed_min_size = this->computed_cross_min_size(item.box);
  1583. auto const& computed_max_size = this->computed_cross_max_size(item.box);
  1584. auto clamp_min = (!computed_min_size.is_auto() && (resolve_percentage_min_max_sizes || !computed_min_size.contains_percentage())) ? specified_cross_min_size(item.box) : 0;
  1585. auto clamp_max = (!computed_max_size.is_none() && (resolve_percentage_min_max_sizes || !computed_max_size.contains_percentage())) ? specified_cross_max_size(item.box) : NumericLimits<float>::max();
  1586. auto clamped_inner_size = css_clamp(size, clamp_min, clamp_max);
  1587. return item.add_cross_margin_box_sizes(clamped_inner_size);
  1588. }
  1589. CSSPixels FlexFormattingContext::calculate_min_content_main_size(FlexItem const& item) const
  1590. {
  1591. if (is_row_layout()) {
  1592. return calculate_min_content_width(item.box);
  1593. }
  1594. return calculate_min_content_height(item.box, item.cross_size.has_value() ? AvailableSize::make_definite(item.cross_size.value()) : AvailableSize::make_indefinite());
  1595. }
  1596. CSSPixels FlexFormattingContext::calculate_max_content_main_size(FlexItem const& item) const
  1597. {
  1598. if (is_row_layout()) {
  1599. return calculate_max_content_width(item.box);
  1600. }
  1601. return calculate_max_content_height(item.box, item.cross_size.has_value() ? AvailableSize::make_definite(item.cross_size.value()) : AvailableSize::make_indefinite());
  1602. }
  1603. CSSPixels FlexFormattingContext::calculate_fit_content_main_size(FlexItem const& item) const
  1604. {
  1605. return is_row_layout() ? calculate_fit_content_width(item.box, m_available_space_for_items->space)
  1606. : calculate_fit_content_height(item.box, m_available_space_for_items->space);
  1607. }
  1608. CSSPixels FlexFormattingContext::calculate_fit_content_cross_size(FlexItem const& item) const
  1609. {
  1610. return !is_row_layout() ? calculate_fit_content_width(item.box, m_available_space_for_items->space)
  1611. : calculate_fit_content_height(item.box, m_available_space_for_items->space);
  1612. }
  1613. CSSPixels FlexFormattingContext::calculate_min_content_cross_size(FlexItem const& item) const
  1614. {
  1615. if (is_row_layout()) {
  1616. return calculate_min_content_height(item.box, item.main_size.has_value() ? AvailableSize::make_definite(item.main_size.value()) : AvailableSize::make_indefinite());
  1617. }
  1618. return calculate_min_content_width(item.box);
  1619. }
  1620. CSSPixels FlexFormattingContext::calculate_max_content_cross_size(FlexItem const& item) const
  1621. {
  1622. if (is_row_layout()) {
  1623. return calculate_max_content_height(item.box, item.main_size.has_value() ? AvailableSize::make_definite(item.main_size.value()) : AvailableSize::make_indefinite());
  1624. }
  1625. return calculate_max_content_width(item.box);
  1626. }
  1627. // https://drafts.csswg.org/css-flexbox-1/#stretched
  1628. bool FlexFormattingContext::flex_item_is_stretched(FlexItem const& item) const
  1629. {
  1630. auto alignment = alignment_for_item(item.box);
  1631. if (alignment != CSS::AlignItems::Stretch)
  1632. return false;
  1633. // 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.
  1634. auto const& computed_cross_size = is_row_layout() ? item.box.computed_values().height() : item.box.computed_values().width();
  1635. return computed_cross_size.is_auto() && !item.margins.cross_before_is_auto && !item.margins.cross_after_is_auto;
  1636. }
  1637. CSS::Size const& FlexFormattingContext::computed_main_size(Box const& box) const
  1638. {
  1639. return is_row_layout() ? box.computed_values().width() : box.computed_values().height();
  1640. }
  1641. CSS::Size const& FlexFormattingContext::computed_main_min_size(Box const& box) const
  1642. {
  1643. return is_row_layout() ? box.computed_values().min_width() : box.computed_values().min_height();
  1644. }
  1645. CSS::Size const& FlexFormattingContext::computed_main_max_size(Box const& box) const
  1646. {
  1647. return is_row_layout() ? box.computed_values().max_width() : box.computed_values().max_height();
  1648. }
  1649. CSS::Size const& FlexFormattingContext::computed_cross_size(Box const& box) const
  1650. {
  1651. return !is_row_layout() ? box.computed_values().width() : box.computed_values().height();
  1652. }
  1653. CSS::Size const& FlexFormattingContext::computed_cross_min_size(Box const& box) const
  1654. {
  1655. return !is_row_layout() ? box.computed_values().min_width() : box.computed_values().min_height();
  1656. }
  1657. CSS::Size const& FlexFormattingContext::computed_cross_max_size(Box const& box) const
  1658. {
  1659. return !is_row_layout() ? box.computed_values().max_width() : box.computed_values().max_height();
  1660. }
  1661. // https://drafts.csswg.org/css-flexbox-1/#algo-cross-margins
  1662. void FlexFormattingContext::resolve_cross_axis_auto_margins()
  1663. {
  1664. for (auto& line : m_flex_lines) {
  1665. for (auto& item : line.items) {
  1666. // If a flex item has auto cross-axis margins:
  1667. if (!item->margins.cross_before_is_auto && !item->margins.cross_after_is_auto)
  1668. continue;
  1669. // If its outer cross size (treating those auto margins as zero) is less than the cross size of its flex line,
  1670. // distribute the difference in those sizes equally to the auto margins.
  1671. auto outer_cross_size = item->cross_size.value() + item->padding.cross_before + item->padding.cross_after + item->borders.cross_before + item->borders.cross_after;
  1672. if (outer_cross_size < line.cross_size) {
  1673. CSSPixels remainder = line.cross_size - outer_cross_size;
  1674. if (item->margins.cross_before_is_auto && item->margins.cross_after_is_auto) {
  1675. item->margins.cross_before = remainder / 2.0f;
  1676. item->margins.cross_after = remainder / 2.0f;
  1677. } else if (item->margins.cross_before_is_auto) {
  1678. item->margins.cross_before = remainder;
  1679. } else {
  1680. item->margins.cross_after = remainder;
  1681. }
  1682. } else {
  1683. // FIXME: Otherwise, if the block-start or inline-start margin (whichever is in the cross axis) is auto, set it to zero.
  1684. // Set the opposite margin so that the outer cross size of the item equals the cross size of its flex line.
  1685. }
  1686. }
  1687. }
  1688. }
  1689. // https://drafts.csswg.org/css-flexbox-1/#algo-line-stretch
  1690. void FlexFormattingContext::handle_align_content_stretch()
  1691. {
  1692. // If the flex container has a definite cross size,
  1693. if (!has_definite_cross_size(flex_container()))
  1694. return;
  1695. // align-content is stretch,
  1696. if (flex_container().computed_values().align_content() != CSS::AlignContent::Stretch)
  1697. return;
  1698. // and the sum of the flex lines' cross sizes is less than the flex container’s inner cross size,
  1699. CSSPixels sum_of_flex_line_cross_sizes = 0;
  1700. for (auto& line : m_flex_lines)
  1701. sum_of_flex_line_cross_sizes += line.cross_size;
  1702. if (sum_of_flex_line_cross_sizes >= specified_cross_size(flex_container()))
  1703. return;
  1704. // increase the cross size of each flex line by equal amounts
  1705. // such that the sum of their cross sizes exactly equals the flex container’s inner cross size.
  1706. CSSPixels remainder = specified_cross_size(flex_container()) - sum_of_flex_line_cross_sizes;
  1707. CSSPixels extra_per_line = remainder / m_flex_lines.size();
  1708. for (auto& line : m_flex_lines)
  1709. line.cross_size += extra_per_line;
  1710. }
  1711. // https://drafts.csswg.org/css-flexbox-1/#abspos-items
  1712. CSSPixelPoint FlexFormattingContext::calculate_static_position(Box const& box) const
  1713. {
  1714. // The cross-axis edges of the static-position rectangle of an absolutely-positioned child
  1715. // of a flex container are the content edges of the flex container.
  1716. CSSPixels cross_offset = 0;
  1717. CSSPixels half_line_size = specified_cross_size(flex_container()) / 2;
  1718. auto const& box_state = m_state.get(box);
  1719. CSSPixels cross_margin_before = is_row_layout() ? box_state.margin_top : box_state.margin_left;
  1720. CSSPixels cross_margin_after = is_row_layout() ? box_state.margin_bottom : box_state.margin_right;
  1721. CSSPixels cross_border_before = is_row_layout() ? box_state.border_top : box_state.border_left;
  1722. CSSPixels cross_border_after = is_row_layout() ? box_state.border_bottom : box_state.border_right;
  1723. CSSPixels cross_padding_before = is_row_layout() ? box_state.padding_top : box_state.padding_left;
  1724. CSSPixels cross_padding_after = is_row_layout() ? box_state.padding_bottom : box_state.padding_right;
  1725. switch (alignment_for_item(box)) {
  1726. case CSS::AlignItems::Baseline:
  1727. // FIXME: Implement this
  1728. // Fallthrough
  1729. case CSS::AlignItems::FlexStart:
  1730. case CSS::AlignItems::Stretch:
  1731. cross_offset = -half_line_size + cross_margin_before + cross_border_before + cross_padding_before;
  1732. break;
  1733. case CSS::AlignItems::FlexEnd:
  1734. cross_offset = half_line_size - specified_cross_size(box) - cross_margin_after - cross_border_after - cross_padding_after;
  1735. break;
  1736. case CSS::AlignItems::Center:
  1737. cross_offset = -(specified_cross_size(box) / 2.0f);
  1738. break;
  1739. default:
  1740. break;
  1741. }
  1742. cross_offset += specified_cross_size(flex_container()) / 2.0f;
  1743. // The main-axis edges of the static-position rectangle are where the margin edges of the child
  1744. // would be positioned if it were the sole flex item in the flex container,
  1745. // assuming both the child and the flex container were fixed-size boxes of their used size.
  1746. // (For this purpose, auto margins are treated as zero.
  1747. bool pack_from_end = true;
  1748. CSSPixels main_offset = 0;
  1749. switch (flex_container().computed_values().justify_content()) {
  1750. case CSS::JustifyContent::Start:
  1751. if (is_direction_reverse()) {
  1752. main_offset = specified_main_size(flex_container());
  1753. } else {
  1754. main_offset = 0;
  1755. }
  1756. break;
  1757. case CSS::JustifyContent::End:
  1758. if (is_direction_reverse()) {
  1759. main_offset = 0;
  1760. } else {
  1761. main_offset = specified_main_size(flex_container());
  1762. }
  1763. break;
  1764. case CSS::JustifyContent::FlexStart:
  1765. if (is_direction_reverse()) {
  1766. pack_from_end = false;
  1767. main_offset = specified_main_size(flex_container());
  1768. } else {
  1769. main_offset = 0;
  1770. }
  1771. break;
  1772. case CSS::JustifyContent::FlexEnd:
  1773. if (is_direction_reverse()) {
  1774. main_offset = 0;
  1775. } else {
  1776. pack_from_end = false;
  1777. main_offset = specified_main_size(flex_container());
  1778. }
  1779. break;
  1780. case CSS::JustifyContent::SpaceBetween:
  1781. main_offset = 0;
  1782. break;
  1783. case CSS::JustifyContent::Center:
  1784. case CSS::JustifyContent::SpaceAround:
  1785. main_offset = specified_main_size(flex_container()) / 2.0f - specified_main_size(box) / 2.0f;
  1786. break;
  1787. }
  1788. // NOTE: Next, we add the flex container's padding since abspos boxes are placed relative to the padding edge
  1789. // of their abspos containing block.
  1790. if (pack_from_end) {
  1791. main_offset += is_row_layout() ? m_flex_container_state.padding_left : m_flex_container_state.padding_top;
  1792. } else {
  1793. main_offset += is_row_layout() ? m_flex_container_state.padding_right : m_flex_container_state.padding_bottom;
  1794. }
  1795. if (!pack_from_end)
  1796. main_offset += specified_main_size(flex_container()) - specified_main_size(box);
  1797. auto static_position_offset = is_row_layout() ? CSSPixelPoint { main_offset, cross_offset } : CSSPixelPoint { cross_offset, main_offset };
  1798. auto absolute_position_of_flex_container = absolute_content_rect(flex_container(), m_state).location();
  1799. auto absolute_position_of_abspos_containing_block = absolute_content_rect(*box.containing_block(), m_state).location();
  1800. auto diff = absolute_position_of_flex_container - absolute_position_of_abspos_containing_block;
  1801. return static_position_offset + diff;
  1802. }
  1803. }