FormattingContext.cpp 92 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036103710381039104010411042104310441045104610471048104910501051105210531054105510561057105810591060106110621063106410651066106710681069107010711072107310741075107610771078107910801081108210831084108510861087108810891090109110921093109410951096109710981099110011011102110311041105110611071108110911101111111211131114111511161117111811191120112111221123112411251126112711281129113011311132113311341135113611371138113911401141114211431144114511461147114811491150115111521153115411551156115711581159116011611162116311641165116611671168116911701171117211731174117511761177117811791180118111821183118411851186118711881189119011911192119311941195119611971198119912001201120212031204120512061207120812091210121112121213121412151216121712181219122012211222122312241225122612271228122912301231123212331234123512361237123812391240124112421243124412451246124712481249125012511252125312541255125612571258125912601261126212631264126512661267126812691270127112721273127412751276127712781279128012811282128312841285128612871288128912901291129212931294129512961297129812991300130113021303130413051306130713081309131013111312131313141315131613171318131913201321132213231324132513261327132813291330133113321333133413351336133713381339134013411342134313441345134613471348134913501351135213531354135513561357135813591360136113621363136413651366136713681369137013711372137313741375137613771378137913801381138213831384138513861387138813891390139113921393139413951396139713981399140014011402140314041405140614071408140914101411141214131414141514161417141814191420142114221423142414251426142714281429143014311432143314341435143614371438143914401441144214431444144514461447144814491450145114521453145414551456145714581459146014611462146314641465146614671468146914701471147214731474147514761477147814791480148114821483148414851486148714881489149014911492149314941495149614971498149915001501150215031504150515061507150815091510151115121513151415151516151715181519152015211522152315241525152615271528152915301531153215331534153515361537153815391540154115421543154415451546154715481549155015511552155315541555155615571558155915601561156215631564156515661567156815691570157115721573157415751576157715781579158015811582158315841585158615871588158915901591159215931594159515961597159815991600160116021603160416051606160716081609161016111612161316141615161616171618161916201621162216231624162516261627162816291630163116321633163416351636163716381639164016411642164316441645164616471648164916501651165216531654165516561657165816591660166116621663166416651666166716681669167016711672167316741675167616771678167916801681168216831684168516861687168816891690169116921693169416951696169716981699170017011702170317041705170617071708170917101711171217131714171517161717171817191720172117221723172417251726172717281729173017311732173317341735173617371738173917401741174217431744174517461747174817491750175117521753175417551756175717581759176017611762176317641765176617671768176917701771177217731774177517761777177817791780178117821783178417851786178717881789179017911792179317941795179617971798179918001801180218031804180518061807180818091810181118121813181418151816181718181819182018211822182318241825182618271828182918301831183218331834183518361837183818391840184118421843184418451846184718481849185018511852185318541855185618571858185918601861186218631864186518661867186818691870187118721873187418751876187718781879188018811882188318841885188618871888188918901891189218931894189518961897189818991900190119021903190419051906190719081909191019111912191319141915191619171918191919201921192219231924192519261927192819291930193119321933193419351936193719381939194019411942194319441945194619471948194919501951195219531954195519561957195819591960196119621963196419651966
  1. /*
  2. * Copyright (c) 2020-2022, Andreas Kling <andreas@ladybird.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/ReplacedBox.h>
  13. #include <LibWeb/Layout/SVGFormattingContext.h>
  14. #include <LibWeb/Layout/SVGSVGBox.h>
  15. #include <LibWeb/Layout/TableFormattingContext.h>
  16. #include <LibWeb/Layout/TextNode.h>
  17. #include <LibWeb/Layout/Viewport.h>
  18. namespace Web::Layout {
  19. FormattingContext::FormattingContext(Type type, LayoutMode layout_mode, LayoutState& state, Box const& context_box, FormattingContext* parent)
  20. : m_type(type)
  21. , m_layout_mode(layout_mode)
  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: Replaced elements never create a BFC.
  32. if (box.is_replaced_box())
  33. return false;
  34. // display: table
  35. if (box.display().is_table_inside()) {
  36. return false;
  37. }
  38. // display: flex
  39. if (box.display().is_flex_inside()) {
  40. return false;
  41. }
  42. // display: grid
  43. if (box.display().is_grid_inside()) {
  44. return false;
  45. }
  46. // NOTE: This function uses MDN as a reference, not because it's authoritative,
  47. // but because they've gathered all the conditions in one convenient location.
  48. // The root element of the document (<html>).
  49. if (box.is_root_element())
  50. return true;
  51. // Floats (elements where float isn't none).
  52. if (box.is_floating())
  53. return true;
  54. // Absolutely positioned elements (elements where position is absolute or fixed).
  55. if (box.is_absolutely_positioned())
  56. return true;
  57. // Inline-blocks (elements with display: inline-block).
  58. if (box.display().is_inline_block())
  59. return true;
  60. // Table cells (elements with display: table-cell, which is the default for HTML table cells).
  61. if (box.display().is_table_cell())
  62. return true;
  63. // Table captions (elements with display: table-caption, which is the default for HTML table captions).
  64. if (box.display().is_table_caption())
  65. return true;
  66. // FIXME: Anonymous table cells implicitly created by the elements with display: table, table-row, table-row-group, table-header-group, table-footer-group
  67. // (which is the default for HTML tables, table rows, table bodies, table headers, and table footers, respectively), or inline-table.
  68. // Block elements where overflow has a value other than visible and clip.
  69. CSS::Overflow overflow_x = box.computed_values().overflow_x();
  70. if ((overflow_x != CSS::Overflow::Visible) && (overflow_x != CSS::Overflow::Clip))
  71. return true;
  72. CSS::Overflow overflow_y = box.computed_values().overflow_y();
  73. if ((overflow_y != CSS::Overflow::Visible) && (overflow_y != CSS::Overflow::Clip))
  74. return true;
  75. // display: flow-root.
  76. if (box.display().is_flow_root_inside())
  77. return true;
  78. // FIXME: Elements with contain: layout, content, or paint.
  79. if (box.parent()) {
  80. auto parent_display = box.parent()->display();
  81. // Flex items (direct children of the element with display: flex or inline-flex) if they are neither flex nor grid nor table containers themselves.
  82. if (parent_display.is_flex_inside())
  83. return true;
  84. // Grid items (direct children of the element with display: grid or inline-grid) if they are neither flex nor grid nor table containers themselves.
  85. if (parent_display.is_grid_inside())
  86. return true;
  87. }
  88. // FIXME: Multicol containers (elements where column-count or column-width isn't auto, including elements with column-count: 1).
  89. // 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).
  90. // https://html.spec.whatwg.org/#the-fieldset-and-legend-elements
  91. if (box.is_fieldset_box())
  92. // The fieldset element, when it generates a CSS box, is expected to act as follows:
  93. // The element is expected to establish a new block formatting context.
  94. return true;
  95. return false;
  96. }
  97. Optional<FormattingContext::Type> FormattingContext::formatting_context_type_created_by_box(Box const& box)
  98. {
  99. if (box.is_replaced_box() && !box.can_have_children()) {
  100. return Type::InternalReplaced;
  101. }
  102. if (!box.can_have_children())
  103. return {};
  104. if (is<SVGSVGBox>(box))
  105. return Type::SVG;
  106. auto display = box.display();
  107. if (display.is_flex_inside())
  108. return Type::Flex;
  109. if (display.is_table_inside())
  110. return Type::Table;
  111. if (display.is_grid_inside())
  112. return Type::Grid;
  113. if (display.is_math_inside())
  114. // HACK: Instead of crashing, create a dummy formatting context that does nothing.
  115. return Type::InternalDummy;
  116. if (creates_block_formatting_context(box))
  117. return Type::Block;
  118. if (box.children_are_inline())
  119. return {};
  120. if (display.is_table_column() || display.is_table_row_group() || display.is_table_header_group() || display.is_table_footer_group() || display.is_table_row() || display.is_table_column_group())
  121. return {};
  122. // The box is a block container that doesn't create its own BFC.
  123. // It will be formatted by the containing BFC.
  124. if (!display.is_flow_inside()) {
  125. // HACK: Instead of crashing, create a dummy formatting context that does nothing.
  126. // FIXME: We need this for <math> elements
  127. return Type::InternalDummy;
  128. }
  129. return {};
  130. }
  131. // FIXME: This is a hack. Get rid of it.
  132. struct ReplacedFormattingContext : public FormattingContext {
  133. ReplacedFormattingContext(LayoutState& state, LayoutMode layout_mode, Box const& box)
  134. : FormattingContext(Type::Block, layout_mode, state, box)
  135. {
  136. }
  137. virtual CSSPixels automatic_content_width() const override { return 0; }
  138. virtual CSSPixels automatic_content_height() const override { return 0; }
  139. virtual void run(AvailableSpace const&) override { }
  140. };
  141. // FIXME: This is a hack. Get rid of it.
  142. struct DummyFormattingContext : public FormattingContext {
  143. DummyFormattingContext(LayoutState& state, LayoutMode layout_mode, Box const& box)
  144. : FormattingContext(Type::Block, layout_mode, state, box)
  145. {
  146. }
  147. virtual CSSPixels automatic_content_width() const override { return 0; }
  148. virtual CSSPixels automatic_content_height() const override { return 0; }
  149. virtual void run(AvailableSpace const&) override { }
  150. };
  151. OwnPtr<FormattingContext> FormattingContext::create_independent_formatting_context_if_needed(LayoutState& state, LayoutMode layout_mode, Box const& child_box)
  152. {
  153. auto type = formatting_context_type_created_by_box(child_box);
  154. if (!type.has_value())
  155. return nullptr;
  156. switch (type.value()) {
  157. case Type::Block:
  158. return make<BlockFormattingContext>(state, layout_mode, verify_cast<BlockContainer>(child_box), this);
  159. case Type::SVG:
  160. return make<SVGFormattingContext>(state, layout_mode, child_box, this);
  161. case Type::Flex:
  162. return make<FlexFormattingContext>(state, layout_mode, child_box, this);
  163. case Type::Grid:
  164. return make<GridFormattingContext>(state, layout_mode, child_box, this);
  165. case Type::Table:
  166. return make<TableFormattingContext>(state, layout_mode, child_box, this);
  167. case Type::InternalReplaced:
  168. return make<ReplacedFormattingContext>(state, layout_mode, child_box);
  169. case Type::InternalDummy:
  170. return make<DummyFormattingContext>(state, layout_mode, child_box);
  171. case Type::Inline:
  172. // IFC should always be created by a parent BFC directly.
  173. VERIFY_NOT_REACHED();
  174. break;
  175. default:
  176. VERIFY_NOT_REACHED();
  177. }
  178. }
  179. OwnPtr<FormattingContext> FormattingContext::layout_inside(Box const& child_box, LayoutMode layout_mode, AvailableSpace const& available_space)
  180. {
  181. {
  182. // OPTIMIZATION: If we're doing intrinsic sizing and `child_box` has definite size in both axes,
  183. // we don't need to layout its insides. The size is resolvable without learning
  184. // the metrics of whatever's inside the box.
  185. auto const& used_values = m_state.get(child_box);
  186. if (layout_mode == LayoutMode::IntrinsicSizing
  187. && used_values.width_constraint == SizeConstraint::None
  188. && used_values.height_constraint == SizeConstraint::None
  189. && used_values.has_definite_width()
  190. && used_values.has_definite_height()) {
  191. return nullptr;
  192. }
  193. }
  194. if (!child_box.can_have_children())
  195. return {};
  196. auto independent_formatting_context = create_independent_formatting_context_if_needed(m_state, layout_mode, child_box);
  197. if (independent_formatting_context)
  198. independent_formatting_context->run(available_space);
  199. else
  200. run(available_space);
  201. return independent_formatting_context;
  202. }
  203. CSSPixels FormattingContext::greatest_child_width(Box const& box) const
  204. {
  205. CSSPixels max_width = 0;
  206. if (box.children_are_inline()) {
  207. for (auto& line_box : m_state.get(box).line_boxes) {
  208. max_width = max(max_width, line_box.width());
  209. }
  210. } else {
  211. box.for_each_child_of_type<Box>([&](Box const& child) {
  212. if (!child.is_absolutely_positioned())
  213. max_width = max(max_width, m_state.get(child).margin_box_width());
  214. return IterationDecision::Continue;
  215. });
  216. }
  217. return max_width;
  218. }
  219. FormattingContext::ShrinkToFitResult FormattingContext::calculate_shrink_to_fit_widths(Box const& box)
  220. {
  221. return {
  222. .preferred_width = calculate_max_content_width(box),
  223. .preferred_minimum_width = calculate_min_content_width(box),
  224. };
  225. }
  226. CSSPixelSize FormattingContext::solve_replaced_size_constraint(CSSPixels input_width, CSSPixels input_height, Box const& box, AvailableSpace const& available_space) const
  227. {
  228. // 10.4 Minimum and maximum widths: 'min-width' and 'max-width'
  229. // https://www.w3.org/TR/CSS22/visudet.html#min-max-widths
  230. auto const& containing_block = *box.non_anonymous_containing_block();
  231. auto const& containing_block_state = m_state.get(containing_block);
  232. auto width_of_containing_block = containing_block_state.content_width();
  233. auto height_of_containing_block = containing_block_state.content_height();
  234. auto min_width = box.computed_values().min_width().is_auto() ? 0 : box.computed_values().min_width().to_px(box, width_of_containing_block);
  235. auto specified_max_width = should_treat_max_width_as_none(box, available_space.width) ? input_width : box.computed_values().max_width().to_px(box, width_of_containing_block);
  236. auto max_width = max(min_width, specified_max_width);
  237. auto min_height = box.computed_values().min_height().is_auto() ? 0 : box.computed_values().min_height().to_px(box, height_of_containing_block);
  238. auto specified_max_height = should_treat_max_height_as_none(box, available_space.height) ? input_height : box.computed_values().max_height().to_px(box, height_of_containing_block);
  239. auto max_height = max(min_height, specified_max_height);
  240. CSSPixelFraction aspect_ratio = *box.preferred_aspect_ratio();
  241. // These are from the "Constraint Violation" table in spec, but reordered so that each condition is
  242. // interpreted as mutually exclusive to any other.
  243. if (input_width < min_width && input_height > max_height)
  244. return { min_width, max_height };
  245. if (input_width > max_width && input_height < min_height)
  246. return { max_width, min_height };
  247. if (input_width > 0 && input_height > 0) {
  248. if (input_width > max_width && input_height > max_height && max_width / input_width <= max_height / input_height)
  249. return { max_width, max(min_height, max_width / aspect_ratio) };
  250. if (input_width > max_width && input_height > max_height && max_width / input_width > max_height / input_height)
  251. return { max(min_width, max_height * aspect_ratio), max_height };
  252. if (input_width < min_width && input_height < min_height && min_width / input_width <= min_height / input_height)
  253. return { min(max_width, min_height * aspect_ratio), min_height };
  254. if (input_width < min_width && input_height < min_height && min_width / input_width > min_height / input_height)
  255. return { min_width, min(max_height, min_width / aspect_ratio) };
  256. }
  257. if (input_width > max_width)
  258. return { max_width, max(max_width / aspect_ratio, min_height) };
  259. if (input_width < min_width)
  260. return { min_width, min(min_width / aspect_ratio, max_height) };
  261. if (input_height > max_height)
  262. return { max(max_height * aspect_ratio, min_width), max_height };
  263. if (input_height < min_height)
  264. return { min(min_height * aspect_ratio, max_width), min_height };
  265. return { input_width, input_height };
  266. }
  267. Optional<CSSPixels> FormattingContext::compute_auto_height_for_absolutely_positioned_element(Box const& box, AvailableSpace const& available_space, BeforeOrAfterInsideLayout before_or_after_inside_layout) const
  268. {
  269. // NOTE: CSS 2.2 tells us to use the "auto height for block formatting context roots" here.
  270. // That's fine as long as the box is a BFC root.
  271. if (creates_block_formatting_context(box)) {
  272. if (before_or_after_inside_layout == BeforeOrAfterInsideLayout::Before)
  273. return {};
  274. return compute_auto_height_for_block_formatting_context_root(box);
  275. }
  276. // NOTE: For anything else, we use the fit-content height.
  277. // This should eventually be replaced by the new absolute positioning model:
  278. // https://www.w3.org/TR/css-position-3/#abspos-layout
  279. return calculate_fit_content_height(box, m_state.get(box).available_inner_space_or_constraints_from(available_space));
  280. }
  281. // https://www.w3.org/TR/CSS22/visudet.html#root-height
  282. CSSPixels FormattingContext::compute_auto_height_for_block_formatting_context_root(Box const& root) const
  283. {
  284. // 10.6.7 'Auto' heights for block formatting context roots
  285. Optional<CSSPixels> top;
  286. Optional<CSSPixels> bottom;
  287. if (root.children_are_inline()) {
  288. // If it only has inline-level children, the height is the distance between
  289. // the top content edge and the bottom of the bottommost line box.
  290. auto const& line_boxes = m_state.get(root).line_boxes;
  291. top = 0;
  292. if (!line_boxes.is_empty())
  293. bottom = line_boxes.last().bottom();
  294. } else {
  295. // If it has block-level children, the height is the distance between
  296. // the top margin-edge of the topmost block-level child box
  297. // and the bottom margin-edge of the bottommost block-level child box.
  298. root.for_each_child_of_type<Box>([&](Layout::Box& child_box) {
  299. // Absolutely positioned children are ignored,
  300. // and relatively positioned boxes are considered without their offset.
  301. // Note that the child box may be an anonymous block box.
  302. if (child_box.is_absolutely_positioned())
  303. return IterationDecision::Continue;
  304. // FIXME: This doesn't look right.
  305. if ((root.computed_values().overflow_y() == CSS::Overflow::Visible) && child_box.is_floating())
  306. return IterationDecision::Continue;
  307. auto const& child_box_state = m_state.get(child_box);
  308. CSSPixels child_box_top = child_box_state.offset.y() - child_box_state.margin_box_top();
  309. CSSPixels child_box_bottom = child_box_state.offset.y() + child_box_state.content_height() + child_box_state.margin_box_bottom();
  310. if (!top.has_value() || child_box_top < top.value())
  311. top = child_box_top;
  312. if (!bottom.has_value() || child_box_bottom > bottom.value())
  313. bottom = child_box_bottom;
  314. return IterationDecision::Continue;
  315. });
  316. }
  317. // In addition, if the element has any floating descendants
  318. // whose bottom margin edge is below the element's bottom content edge,
  319. // then the height is increased to include those edges.
  320. for (auto floating_box : m_state.get(root).floating_descendants()) {
  321. // NOTE: Floating box coordinates are relative to their own containing block,
  322. // which may or may not be the BFC root.
  323. auto margin_box = margin_box_rect_in_ancestor_coordinate_space(*floating_box, root);
  324. CSSPixels floating_box_bottom_margin_edge = margin_box.bottom();
  325. if (!bottom.has_value() || floating_box_bottom_margin_edge > bottom.value())
  326. bottom = floating_box_bottom_margin_edge;
  327. }
  328. return max(CSSPixels(0.0f), bottom.value_or(0) - top.value_or(0));
  329. }
  330. // 17.5.2 Table width algorithms: the 'table-layout' property
  331. // https://www.w3.org/TR/CSS22/tables.html#width-layout
  332. CSSPixels FormattingContext::compute_table_box_width_inside_table_wrapper(Box const& box, AvailableSpace const& available_space)
  333. {
  334. // Table wrapper width should be equal to width of table box it contains
  335. auto const& computed_values = box.computed_values();
  336. auto width_of_containing_block = available_space.width.to_px_or_zero();
  337. auto zero_value = CSS::Length::make_px(0);
  338. auto margin_left = computed_values.margin().left().resolved(box, width_of_containing_block);
  339. auto margin_right = computed_values.margin().right().resolved(box, width_of_containing_block);
  340. // If 'margin-left', or 'margin-right' are computed as 'auto', their used value is '0'.
  341. if (margin_left.is_auto())
  342. margin_left = zero_value;
  343. if (margin_right.is_auto())
  344. margin_right = zero_value;
  345. // table-wrapper can't have borders or paddings but it might have margin taken from table-root.
  346. auto available_width = width_of_containing_block - margin_left.to_px(box) - margin_right.to_px(box);
  347. Optional<Box const&> table_box;
  348. box.for_each_in_subtree_of_type<Box>([&](Box const& child_box) {
  349. if (child_box.display().is_table_inside()) {
  350. table_box = child_box;
  351. return TraversalDecision::Break;
  352. }
  353. return TraversalDecision::Continue;
  354. });
  355. VERIFY(table_box.has_value());
  356. LayoutState throwaway_state(&m_state);
  357. auto& table_box_state = throwaway_state.get_mutable(*table_box);
  358. auto const& table_box_computed_values = table_box->computed_values();
  359. table_box_state.border_left = table_box_computed_values.border_left().width;
  360. table_box_state.border_right = table_box_computed_values.border_right().width;
  361. auto context = make<TableFormattingContext>(throwaway_state, LayoutMode::IntrinsicSizing, *table_box, this);
  362. context->run_until_width_calculation(m_state.get(*table_box).available_inner_space_or_constraints_from(available_space));
  363. auto table_used_width = throwaway_state.get(*table_box).border_box_width();
  364. return available_space.width.is_definite() ? min(table_used_width, available_width) : table_used_width;
  365. }
  366. // 17.5.3 Table height algorithms
  367. // https://www.w3.org/TR/CSS22/tables.html#height-layout
  368. CSSPixels FormattingContext::compute_table_box_height_inside_table_wrapper(Box const& box, AvailableSpace const& available_space)
  369. {
  370. // Table wrapper height should be equal to height of table box it contains
  371. auto const& computed_values = box.computed_values();
  372. auto width_of_containing_block = available_space.width.to_px_or_zero();
  373. auto height_of_containing_block = available_space.height.to_px_or_zero();
  374. auto zero_value = CSS::Length::make_px(0);
  375. auto margin_top = computed_values.margin().top().resolved(box, width_of_containing_block);
  376. auto margin_bottom = computed_values.margin().bottom().resolved(box, width_of_containing_block);
  377. // If 'margin-top', or 'margin-top' are computed as 'auto', their used value is '0'.
  378. if (margin_top.is_auto())
  379. margin_top = zero_value;
  380. if (margin_bottom.is_auto())
  381. margin_bottom = zero_value;
  382. // table-wrapper can't have borders or paddings but it might have margin taken from table-root.
  383. auto available_height = height_of_containing_block - margin_top.to_px(box) - margin_bottom.to_px(box);
  384. LayoutState throwaway_state(&m_state);
  385. auto context = create_independent_formatting_context_if_needed(throwaway_state, LayoutMode::IntrinsicSizing, box);
  386. VERIFY(context);
  387. context->run(m_state.get(box).available_inner_space_or_constraints_from(available_space));
  388. Optional<Box const&> table_box;
  389. box.for_each_in_subtree_of_type<Box>([&](Box const& child_box) {
  390. if (child_box.display().is_table_inside()) {
  391. table_box = child_box;
  392. return TraversalDecision::Break;
  393. }
  394. return TraversalDecision::Continue;
  395. });
  396. VERIFY(table_box.has_value());
  397. auto table_used_height = throwaway_state.get(*table_box).border_box_height();
  398. return available_space.height.is_definite() ? min(table_used_height, available_height) : table_used_height;
  399. }
  400. // 10.3.2 Inline, replaced elements, https://www.w3.org/TR/CSS22/visudet.html#inline-replaced-width
  401. CSSPixels FormattingContext::tentative_width_for_replaced_element(Box const& box, CSS::Size const& computed_width, AvailableSpace const& available_space) const
  402. {
  403. // Treat percentages of indefinite containing block widths as 0 (the initial width).
  404. if (computed_width.is_percentage() && !m_state.get(*box.containing_block()).has_definite_width())
  405. return 0;
  406. auto computed_height = should_treat_height_as_auto(box, available_space) ? CSS::Size::make_auto() : box.computed_values().height();
  407. CSSPixels used_width = 0;
  408. if (computed_width.is_auto()) {
  409. used_width = computed_width.to_px(box, available_space.width.to_px_or_zero());
  410. } else {
  411. used_width = calculate_inner_width(box, available_space.width, computed_width);
  412. }
  413. // If 'height' and 'width' both have computed values of 'auto' and the element also has an intrinsic width,
  414. // then that intrinsic width is the used value of 'width'.
  415. if (computed_height.is_auto() && computed_width.is_auto() && box.has_natural_width())
  416. return box.natural_width().value();
  417. // If 'height' and 'width' both have computed values of 'auto' and the element has no intrinsic width,
  418. // but does have an intrinsic height and intrinsic ratio;
  419. // or if 'width' has a computed value of 'auto',
  420. // 'height' has some other computed value, and the element does have an intrinsic ratio; then the used value of 'width' is:
  421. //
  422. // (used height) * (intrinsic ratio)
  423. if ((computed_height.is_auto() && computed_width.is_auto() && !box.has_natural_width() && box.has_natural_height() && box.has_preferred_aspect_ratio())
  424. || (computed_width.is_auto() && !computed_height.is_auto() && box.has_preferred_aspect_ratio())) {
  425. return compute_height_for_replaced_element(box, available_space) * box.preferred_aspect_ratio().value();
  426. }
  427. // If 'height' and 'width' both have computed values of 'auto' and the element has an intrinsic ratio but no intrinsic height or width,
  428. // 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
  429. // depend on the replaced element's width, then the used value of 'width' is calculated from the constraint equation used for block-level,
  430. // non-replaced elements in normal flow.
  431. if (computed_height.is_auto() && computed_width.is_auto() && !box.has_natural_width() && !box.has_natural_height() && box.has_preferred_aspect_ratio()) {
  432. return calculate_stretch_fit_width(box, available_space.width);
  433. }
  434. // 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'.
  435. if (computed_width.is_auto() && box.has_natural_width())
  436. return box.natural_width().value();
  437. // 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.
  438. // 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.
  439. if (computed_width.is_auto())
  440. return 300;
  441. return used_width;
  442. }
  443. void FormattingContext::compute_width_for_absolutely_positioned_element(Box const& box, AvailableSpace const& available_space)
  444. {
  445. if (box_is_sized_as_replaced_element(box))
  446. compute_width_for_absolutely_positioned_replaced_element(box, available_space);
  447. else
  448. compute_width_for_absolutely_positioned_non_replaced_element(box, available_space);
  449. }
  450. void FormattingContext::compute_height_for_absolutely_positioned_element(Box const& box, AvailableSpace const& available_space, BeforeOrAfterInsideLayout before_or_after_inside_layout)
  451. {
  452. if (box_is_sized_as_replaced_element(box))
  453. compute_height_for_absolutely_positioned_replaced_element(box, available_space, before_or_after_inside_layout);
  454. else
  455. compute_height_for_absolutely_positioned_non_replaced_element(box, available_space, before_or_after_inside_layout);
  456. }
  457. CSSPixels FormattingContext::compute_width_for_replaced_element(Box const& box, AvailableSpace const& available_space) const
  458. {
  459. // 10.3.4 Block-level, replaced elements in normal flow...
  460. // 10.3.2 Inline, replaced elements
  461. auto zero_value = CSS::Length::make_px(0);
  462. auto width_of_containing_block = available_space.width.to_px_or_zero();
  463. auto computed_width = should_treat_width_as_auto(box, available_space) ? CSS::Size::make_auto() : box.computed_values().width();
  464. auto computed_height = should_treat_height_as_auto(box, available_space) ? CSS::Size::make_auto() : box.computed_values().height();
  465. // 1. The tentative used width is calculated (without 'min-width' and 'max-width')
  466. auto used_width = tentative_width_for_replaced_element(box, computed_width, available_space);
  467. if (computed_width.is_auto() && computed_height.is_auto() && box.has_preferred_aspect_ratio()) {
  468. CSSPixels w = used_width;
  469. CSSPixels h = tentative_height_for_replaced_element(box, computed_height, available_space);
  470. used_width = solve_replaced_size_constraint(w, h, box, available_space).width();
  471. return used_width;
  472. }
  473. // 2. The tentative used width is greater than 'max-width', the rules above are applied again,
  474. // but this time using the computed value of 'max-width' as the computed value for 'width'.
  475. if (!should_treat_max_width_as_none(box, available_space.width)) {
  476. auto const& computed_max_width = box.computed_values().max_width();
  477. if (used_width > computed_max_width.to_px(box, width_of_containing_block)) {
  478. used_width = tentative_width_for_replaced_element(box, computed_max_width, available_space);
  479. }
  480. }
  481. // 3. If the resulting width is smaller than 'min-width', the rules above are applied again,
  482. // but this time using the value of 'min-width' as the computed value for 'width'.
  483. auto computed_min_width = box.computed_values().min_width();
  484. if (!computed_min_width.is_auto()) {
  485. if (used_width < computed_min_width.to_px(box, width_of_containing_block)) {
  486. used_width = tentative_width_for_replaced_element(box, computed_min_width, available_space);
  487. }
  488. }
  489. return used_width;
  490. }
  491. // 10.6.2 Inline replaced elements, block-level replaced elements in normal flow, 'inline-block' replaced elements in normal flow and floating replaced elements
  492. // https://www.w3.org/TR/CSS22/visudet.html#inline-replaced-height
  493. CSSPixels FormattingContext::tentative_height_for_replaced_element(Box const& box, CSS::Size const& computed_height, AvailableSpace const& available_space) const
  494. {
  495. // If 'height' and 'width' both have computed values of 'auto' and the element also has
  496. // an intrinsic height, then that intrinsic height is the used value of 'height'.
  497. if (should_treat_width_as_auto(box, available_space) && should_treat_height_as_auto(box, available_space) && box.has_natural_height())
  498. return box.natural_height().value();
  499. // Otherwise, if 'height' has a computed value of 'auto', and the element has an intrinsic ratio then the used value of 'height' is:
  500. //
  501. // (used width) / (intrinsic ratio)
  502. if (computed_height.is_auto() && box.has_preferred_aspect_ratio())
  503. return m_state.get(box).content_width() / box.preferred_aspect_ratio().value();
  504. // 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'.
  505. if (computed_height.is_auto() && box.has_natural_height())
  506. return box.natural_height().value();
  507. // Otherwise, if 'height' has a computed value of 'auto', but none of the conditions above are met,
  508. // 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,
  509. // and has a width not greater than the device width.
  510. if (computed_height.is_auto())
  511. return 150;
  512. // FIXME: Handle cases when available_space is not definite.
  513. return calculate_inner_height(box, available_space, computed_height);
  514. }
  515. CSSPixels FormattingContext::compute_height_for_replaced_element(Box const& box, AvailableSpace const& available_space) const
  516. {
  517. // 10.6.2 Inline replaced elements
  518. // 10.6.4 Block-level replaced elements in normal flow
  519. // 10.6.6 Floating replaced elements
  520. // 10.6.10 'inline-block' replaced elements in normal flow
  521. auto height_of_containing_block = m_state.get(*box.non_anonymous_containing_block()).content_height();
  522. auto computed_width = should_treat_width_as_auto(box, available_space) ? CSS::Size::make_auto() : box.computed_values().width();
  523. auto computed_height = should_treat_height_as_auto(box, available_space) ? CSS::Size::make_auto() : box.computed_values().height();
  524. // 1. The tentative used height is calculated (without 'min-height' and 'max-height')
  525. CSSPixels used_height = tentative_height_for_replaced_element(box, computed_height, available_space);
  526. // However, for replaced elements with both 'width' and 'height' computed as 'auto',
  527. // use the algorithm under 'Minimum and maximum widths'
  528. // https://www.w3.org/TR/CSS22/visudet.html#min-max-widths
  529. // to find the used width and height.
  530. if ((computed_width.is_auto() && computed_height.is_auto() && box.has_preferred_aspect_ratio())
  531. // NOTE: This is a special case where calling tentative_width_for_replaced_element() would call us right back,
  532. // and we'd end up in an infinite loop. So we need to handle this case separately.
  533. && !(!box.has_natural_width() && box.has_natural_height())) {
  534. CSSPixels w = tentative_width_for_replaced_element(box, computed_width, available_space);
  535. CSSPixels h = used_height;
  536. used_height = solve_replaced_size_constraint(w, h, box, available_space).height();
  537. return used_height;
  538. }
  539. // 2. If this tentative height is greater than 'max-height', the rules above are applied again,
  540. // but this time using the value of 'max-height' as the computed value for 'height'.
  541. if (!should_treat_max_height_as_none(box, available_space.height)) {
  542. auto const& computed_max_height = box.computed_values().max_height();
  543. if (used_height > computed_max_height.to_px(box, height_of_containing_block)) {
  544. used_height = tentative_height_for_replaced_element(box, computed_max_height, available_space);
  545. }
  546. }
  547. // 3. If the resulting height is smaller than 'min-height', the rules above are applied again,
  548. // but this time using the value of 'min-height' as the computed value for 'height'.
  549. auto computed_min_height = box.computed_values().min_height();
  550. if (!computed_min_height.is_auto()) {
  551. if (used_height < computed_min_height.to_px(box, height_of_containing_block)) {
  552. used_height = tentative_height_for_replaced_element(box, computed_min_height, available_space);
  553. }
  554. }
  555. return used_height;
  556. }
  557. void FormattingContext::compute_width_for_absolutely_positioned_non_replaced_element(Box const& box, AvailableSpace const& available_space)
  558. {
  559. auto width_of_containing_block = available_space.width.to_px_or_zero();
  560. auto const& computed_values = box.computed_values();
  561. auto zero_value = CSS::Length::make_px(0);
  562. auto& box_state = m_state.get_mutable(box);
  563. auto margin_left = CSS::Length::make_auto();
  564. auto margin_right = CSS::Length::make_auto();
  565. auto const border_left = computed_values.border_left().width;
  566. auto const border_right = computed_values.border_right().width;
  567. auto const padding_left = box_state.padding_left;
  568. auto const padding_right = box_state.padding_right;
  569. auto computed_left = computed_values.inset().left();
  570. auto computed_right = computed_values.inset().right();
  571. auto left = computed_values.inset().left().to_px(box, width_of_containing_block);
  572. auto right = computed_values.inset().right().to_px(box, width_of_containing_block);
  573. auto try_compute_width = [&](CSS::Length const& a_width) {
  574. margin_left = computed_values.margin().left().resolved(box, width_of_containing_block);
  575. margin_right = computed_values.margin().right().resolved(box, width_of_containing_block);
  576. auto width = a_width;
  577. auto solve_for_left = [&] {
  578. return 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;
  579. };
  580. auto solve_for_width = [&] {
  581. return CSS::Length::make_px(max(CSSPixels(0), width_of_containing_block - left - margin_left.to_px(box) - border_left - padding_left - padding_right - border_right - margin_right.to_px(box) - right));
  582. };
  583. auto solve_for_right = [&] {
  584. return width_of_containing_block - left - margin_left.to_px(box) - border_left - padding_left - width.to_px(box) - padding_right - border_right - margin_right.to_px(box);
  585. };
  586. // If all three of 'left', 'width', and 'right' are 'auto':
  587. if (computed_left.is_auto() && width.is_auto() && computed_right.is_auto()) {
  588. // First set any 'auto' values for 'margin-left' and 'margin-right' to 0.
  589. if (margin_left.is_auto())
  590. margin_left = CSS::Length::make_px(0);
  591. if (margin_right.is_auto())
  592. margin_right = CSS::Length::make_px(0);
  593. // Then, if the 'direction' property of the element establishing the static-position containing block
  594. // is 'ltr' set 'left' to the static position and apply rule number three below;
  595. // otherwise, set 'right' to the static position and apply rule number one below.
  596. // NOTE: As with compute_height_for_absolutely_positioned_non_replaced_element, we actually apply these
  597. // steps in the opposite order since the static position may depend on the width of the box.
  598. auto result = calculate_shrink_to_fit_widths(box);
  599. auto available_width = solve_for_width();
  600. CSSPixels content_width = min(max(result.preferred_minimum_width, available_width.to_px(box)), result.preferred_width);
  601. width = CSS::Length::make_px(content_width);
  602. m_state.get_mutable(box).set_content_width(content_width);
  603. auto static_position = m_state.get(box).static_position();
  604. left = static_position.x();
  605. right = solve_for_right();
  606. }
  607. // If none of the three is auto:
  608. if (!computed_left.is_auto() && !width.is_auto() && !computed_right.is_auto()) {
  609. // If both margin-left and margin-right are auto,
  610. // solve the equation under the extra constraint that the two margins get equal values
  611. // FIXME: unless this would make them negative, in which case when direction of the containing block is ltr (rtl), set margin-left (margin-right) to 0 and solve for margin-right (margin-left).
  612. auto size_available_for_margins = width_of_containing_block - border_left - padding_left - width.to_px(box) - padding_right - border_right - left - right;
  613. if (margin_left.is_auto() && margin_right.is_auto()) {
  614. margin_left = CSS::Length::make_px(size_available_for_margins / 2);
  615. margin_right = CSS::Length::make_px(size_available_for_margins / 2);
  616. return width;
  617. }
  618. // If one of margin-left or margin-right is auto, solve the equation for that value.
  619. if (margin_left.is_auto()) {
  620. margin_left = CSS::Length::make_px(size_available_for_margins);
  621. return width;
  622. }
  623. if (margin_right.is_auto()) {
  624. margin_right = CSS::Length::make_px(size_available_for_margins);
  625. return width;
  626. }
  627. // If the values are over-constrained, ignore the value for left
  628. // (in case the direction property of the containing block is rtl)
  629. // or right (in case direction is ltr) and solve for that value.
  630. // NOTE: At this point we *are* over-constrained since none of margin-left, left, width, right, or margin-right are auto.
  631. // FIXME: Check direction.
  632. right = solve_for_right();
  633. return width;
  634. }
  635. if (margin_left.is_auto())
  636. margin_left = CSS::Length::make_px(0);
  637. if (margin_right.is_auto())
  638. margin_right = CSS::Length::make_px(0);
  639. // 1. 'left' and 'width' are 'auto' and 'right' is not 'auto',
  640. // then the width is shrink-to-fit. Then solve for 'left'
  641. if (computed_left.is_auto() && width.is_auto() && !computed_right.is_auto()) {
  642. auto result = calculate_shrink_to_fit_widths(box);
  643. auto available_width = solve_for_width();
  644. width = CSS::Length::make_px(min(max(result.preferred_minimum_width, available_width.to_px(box)), result.preferred_width));
  645. left = solve_for_left();
  646. }
  647. // 2. 'left' and 'right' are 'auto' and 'width' is not 'auto',
  648. // then if the 'direction' property of the element establishing
  649. // the static-position containing block is 'ltr' set 'left'
  650. // to the static position, otherwise set 'right' to the static position.
  651. // Then solve for 'left' (if 'direction is 'rtl') or 'right' (if 'direction' is 'ltr').
  652. else if (computed_left.is_auto() && computed_right.is_auto() && !width.is_auto()) {
  653. // FIXME: Check direction
  654. auto static_position = m_state.get(box).static_position();
  655. left = static_position.x();
  656. right = solve_for_right();
  657. }
  658. // 3. 'width' and 'right' are 'auto' and 'left' is not 'auto',
  659. // then the width is shrink-to-fit. Then solve for 'right'
  660. else if (width.is_auto() && computed_right.is_auto() && !computed_left.is_auto()) {
  661. auto result = calculate_shrink_to_fit_widths(box);
  662. auto available_width = solve_for_width();
  663. width = CSS::Length::make_px(min(max(result.preferred_minimum_width, available_width.to_px(box)), result.preferred_width));
  664. right = solve_for_right();
  665. }
  666. // 4. 'left' is 'auto', 'width' and 'right' are not 'auto', then solve for 'left'
  667. else if (computed_left.is_auto() && !width.is_auto() && !computed_right.is_auto()) {
  668. left = solve_for_left();
  669. }
  670. // 5. 'width' is 'auto', 'left' and 'right' are not 'auto', then solve for 'width'
  671. else if (width.is_auto() && !computed_left.is_auto() && !computed_right.is_auto()) {
  672. width = solve_for_width();
  673. }
  674. // 6. 'right' is 'auto', 'left' and 'width' are not 'auto', then solve for 'right'
  675. else if (computed_right.is_auto() && !computed_left.is_auto() && !width.is_auto()) {
  676. right = solve_for_right();
  677. }
  678. return width;
  679. };
  680. // 1. The tentative used width is calculated (without 'min-width' and 'max-width')
  681. auto used_width = try_compute_width([&] {
  682. if (is<TableWrapper>(box))
  683. return CSS::Length::make_px(compute_table_box_width_inside_table_wrapper(box, available_space));
  684. if (computed_values.width().is_auto())
  685. return CSS::Length::make_auto();
  686. return CSS::Length::make_px(calculate_inner_width(box, available_space.width, computed_values.width()));
  687. }());
  688. // 2. The tentative used width is greater than 'max-width', the rules above are applied again,
  689. // but this time using the computed value of 'max-width' as the computed value for 'width'.
  690. if (!should_treat_max_width_as_none(box, available_space.width)) {
  691. auto max_width = calculate_inner_width(box, available_space.width, computed_values.max_width());
  692. if (used_width.to_px(box) > max_width) {
  693. used_width = try_compute_width(CSS::Length::make_px(max_width));
  694. }
  695. }
  696. // 3. If the resulting width is smaller than 'min-width', the rules above are applied again,
  697. // but this time using the value of 'min-width' as the computed value for 'width'.
  698. if (!computed_values.min_width().is_auto()) {
  699. auto min_width = calculate_inner_width(box, available_space.width, computed_values.min_width());
  700. if (used_width.to_px(box) < min_width) {
  701. used_width = try_compute_width(CSS::Length::make_px(min_width));
  702. }
  703. }
  704. box_state.set_content_width(used_width.to_px(box));
  705. box_state.inset_left = left;
  706. box_state.inset_right = right;
  707. box_state.margin_left = margin_left.to_px(box);
  708. box_state.margin_right = margin_right.to_px(box);
  709. }
  710. void FormattingContext::compute_width_for_absolutely_positioned_replaced_element(Box const& box, AvailableSpace const& available_space)
  711. {
  712. // 10.3.8 Absolutely positioned, replaced elements
  713. // In this case, section 10.3.7 applies up through and including the constraint equation,
  714. // but the rest of section 10.3.7 is replaced by the following rules:
  715. // 1. The used value of 'width' is determined as for inline replaced elements.
  716. if (is<ReplacedBox>(box)) {
  717. // FIXME: This const_cast is gross.
  718. static_cast<ReplacedBox&>(const_cast<Box&>(box)).prepare_for_replaced_layout();
  719. }
  720. auto width = compute_width_for_replaced_element(box, available_space);
  721. auto width_of_containing_block = available_space.width.to_px_or_zero();
  722. auto available = width_of_containing_block - width;
  723. auto const& computed_values = box.computed_values();
  724. auto left = computed_values.inset().left();
  725. auto margin_left = computed_values.margin().left();
  726. auto right = computed_values.inset().right();
  727. auto margin_right = computed_values.margin().right();
  728. auto static_position = m_state.get(box).static_position();
  729. auto to_px = [&](const CSS::LengthPercentage& l) {
  730. return l.to_px(box, width_of_containing_block);
  731. };
  732. // If 'margin-left' or 'margin-right' is specified as 'auto' its used value is determined by the rules below.
  733. // 2. If both 'left' and 'right' have the value 'auto', then if the 'direction' property of the
  734. // element establishing the static-position containing block is 'ltr', set 'left' to the static
  735. // position; else if 'direction' is 'rtl', set 'right' to the static position.
  736. if (left.is_auto() && right.is_auto()) {
  737. left = CSS::Length::make_px(static_position.x());
  738. }
  739. // 3. If 'left' or 'right' are 'auto', replace any 'auto' on 'margin-left' or 'margin-right' with '0'.
  740. if (left.is_auto() || right.is_auto()) {
  741. if (margin_left.is_auto())
  742. margin_left = CSS::Length::make_px(0);
  743. if (margin_right.is_auto())
  744. margin_right = CSS::Length::make_px(0);
  745. }
  746. // 4. If at this point both 'margin-left' and 'margin-right' are still 'auto', solve the equation
  747. // under the extra constraint that the two margins must get equal values, unless this would make
  748. // them negative, in which case when the direction of the containing block is 'ltr' ('rtl'),
  749. // set 'margin-left' ('margin-right') to zero and solve for 'margin-right' ('margin-left').
  750. if (margin_left.is_auto() && margin_right.is_auto()) {
  751. auto remainder = available - to_px(left) - to_px(right);
  752. if (remainder < 0) {
  753. margin_left = CSS::Length::make_px(0);
  754. margin_right = CSS::Length::make_px(0);
  755. } else {
  756. margin_left = CSS::Length::make_px(remainder / 2);
  757. margin_right = CSS::Length::make_px(remainder / 2);
  758. }
  759. }
  760. // 5. If at this point there is an 'auto' left, solve the equation for that value.
  761. if (left.is_auto()) {
  762. left = CSS::Length::make_px(available - to_px(right) - to_px(margin_left) - to_px(margin_right));
  763. } else if (right.is_auto()) {
  764. right = CSS::Length::make_px(available - to_px(left) - to_px(margin_left) - to_px(margin_right));
  765. } else if (margin_left.is_auto()) {
  766. margin_left = CSS::Length::make_px(available - to_px(left) - to_px(right) - to_px(margin_right));
  767. } else if (margin_right.is_auto()) {
  768. margin_right = CSS::Length::make_px(available - to_px(left) - to_px(margin_left) - to_px(right));
  769. }
  770. // 6. If at this point the values are over-constrained, ignore the value for either 'left'
  771. // (in case the 'direction' property of the containing block is 'rtl') or 'right'
  772. // (in case 'direction' is 'ltr') and solve for that value.
  773. if (0 != available - to_px(left) - to_px(right) - to_px(margin_left) - to_px(margin_right)) {
  774. right = CSS::Length::make_px(available - to_px(left) - to_px(margin_left) - to_px(margin_right));
  775. }
  776. auto& box_state = m_state.get_mutable(box);
  777. box_state.inset_left = to_px(left);
  778. box_state.inset_right = to_px(right);
  779. box_state.margin_left = to_px(margin_left);
  780. box_state.margin_right = to_px(margin_right);
  781. box_state.set_content_width(width);
  782. }
  783. // https://drafts.csswg.org/css-position-3/#abs-non-replaced-height
  784. void FormattingContext::compute_height_for_absolutely_positioned_non_replaced_element(Box const& box, AvailableSpace const& available_space, BeforeOrAfterInsideLayout before_or_after_inside_layout)
  785. {
  786. // 5.3. The Height Of Absolutely Positioned, Non-Replaced Elements
  787. // For absolutely positioned elements, the used values of the vertical dimensions must satisfy this constraint:
  788. // top + margin-top + border-top-width + padding-top + height + padding-bottom + border-bottom-width + margin-bottom + bottom = height of containing block
  789. // NOTE: This function is called twice: both before and after inside layout.
  790. // In the before pass, if it turns out we need the automatic height of the box, we abort these steps.
  791. // This allows the box to retain an indefinite height from the perspective of inside layout.
  792. auto apply_min_max_height_constraints = [this, &box, &available_space](CSS::Length unconstrained_height) -> CSS::Length {
  793. auto const& computed_min_height = box.computed_values().min_height();
  794. auto const& computed_max_height = box.computed_values().max_height();
  795. auto constrained_height = unconstrained_height;
  796. if (!computed_max_height.is_none()) {
  797. auto inner_max_height = calculate_inner_height(box, available_space, computed_max_height);
  798. if (inner_max_height < constrained_height.to_px(box))
  799. constrained_height = CSS::Length::make_px(inner_max_height);
  800. }
  801. if (!computed_min_height.is_auto()) {
  802. auto inner_min_height = calculate_inner_height(box, available_space, computed_min_height);
  803. if (inner_min_height > constrained_height.to_px(box))
  804. constrained_height = CSS::Length::make_px(inner_min_height);
  805. }
  806. return constrained_height;
  807. };
  808. auto margin_top = box.computed_values().margin().top();
  809. auto margin_bottom = box.computed_values().margin().bottom();
  810. auto top = box.computed_values().inset().top();
  811. auto bottom = box.computed_values().inset().bottom();
  812. auto width_of_containing_block = available_space.width.to_px_or_zero();
  813. auto height_of_containing_block = available_space.height.to_px_or_zero();
  814. enum class ClampToZero {
  815. No,
  816. Yes,
  817. };
  818. auto& state = m_state.get(box);
  819. auto try_compute_height = [&](CSS::Length height) -> CSS::Length {
  820. auto solve_for = [&](CSS::Length length, ClampToZero clamp_to_zero = ClampToZero::No) {
  821. auto unclamped_value = height_of_containing_block
  822. - top.to_px(box, height_of_containing_block)
  823. - margin_top.to_px(box, width_of_containing_block)
  824. - box.computed_values().border_top().width
  825. - state.padding_top
  826. - apply_min_max_height_constraints(height).to_px(box)
  827. - state.padding_bottom
  828. - box.computed_values().border_bottom().width
  829. - margin_bottom.to_px(box, width_of_containing_block)
  830. - bottom.to_px(box, height_of_containing_block)
  831. + length.to_px(box);
  832. if (clamp_to_zero == ClampToZero::Yes)
  833. return CSS::Length::make_px(max(CSSPixels(0), unclamped_value));
  834. return CSS::Length::make_px(unclamped_value);
  835. };
  836. auto solve_for_top = [&] {
  837. top = solve_for(top.resolved(box, height_of_containing_block));
  838. };
  839. auto solve_for_bottom = [&] {
  840. bottom = solve_for(bottom.resolved(box, height_of_containing_block));
  841. };
  842. auto solve_for_height = [&] {
  843. height = solve_for(height, ClampToZero::Yes);
  844. };
  845. auto solve_for_margin_top = [&] {
  846. margin_top = solve_for(margin_top.resolved(box, width_of_containing_block));
  847. };
  848. auto solve_for_margin_bottom = [&] {
  849. margin_bottom = solve_for(margin_bottom.resolved(box, width_of_containing_block));
  850. };
  851. auto solve_for_margin_top_and_margin_bottom = [&] {
  852. auto remainder = solve_for(CSS::Length::make_px(margin_top.to_px(box, width_of_containing_block) + margin_bottom.to_px(box, width_of_containing_block))).to_px(box);
  853. margin_top = CSS::Length::make_px(remainder / 2);
  854. margin_bottom = CSS::Length::make_px(remainder / 2);
  855. };
  856. // If all three of top, height, and bottom are auto:
  857. if (top.is_auto() && height.is_auto() && bottom.is_auto()) {
  858. // First set any auto values for margin-top and margin-bottom to 0,
  859. if (margin_top.is_auto())
  860. margin_top = CSS::Length::make_px(0);
  861. if (margin_bottom.is_auto())
  862. margin_bottom = CSS::Length::make_px(0);
  863. // then set top to the static position,
  864. // and finally apply rule number three below.
  865. // NOTE: We actually perform these two steps in the opposite order,
  866. // because the static position may depend on the height of the box (due to alignment properties).
  867. auto maybe_height = compute_auto_height_for_absolutely_positioned_element(box, available_space, before_or_after_inside_layout);
  868. if (!maybe_height.has_value())
  869. return height;
  870. height = CSS::Length::make_px(maybe_height.value());
  871. auto constrained_height = apply_min_max_height_constraints(height);
  872. m_state.get_mutable(box).set_content_height(constrained_height.to_px(box));
  873. auto static_position = m_state.get(box).static_position();
  874. top = CSS::Length::make_px(static_position.y());
  875. solve_for_bottom();
  876. }
  877. // If none of the three are auto:
  878. else if (!top.is_auto() && !height.is_auto() && !bottom.is_auto()) {
  879. // If both margin-top and margin-bottom are auto,
  880. if (margin_top.is_auto() && margin_bottom.is_auto()) {
  881. // solve the equation under the extra constraint that the two margins get equal values.
  882. solve_for_margin_top_and_margin_bottom();
  883. }
  884. // If one of margin-top or margin-bottom is auto,
  885. else if (margin_top.is_auto() || margin_bottom.is_auto()) {
  886. // solve the equation for that value.
  887. if (margin_top.is_auto())
  888. solve_for_margin_top();
  889. else
  890. solve_for_margin_bottom();
  891. }
  892. // If the values are over-constrained,
  893. else {
  894. // ignore the value for bottom and solve for that value.
  895. solve_for_bottom();
  896. }
  897. }
  898. // Otherwise,
  899. else {
  900. // set auto values for margin-top and margin-bottom to 0,
  901. if (margin_top.is_auto())
  902. margin_top = CSS::Length::make_px(0);
  903. if (margin_bottom.is_auto())
  904. margin_bottom = CSS::Length::make_px(0);
  905. // and pick one of the following six rules that apply.
  906. // 1. If top and height are auto and bottom is not auto,
  907. if (top.is_auto() && height.is_auto() && !bottom.is_auto()) {
  908. // then the height is based on the Auto heights for block formatting context roots,
  909. auto maybe_height = compute_auto_height_for_absolutely_positioned_element(box, available_space, before_or_after_inside_layout);
  910. if (!maybe_height.has_value())
  911. return height;
  912. height = CSS::Length::make_px(maybe_height.value());
  913. // and solve for top.
  914. solve_for_top();
  915. }
  916. // 2. If top and bottom are auto and height is not auto,
  917. else if (top.is_auto() && bottom.is_auto() && !height.is_auto()) {
  918. // then set top to the static position,
  919. top = CSS::Length::make_px(m_state.get(box).static_position().y());
  920. // then solve for bottom.
  921. solve_for_bottom();
  922. }
  923. // 3. If height and bottom are auto and top is not auto,
  924. else if (height.is_auto() && bottom.is_auto() && !top.is_auto()) {
  925. // then the height is based on the Auto heights for block formatting context roots,
  926. auto maybe_height = compute_auto_height_for_absolutely_positioned_element(box, available_space, before_or_after_inside_layout);
  927. if (!maybe_height.has_value())
  928. return height;
  929. height = CSS::Length::make_px(maybe_height.value());
  930. // and solve for bottom.
  931. solve_for_bottom();
  932. }
  933. // 4. If top is auto, height and bottom are not auto,
  934. else if (top.is_auto() && !height.is_auto() && !bottom.is_auto()) {
  935. // then solve for top.
  936. solve_for_top();
  937. }
  938. // 5. If height is auto, top and bottom are not auto,
  939. else if (height.is_auto() && !top.is_auto() && !bottom.is_auto()) {
  940. // then solve for height.
  941. solve_for_height();
  942. }
  943. // 6. If bottom is auto, top and height are not auto,
  944. else if (bottom.is_auto() && !top.is_auto() && !height.is_auto()) {
  945. // then solve for bottom.
  946. solve_for_bottom();
  947. }
  948. }
  949. return height;
  950. };
  951. // Compute the height based on box type and CSS properties:
  952. // https://www.w3.org/TR/css-sizing-3/#box-sizing
  953. auto used_height = try_compute_height([&] {
  954. if (is<TableWrapper>(box))
  955. return CSS::Length::make_px(compute_table_box_height_inside_table_wrapper(box, available_space));
  956. if (should_treat_height_as_auto(box, available_space))
  957. return CSS::Length::make_auto();
  958. return CSS::Length::make_px(calculate_inner_height(box, available_space, box.computed_values().height()));
  959. }());
  960. used_height = apply_min_max_height_constraints(used_height);
  961. // NOTE: The following is not directly part of any spec, but this is where we resolve
  962. // the final used values for vertical margin/border/padding.
  963. auto& box_state = m_state.get_mutable(box);
  964. box_state.set_content_height(used_height.to_px(box));
  965. // do not set calculated insets or margins on the first pass, there will be a second pass
  966. if (before_or_after_inside_layout == BeforeOrAfterInsideLayout::Before)
  967. return;
  968. box_state.inset_top = top.to_px(box, height_of_containing_block);
  969. box_state.inset_bottom = bottom.to_px(box, height_of_containing_block);
  970. box_state.margin_top = margin_top.to_px(box, width_of_containing_block);
  971. box_state.margin_bottom = margin_bottom.to_px(box, width_of_containing_block);
  972. }
  973. // 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.
  974. CSSPixelRect FormattingContext::content_box_rect_in_static_position_ancestor_coordinate_space(Box const& box, Box const& ancestor_box) const
  975. {
  976. auto rect = content_box_rect(box);
  977. if (&box == &ancestor_box)
  978. return rect;
  979. for (auto const* current = box.static_position_containing_block(); current; current = current->static_position_containing_block()) {
  980. if (current == &ancestor_box)
  981. return rect;
  982. auto const& current_state = m_state.get(*current);
  983. rect.translate_by(current_state.offset);
  984. }
  985. // If we get here, ancestor_box was not an ancestor of `box`!
  986. VERIFY_NOT_REACHED();
  987. }
  988. void FormattingContext::layout_absolutely_positioned_element(Box const& box, AvailableSpace const& available_space)
  989. {
  990. if (box.is_svg_box()) {
  991. dbgln("FIXME: Implement support for absolutely positioned SVG elements.");
  992. return;
  993. }
  994. auto& containing_block_state = m_state.get_mutable(*box.containing_block());
  995. // The size of the containing block of an abspos box is always definite from the perspective of the abspos box.
  996. // Since abspos boxes are laid out last, we can mark the containing block as having definite sizes at this point.
  997. containing_block_state.set_has_definite_width(true);
  998. containing_block_state.set_has_definite_height(true);
  999. auto& box_state = m_state.get_mutable(box);
  1000. // The border computed values are not changed by the compute_height & width calculations below.
  1001. // The spec only adjusts and computes sizes, insets and margins.
  1002. box_state.border_left = box.computed_values().border_left().width;
  1003. box_state.border_right = box.computed_values().border_right().width;
  1004. box_state.border_top = box.computed_values().border_top().width;
  1005. box_state.border_bottom = box.computed_values().border_bottom().width;
  1006. auto const containing_block_width = available_space.width.to_px_or_zero();
  1007. box_state.padding_left = box.computed_values().padding().left().to_px(box, containing_block_width);
  1008. box_state.padding_right = box.computed_values().padding().right().to_px(box, containing_block_width);
  1009. box_state.padding_top = box.computed_values().padding().top().to_px(box, containing_block_width);
  1010. box_state.padding_bottom = box.computed_values().padding().bottom().to_px(box, containing_block_width);
  1011. compute_width_for_absolutely_positioned_element(box, available_space);
  1012. // NOTE: We compute height before *and* after doing inside layout.
  1013. // This is done so that inside layout can resolve percentage heights.
  1014. // In some situations, e.g with non-auto top & bottom values, the height can be determined early.
  1015. compute_height_for_absolutely_positioned_element(box, available_space, BeforeOrAfterInsideLayout::Before);
  1016. // If the box width and/or height is fixed and/or or resolved from inset properties,
  1017. // mark the size as being definite (since layout was not required to resolve it, per CSS-SIZING-3).
  1018. if (box.computed_values().inset().left().is_length() && box.computed_values().inset().right().is_length()) {
  1019. box_state.set_has_definite_width(true);
  1020. }
  1021. if (box.computed_values().inset().top().is_length() && box.computed_values().inset().bottom().is_length()) {
  1022. box_state.set_has_definite_height(true);
  1023. }
  1024. auto independent_formatting_context = layout_inside(box, LayoutMode::Normal, box_state.available_inner_space_or_constraints_from(available_space));
  1025. compute_height_for_absolutely_positioned_element(box, available_space, BeforeOrAfterInsideLayout::After);
  1026. CSSPixelPoint used_offset;
  1027. auto static_position = m_state.get(box).static_position();
  1028. if (box.computed_values().inset().top().is_auto() && box.computed_values().inset().bottom().is_auto()) {
  1029. used_offset.set_y(static_position.y());
  1030. } else {
  1031. used_offset.set_y(box_state.inset_top);
  1032. // NOTE: Absolutely positioned boxes are relative to the *padding edge* of the containing block.
  1033. used_offset.translate_by(0, -containing_block_state.padding_top);
  1034. }
  1035. if (box.computed_values().inset().left().is_auto() && box.computed_values().inset().right().is_auto()) {
  1036. used_offset.set_x(static_position.x());
  1037. } else {
  1038. used_offset.set_x(box_state.inset_left);
  1039. // NOTE: Absolutely positioned boxes are relative to the *padding edge* of the containing block.
  1040. used_offset.translate_by(-containing_block_state.padding_left, 0);
  1041. }
  1042. used_offset.translate_by(box_state.margin_box_left(), box_state.margin_box_top());
  1043. box_state.set_content_offset(used_offset);
  1044. if (independent_formatting_context)
  1045. independent_formatting_context->parent_context_did_dimension_child_root_box();
  1046. }
  1047. void FormattingContext::compute_height_for_absolutely_positioned_replaced_element(Box const& box, AvailableSpace const& available_space, BeforeOrAfterInsideLayout before_or_after_inside_layout)
  1048. {
  1049. // 10.6.5 Absolutely positioned, replaced elements
  1050. // This situation is similar to 10.6.4, except that the element has an intrinsic height.
  1051. // The used value of 'height' is determined as for inline replaced elements.
  1052. auto height = compute_height_for_replaced_element(box, available_space);
  1053. auto height_of_containing_block = available_space.height.to_px_or_zero();
  1054. auto available = height_of_containing_block - height;
  1055. auto const& computed_values = box.computed_values();
  1056. auto top = computed_values.inset().top();
  1057. auto margin_top = computed_values.margin().top();
  1058. auto bottom = computed_values.inset().bottom();
  1059. auto margin_bottom = computed_values.margin().bottom();
  1060. auto static_position = m_state.get(box).static_position();
  1061. auto to_px = [&](const CSS::LengthPercentage& l) {
  1062. return l.to_px(box, height_of_containing_block);
  1063. };
  1064. // If 'margin-top' or 'margin-bottom' is specified as 'auto' its used value is determined by the rules below.
  1065. // 2. If both 'top' and 'bottom' have the value 'auto', replace 'top' with the element's static position.
  1066. if (top.is_auto() && bottom.is_auto()) {
  1067. top = CSS::Length::make_px(static_position.x());
  1068. }
  1069. // 3. If 'bottom' is 'auto', replace any 'auto' on 'margin-top' or 'margin-bottom' with '0'.
  1070. if (bottom.is_auto()) {
  1071. if (margin_top.is_auto())
  1072. margin_top = CSS::Length::make_px(0);
  1073. if (margin_bottom.is_auto())
  1074. margin_bottom = CSS::Length::make_px(0);
  1075. }
  1076. // 4. If at this point both 'margin-top' and 'margin-bottom' are still 'auto',
  1077. // solve the equation under the extra constraint that the two margins must get equal values.
  1078. if (margin_top.is_auto() && margin_bottom.is_auto()) {
  1079. auto remainder = available - to_px(top) - to_px(bottom);
  1080. margin_top = CSS::Length::make_px(remainder / 2);
  1081. margin_bottom = CSS::Length::make_px(remainder / 2);
  1082. }
  1083. // 5. If at this point there is an 'auto' left, solve the equation for that value.
  1084. if (top.is_auto()) {
  1085. top = CSS::Length::make_px(available - to_px(bottom) - to_px(margin_top) - to_px(margin_bottom));
  1086. } else if (bottom.is_auto()) {
  1087. bottom = CSS::Length::make_px(available - to_px(top) - to_px(margin_top) - to_px(margin_bottom));
  1088. } else if (margin_top.is_auto()) {
  1089. margin_top = CSS::Length::make_px(available - to_px(top) - to_px(bottom) - to_px(margin_bottom));
  1090. } else if (margin_bottom.is_auto()) {
  1091. margin_bottom = CSS::Length::make_px(available - to_px(top) - to_px(margin_top) - to_px(bottom));
  1092. }
  1093. // 6. If at this point the values are over-constrained, ignore the value for 'bottom' and solve for that value.
  1094. if (0 != available - to_px(top) - to_px(bottom) - to_px(margin_top) - to_px(margin_bottom)) {
  1095. bottom = CSS::Length::make_px(available - to_px(top) - to_px(margin_top) - to_px(margin_bottom));
  1096. }
  1097. auto& box_state = m_state.get_mutable(box);
  1098. box_state.set_content_height(height);
  1099. // do not set calculated insets or margins on the first pass, there will be a second pass
  1100. if (before_or_after_inside_layout == BeforeOrAfterInsideLayout::Before)
  1101. return;
  1102. box_state.inset_top = to_px(top);
  1103. box_state.inset_bottom = to_px(bottom);
  1104. box_state.margin_top = to_px(margin_top);
  1105. box_state.margin_bottom = to_px(margin_bottom);
  1106. }
  1107. // https://www.w3.org/TR/css-position-3/#relpos-insets
  1108. void FormattingContext::compute_inset(NodeWithStyleAndBoxModelMetrics const& box, CSSPixelSize containing_block_size)
  1109. {
  1110. if (box.computed_values().position() != CSS::Positioning::Relative)
  1111. return;
  1112. auto resolve_two_opposing_insets = [&](CSS::LengthPercentage const& computed_first, CSS::LengthPercentage const& computed_second, CSSPixels& used_start, CSSPixels& used_end, CSSPixels reference_for_percentage) {
  1113. auto resolved_first = computed_first.to_px(box, reference_for_percentage);
  1114. auto resolved_second = computed_second.to_px(box, reference_for_percentage);
  1115. if (computed_first.is_auto() && computed_second.is_auto()) {
  1116. // If opposing inset properties in an axis both compute to auto (their initial values),
  1117. // their used values are zero (i.e., the boxes stay in their original position in that axis).
  1118. used_start = 0;
  1119. used_end = 0;
  1120. } else if (computed_first.is_auto() || computed_second.is_auto()) {
  1121. // If only one is auto, its used value becomes the negation of the other, and the box is shifted by the specified amount.
  1122. if (computed_first.is_auto()) {
  1123. used_end = resolved_second;
  1124. used_start = -used_end;
  1125. } else {
  1126. used_start = resolved_first;
  1127. used_end = -used_start;
  1128. }
  1129. } else {
  1130. // If neither is auto, the position is over-constrained; (with respect to the writing mode of its containing block)
  1131. // the computed end side value is ignored, and its used value becomes the negation of the start side.
  1132. used_start = resolved_first;
  1133. used_end = -used_start;
  1134. }
  1135. };
  1136. auto& box_state = m_state.get_mutable(box);
  1137. auto const& computed_values = box.computed_values();
  1138. // FIXME: Respect the containing block's writing-mode.
  1139. resolve_two_opposing_insets(computed_values.inset().left(), computed_values.inset().right(), box_state.inset_left, box_state.inset_right, containing_block_size.width());
  1140. resolve_two_opposing_insets(computed_values.inset().top(), computed_values.inset().bottom(), box_state.inset_top, box_state.inset_bottom, containing_block_size.height());
  1141. }
  1142. // https://drafts.csswg.org/css-sizing-3/#fit-content-size
  1143. CSSPixels FormattingContext::calculate_fit_content_width(Layout::Box const& box, AvailableSpace const& available_space) const
  1144. {
  1145. // If the available space in a given axis is definite,
  1146. // equal to clamp(min-content size, stretch-fit size, max-content size)
  1147. // (i.e. max(min-content size, min(max-content size, stretch-fit size))).
  1148. if (available_space.width.is_definite()) {
  1149. return max(calculate_min_content_width(box),
  1150. min(calculate_stretch_fit_width(box, available_space.width),
  1151. calculate_max_content_width(box)));
  1152. }
  1153. // When sizing under a min-content constraint, equal to the min-content size.
  1154. if (available_space.width.is_min_content())
  1155. return calculate_min_content_width(box);
  1156. // Otherwise, equal to the max-content size in that axis.
  1157. return calculate_max_content_width(box);
  1158. }
  1159. // https://drafts.csswg.org/css-sizing-3/#fit-content-size
  1160. CSSPixels FormattingContext::calculate_fit_content_height(Layout::Box const& box, AvailableSpace const& available_space) const
  1161. {
  1162. // If the available space in a given axis is definite,
  1163. // equal to clamp(min-content size, stretch-fit size, max-content size)
  1164. // (i.e. max(min-content size, min(max-content size, stretch-fit size))).
  1165. if (available_space.height.is_definite()) {
  1166. return max(calculate_min_content_height(box, available_space.width.to_px_or_zero()),
  1167. min(calculate_stretch_fit_height(box, available_space.height),
  1168. calculate_max_content_height(box, available_space.width.to_px_or_zero())));
  1169. }
  1170. // When sizing under a min-content constraint, equal to the min-content size.
  1171. if (available_space.height.is_min_content())
  1172. return calculate_min_content_height(box, available_space.width.to_px_or_zero());
  1173. // Otherwise, equal to the max-content size in that axis.
  1174. return calculate_max_content_height(box, available_space.width.to_px_or_zero());
  1175. }
  1176. CSSPixels FormattingContext::calculate_min_content_width(Layout::Box const& box) const
  1177. {
  1178. if (box.has_natural_width())
  1179. return *box.natural_width();
  1180. auto& root_state = m_state.m_root;
  1181. auto& cache = *root_state.intrinsic_sizes.ensure(&box, [] { return adopt_own(*new LayoutState::IntrinsicSizes); });
  1182. if (cache.min_content_width.has_value())
  1183. return *cache.min_content_width;
  1184. LayoutState throwaway_state(&m_state);
  1185. auto& box_state = throwaway_state.get_mutable(box);
  1186. box_state.width_constraint = SizeConstraint::MinContent;
  1187. box_state.set_indefinite_content_width();
  1188. auto context = const_cast<FormattingContext*>(this)->create_independent_formatting_context_if_needed(throwaway_state, LayoutMode::IntrinsicSizing, box);
  1189. if (!context) {
  1190. context = make<BlockFormattingContext>(throwaway_state, LayoutMode::IntrinsicSizing, verify_cast<BlockContainer>(box), nullptr);
  1191. }
  1192. auto available_width = AvailableSize::make_min_content();
  1193. auto available_height = box_state.has_definite_height()
  1194. ? AvailableSize::make_definite(box_state.content_height())
  1195. : AvailableSize::make_indefinite();
  1196. context->run(AvailableSpace(available_width, available_height));
  1197. cache.min_content_width = context->automatic_content_width();
  1198. if (cache.min_content_width->might_be_saturated()) {
  1199. // HACK: If layout calculates a non-finite result, something went wrong. Force it to zero and log a little whine.
  1200. dbgln("FIXME: Calculated non-finite min-content width for {}", box.debug_description());
  1201. cache.min_content_width = 0;
  1202. }
  1203. return *cache.min_content_width;
  1204. }
  1205. CSSPixels FormattingContext::calculate_max_content_width(Layout::Box const& box) const
  1206. {
  1207. if (box.has_natural_width())
  1208. return *box.natural_width();
  1209. auto& root_state = m_state.m_root;
  1210. auto& cache = *root_state.intrinsic_sizes.ensure(&box, [] { return adopt_own(*new LayoutState::IntrinsicSizes); });
  1211. if (cache.max_content_width.has_value())
  1212. return *cache.max_content_width;
  1213. LayoutState throwaway_state(&m_state);
  1214. auto& box_state = throwaway_state.get_mutable(box);
  1215. box_state.width_constraint = SizeConstraint::MaxContent;
  1216. box_state.set_indefinite_content_width();
  1217. auto context = const_cast<FormattingContext*>(this)->create_independent_formatting_context_if_needed(throwaway_state, LayoutMode::IntrinsicSizing, box);
  1218. if (!context) {
  1219. context = make<BlockFormattingContext>(throwaway_state, LayoutMode::IntrinsicSizing, verify_cast<BlockContainer>(box), nullptr);
  1220. }
  1221. auto available_width = AvailableSize::make_max_content();
  1222. auto available_height = box_state.has_definite_height()
  1223. ? AvailableSize::make_definite(box_state.content_height())
  1224. : AvailableSize::make_indefinite();
  1225. context->run(AvailableSpace(available_width, available_height));
  1226. cache.max_content_width = context->automatic_content_width();
  1227. if (cache.max_content_width->might_be_saturated()) {
  1228. // HACK: If layout calculates a non-finite result, something went wrong. Force it to zero and log a little whine.
  1229. dbgln("FIXME: Calculated non-finite max-content width for {}", box.debug_description());
  1230. cache.max_content_width = 0;
  1231. }
  1232. return *cache.max_content_width;
  1233. }
  1234. // https://www.w3.org/TR/css-sizing-3/#min-content-block-size
  1235. CSSPixels FormattingContext::calculate_min_content_height(Layout::Box const& box, CSSPixels width) const
  1236. {
  1237. // For block containers, tables, and inline boxes, this is equivalent to the max-content block size.
  1238. if (box.is_block_container() || box.display().is_table_inside())
  1239. return calculate_max_content_height(box, width);
  1240. if (box.has_natural_height())
  1241. return *box.natural_height();
  1242. auto get_cache_slot = [&]() -> Optional<CSSPixels>* {
  1243. auto& root_state = m_state.m_root;
  1244. auto& cache = *root_state.intrinsic_sizes.ensure(&box, [] { return adopt_own(*new LayoutState::IntrinsicSizes); });
  1245. return &cache.min_content_height.ensure(width);
  1246. };
  1247. if (auto* cache_slot = get_cache_slot(); cache_slot && cache_slot->has_value())
  1248. return cache_slot->value();
  1249. LayoutState throwaway_state(&m_state);
  1250. auto& box_state = throwaway_state.get_mutable(box);
  1251. box_state.height_constraint = SizeConstraint::MinContent;
  1252. box_state.set_indefinite_content_height();
  1253. box_state.set_content_width(width);
  1254. auto context = const_cast<FormattingContext*>(this)->create_independent_formatting_context_if_needed(throwaway_state, LayoutMode::IntrinsicSizing, box);
  1255. if (!context) {
  1256. context = make<BlockFormattingContext>(throwaway_state, LayoutMode::IntrinsicSizing, verify_cast<BlockContainer>(box), nullptr);
  1257. }
  1258. context->run(AvailableSpace(AvailableSize::make_definite(width), AvailableSize::make_min_content()));
  1259. auto min_content_height = context->automatic_content_height();
  1260. if (min_content_height.might_be_saturated()) {
  1261. // HACK: If layout calculates a non-finite result, something went wrong. Force it to zero and log a little whine.
  1262. dbgln("FIXME: Calculated non-finite min-content height for {}", box.debug_description());
  1263. min_content_height = 0;
  1264. }
  1265. if (auto* cache_slot = get_cache_slot()) {
  1266. *cache_slot = min_content_height;
  1267. }
  1268. return min_content_height;
  1269. }
  1270. CSSPixels FormattingContext::calculate_max_content_height(Layout::Box const& box, CSSPixels width) const
  1271. {
  1272. if (box.has_preferred_aspect_ratio())
  1273. return width / *box.preferred_aspect_ratio();
  1274. if (box.has_natural_height())
  1275. return *box.natural_height();
  1276. auto get_cache_slot = [&]() -> Optional<CSSPixels>* {
  1277. auto& root_state = m_state.m_root;
  1278. auto& cache = *root_state.intrinsic_sizes.ensure(&box, [] { return adopt_own(*new LayoutState::IntrinsicSizes); });
  1279. return &cache.max_content_height.ensure(width);
  1280. };
  1281. if (auto* cache_slot = get_cache_slot(); cache_slot && cache_slot->has_value())
  1282. return cache_slot->value();
  1283. LayoutState throwaway_state(&m_state);
  1284. auto& box_state = throwaway_state.get_mutable(box);
  1285. box_state.height_constraint = SizeConstraint::MaxContent;
  1286. box_state.set_indefinite_content_height();
  1287. box_state.set_content_width(width);
  1288. auto context = const_cast<FormattingContext*>(this)->create_independent_formatting_context_if_needed(throwaway_state, LayoutMode::IntrinsicSizing, box);
  1289. if (!context) {
  1290. context = make<BlockFormattingContext>(throwaway_state, LayoutMode::IntrinsicSizing, verify_cast<BlockContainer>(box), nullptr);
  1291. }
  1292. context->run(AvailableSpace(AvailableSize::make_definite(width), AvailableSize::make_max_content()));
  1293. auto max_content_height = context->automatic_content_height();
  1294. if (max_content_height.might_be_saturated()) {
  1295. // HACK: If layout calculates a non-finite result, something went wrong. Force it to zero and log a little whine.
  1296. dbgln("FIXME: Calculated non-finite max-content height for {}", box.debug_description());
  1297. max_content_height = 0;
  1298. }
  1299. if (auto* cache_slot = get_cache_slot()) {
  1300. *cache_slot = max_content_height;
  1301. }
  1302. return max_content_height;
  1303. }
  1304. CSSPixels FormattingContext::calculate_inner_width(Layout::Box const& box, AvailableSize const& available_width, CSS::Size const& width) const
  1305. {
  1306. VERIFY(!width.is_auto());
  1307. auto width_of_containing_block = available_width.to_px_or_zero();
  1308. if (width.is_fit_content()) {
  1309. return calculate_fit_content_width(box, AvailableSpace { available_width, AvailableSize::make_indefinite() });
  1310. }
  1311. if (width.is_max_content()) {
  1312. return calculate_max_content_width(box);
  1313. }
  1314. if (width.is_min_content()) {
  1315. return calculate_min_content_width(box);
  1316. }
  1317. auto& computed_values = box.computed_values();
  1318. if (computed_values.box_sizing() == CSS::BoxSizing::BorderBox) {
  1319. auto const& state = m_state.get(box);
  1320. auto inner_width = width.to_px(box, width_of_containing_block)
  1321. - computed_values.border_left().width
  1322. - state.padding_left
  1323. - computed_values.border_right().width
  1324. - state.padding_right;
  1325. return max(inner_width, 0);
  1326. }
  1327. return width.to_px(box, width_of_containing_block);
  1328. }
  1329. CSSPixels FormattingContext::calculate_inner_height(Layout::Box const& box, AvailableSpace const& available_space, CSS::Size const& height) const
  1330. {
  1331. VERIFY(!height.is_auto());
  1332. if (height.is_fit_content()) {
  1333. return calculate_fit_content_height(box, available_space);
  1334. }
  1335. if (height.is_max_content()) {
  1336. return calculate_max_content_height(box, available_space.width.to_px_or_zero());
  1337. }
  1338. if (height.is_min_content()) {
  1339. return calculate_min_content_height(box, available_space.width.to_px_or_zero());
  1340. }
  1341. auto height_of_containing_block = available_space.height.to_px_or_zero();
  1342. auto& computed_values = box.computed_values();
  1343. if (computed_values.box_sizing() == CSS::BoxSizing::BorderBox) {
  1344. auto const& state = m_state.get(box);
  1345. auto inner_height = height.to_px(box, height_of_containing_block)
  1346. - computed_values.border_top().width
  1347. - state.padding_top
  1348. - computed_values.border_bottom().width
  1349. - state.padding_bottom;
  1350. return max(inner_height, 0);
  1351. }
  1352. return height.to_px(box, height_of_containing_block);
  1353. }
  1354. CSSPixels FormattingContext::containing_block_width_for(NodeWithStyleAndBoxModelMetrics const& node) const
  1355. {
  1356. auto const& used_values = m_state.get(node);
  1357. switch (used_values.width_constraint) {
  1358. case SizeConstraint::MinContent:
  1359. return 0;
  1360. case SizeConstraint::MaxContent:
  1361. return CSSPixels::max();
  1362. case SizeConstraint::None:
  1363. return used_values.containing_block_used_values()->content_width();
  1364. }
  1365. VERIFY_NOT_REACHED();
  1366. }
  1367. // https://drafts.csswg.org/css-sizing-3/#stretch-fit-size
  1368. CSSPixels FormattingContext::calculate_stretch_fit_width(Box const& box, AvailableSize const& available_width) const
  1369. {
  1370. // The size a box would take if its outer size filled the available space in the given axis;
  1371. // in other words, the stretch fit into the available space, if that is definite.
  1372. // Undefined if the available space is indefinite.
  1373. if (!available_width.is_definite())
  1374. return 0;
  1375. auto const& box_state = m_state.get(box);
  1376. return available_width.to_px_or_zero()
  1377. - box_state.margin_left
  1378. - box_state.margin_right
  1379. - box_state.padding_left
  1380. - box_state.padding_right
  1381. - box_state.border_left
  1382. - box_state.border_right;
  1383. }
  1384. // https://drafts.csswg.org/css-sizing-3/#stretch-fit-size
  1385. CSSPixels FormattingContext::calculate_stretch_fit_height(Box const& box, AvailableSize const& available_height) const
  1386. {
  1387. // The size a box would take if its outer size filled the available space in the given axis;
  1388. // in other words, the stretch fit into the available space, if that is definite.
  1389. // Undefined if the available space is indefinite.
  1390. auto const& box_state = m_state.get(box);
  1391. return available_height.to_px_or_zero()
  1392. - box_state.margin_top
  1393. - box_state.margin_bottom
  1394. - box_state.padding_top
  1395. - box_state.padding_bottom
  1396. - box_state.border_top
  1397. - box_state.border_bottom;
  1398. }
  1399. bool FormattingContext::should_treat_width_as_auto(Box const& box, AvailableSpace const& available_space) const
  1400. {
  1401. auto const& computed_width = box.computed_values().width();
  1402. if (computed_width.is_auto())
  1403. return true;
  1404. if (computed_width.contains_percentage()) {
  1405. if (available_space.width.is_max_content())
  1406. return true;
  1407. if (available_space.width.is_indefinite())
  1408. return true;
  1409. }
  1410. // AD-HOC: If the box has a preferred aspect ratio and an intrinsic keyword for width...
  1411. if (box.has_preferred_aspect_ratio()
  1412. && (computed_width.is_min_content() || computed_width.is_max_content() || computed_width.is_fit_content())) {
  1413. // If the box has no natural height to resolve the aspect ratio, we treat the width as auto.
  1414. if (!box.has_natural_height())
  1415. return true;
  1416. // If the box has definite height, we can resolve the width through the aspect ratio.
  1417. if (m_state.get(box).has_definite_height())
  1418. return true;
  1419. }
  1420. return false;
  1421. }
  1422. bool FormattingContext::should_treat_height_as_auto(Box const& box, AvailableSpace const& available_space) const
  1423. {
  1424. auto computed_height = box.computed_values().height();
  1425. if (computed_height.is_auto())
  1426. return true;
  1427. if (computed_height.contains_percentage()) {
  1428. if (available_space.height.is_max_content())
  1429. return true;
  1430. if (available_space.height.is_indefinite())
  1431. return true;
  1432. }
  1433. // AD-HOC: If the box has a preferred aspect ratio and an intrinsic keyword for height...
  1434. if (box.has_preferred_aspect_ratio()
  1435. && (computed_height.is_min_content() || computed_height.is_max_content() || computed_height.is_fit_content())) {
  1436. // If the box has no natural width to resolve the aspect ratio, we treat the height as auto.
  1437. if (!box.has_natural_width())
  1438. return true;
  1439. // If the box has definite width, we can resolve the height through the aspect ratio.
  1440. if (m_state.get(box).has_definite_width())
  1441. return true;
  1442. }
  1443. return false;
  1444. }
  1445. bool FormattingContext::can_skip_is_anonymous_text_run(Box& box)
  1446. {
  1447. if (box.is_anonymous() && !box.is_generated() && !box.first_child_of_type<BlockContainer>()) {
  1448. bool contains_only_white_space = true;
  1449. box.for_each_in_subtree([&](auto const& node) {
  1450. if (!is<TextNode>(node) || !static_cast<TextNode const&>(node).dom_node().data().bytes_as_string_view().is_whitespace()) {
  1451. contains_only_white_space = false;
  1452. return TraversalDecision::Break;
  1453. }
  1454. return TraversalDecision::Continue;
  1455. });
  1456. if (contains_only_white_space)
  1457. return true;
  1458. }
  1459. return false;
  1460. }
  1461. CSSPixelRect FormattingContext::absolute_content_rect(Box const& box) const
  1462. {
  1463. auto const& box_state = m_state.get(box);
  1464. CSSPixelRect rect { box_state.offset, { box_state.content_width(), box_state.content_height() } };
  1465. for (auto* block = box_state.containing_block_used_values(); block; block = block->containing_block_used_values())
  1466. rect.translate_by(block->offset);
  1467. return rect;
  1468. }
  1469. Box const* FormattingContext::box_child_to_derive_baseline_from(Box const& box) const
  1470. {
  1471. if (!box.has_children() || box.children_are_inline())
  1472. return nullptr;
  1473. // To find the baseline of a box, we first look for the last in-flow child with at least one line box.
  1474. auto const* last_box_child = box.last_child_of_type<Box>();
  1475. for (Node const* child = last_box_child; child; child = child->previous_sibling()) {
  1476. if (!child->is_box())
  1477. continue;
  1478. auto& child_box = static_cast<Box const&>(*child);
  1479. if (!child_box.is_out_of_flow(*this) && !m_state.get(child_box).line_boxes.is_empty()) {
  1480. return &child_box;
  1481. }
  1482. auto box_child_to_derive_baseline_from_candidate = box_child_to_derive_baseline_from(child_box);
  1483. if (box_child_to_derive_baseline_from_candidate)
  1484. return box_child_to_derive_baseline_from_candidate;
  1485. }
  1486. // None of the children has a line box.
  1487. return nullptr;
  1488. }
  1489. CSSPixels FormattingContext::box_baseline(Box const& box) const
  1490. {
  1491. auto const& box_state = m_state.get(box);
  1492. // https://www.w3.org/TR/CSS2/visudet.html#propdef-vertical-align
  1493. auto const& vertical_align = box.computed_values().vertical_align();
  1494. if (vertical_align.has<CSS::VerticalAlign>()) {
  1495. switch (vertical_align.get<CSS::VerticalAlign>()) {
  1496. case CSS::VerticalAlign::Top:
  1497. // Top: Align the top of the aligned subtree with the top of the line box.
  1498. return box_state.border_box_top();
  1499. case CSS::VerticalAlign::Middle:
  1500. // Align the vertical midpoint of the box with the baseline of the parent box plus half the x-height of the parent.
  1501. return box_state.content_height() / 2 + CSSPixels::nearest_value_for(box.containing_block()->first_available_font().pixel_metrics().x_height / 2);
  1502. case CSS::VerticalAlign::Bottom:
  1503. // Bottom: Align the bottom of the aligned subtree with the bottom of the line box.
  1504. return box_state.content_height() + box_state.margin_box_top();
  1505. case CSS::VerticalAlign::TextTop:
  1506. // TextTop: Align the top of the box with the top of the parent's content area (see 10.6.1).
  1507. return box.computed_values().font_size();
  1508. case CSS::VerticalAlign::TextBottom:
  1509. // TextTop: Align the bottom of the box with the bottom of the parent's content area (see 10.6.1).
  1510. return box_state.content_height() - CSSPixels::nearest_value_for(box.containing_block()->first_available_font().pixel_metrics().descent * 2);
  1511. default:
  1512. break;
  1513. }
  1514. }
  1515. if (!box_state.line_boxes.is_empty())
  1516. return box_state.margin_box_top() + box_state.offset.y() + box_state.line_boxes.last().baseline();
  1517. if (auto const* child_box = box_child_to_derive_baseline_from(box)) {
  1518. return box_state.margin_box_top() + box_state.offset.y() + box_baseline(*child_box);
  1519. }
  1520. // If none of the children have a baseline set, the bottom margin edge of the box is used.
  1521. return box_state.margin_box_height();
  1522. }
  1523. CSSPixelRect FormattingContext::margin_box_rect(LayoutState::UsedValues const& used_values) const
  1524. {
  1525. return {
  1526. used_values.offset.translated(-used_values.margin_box_left(), -used_values.margin_box_top()),
  1527. {
  1528. used_values.margin_box_left() + used_values.content_width() + used_values.margin_box_right(),
  1529. used_values.margin_box_top() + used_values.content_height() + used_values.margin_box_bottom(),
  1530. },
  1531. };
  1532. }
  1533. CSSPixelRect FormattingContext::content_box_rect(Box const& box) const
  1534. {
  1535. return content_box_rect(m_state.get(box));
  1536. }
  1537. CSSPixelRect FormattingContext::content_box_rect(LayoutState::UsedValues const& used_values) const
  1538. {
  1539. return CSSPixelRect { used_values.offset, { used_values.content_width(), used_values.content_height() } };
  1540. }
  1541. CSSPixelRect FormattingContext::content_box_rect_in_ancestor_coordinate_space(LayoutState::UsedValues const& used_values, Box const& ancestor_box) const
  1542. {
  1543. auto rect = content_box_rect(used_values);
  1544. if (&used_values.node() == &ancestor_box)
  1545. return rect;
  1546. for (auto const* current = used_values.containing_block_used_values(); current; current = current->containing_block_used_values()) {
  1547. if (&current->node() == &ancestor_box)
  1548. return rect;
  1549. rect.translate_by(current->offset);
  1550. }
  1551. // If we get here, ancestor_box was not a containing block ancestor of `box`!
  1552. VERIFY_NOT_REACHED();
  1553. }
  1554. CSSPixelRect FormattingContext::margin_box_rect_in_ancestor_coordinate_space(LayoutState::UsedValues const& used_values, Box const& ancestor_box) const
  1555. {
  1556. auto rect = margin_box_rect(used_values);
  1557. if (&used_values.node() == &ancestor_box)
  1558. return rect;
  1559. for (auto const* current = used_values.containing_block_used_values(); current; current = current->containing_block_used_values()) {
  1560. if (&current->node() == &ancestor_box)
  1561. return rect;
  1562. rect.translate_by(current->offset);
  1563. }
  1564. // If we get here, ancestor_box was not a containing block ancestor of `box`!
  1565. VERIFY_NOT_REACHED();
  1566. }
  1567. CSSPixelRect FormattingContext::margin_box_rect_in_ancestor_coordinate_space(Box const& box, Box const& ancestor_box) const
  1568. {
  1569. return margin_box_rect_in_ancestor_coordinate_space(m_state.get(box), ancestor_box);
  1570. }
  1571. bool box_is_sized_as_replaced_element(Box const& box)
  1572. {
  1573. // When a box has a preferred aspect ratio, its automatic sizes are calculated the same as for a
  1574. // replaced element with a natural aspect ratio and no natural size in that axis, see e.g. CSS2 §10
  1575. // and CSS Flexible Box Model Level 1 §9.2.
  1576. // https://www.w3.org/TR/css-sizing-4/#aspect-ratio-automatic
  1577. if (is<ReplacedBox>(box))
  1578. return true;
  1579. if (box.has_preferred_aspect_ratio()) {
  1580. // From CSS2:
  1581. // If height and width both have computed values of auto and the element has an intrinsic ratio but no intrinsic height or width,
  1582. // then the used value of width is undefined in CSS 2.
  1583. // However, it is suggested that, if the containing block’s width does not itself depend on the replaced element’s width,
  1584. // then the used value of width is calculated from the constraint equation used for block-level, non-replaced elements in normal flow.
  1585. // AD-HOC: For inline-level boxes, we don't want to end up in a situation where we apply stretch-fit sizing,
  1586. // since that would not match other browsers. Because of that, we specifically reject this case here
  1587. // instead of allowing it to proceed.
  1588. if (box.display().is_inline_outside()
  1589. && box.computed_values().height().is_auto()
  1590. && box.computed_values().width().is_auto()
  1591. && !box.has_natural_width()
  1592. && !box.has_natural_height()) {
  1593. return false;
  1594. }
  1595. return true;
  1596. }
  1597. return false;
  1598. }
  1599. bool FormattingContext::should_treat_max_width_as_none(Box const& box, AvailableSize const& available_width) const
  1600. {
  1601. auto const& max_width = box.computed_values().max_width();
  1602. if (max_width.is_none())
  1603. return true;
  1604. if (available_width.is_max_content() && max_width.is_max_content())
  1605. return true;
  1606. if (box.is_absolutely_positioned())
  1607. return false;
  1608. if (max_width.contains_percentage()) {
  1609. if (available_width.is_max_content())
  1610. return true;
  1611. if (available_width.is_min_content())
  1612. return false;
  1613. if (!m_state.get(*box.non_anonymous_containing_block()).has_definite_width())
  1614. return true;
  1615. }
  1616. if (max_width.is_fit_content() && available_width.is_intrinsic_sizing_constraint())
  1617. return true;
  1618. if (max_width.is_max_content() && available_width.is_max_content())
  1619. return true;
  1620. if (max_width.is_min_content() && available_width.is_min_content())
  1621. return true;
  1622. return false;
  1623. }
  1624. bool FormattingContext::should_treat_max_height_as_none(Box const& box, AvailableSize const& available_height) const
  1625. {
  1626. // https://www.w3.org/TR/CSS22/visudet.html#min-max-heights
  1627. // If the height of the containing block is not specified explicitly (i.e., it depends on content height),
  1628. // and this element is not absolutely positioned, the percentage value is treated as '0' (for 'min-height')
  1629. // or 'none' (for 'max-height').
  1630. auto const& max_height = box.computed_values().max_height();
  1631. if (max_height.is_none())
  1632. return true;
  1633. if (box.is_absolutely_positioned())
  1634. return false;
  1635. if (max_height.contains_percentage()) {
  1636. if (available_height.is_min_content())
  1637. return false;
  1638. if (!m_state.get(*box.non_anonymous_containing_block()).has_definite_height())
  1639. return true;
  1640. }
  1641. return false;
  1642. }
  1643. }