FormattingContext.cpp 59 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036103710381039104010411042104310441045104610471048104910501051105210531054105510561057105810591060106110621063106410651066106710681069107010711072107310741075107610771078107910801081108210831084108510861087108810891090109110921093109410951096109710981099110011011102110311041105110611071108110911101111111211131114111511161117111811191120112111221123112411251126112711281129113011311132113311341135113611371138113911401141114211431144114511461147114811491150115111521153115411551156115711581159116011611162116311641165116611671168116911701171117211731174117511761177117811791180118111821183118411851186118711881189119011911192119311941195119611971198119912001201120212031204120512061207120812091210121112121213121412151216121712181219122012211222122312241225122612271228
  1. /*
  2. * Copyright (c) 2020-2022, Andreas Kling <kling@serenityos.org>
  3. *
  4. * SPDX-License-Identifier: BSD-2-Clause
  5. */
  6. #include <LibWeb/Dump.h>
  7. #include <LibWeb/Layout/BlockFormattingContext.h>
  8. #include <LibWeb/Layout/Box.h>
  9. #include <LibWeb/Layout/FlexFormattingContext.h>
  10. #include <LibWeb/Layout/FormattingContext.h>
  11. #include <LibWeb/Layout/GridFormattingContext.h>
  12. #include <LibWeb/Layout/InitialContainingBlock.h>
  13. #include <LibWeb/Layout/ReplacedBox.h>
  14. #include <LibWeb/Layout/SVGFormattingContext.h>
  15. #include <LibWeb/Layout/SVGSVGBox.h>
  16. #include <LibWeb/Layout/TableBox.h>
  17. #include <LibWeb/Layout/TableCellBox.h>
  18. #include <LibWeb/Layout/TableFormattingContext.h>
  19. namespace Web::Layout {
  20. FormattingContext::FormattingContext(Type type, LayoutState& state, Box const& context_box, FormattingContext* parent)
  21. : m_type(type)
  22. , m_parent(parent)
  23. , m_context_box(context_box)
  24. , m_state(state)
  25. {
  26. }
  27. FormattingContext::~FormattingContext() = default;
  28. // https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Block_formatting_context
  29. bool FormattingContext::creates_block_formatting_context(Box const& box)
  30. {
  31. // NOTE: This function uses MDN as a reference, not because it's authoritative,
  32. // but because they've gathered all the conditions in one convenient location.
  33. // The root element of the document (<html>).
  34. if (box.is_root_element())
  35. return true;
  36. // Floats (elements where float isn't none).
  37. if (box.is_floating())
  38. return true;
  39. // Absolutely positioned elements (elements where position is absolute or fixed).
  40. if (box.is_absolutely_positioned())
  41. return true;
  42. // Inline-blocks (elements with display: inline-block).
  43. if (box.display().is_inline_block())
  44. return true;
  45. // Table cells (elements with display: table-cell, which is the default for HTML table cells).
  46. if (box.display().is_table_cell())
  47. return true;
  48. // Table captions (elements with display: table-caption, which is the default for HTML table captions).
  49. if (box.display().is_table_caption())
  50. return true;
  51. // FIXME: Anonymous table cells implicitly created by the elements with display: table, table-row, table-row-group, table-header-group, table-footer-group
  52. // (which is the default for HTML tables, table rows, table bodies, table headers, and table footers, respectively), or inline-table.
  53. // Block elements where overflow has a value other than visible and clip.
  54. CSS::Overflow overflow_x = box.computed_values().overflow_x();
  55. if ((overflow_x != CSS::Overflow::Visible) && (overflow_x != CSS::Overflow::Clip))
  56. return true;
  57. CSS::Overflow overflow_y = box.computed_values().overflow_y();
  58. if ((overflow_y != CSS::Overflow::Visible) && (overflow_y != CSS::Overflow::Clip))
  59. return true;
  60. // display: flow-root.
  61. if (box.display().is_flow_root_inside())
  62. return true;
  63. // FIXME: Elements with contain: layout, content, or paint.
  64. if (box.parent()) {
  65. auto parent_display = box.parent()->display();
  66. // Flex items (direct children of the element with display: flex or inline-flex) if they are neither flex nor grid nor table containers themselves.
  67. if (parent_display.is_flex_inside()) {
  68. if (!box.display().is_flex_inside())
  69. return true;
  70. }
  71. // Grid items (direct children of the element with display: grid or inline-grid) if they are neither flex nor grid nor table containers themselves.
  72. if (parent_display.is_grid_inside()) {
  73. if (!box.display().is_grid_inside()) {
  74. return true;
  75. }
  76. }
  77. }
  78. // FIXME: Multicol containers (elements where column-count or column-width isn't auto, including elements with column-count: 1).
  79. // FIXME: column-span: all should always create a new formatting context, even when the column-span: all element isn't contained by a multicol container (Spec change, Chrome bug).
  80. return false;
  81. }
  82. OwnPtr<FormattingContext> FormattingContext::create_independent_formatting_context_if_needed(LayoutState& state, Box const& child_box)
  83. {
  84. if (child_box.is_replaced_box() && !child_box.can_have_children()) {
  85. // NOTE: This is a bit strange.
  86. // Basically, we create a pretend formatting context for replaced elements that does nothing.
  87. // This allows other formatting contexts to treat them like elements that actually need inside layout
  88. // without having separate code to handle replaced elements.
  89. // FIXME: Find a better abstraction for this.
  90. struct ReplacedFormattingContext : public FormattingContext {
  91. ReplacedFormattingContext(LayoutState& state, Box const& box)
  92. : FormattingContext(Type::Block, state, box)
  93. {
  94. }
  95. virtual float automatic_content_height() const override { return 0; };
  96. virtual void run(Box const&, LayoutMode, AvailableSpace const&) override { }
  97. };
  98. return make<ReplacedFormattingContext>(state, child_box);
  99. }
  100. if (!child_box.can_have_children())
  101. return {};
  102. auto child_display = child_box.display();
  103. if (is<SVGSVGBox>(child_box))
  104. return make<SVGFormattingContext>(state, child_box, this);
  105. if (child_display.is_flex_inside())
  106. return make<FlexFormattingContext>(state, child_box, this);
  107. if (creates_block_formatting_context(child_box))
  108. return make<BlockFormattingContext>(state, verify_cast<BlockContainer>(child_box), this);
  109. if (child_display.is_table_inside())
  110. return make<TableFormattingContext>(state, verify_cast<TableBox>(child_box), this);
  111. if (child_display.is_grid_inside()) {
  112. return make<GridFormattingContext>(state, verify_cast<BlockContainer>(child_box), this);
  113. }
  114. VERIFY(is_block_formatting_context());
  115. VERIFY(!child_box.children_are_inline());
  116. // The child box is a block container that doesn't create its own BFC.
  117. // It will be formatted by this BFC.
  118. if (!child_display.is_flow_inside()) {
  119. dbgln("FIXME: Child box doesn't create BFC, but inside is also not flow! display={}", child_display.to_string());
  120. // HACK: Instead of crashing, create a dummy formatting context that does nothing.
  121. // FIXME: Remove this once it's no longer needed. It currently swallows problem with standalone
  122. // table-related boxes that don't get fixed up by CSS anonymous table box generation.
  123. struct DummyFormattingContext : public FormattingContext {
  124. DummyFormattingContext(LayoutState& state, Box const& box)
  125. : FormattingContext(Type::Block, state, box)
  126. {
  127. }
  128. virtual float automatic_content_height() const override { return 0; };
  129. virtual void run(Box const&, LayoutMode, AvailableSpace const&) override { }
  130. };
  131. return make<DummyFormattingContext>(state, child_box);
  132. }
  133. VERIFY(child_box.is_block_container());
  134. VERIFY(child_display.is_flow_inside());
  135. return {};
  136. }
  137. OwnPtr<FormattingContext> FormattingContext::layout_inside(Box const& child_box, LayoutMode layout_mode, AvailableSpace const& available_space)
  138. {
  139. {
  140. // OPTIMIZATION: If we're doing intrinsic sizing and `child_box` has definite size in both axes,
  141. // we don't need to layout its insides. The size is resolvable without learning
  142. // the metrics of whatever's inside the box.
  143. auto const& used_values = m_state.get(child_box);
  144. if (layout_mode == LayoutMode::IntrinsicSizing
  145. && used_values.width_constraint == SizeConstraint::None
  146. && used_values.height_constraint == SizeConstraint::None
  147. && used_values.has_definite_width()
  148. && used_values.has_definite_height()) {
  149. return nullptr;
  150. }
  151. }
  152. if (!child_box.can_have_children())
  153. return {};
  154. auto independent_formatting_context = create_independent_formatting_context_if_needed(m_state, child_box);
  155. if (independent_formatting_context)
  156. independent_formatting_context->run(child_box, layout_mode, available_space);
  157. else
  158. run(child_box, layout_mode, available_space);
  159. return independent_formatting_context;
  160. }
  161. float FormattingContext::greatest_child_width(Box const& box)
  162. {
  163. float max_width = 0;
  164. if (box.children_are_inline()) {
  165. for (auto& line_box : m_state.get(verify_cast<BlockContainer>(box)).line_boxes) {
  166. max_width = max(max_width, line_box.width());
  167. }
  168. } else {
  169. box.for_each_child_of_type<Box>([&](Box const& child) {
  170. if (!child.is_absolutely_positioned())
  171. max_width = max(max_width, m_state.get(child).border_box_width());
  172. });
  173. }
  174. return max_width;
  175. }
  176. FormattingContext::ShrinkToFitResult FormattingContext::calculate_shrink_to_fit_widths(Box const& box)
  177. {
  178. return {
  179. .preferred_width = calculate_max_content_width(box),
  180. .preferred_minimum_width = calculate_min_content_width(box),
  181. };
  182. }
  183. static Gfx::FloatSize solve_replaced_size_constraint(LayoutState const& state, float w, float h, ReplacedBox const& box)
  184. {
  185. // 10.4 Minimum and maximum widths: 'min-width' and 'max-width'
  186. auto const& containing_block = *box.containing_block();
  187. auto const& containing_block_state = state.get(containing_block);
  188. auto width_of_containing_block = CSS::Length::make_px(containing_block_state.content_width());
  189. auto height_of_containing_block = CSS::Length::make_px(containing_block_state.content_height());
  190. auto specified_min_width = box.computed_values().min_width().is_auto() ? 0 : box.computed_values().min_width().resolved(box, width_of_containing_block).to_px(box);
  191. auto specified_max_width = box.computed_values().max_width().is_none() ? w : box.computed_values().max_width().resolved(box, width_of_containing_block).to_px(box);
  192. auto specified_min_height = box.computed_values().min_height().is_auto() ? 0 : box.computed_values().min_height().resolved(box, height_of_containing_block).to_px(box);
  193. auto specified_max_height = box.computed_values().max_height().is_none() ? h : box.computed_values().max_height().resolved(box, height_of_containing_block).to_px(box);
  194. auto min_width = min(specified_min_width, specified_max_width);
  195. auto max_width = max(specified_min_width, specified_max_width);
  196. auto min_height = min(specified_min_height, specified_max_height);
  197. auto max_height = max(specified_min_height, specified_max_height);
  198. if (w > max_width)
  199. return { w, max(max_width * h / w, min_height) };
  200. if (w < min_width)
  201. return { max_width, min(min_width * h / w, max_height) };
  202. if (h > max_height)
  203. return { max(max_height * w / h, min_width), max_height };
  204. if (h < min_height)
  205. return { min(min_height * w / h, max_width), min_height };
  206. if ((w > max_width && h > max_height) && (max_width / w < max_height / h))
  207. return { max_width, max(min_height, max_width * h / w) };
  208. if ((w > max_width && h > max_height) && (max_width / w > max_height / h))
  209. return { max(min_width, max_height * w / h), max_height };
  210. if ((w < min_width && h < min_height) && (min_width / w < min_height / h))
  211. return { min(max_width, min_height * w / h), min_height };
  212. if ((w < min_width && h < min_height) && (min_width / w > min_height / h))
  213. return { min_width, min(max_height, min_width * h / w) };
  214. if (w < min_width && h > max_height)
  215. return { min_width, max_height };
  216. if (w > max_width && h < min_height)
  217. return { max_width, min_height };
  218. return { w, h };
  219. }
  220. float FormattingContext::compute_auto_height_for_block_level_element(Box const& box, AvailableSpace const& available_space) const
  221. {
  222. if (creates_block_formatting_context(box))
  223. return compute_auto_height_for_block_formatting_context_root(verify_cast<BlockContainer>(box));
  224. auto const& box_state = m_state.get(box);
  225. auto display = box.display();
  226. if (display.is_flex_inside()) {
  227. // https://drafts.csswg.org/css-flexbox-1/#algo-main-container
  228. // NOTE: The automatic block size of a block-level flex container is its max-content size.
  229. return calculate_max_content_height(box, available_space.width);
  230. }
  231. // https://www.w3.org/TR/CSS22/visudet.html#normal-block
  232. // 10.6.3 Block-level non-replaced elements in normal flow when 'overflow' computes to 'visible'
  233. // The element's height is the distance from its top content edge to the first applicable of the following:
  234. // 1. the bottom edge of the last line box, if the box establishes a inline formatting context with one or more lines
  235. if (box.children_are_inline() && !box_state.line_boxes.is_empty())
  236. return box_state.line_boxes.last().bottom();
  237. // 2. the bottom edge of the bottom (possibly collapsed) margin of its last in-flow child, if the child's bottom margin does not collapse with the element's bottom margin
  238. // FIXME: 3. the bottom border edge of the last in-flow child whose top margin doesn't collapse with the element's bottom margin
  239. if (!box.children_are_inline()) {
  240. for (auto* child_box = box.last_child_of_type<Box>(); child_box; child_box = child_box->previous_sibling_of_type<Box>()) {
  241. if (child_box->is_absolutely_positioned() || child_box->is_floating())
  242. continue;
  243. // FIXME: This is hack. If the last child is a list-item marker box, we ignore it for purposes of height calculation.
  244. // Perhaps markers should not be considered in-flow(?) Perhaps they should always be the first child of the list-item
  245. // box instead of the last child.
  246. if (child_box->is_list_item_marker_box())
  247. continue;
  248. auto const& child_box_state = m_state.get(*child_box);
  249. // Ignore anonymous block containers with no lines. These don't count as in-flow block boxes.
  250. if (child_box->is_anonymous() && child_box->is_block_container() && child_box_state.line_boxes.is_empty())
  251. continue;
  252. // FIXME: Handle margin collapsing.
  253. return max(0.0f, child_box_state.offset.y() + child_box_state.content_height() + child_box_state.margin_box_bottom());
  254. }
  255. }
  256. // 4. zero, otherwise
  257. return 0;
  258. }
  259. // https://www.w3.org/TR/CSS22/visudet.html#root-height
  260. float FormattingContext::compute_auto_height_for_block_formatting_context_root(BlockContainer const& root) const
  261. {
  262. // 10.6.7 'Auto' heights for block formatting context roots
  263. Optional<float> top;
  264. Optional<float> bottom;
  265. if (root.children_are_inline()) {
  266. // If it only has inline-level children, the height is the distance between
  267. // the top content edge and the bottom of the bottommost line box.
  268. auto const& line_boxes = m_state.get(root).line_boxes;
  269. top = 0;
  270. if (!line_boxes.is_empty())
  271. bottom = line_boxes.last().bottom();
  272. } else {
  273. // If it has block-level children, the height is the distance between
  274. // the top margin-edge of the topmost block-level child box
  275. // and the bottom margin-edge of the bottommost block-level child box.
  276. root.for_each_child_of_type<Box>([&](Layout::Box& child_box) {
  277. // Absolutely positioned children are ignored,
  278. // and relatively positioned boxes are considered without their offset.
  279. // Note that the child box may be an anonymous block box.
  280. if (child_box.is_absolutely_positioned())
  281. return IterationDecision::Continue;
  282. // FIXME: This doesn't look right.
  283. if ((root.computed_values().overflow_y() == CSS::Overflow::Visible) && child_box.is_floating())
  284. return IterationDecision::Continue;
  285. auto const& child_box_state = m_state.get(child_box);
  286. float child_box_top = child_box_state.offset.y() - child_box_state.margin_box_top();
  287. float child_box_bottom = child_box_state.offset.y() + child_box_state.content_height() + child_box_state.margin_box_bottom();
  288. if (!top.has_value() || child_box_top < top.value())
  289. top = child_box_top;
  290. if (!bottom.has_value() || child_box_bottom > bottom.value())
  291. bottom = child_box_bottom;
  292. return IterationDecision::Continue;
  293. });
  294. }
  295. // In addition, if the element has any floating descendants
  296. // whose bottom margin edge is below the element's bottom content edge,
  297. // then the height is increased to include those edges.
  298. for (auto* floating_box : m_state.get(root).floating_descendants()) {
  299. // NOTE: Floating box coordinates are relative to their own containing block,
  300. // which may or may not be the BFC root.
  301. auto margin_box = margin_box_rect_in_ancestor_coordinate_space(*floating_box, root, m_state);
  302. float floating_box_bottom_margin_edge = margin_box.bottom() + 1;
  303. if (!bottom.has_value() || floating_box_bottom_margin_edge > bottom.value())
  304. bottom = floating_box_bottom_margin_edge;
  305. }
  306. return max(0.0f, bottom.value_or(0) - top.value_or(0));
  307. }
  308. // 10.3.2 Inline, replaced elements, https://www.w3.org/TR/CSS22/visudet.html#inline-replaced-width
  309. float FormattingContext::tentative_width_for_replaced_element(LayoutState const& state, ReplacedBox const& box, CSS::Size const& computed_width, AvailableSpace const& available_space)
  310. {
  311. // Treat percentages of indefinite containing block widths as 0 (the initial width).
  312. if (computed_width.is_percentage() && !state.get(*box.containing_block()).has_definite_width())
  313. return 0;
  314. auto height_of_containing_block = CSS::Length::make_px(containing_block_height_for(box, state));
  315. auto const& computed_height = box.computed_values().height();
  316. float used_width = computed_width.resolved(box, CSS::Length::make_px(available_space.width.to_px())).to_px(box);
  317. // If 'height' and 'width' both have computed values of 'auto' and the element also has an intrinsic width,
  318. // then that intrinsic width is the used value of 'width'.
  319. if (computed_height.is_auto() && computed_width.is_auto() && box.has_intrinsic_width())
  320. return box.intrinsic_width().value();
  321. // If 'height' and 'width' both have computed values of 'auto' and the element has no intrinsic width,
  322. // but does have an intrinsic height and intrinsic ratio;
  323. // or if 'width' has a computed value of 'auto',
  324. // 'height' has some other computed value, and the element does have an intrinsic ratio; then the used value of 'width' is:
  325. //
  326. // (used height) * (intrinsic ratio)
  327. if ((computed_height.is_auto() && computed_width.is_auto() && !box.has_intrinsic_width() && box.has_intrinsic_height() && box.has_intrinsic_aspect_ratio())
  328. || (computed_width.is_auto() && !computed_height.is_auto() && box.has_intrinsic_aspect_ratio())) {
  329. return compute_height_for_replaced_element(state, box, available_space) * box.intrinsic_aspect_ratio().value();
  330. }
  331. // If 'height' and 'width' both have computed values of 'auto' and the element has an intrinsic ratio but no intrinsic height or width,
  332. // then the used value of 'width' is undefined in CSS 2.2. However, it is suggested that, if the containing block's width does not itself
  333. // depend on the replaced element's width, then the used value of 'width' is calculated from the constraint equation used for block-level,
  334. // non-replaced elements in normal flow.
  335. // Otherwise, if 'width' has a computed value of 'auto', and the element has an intrinsic width, then that intrinsic width is the used value of 'width'.
  336. if (computed_width.is_auto() && box.has_intrinsic_width())
  337. return box.intrinsic_width().value();
  338. // Otherwise, if 'width' has a computed value of 'auto', but none of the conditions above are met, then the used value of 'width' becomes 300px.
  339. // If 300px is too wide to fit the device, UAs should use the width of the largest rectangle that has a 2:1 ratio and fits the device instead.
  340. if (computed_width.is_auto())
  341. return 300;
  342. return used_width;
  343. }
  344. void FormattingContext::compute_width_for_absolutely_positioned_element(Box const& box, AvailableSpace const& available_space)
  345. {
  346. if (is<ReplacedBox>(box))
  347. compute_width_for_absolutely_positioned_replaced_element(verify_cast<ReplacedBox>(box), available_space);
  348. else
  349. compute_width_for_absolutely_positioned_non_replaced_element(box, available_space);
  350. }
  351. void FormattingContext::compute_height_for_absolutely_positioned_element(Box const& box, AvailableSpace const& available_space)
  352. {
  353. if (is<ReplacedBox>(box))
  354. compute_height_for_absolutely_positioned_replaced_element(static_cast<ReplacedBox const&>(box), available_space);
  355. else
  356. compute_height_for_absolutely_positioned_non_replaced_element(box, available_space);
  357. }
  358. float FormattingContext::compute_width_for_replaced_element(LayoutState const& state, ReplacedBox const& box, AvailableSpace const& available_space)
  359. {
  360. // 10.3.4 Block-level, replaced elements in normal flow...
  361. // 10.3.2 Inline, replaced elements
  362. auto zero_value = CSS::Length::make_px(0);
  363. auto width_of_containing_block_as_length = CSS::Length::make_px(available_space.width.to_px());
  364. auto margin_left = box.computed_values().margin().left().resolved(box, width_of_containing_block_as_length).resolved(box);
  365. auto margin_right = box.computed_values().margin().right().resolved(box, width_of_containing_block_as_length).resolved(box);
  366. // A computed value of 'auto' for 'margin-left' or 'margin-right' becomes a used value of '0'.
  367. if (margin_left.is_auto())
  368. margin_left = zero_value;
  369. if (margin_right.is_auto())
  370. margin_right = zero_value;
  371. auto computed_width = box.computed_values().width();
  372. // 1. The tentative used width is calculated (without 'min-width' and 'max-width')
  373. auto used_width = tentative_width_for_replaced_element(state, box, computed_width, available_space);
  374. // 2. The tentative used width is greater than 'max-width', the rules above are applied again,
  375. // but this time using the computed value of 'max-width' as the computed value for 'width'.
  376. auto computed_max_width = box.computed_values().max_width();
  377. if (!computed_max_width.is_none()) {
  378. if (used_width > computed_max_width.resolved(box, width_of_containing_block_as_length).to_px(box)) {
  379. used_width = tentative_width_for_replaced_element(state, box, computed_max_width, available_space);
  380. }
  381. }
  382. // 3. If the resulting width is smaller than 'min-width', the rules above are applied again,
  383. // but this time using the value of 'min-width' as the computed value for 'width'.
  384. auto computed_min_width = box.computed_values().min_width();
  385. if (!computed_min_width.is_auto()) {
  386. if (used_width < computed_min_width.resolved(box, width_of_containing_block_as_length).to_px(box)) {
  387. used_width = tentative_width_for_replaced_element(state, box, computed_min_width, available_space);
  388. }
  389. }
  390. return used_width;
  391. }
  392. // 10.6.2 Inline replaced elements, block-level replaced elements in normal flow, 'inline-block' replaced elements in normal flow and floating replaced elements
  393. // https://www.w3.org/TR/CSS22/visudet.html#inline-replaced-height
  394. float FormattingContext::tentative_height_for_replaced_element(LayoutState const& state, ReplacedBox const& box, CSS::Size const& computed_height, AvailableSpace const& available_space)
  395. {
  396. // Treat percentages of indefinite containing block heights as 0 (the initial height).
  397. if (computed_height.is_percentage() && !state.get(*box.containing_block()).has_definite_height())
  398. return 0;
  399. auto const& computed_width = box.computed_values().width();
  400. // If 'height' and 'width' both have computed values of 'auto' and the element also has
  401. // an intrinsic height, then that intrinsic height is the used value of 'height'.
  402. if (computed_width.is_auto() && computed_height.is_auto() && box.has_intrinsic_height())
  403. return box.intrinsic_height().value();
  404. // Otherwise, if 'height' has a computed value of 'auto', and the element has an intrinsic ratio then the used value of 'height' is:
  405. //
  406. // (used width) / (intrinsic ratio)
  407. if (computed_height.is_auto() && box.has_intrinsic_aspect_ratio())
  408. return compute_width_for_replaced_element(state, box, available_space) / box.intrinsic_aspect_ratio().value();
  409. // Otherwise, if 'height' has a computed value of 'auto', and the element has an intrinsic height, then that intrinsic height is the used value of 'height'.
  410. if (computed_height.is_auto() && box.has_intrinsic_height())
  411. return box.intrinsic_height().value();
  412. // Otherwise, if 'height' has a computed value of 'auto', but none of the conditions above are met,
  413. // then the used value of 'height' must be set to the height of the largest rectangle that has a 2:1 ratio, has a height not greater than 150px,
  414. // and has a width not greater than the device width.
  415. if (computed_height.is_auto())
  416. return 150;
  417. return computed_height.resolved(box, CSS::Length::make_px(available_space.height.to_px())).to_px(box);
  418. }
  419. float FormattingContext::compute_height_for_replaced_element(LayoutState const& state, ReplacedBox const& box, AvailableSpace const& available_space)
  420. {
  421. // 10.6.2 Inline replaced elements, block-level replaced elements in normal flow,
  422. // 'inline-block' replaced elements in normal flow and floating replaced elements
  423. auto width_of_containing_block_as_length = CSS::Length::make_px(available_space.width.to_px());
  424. auto height_of_containing_block_as_length = CSS::Length::make_px(available_space.height.to_px());
  425. auto computed_width = box.computed_values().width();
  426. auto computed_height = box.computed_values().height();
  427. float used_height = tentative_height_for_replaced_element(state, box, computed_height, available_space);
  428. if (computed_width.is_auto() && computed_height.is_auto() && box.has_intrinsic_aspect_ratio()) {
  429. float w = tentative_width_for_replaced_element(state, box, computed_width, available_space);
  430. float h = used_height;
  431. used_height = solve_replaced_size_constraint(state, w, h, box).height();
  432. }
  433. return used_height;
  434. }
  435. void FormattingContext::compute_width_for_absolutely_positioned_non_replaced_element(Box const& box, AvailableSpace const& available_space)
  436. {
  437. auto width_of_containing_block = available_space.width.to_px();
  438. auto width_of_containing_block_as_length = CSS::Length::make_px(width_of_containing_block);
  439. auto& computed_values = box.computed_values();
  440. auto zero_value = CSS::Length::make_px(0);
  441. auto margin_left = CSS::Length::make_auto();
  442. auto margin_right = CSS::Length::make_auto();
  443. auto const border_left = computed_values.border_left().width;
  444. auto const border_right = computed_values.border_right().width;
  445. auto const padding_left = computed_values.padding().left().resolved(box, width_of_containing_block_as_length).to_px(box);
  446. auto const padding_right = computed_values.padding().right().resolved(box, width_of_containing_block_as_length).to_px(box);
  447. auto try_compute_width = [&](auto const& a_width) {
  448. margin_left = computed_values.margin().left().resolved(box, width_of_containing_block_as_length).resolved(box);
  449. margin_right = computed_values.margin().right().resolved(box, width_of_containing_block_as_length).resolved(box);
  450. auto left = computed_values.inset().left().resolved(box, width_of_containing_block_as_length).resolved(box);
  451. auto right = computed_values.inset().right().resolved(box, width_of_containing_block_as_length).resolved(box);
  452. auto width = a_width;
  453. auto solve_for_left = [&] {
  454. return CSS::Length(width_of_containing_block - margin_left.to_px(box) - border_left - padding_left - width.to_px(box) - padding_right - border_right - margin_right.to_px(box) - right.to_px(box), CSS::Length::Type::Px);
  455. };
  456. auto solve_for_width = [&] {
  457. return CSS::Length(width_of_containing_block - left.to_px(box) - margin_left.to_px(box) - border_left - padding_left - padding_right - border_right - margin_right.to_px(box) - right.to_px(box), CSS::Length::Type::Px);
  458. };
  459. auto solve_for_right = [&] {
  460. return CSS::Length(width_of_containing_block - left.to_px(box) - margin_left.to_px(box) - border_left - padding_left - width.to_px(box) - padding_right - border_right - margin_right.to_px(box), CSS::Length::Type::Px);
  461. };
  462. // If all three of 'left', 'width', and 'right' are 'auto':
  463. if (left.is_auto() && width.is_auto() && right.is_auto()) {
  464. // First set any 'auto' values for 'margin-left' and 'margin-right' to 0.
  465. if (margin_left.is_auto())
  466. margin_left = CSS::Length::make_px(0);
  467. if (margin_right.is_auto())
  468. margin_right = CSS::Length::make_px(0);
  469. // Then, if the 'direction' property of the element establishing the static-position containing block
  470. // is 'ltr' set 'left' to the static position and apply rule number three below;
  471. // otherwise, set 'right' to the static position and apply rule number one below.
  472. // FIXME: This is very hackish.
  473. left = CSS::Length::make_px(0);
  474. goto Rule3;
  475. }
  476. if (!left.is_auto() && !width.is_auto() && !right.is_auto()) {
  477. // FIXME: This should be solved in a more complicated way.
  478. return width;
  479. }
  480. if (margin_left.is_auto())
  481. margin_left = CSS::Length::make_px(0);
  482. if (margin_right.is_auto())
  483. margin_right = CSS::Length::make_px(0);
  484. // 1. 'left' and 'width' are 'auto' and 'right' is not 'auto',
  485. // then the width is shrink-to-fit. Then solve for 'left'
  486. if (left.is_auto() && width.is_auto() && !right.is_auto()) {
  487. auto result = calculate_shrink_to_fit_widths(box);
  488. solve_for_left();
  489. auto available_width = solve_for_width();
  490. width = CSS::Length(min(max(result.preferred_minimum_width, available_width.to_px(box)), result.preferred_width), CSS::Length::Type::Px);
  491. }
  492. // 2. 'left' and 'right' are 'auto' and 'width' is not 'auto',
  493. // then if the 'direction' property of the element establishing
  494. // the static-position containing block is 'ltr' set 'left'
  495. // to the static position, otherwise set 'right' to the static position.
  496. // Then solve for 'left' (if 'direction is 'rtl') or 'right' (if 'direction' is 'ltr').
  497. else if (left.is_auto() && right.is_auto() && !width.is_auto()) {
  498. // FIXME: Check direction
  499. // FIXME: Use the static-position containing block
  500. left = zero_value;
  501. right = solve_for_right();
  502. }
  503. // 3. 'width' and 'right' are 'auto' and 'left' is not 'auto',
  504. // then the width is shrink-to-fit. Then solve for 'right'
  505. else if (width.is_auto() && right.is_auto() && !left.is_auto()) {
  506. Rule3:
  507. auto result = calculate_shrink_to_fit_widths(box);
  508. auto available_width = solve_for_width();
  509. width = CSS::Length(min(max(result.preferred_minimum_width, available_width.to_px(box)), result.preferred_width), CSS::Length::Type::Px);
  510. right = solve_for_right();
  511. }
  512. // 4. 'left' is 'auto', 'width' and 'right' are not 'auto', then solve for 'left'
  513. else if (left.is_auto() && !width.is_auto() && !right.is_auto()) {
  514. left = solve_for_left();
  515. }
  516. // 5. 'width' is 'auto', 'left' and 'right' are not 'auto', then solve for 'width'
  517. else if (width.is_auto() && !left.is_auto() && !right.is_auto()) {
  518. width = solve_for_width();
  519. }
  520. // 6. 'right' is 'auto', 'left' and 'width' are not 'auto', then solve for 'right'
  521. else if (right.is_auto() && !left.is_auto() && !width.is_auto()) {
  522. right = solve_for_right();
  523. }
  524. return width;
  525. };
  526. auto specified_width = computed_values.width().resolved(box, width_of_containing_block_as_length).resolved(box);
  527. // 1. The tentative used width is calculated (without 'min-width' and 'max-width')
  528. auto used_width = try_compute_width(specified_width);
  529. // 2. The tentative used width is greater than 'max-width', the rules above are applied again,
  530. // but this time using the computed value of 'max-width' as the computed value for 'width'.
  531. if (!computed_values.max_width().is_none()) {
  532. auto max_width = computed_values.max_width().resolved(box, width_of_containing_block_as_length).resolved(box);
  533. if (used_width.to_px(box) > max_width.to_px(box)) {
  534. used_width = try_compute_width(max_width);
  535. }
  536. }
  537. // 3. If the resulting width is smaller than 'min-width', the rules above are applied again,
  538. // but this time using the value of 'min-width' as the computed value for 'width'.
  539. if (!computed_values.min_width().is_auto()) {
  540. auto min_width = computed_values.min_width().resolved(box, width_of_containing_block_as_length).resolved(box);
  541. if (used_width.to_px(box) < min_width.to_px(box)) {
  542. used_width = try_compute_width(min_width);
  543. }
  544. }
  545. auto& box_state = m_state.get_mutable(box);
  546. box_state.set_content_width(used_width.to_px(box));
  547. box_state.margin_left = margin_left.to_px(box);
  548. box_state.margin_right = margin_right.to_px(box);
  549. box_state.border_left = border_left;
  550. box_state.border_right = border_right;
  551. box_state.padding_left = padding_left;
  552. box_state.padding_right = padding_right;
  553. }
  554. void FormattingContext::compute_width_for_absolutely_positioned_replaced_element(ReplacedBox const& box, AvailableSpace const& available_space)
  555. {
  556. // 10.3.8 Absolutely positioned, replaced elements
  557. // The used value of 'width' is determined as for inline replaced elements.
  558. // FIXME: This const_cast is gross.
  559. const_cast<ReplacedBox&>(box).prepare_for_replaced_layout();
  560. m_state.get_mutable(box).set_content_width(compute_width_for_replaced_element(m_state, box, available_space));
  561. }
  562. // https://www.w3.org/TR/CSS22/visudet.html#abs-non-replaced-height
  563. void FormattingContext::compute_height_for_absolutely_positioned_non_replaced_element(Box const& box, AvailableSpace const& available_space)
  564. {
  565. // 10.6.4 Absolutely positioned, non-replaced elements
  566. // FIXME: The section below is partly on-spec, partly ad-hoc.
  567. auto& computed_values = box.computed_values();
  568. auto width_of_containing_block = containing_block_width_for(box);
  569. auto height_of_containing_block = available_space.height.to_px();
  570. auto width_of_containing_block_as_length = CSS::Length::make_px(width_of_containing_block);
  571. auto height_of_containing_block_as_length = CSS::Length::make_px(height_of_containing_block);
  572. auto const& computed_top = computed_values.inset().top();
  573. auto const& computed_bottom = computed_values.inset().bottom();
  574. auto const& computed_height = computed_values.height();
  575. auto const& computed_min_height = computed_values.min_height();
  576. auto const& computed_max_height = computed_values.max_height();
  577. auto used_top = computed_top.resolved(box, height_of_containing_block_as_length).resolved(box).to_px(box);
  578. auto used_bottom = computed_bottom.resolved(box, height_of_containing_block_as_length).resolved(box).to_px(box);
  579. auto tentative_height = CSS::Length::make_auto();
  580. if (!computed_height.is_auto())
  581. tentative_height = computed_values.height().resolved(box, height_of_containing_block_as_length).resolved(box);
  582. auto& box_state = m_state.get_mutable(box);
  583. box_state.margin_top = computed_values.margin().top().resolved(box, width_of_containing_block_as_length).to_px(box);
  584. box_state.margin_bottom = computed_values.margin().bottom().resolved(box, width_of_containing_block_as_length).to_px(box);
  585. box_state.border_top = computed_values.border_top().width;
  586. box_state.border_bottom = computed_values.border_bottom().width;
  587. box_state.padding_top = computed_values.padding().top().resolved(box, width_of_containing_block_as_length).to_px(box);
  588. box_state.padding_bottom = computed_values.padding().bottom().resolved(box, width_of_containing_block_as_length).to_px(box);
  589. if (computed_height.is_auto() && computed_top.is_auto() && computed_bottom.is_auto()) {
  590. tentative_height = CSS::Length(compute_auto_height_for_block_level_element(box, available_space), CSS::Length::Type::Px);
  591. }
  592. else if (computed_height.is_auto() && !computed_top.is_auto() && computed_bottom.is_auto()) {
  593. tentative_height = CSS::Length(compute_auto_height_for_block_level_element(box, available_space), CSS::Length::Type::Px);
  594. box_state.inset_bottom = height_of_containing_block - tentative_height.to_px(box) - used_top - box_state.margin_top - box_state.padding_top - box_state.border_top - box_state.margin_bottom - box_state.padding_bottom - box_state.border_bottom;
  595. }
  596. else if (computed_height.is_auto() && !computed_top.is_auto() && !computed_bottom.is_auto()) {
  597. tentative_height = CSS::Length(height_of_containing_block - used_top - box_state.margin_top - box_state.padding_top - box_state.border_top - used_bottom - box_state.margin_bottom - box_state.padding_bottom - box_state.border_bottom, CSS::Length::Type::Px);
  598. }
  599. float used_height = tentative_height.to_px(box);
  600. if (!computed_max_height.is_none())
  601. used_height = min(used_height, computed_max_height.resolved(box, height_of_containing_block_as_length).resolved(box).to_px(box));
  602. if (!computed_min_height.is_auto())
  603. used_height = max(used_height, computed_min_height.resolved(box, height_of_containing_block_as_length).resolved(box).to_px(box));
  604. box_state.set_content_height(used_height);
  605. }
  606. // NOTE: This is different from content_box_rect_in_ancestor_coordinate_space() as this does *not* follow the containing block chain up, but rather the parent() chain.
  607. static Gfx::FloatRect content_box_rect_in_static_position_ancestor_coordinate_space(Box const& box, Box const& ancestor_box, LayoutState const& state)
  608. {
  609. auto rect = content_box_rect(box, state);
  610. if (&box == &ancestor_box)
  611. return rect;
  612. for (auto const* current = box.parent(); current; current = current->parent()) {
  613. if (current == &ancestor_box)
  614. return rect;
  615. auto const& current_state = state.get(static_cast<Box const&>(*current));
  616. rect.translate_by(current_state.offset);
  617. }
  618. // If we get here, ancestor_box was not an ancestor of `box`!
  619. VERIFY_NOT_REACHED();
  620. }
  621. // https://www.w3.org/TR/css-position-3/#staticpos-rect
  622. Gfx::FloatPoint FormattingContext::calculate_static_position(Box const& box) const
  623. {
  624. // NOTE: This is very ad-hoc.
  625. // The purpose of this function is to calculate the approximate position that `box`
  626. // would have had if it were position:static.
  627. float x = 0.0f;
  628. float y = 0.0f;
  629. VERIFY(box.parent());
  630. if (box.parent()->children_are_inline()) {
  631. // We're an abspos box with inline siblings. This is gonna get messy!
  632. if (auto* sibling = box.previous_sibling()) {
  633. // Hard case: there's a previous sibling. This means there's already inline content
  634. // preceding the hypothetical static position of `box` within its containing block.
  635. // If we had been position:static, that inline content would have been wrapped in
  636. // anonymous block box, so now we get to imagine what the world might have looked like
  637. // in that scenario..
  638. // Basically, we find its last associated line box fragment and place `box` under it.
  639. // FIXME: I'm 100% sure this can be smarter, better and faster.
  640. LineBoxFragment const* last_fragment = nullptr;
  641. auto& cb_state = m_state.get(*sibling->containing_block());
  642. for (auto& line_box : cb_state.line_boxes) {
  643. for (auto& fragment : line_box.fragments()) {
  644. if (&fragment.layout_node() == sibling)
  645. last_fragment = &fragment;
  646. }
  647. }
  648. if (last_fragment) {
  649. y = last_fragment->offset().y() + last_fragment->height();
  650. }
  651. } else {
  652. // Easy case: no previous sibling, we're at the top of the containing block.
  653. }
  654. } else {
  655. // We're among block siblings, Y can be calculated easily.
  656. y = compute_box_y_position_with_respect_to_siblings(box);
  657. }
  658. auto offset_to_static_parent = content_box_rect_in_static_position_ancestor_coordinate_space(box, *box.containing_block(), m_state);
  659. return offset_to_static_parent.location().translated(x, y);
  660. }
  661. void FormattingContext::layout_absolutely_positioned_element(Box const& box, AvailableSpace const& available_space)
  662. {
  663. auto& containing_block_state = m_state.get_mutable(*box.containing_block());
  664. auto& box_state = m_state.get_mutable(box);
  665. auto width_of_containing_block = available_space.width.to_px();
  666. auto height_of_containing_block = available_space.height.to_px();
  667. auto width_of_containing_block_as_length = CSS::Length::make_px(width_of_containing_block);
  668. auto height_of_containing_block_as_length = CSS::Length::make_px(height_of_containing_block);
  669. auto specified_width = box.computed_values().width().resolved(box, width_of_containing_block_as_length).resolved(box);
  670. compute_width_for_absolutely_positioned_element(box, available_space);
  671. auto independent_formatting_context = layout_inside(box, LayoutMode::Normal, box_state.available_inner_space_or_constraints_from(available_space));
  672. compute_height_for_absolutely_positioned_element(box, available_space);
  673. box_state.margin_left = box.computed_values().margin().left().resolved(box, width_of_containing_block_as_length).to_px(box);
  674. box_state.margin_top = box.computed_values().margin().top().resolved(box, width_of_containing_block_as_length).to_px(box);
  675. box_state.margin_right = box.computed_values().margin().right().resolved(box, width_of_containing_block_as_length).to_px(box);
  676. box_state.margin_bottom = box.computed_values().margin().bottom().resolved(box, width_of_containing_block_as_length).to_px(box);
  677. box_state.border_left = box.computed_values().border_left().width;
  678. box_state.border_right = box.computed_values().border_right().width;
  679. box_state.border_top = box.computed_values().border_top().width;
  680. box_state.border_bottom = box.computed_values().border_bottom().width;
  681. auto const& computed_left = box.computed_values().inset().left();
  682. auto const& computed_right = box.computed_values().inset().right();
  683. auto const& computed_top = box.computed_values().inset().top();
  684. auto const& computed_bottom = box.computed_values().inset().bottom();
  685. box_state.inset_left = computed_left.resolved(box, width_of_containing_block_as_length).to_px(box);
  686. box_state.inset_top = computed_top.resolved(box, height_of_containing_block_as_length).to_px(box);
  687. box_state.inset_right = computed_right.resolved(box, width_of_containing_block_as_length).to_px(box);
  688. box_state.inset_bottom = computed_bottom.resolved(box, height_of_containing_block_as_length).to_px(box);
  689. if (computed_left.is_auto() && box.computed_values().width().is_auto() && computed_right.is_auto()) {
  690. if (box.computed_values().margin().left().is_auto())
  691. box_state.margin_left = 0;
  692. if (box.computed_values().margin().right().is_auto())
  693. box_state.margin_right = 0;
  694. }
  695. auto static_position = calculate_static_position(box);
  696. Gfx::FloatPoint used_offset;
  697. if (!computed_left.is_auto()) {
  698. float x_offset = box_state.inset_left
  699. + box_state.border_box_left();
  700. used_offset.set_x(x_offset + box_state.margin_left);
  701. } else if (!computed_right.is_auto()) {
  702. float x_offset = 0
  703. - box_state.inset_right
  704. - box_state.border_box_right();
  705. used_offset.set_x(width_of_containing_block + x_offset - box_state.content_width() - box_state.margin_right);
  706. } else {
  707. float x_offset = box_state.margin_box_left()
  708. + static_position.x();
  709. used_offset.set_x(x_offset);
  710. }
  711. if (!computed_top.is_auto()) {
  712. float y_offset = box_state.inset_top
  713. + box_state.border_box_top();
  714. used_offset.set_y(y_offset + box_state.margin_top);
  715. } else if (!computed_bottom.is_auto()) {
  716. float y_offset = 0
  717. - box_state.inset_bottom
  718. - box_state.border_box_bottom();
  719. used_offset.set_y(height_of_containing_block + y_offset - box_state.content_height() - box_state.margin_bottom);
  720. } else {
  721. float y_offset = box_state.margin_box_top()
  722. + static_position.y();
  723. used_offset.set_y(y_offset);
  724. }
  725. // NOTE: Absolutely positioned boxes are relative to the *padding edge* of the containing block.
  726. used_offset.translate_by(-containing_block_state.padding_left, -containing_block_state.padding_top);
  727. box_state.set_content_offset(used_offset);
  728. if (independent_formatting_context)
  729. independent_formatting_context->parent_context_did_dimension_child_root_box();
  730. }
  731. void FormattingContext::compute_height_for_absolutely_positioned_replaced_element(ReplacedBox const& box, AvailableSpace const& available_space)
  732. {
  733. // 10.6.5 Absolutely positioned, replaced elements
  734. // The used value of 'height' is determined as for inline replaced elements.
  735. m_state.get_mutable(box).set_content_height(compute_height_for_replaced_element(m_state, box, available_space));
  736. }
  737. // https://www.w3.org/TR/css-position-3/#relpos-insets
  738. void FormattingContext::compute_inset(Box const& box)
  739. {
  740. if (box.computed_values().position() != CSS::Position::Relative)
  741. return;
  742. auto resolve_two_opposing_insets = [&](CSS::LengthPercentage const& computed_start, CSS::LengthPercentage const& computed_end, float& used_start, float& used_end, float reference_for_percentage) {
  743. auto resolved_first = computed_start.resolved(box, CSS::Length::make_px(reference_for_percentage)).resolved(box);
  744. auto resolved_second = computed_end.resolved(box, CSS::Length::make_px(reference_for_percentage)).resolved(box);
  745. if (resolved_first.is_auto() && resolved_second.is_auto()) {
  746. // If opposing inset properties in an axis both compute to auto (their initial values),
  747. // their used values are zero (i.e., the boxes stay in their original position in that axis).
  748. used_start = 0;
  749. used_end = 0;
  750. } else if (resolved_first.is_auto() || resolved_second.is_auto()) {
  751. // If only one is auto, its used value becomes the negation of the other, and the box is shifted by the specified amount.
  752. if (resolved_first.is_auto()) {
  753. used_end = resolved_second.to_px(box);
  754. used_start = 0 - used_end;
  755. } else {
  756. used_start = resolved_first.to_px(box);
  757. used_end = 0 - used_start;
  758. }
  759. } else {
  760. // If neither is auto, the position is over-constrained; (with respect to the writing mode of its containing block)
  761. // the computed end side value is ignored, and its used value becomes the negation of the start side.
  762. used_start = resolved_first.to_px(box);
  763. used_end = 0 - used_start;
  764. }
  765. };
  766. auto& box_state = m_state.get_mutable(box);
  767. auto const& computed_values = box.computed_values();
  768. // FIXME: Respect the containing block's writing-mode.
  769. resolve_two_opposing_insets(computed_values.inset().left(), computed_values.inset().right(), box_state.inset_left, box_state.inset_right, containing_block_width_for(box));
  770. resolve_two_opposing_insets(computed_values.inset().top(), computed_values.inset().bottom(), box_state.inset_top, box_state.inset_bottom, containing_block_height_for(box));
  771. }
  772. float FormattingContext::calculate_fit_content_size(float min_content_size, float max_content_size, AvailableSize const& available_size) const
  773. {
  774. // If the available space in a given axis is definite, equal to clamp(min-content size, stretch-fit size, max-content size)
  775. // (i.e. max(min-content size, min(max-content size, stretch-fit size))).
  776. if (available_size.is_definite()) {
  777. // FIXME: Compute the real stretch-fit size.
  778. auto stretch_fit_size = available_size.to_px();
  779. auto s = max(min_content_size, min(max_content_size, stretch_fit_size));
  780. return s;
  781. }
  782. // When sizing under a min-content constraint, equal to the min-content size.
  783. if (available_size.is_min_content())
  784. return min_content_size;
  785. // Otherwise, equal to the max-content size in that axis.
  786. return max_content_size;
  787. }
  788. float FormattingContext::calculate_fit_content_width(Layout::Box const& box, AvailableSpace const& available_space) const
  789. {
  790. // When sizing under a min-content constraint, equal to the min-content size.
  791. // NOTE: We check this first, to avoid needlessly calculating the max-content size.
  792. if (available_space.width.is_min_content())
  793. return calculate_min_content_width(box);
  794. if (available_space.width.is_max_content())
  795. return calculate_max_content_width(box);
  796. return calculate_fit_content_size(calculate_min_content_width(box), calculate_max_content_width(box), available_space.width);
  797. }
  798. float FormattingContext::calculate_fit_content_height(Layout::Box const& box, AvailableSpace const& available_space) const
  799. {
  800. // When sizing under a min-content constraint, equal to the min-content size.
  801. // NOTE: We check this first, to avoid needlessly calculating the max-content size.
  802. if (available_space.height.is_min_content())
  803. return calculate_min_content_height(box, available_space.width);
  804. if (available_space.height.is_max_content())
  805. return calculate_max_content_height(box, available_space.width);
  806. return calculate_fit_content_size(calculate_min_content_height(box, available_space.width), calculate_max_content_height(box, available_space.width), available_space.height);
  807. }
  808. float FormattingContext::calculate_min_content_width(Layout::Box const& box) const
  809. {
  810. if (box.has_intrinsic_width())
  811. return *box.intrinsic_width();
  812. auto& root_state = m_state.m_root;
  813. auto& cache = *root_state.intrinsic_sizes.ensure(&box, [] { return adopt_own(*new LayoutState::IntrinsicSizes); });
  814. if (cache.min_content_width.has_value())
  815. return *cache.min_content_width;
  816. LayoutState throwaway_state(&m_state);
  817. auto& box_state = throwaway_state.get_mutable(box);
  818. box_state.width_constraint = SizeConstraint::MinContent;
  819. auto context = const_cast<FormattingContext*>(this)->create_independent_formatting_context_if_needed(throwaway_state, box);
  820. VERIFY(context);
  821. auto available_width = AvailableSize::make_min_content();
  822. auto available_height = AvailableSize::make_indefinite();
  823. context->run(box, LayoutMode::IntrinsicSizing, AvailableSpace(available_width, available_height));
  824. if (context->type() == FormattingContext::Type::Flex) {
  825. cache.min_content_width = box_state.content_width();
  826. } else {
  827. cache.min_content_width = context->greatest_child_width(box);
  828. }
  829. if (!isfinite(*cache.min_content_width)) {
  830. // HACK: If layout calculates a non-finite result, something went wrong. Force it to zero and log a little whine.
  831. dbgln("FIXME: Calculated non-finite min-content width for {}", box.debug_description());
  832. cache.min_content_width = 0;
  833. }
  834. return *cache.min_content_width;
  835. }
  836. float FormattingContext::calculate_max_content_width(Layout::Box const& box) const
  837. {
  838. if (box.has_intrinsic_width())
  839. return *box.intrinsic_width();
  840. auto& root_state = m_state.m_root;
  841. auto& cache = *root_state.intrinsic_sizes.ensure(&box, [] { return adopt_own(*new LayoutState::IntrinsicSizes); });
  842. if (cache.max_content_width.has_value())
  843. return *cache.max_content_width;
  844. LayoutState throwaway_state(&m_state);
  845. auto& box_state = throwaway_state.get_mutable(box);
  846. box_state.width_constraint = SizeConstraint::MaxContent;
  847. auto context = const_cast<FormattingContext*>(this)->create_independent_formatting_context_if_needed(throwaway_state, box);
  848. VERIFY(context);
  849. auto available_width = AvailableSize::make_max_content();
  850. auto available_height = AvailableSize::make_indefinite();
  851. context->run(box, LayoutMode::IntrinsicSizing, AvailableSpace(available_width, available_height));
  852. if (context->type() == FormattingContext::Type::Flex) {
  853. cache.max_content_width = box_state.content_width();
  854. } else {
  855. cache.max_content_width = context->greatest_child_width(box);
  856. }
  857. if (!isfinite(*cache.max_content_width)) {
  858. // HACK: If layout calculates a non-finite result, something went wrong. Force it to zero and log a little whine.
  859. dbgln("FIXME: Calculated non-finite max-content width for {}", box.debug_description());
  860. cache.max_content_width = 0;
  861. }
  862. return *cache.max_content_width;
  863. }
  864. float FormattingContext::calculate_min_content_height(Layout::Box const& box, AvailableSize const& available_width) const
  865. {
  866. if (box.has_intrinsic_height())
  867. return *box.intrinsic_height();
  868. auto& root_state = m_state.m_root;
  869. auto& cache = *root_state.intrinsic_sizes.ensure(&box, [] { return adopt_own(*new LayoutState::IntrinsicSizes); });
  870. if (cache.min_content_height.has_value())
  871. return *cache.min_content_height;
  872. LayoutState throwaway_state(&m_state);
  873. auto& box_state = throwaway_state.get_mutable(box);
  874. box_state.height_constraint = SizeConstraint::MinContent;
  875. auto context = const_cast<FormattingContext*>(this)->create_independent_formatting_context_if_needed(throwaway_state, box);
  876. VERIFY(context);
  877. context->run(box, LayoutMode::IntrinsicSizing, AvailableSpace(available_width, AvailableSize::make_min_content()));
  878. cache.min_content_height = context->automatic_content_height();
  879. if (!isfinite(*cache.min_content_height)) {
  880. // HACK: If layout calculates a non-finite result, something went wrong. Force it to zero and log a little whine.
  881. dbgln("FIXME: Calculated non-finite min-content height for {}", box.debug_description());
  882. cache.min_content_height = 0;
  883. }
  884. return *cache.min_content_height;
  885. }
  886. float FormattingContext::calculate_max_content_height(Layout::Box const& box, AvailableSize const& available_width) const
  887. {
  888. if (box.has_intrinsic_height())
  889. return *box.intrinsic_height();
  890. auto& root_state = m_state.m_root;
  891. auto& cache = *root_state.intrinsic_sizes.ensure(&box, [] { return adopt_own(*new LayoutState::IntrinsicSizes); });
  892. if (cache.max_content_height.has_value())
  893. return *cache.max_content_height;
  894. LayoutState throwaway_state(&m_state);
  895. auto& box_state = throwaway_state.get_mutable(box);
  896. box_state.height_constraint = SizeConstraint::MaxContent;
  897. auto context = const_cast<FormattingContext*>(this)->create_independent_formatting_context_if_needed(throwaway_state, box);
  898. VERIFY(context);
  899. context->run(box, LayoutMode::IntrinsicSizing, AvailableSpace(available_width, AvailableSize::make_max_content()));
  900. cache.max_content_height = context->automatic_content_height();
  901. if (!isfinite(*cache.max_content_height)) {
  902. // HACK: If layout calculates a non-finite result, something went wrong. Force it to zero and log a little whine.
  903. dbgln("FIXME: Calculated non-finite max-content height for {}", box.debug_description());
  904. cache.max_content_height = 0;
  905. }
  906. return *cache.max_content_height;
  907. }
  908. float FormattingContext::containing_block_width_for(Box const& box, LayoutState const& state)
  909. {
  910. auto& containing_block_state = state.get(*box.containing_block());
  911. auto& box_state = state.get(box);
  912. switch (box_state.width_constraint) {
  913. case SizeConstraint::MinContent:
  914. return 0;
  915. case SizeConstraint::MaxContent:
  916. return INFINITY;
  917. case SizeConstraint::None:
  918. return containing_block_state.content_width();
  919. }
  920. VERIFY_NOT_REACHED();
  921. }
  922. float FormattingContext::containing_block_height_for(Box const& box, LayoutState const& state)
  923. {
  924. auto& containing_block_state = state.get(*box.containing_block());
  925. auto& box_state = state.get(box);
  926. switch (box_state.height_constraint) {
  927. case SizeConstraint::MinContent:
  928. return 0;
  929. case SizeConstraint::MaxContent:
  930. return INFINITY;
  931. case SizeConstraint::None:
  932. return containing_block_state.content_height();
  933. }
  934. VERIFY_NOT_REACHED();
  935. }
  936. static Box const* previous_block_level_sibling(Box const& box)
  937. {
  938. for (auto* sibling = box.previous_sibling_of_type<Box>(); sibling; sibling = sibling->previous_sibling_of_type<Box>()) {
  939. if (sibling->display().is_block_outside())
  940. return sibling;
  941. }
  942. return nullptr;
  943. }
  944. float FormattingContext::compute_box_y_position_with_respect_to_siblings(Box const& box) const
  945. {
  946. auto const& box_state = m_state.get(box);
  947. float y = box_state.border_box_top();
  948. Vector<float> collapsible_margins;
  949. auto* relevant_sibling = previous_block_level_sibling(box);
  950. while (relevant_sibling != nullptr) {
  951. if (!relevant_sibling->is_absolutely_positioned() && !relevant_sibling->is_floating()) {
  952. auto const& relevant_sibling_state = m_state.get(*relevant_sibling);
  953. collapsible_margins.append(relevant_sibling_state.margin_bottom);
  954. // NOTE: Empty (0-height) preceding siblings have their margins collapsed with *their* preceding sibling, etc.
  955. if (relevant_sibling_state.border_box_height() > 0)
  956. break;
  957. collapsible_margins.append(relevant_sibling_state.margin_top);
  958. }
  959. relevant_sibling = previous_block_level_sibling(*relevant_sibling);
  960. }
  961. if (relevant_sibling) {
  962. // Collapse top margin with the collapsed margin(s) of preceding siblings.
  963. collapsible_margins.append(box_state.margin_top);
  964. float smallest_margin = 0;
  965. float largest_margin = 0;
  966. size_t negative_margin_count = 0;
  967. for (auto margin : collapsible_margins) {
  968. if (margin < 0)
  969. ++negative_margin_count;
  970. largest_margin = max(largest_margin, margin);
  971. smallest_margin = min(smallest_margin, margin);
  972. }
  973. float collapsed_margin = 0;
  974. if (negative_margin_count == collapsible_margins.size()) {
  975. // When all margins are negative, the size of the collapsed margin is the smallest (most negative) margin.
  976. collapsed_margin = smallest_margin;
  977. } else if (negative_margin_count > 0) {
  978. // When negative margins are involved, the size of the collapsed margin is the sum of the largest positive margin and the smallest (most negative) negative margin.
  979. collapsed_margin = largest_margin + smallest_margin;
  980. } else {
  981. // Otherwise, collapse all the adjacent margins by using only the largest one.
  982. collapsed_margin = largest_margin;
  983. }
  984. auto const& relevant_sibling_state = m_state.get(*relevant_sibling);
  985. return y + relevant_sibling_state.offset.y()
  986. + relevant_sibling_state.content_height()
  987. + relevant_sibling_state.border_box_bottom()
  988. + collapsed_margin;
  989. } else {
  990. return y + box_state.margin_top;
  991. }
  992. }
  993. // https://drafts.csswg.org/css-sizing-3/#stretch-fit-size
  994. float FormattingContext::calculate_stretch_fit_width(Box const& box, AvailableSize const& available_width) const
  995. {
  996. // The size a box would take if its outer size filled the available space in the given axis;
  997. // in other words, the stretch fit into the available space, if that is definite.
  998. // Undefined if the available space is indefinite.
  999. auto const& box_state = m_state.get(box);
  1000. return available_width.to_px()
  1001. - box_state.margin_left
  1002. - box_state.margin_right
  1003. - box_state.padding_left
  1004. - box_state.padding_right
  1005. - box_state.border_left
  1006. - box_state.border_right;
  1007. }
  1008. }