FormattingContext.cpp 89 KB

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