FormattingContext.cpp 70 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036103710381039104010411042104310441045104610471048104910501051105210531054105510561057105810591060106110621063106410651066106710681069107010711072107310741075107610771078107910801081108210831084108510861087108810891090109110921093109410951096109710981099110011011102110311041105110611071108110911101111111211131114111511161117111811191120112111221123112411251126112711281129113011311132113311341135113611371138113911401141114211431144114511461147114811491150115111521153115411551156115711581159116011611162116311641165116611671168116911701171117211731174117511761177117811791180118111821183118411851186118711881189119011911192119311941195119611971198119912001201120212031204120512061207120812091210121112121213121412151216121712181219122012211222122312241225122612271228122912301231123212331234123512361237123812391240124112421243124412451246124712481249125012511252125312541255125612571258125912601261126212631264126512661267126812691270127112721273127412751276127712781279128012811282128312841285128612871288128912901291129212931294129512961297129812991300130113021303130413051306130713081309131013111312131313141315131613171318131913201321132213231324132513261327132813291330133113321333133413351336133713381339134013411342134313441345134613471348134913501351135213531354135513561357135813591360136113621363136413651366136713681369137013711372137313741375137613771378137913801381138213831384138513861387138813891390139113921393139413951396139713981399140014011402140314041405140614071408140914101411141214131414141514161417141814191420142114221423142414251426142714281429143014311432143314341435143614371438143914401441144214431444144514461447144814491450145114521453145414551456145714581459146014611462146314641465146614671468146914701471147214731474147514761477147814791480148114821483148414851486148714881489149014911492149314941495149614971498149915001501150215031504
  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/TableCellBox.h>
  16. #include <LibWeb/Layout/TableFormattingContext.h>
  17. #include <LibWeb/Layout/Viewport.h>
  18. namespace Web::Layout {
  19. FormattingContext::FormattingContext(Type type, LayoutState& state, Box const& context_box, FormattingContext* parent)
  20. : m_type(type)
  21. , m_parent(parent)
  22. , m_context_box(context_box)
  23. , m_state(state)
  24. {
  25. }
  26. FormattingContext::~FormattingContext() = default;
  27. // https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Block_formatting_context
  28. bool FormattingContext::creates_block_formatting_context(Box const& box)
  29. {
  30. // NOTE: Replaced elements never create a BFC.
  31. if (box.is_replaced_box())
  32. return false;
  33. // display: table
  34. if (box.display().is_table_inside()) {
  35. return false;
  36. }
  37. // display: flex
  38. if (box.display().is_flex_inside()) {
  39. return false;
  40. }
  41. // display: grid
  42. if (box.display().is_grid_inside()) {
  43. return false;
  44. }
  45. // NOTE: This function uses MDN as a reference, not because it's authoritative,
  46. // but because they've gathered all the conditions in one convenient location.
  47. // The root element of the document (<html>).
  48. if (box.is_root_element())
  49. return true;
  50. // Floats (elements where float isn't none).
  51. if (box.is_floating())
  52. return true;
  53. // Absolutely positioned elements (elements where position is absolute or fixed).
  54. if (box.is_absolutely_positioned())
  55. return true;
  56. // Inline-blocks (elements with display: inline-block).
  57. if (box.display().is_inline_block())
  58. return true;
  59. // Table cells (elements with display: table-cell, which is the default for HTML table cells).
  60. if (box.display().is_table_cell())
  61. return true;
  62. // Table captions (elements with display: table-caption, which is the default for HTML table captions).
  63. if (box.display().is_table_caption())
  64. return true;
  65. // FIXME: Anonymous table cells implicitly created by the elements with display: table, table-row, table-row-group, table-header-group, table-footer-group
  66. // (which is the default for HTML tables, table rows, table bodies, table headers, and table footers, respectively), or inline-table.
  67. // Block elements where overflow has a value other than visible and clip.
  68. CSS::Overflow overflow_x = box.computed_values().overflow_x();
  69. if ((overflow_x != CSS::Overflow::Visible) && (overflow_x != CSS::Overflow::Clip))
  70. return true;
  71. CSS::Overflow overflow_y = box.computed_values().overflow_y();
  72. if ((overflow_y != CSS::Overflow::Visible) && (overflow_y != CSS::Overflow::Clip))
  73. return true;
  74. // display: flow-root.
  75. if (box.display().is_flow_root_inside())
  76. return true;
  77. // FIXME: Elements with contain: layout, content, or paint.
  78. if (box.parent()) {
  79. auto parent_display = box.parent()->display();
  80. // Flex items (direct children of the element with display: flex or inline-flex) if they are neither flex nor grid nor table containers themselves.
  81. if (parent_display.is_flex_inside())
  82. return true;
  83. // Grid items (direct children of the element with display: grid or inline-grid) if they are neither flex nor grid nor table containers themselves.
  84. if (parent_display.is_grid_inside())
  85. return true;
  86. }
  87. // FIXME: Multicol containers (elements where column-count or column-width isn't auto, including elements with column-count: 1).
  88. // 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).
  89. return false;
  90. }
  91. Optional<FormattingContext::Type> FormattingContext::formatting_context_type_created_by_box(Box const& box)
  92. {
  93. if (box.is_replaced_box() && !box.can_have_children()) {
  94. return Type::InternalReplaced;
  95. }
  96. if (!box.can_have_children())
  97. return {};
  98. if (is<SVGSVGBox>(box))
  99. return Type::SVG;
  100. auto display = box.display();
  101. if (display.is_flex_inside())
  102. return Type::Flex;
  103. if (display.is_table_inside())
  104. return Type::Table;
  105. if (display.is_grid_inside())
  106. return Type::Grid;
  107. if (creates_block_formatting_context(box))
  108. return Type::Block;
  109. if (box.children_are_inline())
  110. return {};
  111. // The box is a block container that doesn't create its own BFC.
  112. // It will be formatted by the containing BFC.
  113. if (!display.is_flow_inside()) {
  114. // HACK: Instead of crashing, create a dummy formatting context that does nothing.
  115. // FIXME: Remove this once it's no longer needed. It currently swallows problem with standalone
  116. // table-related boxes that don't get fixed up by CSS anonymous table box generation.
  117. return Type::InternalDummy;
  118. }
  119. return {};
  120. }
  121. // FIXME: This is a hack. Get rid of it.
  122. struct ReplacedFormattingContext : public FormattingContext {
  123. ReplacedFormattingContext(LayoutState& state, Box const& box)
  124. : FormattingContext(Type::Block, state, box)
  125. {
  126. }
  127. virtual CSSPixels automatic_content_width() const override { return 0; }
  128. virtual CSSPixels automatic_content_height() const override { return 0; }
  129. virtual void run(Box const&, LayoutMode, AvailableSpace const&) override { }
  130. };
  131. // FIXME: This is a hack. Get rid of it.
  132. struct DummyFormattingContext : public FormattingContext {
  133. DummyFormattingContext(LayoutState& state, Box const& box)
  134. : FormattingContext(Type::Block, state, box)
  135. {
  136. }
  137. virtual CSSPixels automatic_content_width() const override { return 0; }
  138. virtual CSSPixels automatic_content_height() const override { return 0; }
  139. virtual void run(Box const&, LayoutMode, AvailableSpace const&) override { }
  140. };
  141. OwnPtr<FormattingContext> FormattingContext::create_independent_formatting_context_if_needed(LayoutState& state, Box const& child_box)
  142. {
  143. auto type = formatting_context_type_created_by_box(child_box);
  144. if (!type.has_value())
  145. return nullptr;
  146. switch (type.value()) {
  147. case Type::Block:
  148. return make<BlockFormattingContext>(state, verify_cast<BlockContainer>(child_box), this);
  149. case Type::SVG:
  150. return make<SVGFormattingContext>(state, child_box, this);
  151. case Type::Flex:
  152. return make<FlexFormattingContext>(state, child_box, this);
  153. case Type::Grid:
  154. return make<GridFormattingContext>(state, child_box, this);
  155. case Type::Table:
  156. return make<TableFormattingContext>(state, child_box, this);
  157. case Type::InternalReplaced:
  158. return make<ReplacedFormattingContext>(state, child_box);
  159. case Type::InternalDummy:
  160. return make<DummyFormattingContext>(state, child_box);
  161. case Type::Inline:
  162. // IFC should always be created by a parent BFC directly.
  163. VERIFY_NOT_REACHED();
  164. break;
  165. default:
  166. VERIFY_NOT_REACHED();
  167. }
  168. }
  169. OwnPtr<FormattingContext> FormattingContext::layout_inside(Box const& child_box, LayoutMode layout_mode, AvailableSpace const& available_space)
  170. {
  171. {
  172. // OPTIMIZATION: If we're doing intrinsic sizing and `child_box` has definite size in both axes,
  173. // we don't need to layout its insides. The size is resolvable without learning
  174. // the metrics of whatever's inside the box.
  175. auto const& used_values = m_state.get(child_box);
  176. if (layout_mode == LayoutMode::IntrinsicSizing
  177. && used_values.width_constraint == SizeConstraint::None
  178. && used_values.height_constraint == SizeConstraint::None
  179. && used_values.has_definite_width()
  180. && used_values.has_definite_height()) {
  181. return nullptr;
  182. }
  183. }
  184. if (!child_box.can_have_children())
  185. return {};
  186. auto independent_formatting_context = create_independent_formatting_context_if_needed(m_state, child_box);
  187. if (independent_formatting_context)
  188. independent_formatting_context->run(child_box, layout_mode, available_space);
  189. else
  190. run(child_box, layout_mode, available_space);
  191. return independent_formatting_context;
  192. }
  193. CSSPixels FormattingContext::greatest_child_width(Box const& box) const
  194. {
  195. CSSPixels max_width = 0;
  196. if (box.children_are_inline()) {
  197. for (auto& line_box : m_state.get(box).line_boxes) {
  198. max_width = max(max_width, line_box.width());
  199. }
  200. } else {
  201. box.for_each_child_of_type<Box>([&](Box const& child) {
  202. if (!child.is_absolutely_positioned())
  203. max_width = max(max_width, m_state.get(child).margin_box_width());
  204. });
  205. }
  206. return max_width;
  207. }
  208. FormattingContext::ShrinkToFitResult FormattingContext::calculate_shrink_to_fit_widths(Box const& box)
  209. {
  210. return {
  211. .preferred_width = calculate_max_content_width(box),
  212. .preferred_minimum_width = calculate_min_content_width(box),
  213. };
  214. }
  215. static CSSPixelSize solve_replaced_size_constraint(LayoutState const& state, CSSPixels input_width, CSSPixels input_height, ReplacedBox const& box)
  216. {
  217. // 10.4 Minimum and maximum widths: 'min-width' and 'max-width'
  218. auto const& containing_block = *box.non_anyonymous_containing_block();
  219. auto const& containing_block_state = 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. CSSPixels specified_min_width = box.computed_values().min_width().is_auto() ? 0 : box.computed_values().min_width().to_px(box, width_of_containing_block);
  223. CSSPixels specified_max_width = box.computed_values().max_width().is_none() ? input_width : box.computed_values().max_width().to_px(box, width_of_containing_block);
  224. CSSPixels specified_min_height = box.computed_values().min_height().is_auto() ? 0 : box.computed_values().min_height().to_px(box, height_of_containing_block);
  225. CSSPixels specified_max_height = box.computed_values().max_height().is_none() ? input_height : box.computed_values().max_height().to_px(box, height_of_containing_block);
  226. auto min_width = min(specified_min_width, specified_max_width);
  227. auto max_width = max(specified_min_width, specified_max_width);
  228. auto min_height = min(specified_min_height, specified_max_height);
  229. auto max_height = max(specified_min_height, specified_max_height);
  230. struct Size {
  231. CSSPixels width;
  232. CSSPixels height;
  233. } size = { input_width, input_height };
  234. auto& w = size.width;
  235. auto& h = size.height;
  236. if (w > max_width)
  237. size = { max_width, max(max_width * (h / w), min_height) };
  238. if (w < min_width)
  239. size = { min_width, min(min_width * (h / w), max_height) };
  240. if (h > max_height)
  241. size = { max(max_height * (w / h), min_width), max_height };
  242. if (h < min_height)
  243. size = { min(min_height * (w / h), max_width), min_height };
  244. if ((w > max_width && h > max_height) && (max_width / w <= max_height / h))
  245. size = { max_width, max(min_height, max_width * (h / w)) };
  246. if ((w > max_width && h > max_height) && (max_width / w > max_height / h))
  247. size = { max(min_width, max_height * (w / h)), max_height };
  248. if ((w < min_width && h < min_height) && (min_width / w <= min_height / h))
  249. size = { min(max_width, min_height * (w / h)), min_height };
  250. if ((w < min_width && h < min_height) && (min_width / w > min_height / h))
  251. size = { min_width, min(max_height, min_width * (h / w)) };
  252. if (w < min_width && h > max_height)
  253. size = { min_width, max_height };
  254. if (w > max_width && h < min_height)
  255. size = { max_width, min_height };
  256. return { w, h };
  257. }
  258. // https://www.w3.org/TR/CSS22/visudet.html#root-height
  259. CSSPixels FormattingContext::compute_auto_height_for_block_formatting_context_root(Box const& root) const
  260. {
  261. // 10.6.7 'Auto' heights for block formatting context roots
  262. Optional<CSSPixels> top;
  263. Optional<CSSPixels> bottom;
  264. if (root.children_are_inline()) {
  265. // If it only has inline-level children, the height is the distance between
  266. // the top content edge and the bottom of the bottommost line box.
  267. auto const& line_boxes = m_state.get(root).line_boxes;
  268. top = 0;
  269. if (!line_boxes.is_empty())
  270. bottom = line_boxes.last().bottom();
  271. } else {
  272. // If it has block-level children, the height is the distance between
  273. // the top margin-edge of the topmost block-level child box
  274. // and the bottom margin-edge of the bottommost block-level child box.
  275. root.for_each_child_of_type<Box>([&](Layout::Box& child_box) {
  276. // Absolutely positioned children are ignored,
  277. // and relatively positioned boxes are considered without their offset.
  278. // Note that the child box may be an anonymous block box.
  279. if (child_box.is_absolutely_positioned())
  280. return IterationDecision::Continue;
  281. // FIXME: This doesn't look right.
  282. if ((root.computed_values().overflow_y() == CSS::Overflow::Visible) && child_box.is_floating())
  283. return IterationDecision::Continue;
  284. auto const& child_box_state = m_state.get(child_box);
  285. CSSPixels child_box_top = child_box_state.offset.y() - child_box_state.margin_box_top();
  286. CSSPixels child_box_bottom = child_box_state.offset.y() + child_box_state.content_height() + child_box_state.margin_box_bottom();
  287. if (!top.has_value() || child_box_top < top.value())
  288. top = child_box_top;
  289. if (!bottom.has_value() || child_box_bottom > bottom.value())
  290. bottom = child_box_bottom;
  291. return IterationDecision::Continue;
  292. });
  293. }
  294. // In addition, if the element has any floating descendants
  295. // whose bottom margin edge is below the element's bottom content edge,
  296. // then the height is increased to include those edges.
  297. for (auto floating_box : m_state.get(root).floating_descendants()) {
  298. // NOTE: Floating box coordinates are relative to their own containing block,
  299. // which may or may not be the BFC root.
  300. auto margin_box = margin_box_rect_in_ancestor_coordinate_space(*floating_box, root, m_state);
  301. CSSPixels floating_box_bottom_margin_edge = margin_box.bottom();
  302. if (!bottom.has_value() || floating_box_bottom_margin_edge > bottom.value())
  303. bottom = floating_box_bottom_margin_edge;
  304. }
  305. return max(CSSPixels(0.0f), bottom.value_or(0) - top.value_or(0));
  306. }
  307. // 10.3.2 Inline, replaced elements, https://www.w3.org/TR/CSS22/visudet.html#inline-replaced-width
  308. CSSPixels FormattingContext::tentative_width_for_replaced_element(LayoutState const& state, ReplacedBox const& box, CSS::Size const& computed_width, AvailableSpace const& available_space)
  309. {
  310. // Treat percentages of indefinite containing block widths as 0 (the initial width).
  311. if (computed_width.is_percentage() && !state.get(*box.containing_block()).has_definite_width())
  312. return 0;
  313. auto height_of_containing_block = CSS::Length::make_px(containing_block_height_for(box, state));
  314. auto computed_height = should_treat_height_as_auto(box, available_space) ? CSS::Size::make_auto() : box.computed_values().height();
  315. CSSPixels used_width = computed_width.to_px(box, available_space.width.to_px());
  316. // If 'height' and 'width' both have computed values of 'auto' and the element also has an intrinsic width,
  317. // then that intrinsic width is the used value of 'width'.
  318. if (computed_height.is_auto() && computed_width.is_auto() && box.has_intrinsic_width())
  319. return box.intrinsic_width().value();
  320. // If 'height' and 'width' both have computed values of 'auto' and the element has no intrinsic width,
  321. // but does have an intrinsic height and intrinsic ratio;
  322. // or if 'width' has a computed value of 'auto',
  323. // 'height' has some other computed value, and the element does have an intrinsic ratio; then the used value of 'width' is:
  324. //
  325. // (used height) * (intrinsic ratio)
  326. if ((computed_height.is_auto() && computed_width.is_auto() && !box.has_intrinsic_width() && box.has_intrinsic_height() && box.has_intrinsic_aspect_ratio())
  327. || (computed_width.is_auto() && !computed_height.is_auto() && box.has_intrinsic_aspect_ratio())) {
  328. return compute_height_for_replaced_element(state, box, available_space) * static_cast<double>(box.intrinsic_aspect_ratio().value());
  329. }
  330. // If 'height' and 'width' both have computed values of 'auto' and the element has an intrinsic ratio but no intrinsic height or width,
  331. // 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
  332. // depend on the replaced element's width, then the used value of 'width' is calculated from the constraint equation used for block-level,
  333. // non-replaced elements in normal flow.
  334. if (computed_height.is_auto() && computed_width.is_auto() && !box.has_intrinsic_width() && !box.has_intrinsic_height() && box.has_intrinsic_aspect_ratio()) {
  335. return calculate_stretch_fit_width(box, available_space.width, state);
  336. }
  337. // 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'.
  338. if (computed_width.is_auto() && box.has_intrinsic_width())
  339. return box.intrinsic_width().value();
  340. // 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.
  341. // 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.
  342. if (computed_width.is_auto())
  343. return 300;
  344. return used_width;
  345. }
  346. void FormattingContext::compute_width_for_absolutely_positioned_element(Box const& box, AvailableSpace const& available_space)
  347. {
  348. if (is<ReplacedBox>(box))
  349. compute_width_for_absolutely_positioned_replaced_element(verify_cast<ReplacedBox>(box), available_space);
  350. else
  351. compute_width_for_absolutely_positioned_non_replaced_element(box, available_space);
  352. }
  353. void FormattingContext::compute_height_for_absolutely_positioned_element(Box const& box, AvailableSpace const& available_space, BeforeOrAfterInsideLayout before_or_after_inside_layout)
  354. {
  355. if (is<ReplacedBox>(box))
  356. compute_height_for_absolutely_positioned_replaced_element(static_cast<ReplacedBox const&>(box), available_space, before_or_after_inside_layout);
  357. else
  358. compute_height_for_absolutely_positioned_non_replaced_element(box, available_space, before_or_after_inside_layout);
  359. }
  360. CSSPixels FormattingContext::compute_width_for_replaced_element(LayoutState const& state, ReplacedBox const& box, AvailableSpace const& available_space)
  361. {
  362. // 10.3.4 Block-level, replaced elements in normal flow...
  363. // 10.3.2 Inline, replaced elements
  364. auto zero_value = CSS::Length::make_px(0);
  365. auto width_of_containing_block = available_space.width.to_px();
  366. auto width_of_containing_block_as_length = CSS::Length::make_px(width_of_containing_block);
  367. auto computed_width = should_treat_width_as_auto(box, available_space) ? CSS::Size::make_auto() : box.computed_values().width();
  368. auto computed_height = should_treat_height_as_auto(box, available_space) ? CSS::Size::make_auto() : box.computed_values().height();
  369. // 1. The tentative used width is calculated (without 'min-width' and 'max-width')
  370. auto used_width = tentative_width_for_replaced_element(state, box, computed_width, available_space);
  371. if (computed_width.is_auto() && computed_height.is_auto() && box.has_intrinsic_aspect_ratio()) {
  372. CSSPixels w = used_width;
  373. CSSPixels h = tentative_height_for_replaced_element(state, box, computed_height, available_space);
  374. used_width = solve_replaced_size_constraint(state, w, h, box).width();
  375. return used_width;
  376. }
  377. // 2. The tentative used width is greater than 'max-width', the rules above are applied again,
  378. // but this time using the computed value of 'max-width' as the computed value for 'width'.
  379. auto computed_max_width = box.computed_values().max_width();
  380. if (!computed_max_width.is_none()) {
  381. if (used_width > computed_max_width.to_px(box, width_of_containing_block)) {
  382. used_width = tentative_width_for_replaced_element(state, box, computed_max_width, available_space);
  383. }
  384. }
  385. // 3. If the resulting width is smaller than 'min-width', the rules above are applied again,
  386. // but this time using the value of 'min-width' as the computed value for 'width'.
  387. auto computed_min_width = box.computed_values().min_width();
  388. if (!computed_min_width.is_auto()) {
  389. if (used_width < computed_min_width.to_px(box, width_of_containing_block)) {
  390. used_width = tentative_width_for_replaced_element(state, box, computed_min_width, available_space);
  391. }
  392. }
  393. return used_width;
  394. }
  395. // 10.6.2 Inline replaced elements, block-level replaced elements in normal flow, 'inline-block' replaced elements in normal flow and floating replaced elements
  396. // https://www.w3.org/TR/CSS22/visudet.html#inline-replaced-height
  397. CSSPixels FormattingContext::tentative_height_for_replaced_element(LayoutState const& state, ReplacedBox const& box, CSS::Size const& computed_height, AvailableSpace const& available_space)
  398. {
  399. // If 'height' and 'width' both have computed values of 'auto' and the element also has
  400. // an intrinsic height, then that intrinsic height is the used value of 'height'.
  401. if (should_treat_width_as_auto(box, available_space) && should_treat_height_as_auto(box, available_space) && box.has_intrinsic_height())
  402. return box.intrinsic_height().value();
  403. // Otherwise, if 'height' has a computed value of 'auto', and the element has an intrinsic ratio then the used value of 'height' is:
  404. //
  405. // (used width) / (intrinsic ratio)
  406. if (computed_height.is_auto() && box.has_intrinsic_aspect_ratio())
  407. return state.get(box).content_width() / static_cast<double>(box.intrinsic_aspect_ratio().value());
  408. // 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'.
  409. if (computed_height.is_auto() && box.has_intrinsic_height())
  410. return box.intrinsic_height().value();
  411. // Otherwise, if 'height' has a computed value of 'auto', but none of the conditions above are met,
  412. // 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,
  413. // and has a width not greater than the device width.
  414. if (computed_height.is_auto())
  415. return 150;
  416. // FIXME: Handle cases when available_space is not definite.
  417. return computed_height.to_px(box, available_space.height.to_px_or_zero());
  418. }
  419. CSSPixels FormattingContext::compute_height_for_replaced_element(LayoutState const& state, ReplacedBox const& box, AvailableSpace const& available_space)
  420. {
  421. // 10.6.2 Inline replaced elements
  422. // 10.6.4 Block-level replaced elements in normal flow
  423. // 10.6.6 Floating replaced elements
  424. // 10.6.10 'inline-block' replaced elements in normal flow
  425. auto height_of_containing_block = state.get(*box.non_anyonymous_containing_block()).content_height();
  426. auto computed_width = should_treat_width_as_auto(box, available_space) ? CSS::Size::make_auto() : box.computed_values().width();
  427. auto computed_height = should_treat_height_as_auto(box, available_space) ? CSS::Size::make_auto() : box.computed_values().height();
  428. // 1. The tentative used height is calculated (without 'min-height' and 'max-height')
  429. CSSPixels used_height = tentative_height_for_replaced_element(state, box, computed_height, available_space);
  430. // However, for replaced elements with both 'width' and 'height' computed as 'auto',
  431. // use the algorithm under 'Minimum and maximum widths'
  432. // https://www.w3.org/TR/CSS22/visudet.html#min-max-widths
  433. // to find the used width and height.
  434. if (computed_width.is_auto() && computed_height.is_auto() && box.has_intrinsic_aspect_ratio()) {
  435. CSSPixels w = tentative_width_for_replaced_element(state, box, computed_width, available_space);
  436. CSSPixels h = used_height;
  437. used_height = solve_replaced_size_constraint(state, w, h, box).height();
  438. return used_height;
  439. }
  440. // 2. If this tentative height is greater than 'max-height', the rules above are applied again,
  441. // but this time using the value of 'max-height' as the computed value for 'height'.
  442. auto computed_max_height = box.computed_values().max_height();
  443. if (!computed_max_height.is_none()) {
  444. if (used_height > computed_max_height.to_px(box, height_of_containing_block)) {
  445. used_height = tentative_height_for_replaced_element(state, box, computed_max_height, available_space);
  446. }
  447. }
  448. // 3. If the resulting height is smaller than 'min-height', the rules above are applied again,
  449. // but this time using the value of 'min-height' as the computed value for 'height'.
  450. auto computed_min_height = box.computed_values().min_height();
  451. if (!computed_min_height.is_auto()) {
  452. if (used_height < computed_min_height.to_px(box, height_of_containing_block)) {
  453. used_height = tentative_height_for_replaced_element(state, box, computed_min_height, available_space);
  454. }
  455. }
  456. return used_height;
  457. }
  458. void FormattingContext::compute_width_for_absolutely_positioned_non_replaced_element(Box const& box, AvailableSpace const& available_space)
  459. {
  460. auto width_of_containing_block = available_space.width.to_px();
  461. auto width_of_containing_block_as_length = CSS::Length::make_px(width_of_containing_block);
  462. auto& computed_values = box.computed_values();
  463. auto zero_value = CSS::Length::make_px(0);
  464. auto margin_left = CSS::Length::make_auto();
  465. auto margin_right = CSS::Length::make_auto();
  466. auto const border_left = computed_values.border_left().width;
  467. auto const border_right = computed_values.border_right().width;
  468. auto const padding_left = computed_values.padding().left().to_px(box, width_of_containing_block);
  469. auto const padding_right = computed_values.padding().right().to_px(box, width_of_containing_block);
  470. auto computed_left = computed_values.inset().left();
  471. auto computed_right = computed_values.inset().right();
  472. auto try_compute_width = [&](auto const& a_width) {
  473. margin_left = computed_values.margin().left().resolved(box, width_of_containing_block_as_length);
  474. margin_right = computed_values.margin().right().resolved(box, width_of_containing_block_as_length);
  475. auto left = computed_values.inset().left().to_px(box, width_of_containing_block);
  476. auto right = computed_values.inset().right().to_px(box, width_of_containing_block);
  477. auto width = a_width;
  478. auto solve_for_left = [&] {
  479. 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;
  480. };
  481. auto solve_for_width = [&] {
  482. 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));
  483. };
  484. auto solve_for_right = [&] {
  485. 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);
  486. };
  487. // If all three of 'left', 'width', and 'right' are 'auto':
  488. if (computed_left.is_auto() && width.is_auto() && computed_right.is_auto()) {
  489. // First set any 'auto' values for 'margin-left' and 'margin-right' to 0.
  490. if (margin_left.is_auto())
  491. margin_left = CSS::Length::make_px(0);
  492. if (margin_right.is_auto())
  493. margin_right = CSS::Length::make_px(0);
  494. // Then, if the 'direction' property of the element establishing the static-position containing block
  495. // is 'ltr' set 'left' to the static position and apply rule number three below;
  496. // otherwise, set 'right' to the static position and apply rule number one below.
  497. // FIXME: This is very hackish.
  498. left = 0;
  499. goto Rule3;
  500. }
  501. if (!computed_left.is_auto() && !width.is_auto() && !computed_right.is_auto()) {
  502. // FIXME: This should be solved in a more complicated way.
  503. return width;
  504. }
  505. if (margin_left.is_auto())
  506. margin_left = CSS::Length::make_px(0);
  507. if (margin_right.is_auto())
  508. margin_right = CSS::Length::make_px(0);
  509. // 1. 'left' and 'width' are 'auto' and 'right' is not 'auto',
  510. // then the width is shrink-to-fit. Then solve for 'left'
  511. if (computed_left.is_auto() && width.is_auto() && !computed_right.is_auto()) {
  512. auto result = calculate_shrink_to_fit_widths(box);
  513. auto available_width = solve_for_width();
  514. width = CSS::Length::make_px(min(max(result.preferred_minimum_width, available_width.to_px(box)), result.preferred_width));
  515. left = solve_for_left();
  516. }
  517. // 2. 'left' and 'right' are 'auto' and 'width' is not 'auto',
  518. // then if the 'direction' property of the element establishing
  519. // the static-position containing block is 'ltr' set 'left'
  520. // to the static position, otherwise set 'right' to the static position.
  521. // Then solve for 'left' (if 'direction is 'rtl') or 'right' (if 'direction' is 'ltr').
  522. else if (computed_left.is_auto() && computed_right.is_auto() && !width.is_auto()) {
  523. // FIXME: Check direction
  524. // FIXME: Use the static-position containing block
  525. left = 0;
  526. right = solve_for_right();
  527. }
  528. // 3. 'width' and 'right' are 'auto' and 'left' is not 'auto',
  529. // then the width is shrink-to-fit. Then solve for 'right'
  530. else if (width.is_auto() && computed_right.is_auto() && !computed_left.is_auto()) {
  531. Rule3:
  532. auto result = calculate_shrink_to_fit_widths(box);
  533. auto available_width = solve_for_width();
  534. width = CSS::Length::make_px(min(max(result.preferred_minimum_width, available_width.to_px(box)), result.preferred_width));
  535. right = solve_for_right();
  536. }
  537. // 4. 'left' is 'auto', 'width' and 'right' are not 'auto', then solve for 'left'
  538. else if (computed_left.is_auto() && !width.is_auto() && !computed_right.is_auto()) {
  539. left = solve_for_left();
  540. }
  541. // 5. 'width' is 'auto', 'left' and 'right' are not 'auto', then solve for 'width'
  542. else if (width.is_auto() && !computed_left.is_auto() && !computed_right.is_auto()) {
  543. width = solve_for_width();
  544. }
  545. // 6. 'right' is 'auto', 'left' and 'width' are not 'auto', then solve for 'right'
  546. else if (computed_right.is_auto() && !computed_left.is_auto() && !width.is_auto()) {
  547. right = solve_for_right();
  548. }
  549. return width;
  550. };
  551. // 1. The tentative used width is calculated (without 'min-width' and 'max-width')
  552. auto used_width = try_compute_width(calculate_inner_width(box, available_space.width, computed_values.width()));
  553. // 2. The tentative used width is greater than 'max-width', the rules above are applied again,
  554. // but this time using the computed value of 'max-width' as the computed value for 'width'.
  555. if (!computed_values.max_width().is_none()) {
  556. auto max_width = calculate_inner_width(box, available_space.width, computed_values.max_width());
  557. if (used_width.to_px(box) > max_width.to_px(box)) {
  558. used_width = try_compute_width(max_width);
  559. }
  560. }
  561. // 3. If the resulting width is smaller than 'min-width', the rules above are applied again,
  562. // but this time using the value of 'min-width' as the computed value for 'width'.
  563. if (!computed_values.min_width().is_auto()) {
  564. auto min_width = calculate_inner_width(box, available_space.width, computed_values.min_width());
  565. if (used_width.to_px(box) < min_width.to_px(box)) {
  566. used_width = try_compute_width(min_width);
  567. }
  568. }
  569. auto& box_state = m_state.get_mutable(box);
  570. box_state.set_content_width(used_width.to_px(box));
  571. box_state.margin_left = margin_left.to_px(box);
  572. box_state.margin_right = margin_right.to_px(box);
  573. box_state.border_left = border_left;
  574. box_state.border_right = border_right;
  575. box_state.padding_left = padding_left;
  576. box_state.padding_right = padding_right;
  577. }
  578. void FormattingContext::compute_width_for_absolutely_positioned_replaced_element(ReplacedBox const& box, AvailableSpace const& available_space)
  579. {
  580. // 10.3.8 Absolutely positioned, replaced elements
  581. // The used value of 'width' is determined as for inline replaced elements.
  582. // FIXME: This const_cast is gross.
  583. const_cast<ReplacedBox&>(box).prepare_for_replaced_layout();
  584. m_state.get_mutable(box).set_content_width(compute_width_for_replaced_element(m_state, box, available_space));
  585. }
  586. // https://drafts.csswg.org/css-position-3/#abs-non-replaced-height
  587. void FormattingContext::compute_height_for_absolutely_positioned_non_replaced_element(Box const& box, AvailableSpace const& available_space, BeforeOrAfterInsideLayout before_or_after_inside_layout)
  588. {
  589. // 5.3. The Height Of Absolutely Positioned, Non-Replaced Elements
  590. // For absolutely positioned elements, the used values of the vertical dimensions must satisfy this constraint:
  591. // top + margin-top + border-top-width + padding-top + height + padding-bottom + border-bottom-width + margin-bottom + bottom = height of containing block
  592. // NOTE: This function is called twice: both before and after inside layout.
  593. // In the before pass, if it turns out we need the automatic height of the box, we abort these steps.
  594. // This allows the box to retain an indefinite height from the perspective of inside layout.
  595. auto margin_top = box.computed_values().margin().top();
  596. auto margin_bottom = box.computed_values().margin().bottom();
  597. auto top = box.computed_values().inset().top();
  598. auto bottom = box.computed_values().inset().bottom();
  599. auto height = box.computed_values().height();
  600. auto width_of_containing_block = containing_block_width_for(box);
  601. auto width_of_containing_block_as_length = CSS::Length::make_px(width_of_containing_block);
  602. auto height_of_containing_block = available_space.height.to_px();
  603. auto height_of_containing_block_as_length = CSS::Length::make_px(height_of_containing_block);
  604. enum class ClampToZero {
  605. No,
  606. Yes,
  607. };
  608. auto solve_for = [&](CSS::Length length, ClampToZero clamp_to_zero = ClampToZero::No) {
  609. auto unclamped_value = height_of_containing_block
  610. - top.to_px(box, height_of_containing_block)
  611. - margin_top.to_px(box, width_of_containing_block)
  612. - box.computed_values().border_top().width
  613. - box.computed_values().padding().top().to_px(box, width_of_containing_block)
  614. - height.to_px(box, height_of_containing_block)
  615. - box.computed_values().padding().bottom().to_px(box, width_of_containing_block)
  616. - box.computed_values().border_bottom().width
  617. - margin_bottom.to_px(box, width_of_containing_block)
  618. - bottom.to_px(box, height_of_containing_block)
  619. + length.to_px(box);
  620. if (clamp_to_zero == ClampToZero::Yes)
  621. return CSS::Length::make_px(max(CSSPixels(0), unclamped_value));
  622. return CSS::Length::make_px(unclamped_value);
  623. };
  624. auto solve_for_top = [&] {
  625. top = solve_for(top.resolved(box, height_of_containing_block_as_length));
  626. };
  627. auto solve_for_bottom = [&] {
  628. bottom = solve_for(bottom.resolved(box, height_of_containing_block_as_length));
  629. };
  630. auto solve_for_height = [&] {
  631. height = CSS::Size::make_length(solve_for(height.resolved(box, height_of_containing_block_as_length), ClampToZero::Yes));
  632. };
  633. auto solve_for_margin_top = [&] {
  634. margin_top = solve_for(margin_top.resolved(box, width_of_containing_block_as_length));
  635. };
  636. auto solve_for_margin_bottom = [&] {
  637. margin_bottom = solve_for(margin_bottom.resolved(box, width_of_containing_block_as_length));
  638. };
  639. auto solve_for_margin_top_and_margin_bottom = [&] {
  640. 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);
  641. margin_top = CSS::Length::make_px(remainder / 2);
  642. margin_bottom = CSS::Length::make_px(remainder / 2);
  643. };
  644. // If all three of top, height, and bottom are auto:
  645. if (top.is_auto() && height.is_auto() && bottom.is_auto()) {
  646. // (If we haven't done inside layout yet, we can't compute the auto height.)
  647. if (before_or_after_inside_layout == BeforeOrAfterInsideLayout::Before)
  648. return;
  649. // First set any auto values for margin-top and margin-bottom to 0,
  650. if (margin_top.is_auto())
  651. margin_top = CSS::Length::make_px(0);
  652. if (margin_bottom.is_auto())
  653. margin_bottom = CSS::Length::make_px(0);
  654. // then set top to the static position,
  655. auto static_position = calculate_static_position(box);
  656. top = CSS::Length::make_px(static_position.y());
  657. // and finally apply rule number three below.
  658. height = CSS::Size::make_px(compute_auto_height_for_block_formatting_context_root(box));
  659. solve_for_bottom();
  660. }
  661. // If none of the three are auto:
  662. else if (!top.is_auto() && !height.is_auto() && !bottom.is_auto()) {
  663. // If both margin-top and margin-bottom are auto,
  664. if (margin_top.is_auto() && margin_bottom.is_auto()) {
  665. // solve the equation under the extra constraint that the two margins get equal values.
  666. solve_for_margin_top_and_margin_bottom();
  667. }
  668. // If one of margin-top or margin-bottom is auto,
  669. else if (margin_top.is_auto() || margin_bottom.is_auto()) {
  670. // solve the equation for that value.
  671. if (margin_top.is_auto())
  672. solve_for_margin_top();
  673. else
  674. solve_for_margin_bottom();
  675. }
  676. // If the values are over-constrained,
  677. else {
  678. // ignore the value for bottom and solve for that value.
  679. solve_for_bottom();
  680. }
  681. }
  682. // Otherwise,
  683. else {
  684. // set auto values for margin-top and margin-bottom to 0,
  685. if (margin_top.is_auto())
  686. margin_top = CSS::Length::make_px(0);
  687. if (margin_bottom.is_auto())
  688. margin_bottom = CSS::Length::make_px(0);
  689. // and pick one of the following six rules that apply.
  690. // 1. If top and height are auto and bottom is not auto,
  691. if (top.is_auto() && height.is_auto() && !bottom.is_auto()) {
  692. // (If we haven't done inside layout yet, we can't compute the auto height.)
  693. if (before_or_after_inside_layout == BeforeOrAfterInsideLayout::Before)
  694. return;
  695. // then the height is based on the Auto heights for block formatting context roots,
  696. height = CSS::Size::make_px(compute_auto_height_for_block_formatting_context_root(box));
  697. // and solve for top.
  698. solve_for_top();
  699. }
  700. // 2. If top and bottom are auto and height is not auto,
  701. else if (top.is_auto() && bottom.is_auto() && !height.is_auto()) {
  702. // then set top to the static position,
  703. top = CSS::Length::make_px(calculate_static_position(box).y());
  704. // then solve for bottom.
  705. solve_for_bottom();
  706. }
  707. // 3. If height and bottom are auto and top is not auto,
  708. else if (height.is_auto() && bottom.is_auto() && !top.is_auto()) {
  709. // (If we haven't done inside layout yet, we can't compute the auto height.)
  710. if (before_or_after_inside_layout == BeforeOrAfterInsideLayout::Before)
  711. return;
  712. // then the height is based on the Auto heights for block formatting context roots,
  713. height = CSS::Size::make_px(compute_auto_height_for_block_formatting_context_root(box));
  714. // and solve for bottom.
  715. solve_for_bottom();
  716. }
  717. // 4. If top is auto, height and bottom are not auto,
  718. else if (top.is_auto() && !height.is_auto() && !bottom.is_auto()) {
  719. // then solve for top.
  720. solve_for_top();
  721. }
  722. // 5. If height is auto, top and bottom are not auto,
  723. else if (height.is_auto() && !top.is_auto() && !bottom.is_auto()) {
  724. // then solve for height.
  725. solve_for_height();
  726. }
  727. // 6. If bottom is auto, top and height are not auto,
  728. else if (bottom.is_auto() && !top.is_auto() && !height.is_auto()) {
  729. // then solve for bottom.
  730. solve_for_bottom();
  731. }
  732. }
  733. // Compute the height based on box type and CSS properties:
  734. // https://www.w3.org/TR/css-sizing-3/#box-sizing
  735. CSSPixels used_height = 0;
  736. if (should_treat_height_as_auto(box, available_space)) {
  737. used_height = height.to_px(box, height_of_containing_block);
  738. } else {
  739. used_height = calculate_inner_height(box, available_space.height, height).to_px(box);
  740. }
  741. auto const& computed_min_height = box.computed_values().min_height();
  742. auto const& computed_max_height = box.computed_values().max_height();
  743. if (!computed_max_height.is_none()) {
  744. auto inner_max_height = calculate_inner_height(box, available_space.height, computed_max_height);
  745. used_height = min(used_height, inner_max_height.to_px(box));
  746. }
  747. if (!computed_min_height.is_auto()) {
  748. auto inner_min_height = calculate_inner_height(box, available_space.height, computed_min_height);
  749. used_height = max(used_height, inner_min_height.to_px(box));
  750. }
  751. // NOTE: The following is not directly part of any spec, but this is where we resolve
  752. // the final used values for vertical margin/border/padding.
  753. auto& box_state = m_state.get_mutable(box);
  754. box_state.margin_top = margin_top.to_px(box, width_of_containing_block);
  755. box_state.margin_bottom = margin_bottom.to_px(box, width_of_containing_block);
  756. box_state.border_top = box.computed_values().border_top().width;
  757. box_state.border_bottom = box.computed_values().border_bottom().width;
  758. box_state.padding_top = box.computed_values().padding().top().to_px(box, width_of_containing_block);
  759. box_state.padding_bottom = box.computed_values().padding().bottom().to_px(box, width_of_containing_block);
  760. // And here is where we assign the box's content height.
  761. box_state.set_content_height(used_height);
  762. }
  763. // 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.
  764. static CSSPixelRect content_box_rect_in_static_position_ancestor_coordinate_space(Box const& box, Box const& ancestor_box, LayoutState const& state)
  765. {
  766. auto rect = content_box_rect(box, state);
  767. if (&box == &ancestor_box)
  768. return rect;
  769. for (auto const* current = box.parent(); current; current = current->parent()) {
  770. if (current == &ancestor_box)
  771. return rect;
  772. auto const& current_state = state.get(static_cast<Box const&>(*current));
  773. rect.translate_by(current_state.offset);
  774. }
  775. // If we get here, ancestor_box was not an ancestor of `box`!
  776. VERIFY_NOT_REACHED();
  777. }
  778. // https://www.w3.org/TR/css-position-3/#staticpos-rect
  779. CSSPixelPoint FormattingContext::calculate_static_position(Box const& box) const
  780. {
  781. // NOTE: This is very ad-hoc.
  782. // The purpose of this function is to calculate the approximate position that `box`
  783. // would have had if it were position:static.
  784. CSSPixels x = 0.0f;
  785. CSSPixels y = 0.0f;
  786. VERIFY(box.parent());
  787. if (box.parent()->children_are_inline()) {
  788. // We're an abspos box with inline siblings. This is gonna get messy!
  789. if (auto* sibling = box.previous_sibling()) {
  790. // Hard case: there's a previous sibling. This means there's already inline content
  791. // preceding the hypothetical static position of `box` within its containing block.
  792. // If we had been position:static, that inline content would have been wrapped in
  793. // anonymous block box, so now we get to imagine what the world might have looked like
  794. // in that scenario..
  795. // Basically, we find its last associated line box fragment and place `box` under it.
  796. // FIXME: I'm 100% sure this can be smarter, better and faster.
  797. LineBoxFragment const* last_fragment = nullptr;
  798. auto& cb_state = m_state.get(*sibling->containing_block());
  799. for (auto& line_box : cb_state.line_boxes) {
  800. for (auto& fragment : line_box.fragments()) {
  801. if (&fragment.layout_node() == sibling)
  802. last_fragment = &fragment;
  803. }
  804. }
  805. if (last_fragment) {
  806. y = (last_fragment->offset().y() + last_fragment->height()).value();
  807. }
  808. } else {
  809. // Easy case: no previous sibling, we're at the top of the containing block.
  810. }
  811. } else {
  812. x = m_state.get(box).margin_box_left();
  813. // We're among block siblings, Y can be calculated easily.
  814. y = m_state.get(box).margin_box_top();
  815. }
  816. auto offset_to_static_parent = content_box_rect_in_static_position_ancestor_coordinate_space(box, *box.containing_block(), m_state);
  817. return offset_to_static_parent.location().translated(x, y);
  818. }
  819. void FormattingContext::layout_absolutely_positioned_element(Box const& box, AvailableSpace const& available_space)
  820. {
  821. auto& containing_block_state = m_state.get_mutable(*box.containing_block());
  822. auto& box_state = m_state.get_mutable(box);
  823. auto width_of_containing_block = available_space.width.to_px();
  824. auto height_of_containing_block = available_space.height.to_px();
  825. auto width_of_containing_block_as_length = CSS::Length::make_px(width_of_containing_block);
  826. auto height_of_containing_block_as_length = CSS::Length::make_px(height_of_containing_block);
  827. compute_width_for_absolutely_positioned_element(box, available_space);
  828. // NOTE: We compute height before *and* after doing inside layout.
  829. // This is done so that inside layout can resolve percentage heights.
  830. // In some situations, e.g with non-auto top & bottom values, the height can be determined early.
  831. compute_height_for_absolutely_positioned_element(box, available_space, BeforeOrAfterInsideLayout::Before);
  832. auto independent_formatting_context = layout_inside(box, LayoutMode::Normal, box_state.available_inner_space_or_constraints_from(available_space));
  833. compute_height_for_absolutely_positioned_element(box, available_space, BeforeOrAfterInsideLayout::After);
  834. box_state.margin_left = box.computed_values().margin().left().to_px(box, width_of_containing_block);
  835. box_state.margin_top = box.computed_values().margin().top().to_px(box, width_of_containing_block);
  836. box_state.margin_right = box.computed_values().margin().right().to_px(box, width_of_containing_block);
  837. box_state.margin_bottom = box.computed_values().margin().bottom().to_px(box, width_of_containing_block);
  838. box_state.border_left = box.computed_values().border_left().width;
  839. box_state.border_right = box.computed_values().border_right().width;
  840. box_state.border_top = box.computed_values().border_top().width;
  841. box_state.border_bottom = box.computed_values().border_bottom().width;
  842. auto const& computed_left = box.computed_values().inset().left();
  843. auto const& computed_right = box.computed_values().inset().right();
  844. auto const& computed_top = box.computed_values().inset().top();
  845. auto const& computed_bottom = box.computed_values().inset().bottom();
  846. box_state.inset_left = computed_left.to_px(box, width_of_containing_block);
  847. box_state.inset_top = computed_top.to_px(box, height_of_containing_block);
  848. box_state.inset_right = computed_right.to_px(box, width_of_containing_block);
  849. box_state.inset_bottom = computed_bottom.to_px(box, height_of_containing_block);
  850. if (computed_left.is_auto() && box.computed_values().width().is_auto() && computed_right.is_auto()) {
  851. if (box.computed_values().margin().left().is_auto())
  852. box_state.margin_left = 0;
  853. if (box.computed_values().margin().right().is_auto())
  854. box_state.margin_right = 0;
  855. }
  856. auto static_position = calculate_static_position(box);
  857. CSSPixelPoint used_offset;
  858. if (!computed_left.is_auto()) {
  859. CSSPixels x_offset = box_state.inset_left
  860. + box_state.border_box_left();
  861. used_offset.set_x(x_offset + box_state.margin_left);
  862. } else if (!computed_right.is_auto()) {
  863. CSSPixels x_offset = CSSPixels(0)
  864. - box_state.inset_right
  865. - box_state.border_box_right();
  866. used_offset.set_x(width_of_containing_block + x_offset - box_state.content_width() - box_state.margin_right);
  867. } else {
  868. // NOTE: static position is content box position so border_box and margin should not be added
  869. used_offset.set_x(static_position.x());
  870. }
  871. if (!computed_top.is_auto()) {
  872. CSSPixels y_offset = box_state.inset_top
  873. + box_state.border_box_top();
  874. used_offset.set_y(y_offset + box_state.margin_top);
  875. } else if (!computed_bottom.is_auto()) {
  876. CSSPixels y_offset = CSSPixels(0)
  877. - box_state.inset_bottom
  878. - box_state.border_box_bottom();
  879. used_offset.set_y(height_of_containing_block + y_offset - box_state.content_height() - box_state.margin_bottom);
  880. } else {
  881. // NOTE: static position is content box position so border_box and margin should not be added
  882. used_offset.set_y(static_position.y());
  883. }
  884. // NOTE: Absolutely positioned boxes are relative to the *padding edge* of the containing block.
  885. used_offset.translate_by(-containing_block_state.padding_left, -containing_block_state.padding_top);
  886. box_state.set_content_offset(used_offset);
  887. if (independent_formatting_context)
  888. independent_formatting_context->parent_context_did_dimension_child_root_box();
  889. }
  890. void FormattingContext::compute_height_for_absolutely_positioned_replaced_element(ReplacedBox const& box, AvailableSpace const& available_space, BeforeOrAfterInsideLayout)
  891. {
  892. // 10.6.5 Absolutely positioned, replaced elements
  893. // The used value of 'height' is determined as for inline replaced elements.
  894. m_state.get_mutable(box).set_content_height(compute_height_for_replaced_element(m_state, box, available_space));
  895. }
  896. // https://www.w3.org/TR/css-position-3/#relpos-insets
  897. void FormattingContext::compute_inset(Box const& box)
  898. {
  899. if (box.computed_values().position() != CSS::Position::Relative)
  900. return;
  901. 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) {
  902. auto resolved_first = computed_first.to_px(box, reference_for_percentage);
  903. auto resolved_second = computed_second.to_px(box, reference_for_percentage);
  904. if (computed_first.is_auto() && computed_second.is_auto()) {
  905. // If opposing inset properties in an axis both compute to auto (their initial values),
  906. // their used values are zero (i.e., the boxes stay in their original position in that axis).
  907. used_start = 0;
  908. used_end = 0;
  909. } else if (computed_first.is_auto() || computed_second.is_auto()) {
  910. // If only one is auto, its used value becomes the negation of the other, and the box is shifted by the specified amount.
  911. if (computed_first.is_auto()) {
  912. used_end = resolved_second;
  913. used_start = -used_end;
  914. } else {
  915. used_start = resolved_first;
  916. used_end = -used_start;
  917. }
  918. } else {
  919. // If neither is auto, the position is over-constrained; (with respect to the writing mode of its containing block)
  920. // the computed end side value is ignored, and its used value becomes the negation of the start side.
  921. used_start = resolved_first;
  922. used_end = -used_start;
  923. }
  924. };
  925. auto& box_state = m_state.get_mutable(box);
  926. auto const& computed_values = box.computed_values();
  927. // FIXME: Respect the containing block's writing-mode.
  928. 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));
  929. 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));
  930. }
  931. // https://drafts.csswg.org/css-sizing-3/#fit-content-size
  932. CSSPixels FormattingContext::calculate_fit_content_width(Layout::Box const& box, AvailableSpace const& available_space) const
  933. {
  934. // If the available space in a given axis is definite,
  935. // equal to clamp(min-content size, stretch-fit size, max-content size)
  936. // (i.e. max(min-content size, min(max-content size, stretch-fit size))).
  937. if (available_space.width.is_definite()) {
  938. return max(calculate_min_content_width(box),
  939. min(calculate_stretch_fit_width(box, available_space.width),
  940. calculate_max_content_width(box)));
  941. }
  942. // When sizing under a min-content constraint, equal to the min-content size.
  943. if (available_space.width.is_min_content())
  944. return calculate_min_content_width(box);
  945. // Otherwise, equal to the max-content size in that axis.
  946. return calculate_max_content_width(box);
  947. }
  948. // https://drafts.csswg.org/css-sizing-3/#fit-content-size
  949. CSSPixels FormattingContext::calculate_fit_content_height(Layout::Box const& box, AvailableSpace const& available_space) const
  950. {
  951. // If the available space in a given axis is definite,
  952. // equal to clamp(min-content size, stretch-fit size, max-content size)
  953. // (i.e. max(min-content size, min(max-content size, stretch-fit size))).
  954. if (available_space.height.is_definite()) {
  955. return max(calculate_min_content_height(box, available_space.width),
  956. min(calculate_stretch_fit_height(box, available_space.height),
  957. calculate_max_content_height(box, available_space.width)));
  958. }
  959. // When sizing under a min-content constraint, equal to the min-content size.
  960. if (available_space.height.is_min_content())
  961. return calculate_min_content_height(box, available_space.width);
  962. // Otherwise, equal to the max-content size in that axis.
  963. return calculate_max_content_height(box, available_space.width);
  964. }
  965. CSSPixels FormattingContext::calculate_min_content_width(Layout::Box const& box) const
  966. {
  967. if (box.has_intrinsic_width())
  968. return *box.intrinsic_width();
  969. auto& root_state = m_state.m_root;
  970. auto& cache = *root_state.intrinsic_sizes.ensure(&box, [] { return adopt_own(*new LayoutState::IntrinsicSizes); });
  971. if (cache.min_content_width.has_value())
  972. return *cache.min_content_width;
  973. LayoutState throwaway_state(&m_state);
  974. auto& box_state = throwaway_state.get_mutable(box);
  975. box_state.width_constraint = SizeConstraint::MinContent;
  976. box_state.set_indefinite_content_width();
  977. box_state.set_indefinite_content_height();
  978. auto context = const_cast<FormattingContext*>(this)->create_independent_formatting_context_if_needed(throwaway_state, box);
  979. if (!context) {
  980. context = make<BlockFormattingContext>(throwaway_state, verify_cast<BlockContainer>(box), nullptr);
  981. }
  982. auto available_width = AvailableSize::make_min_content();
  983. auto available_height = AvailableSize::make_indefinite();
  984. context->run(box, LayoutMode::IntrinsicSizing, AvailableSpace(available_width, available_height));
  985. cache.min_content_width = context->automatic_content_width();
  986. if (!isfinite(cache.min_content_width->value())) {
  987. // HACK: If layout calculates a non-finite result, something went wrong. Force it to zero and log a little whine.
  988. dbgln("FIXME: Calculated non-finite min-content width for {}", box.debug_description());
  989. cache.min_content_width = 0;
  990. }
  991. return *cache.min_content_width;
  992. }
  993. CSSPixels FormattingContext::calculate_max_content_width(Layout::Box const& box) const
  994. {
  995. if (box.has_intrinsic_width())
  996. return *box.intrinsic_width();
  997. auto& root_state = m_state.m_root;
  998. auto& cache = *root_state.intrinsic_sizes.ensure(&box, [] { return adopt_own(*new LayoutState::IntrinsicSizes); });
  999. if (cache.max_content_width.has_value())
  1000. return *cache.max_content_width;
  1001. LayoutState throwaway_state(&m_state);
  1002. auto& box_state = throwaway_state.get_mutable(box);
  1003. box_state.width_constraint = SizeConstraint::MaxContent;
  1004. box_state.set_indefinite_content_width();
  1005. box_state.set_indefinite_content_height();
  1006. auto context = const_cast<FormattingContext*>(this)->create_independent_formatting_context_if_needed(throwaway_state, box);
  1007. if (!context) {
  1008. context = make<BlockFormattingContext>(throwaway_state, verify_cast<BlockContainer>(box), nullptr);
  1009. }
  1010. auto available_width = AvailableSize::make_max_content();
  1011. auto available_height = AvailableSize::make_indefinite();
  1012. context->run(box, LayoutMode::IntrinsicSizing, AvailableSpace(available_width, available_height));
  1013. cache.max_content_width = context->automatic_content_width();
  1014. if (!isfinite(cache.max_content_width->value())) {
  1015. // HACK: If layout calculates a non-finite result, something went wrong. Force it to zero and log a little whine.
  1016. dbgln("FIXME: Calculated non-finite max-content width for {}", box.debug_description());
  1017. cache.max_content_width = 0;
  1018. }
  1019. return *cache.max_content_width;
  1020. }
  1021. // https://www.w3.org/TR/css-sizing-3/#min-content-block-size
  1022. CSSPixels FormattingContext::calculate_min_content_height(Layout::Box const& box, AvailableSize const& available_width) const
  1023. {
  1024. // For block containers, tables, and inline boxes, this is equivalent to the max-content block size.
  1025. if (box.is_block_container() || box.display().is_table_inside())
  1026. return calculate_max_content_height(box, available_width);
  1027. if (box.has_intrinsic_height())
  1028. return *box.intrinsic_height();
  1029. bool is_cacheable = available_width.is_definite() || available_width.is_intrinsic_sizing_constraint();
  1030. auto get_cache_slot = [&]() -> Optional<CSSPixels>* {
  1031. if (!is_cacheable)
  1032. return {};
  1033. auto& root_state = m_state.m_root;
  1034. auto& cache = *root_state.intrinsic_sizes.ensure(&box, [] { return adopt_own(*new LayoutState::IntrinsicSizes); });
  1035. if (available_width.is_definite())
  1036. return &cache.min_content_height_with_definite_available_width.ensure(available_width.to_px());
  1037. if (available_width.is_min_content())
  1038. return &cache.min_content_height_with_min_content_available_width;
  1039. if (available_width.is_max_content())
  1040. return &cache.min_content_height_with_max_content_available_width;
  1041. return {};
  1042. };
  1043. if (auto* cache_slot = get_cache_slot(); cache_slot && cache_slot->has_value())
  1044. return cache_slot->value();
  1045. LayoutState throwaway_state(&m_state);
  1046. auto& box_state = throwaway_state.get_mutable(box);
  1047. box_state.height_constraint = SizeConstraint::MinContent;
  1048. box_state.set_indefinite_content_height();
  1049. if (available_width.is_definite())
  1050. box_state.set_content_width(available_width.to_px());
  1051. auto context = const_cast<FormattingContext*>(this)->create_independent_formatting_context_if_needed(throwaway_state, box);
  1052. if (!context) {
  1053. context = make<BlockFormattingContext>(throwaway_state, verify_cast<BlockContainer>(box), nullptr);
  1054. }
  1055. context->run(box, LayoutMode::IntrinsicSizing, AvailableSpace(available_width, AvailableSize::make_min_content()));
  1056. auto min_content_height = context->automatic_content_height();
  1057. if (!isfinite(min_content_height.value())) {
  1058. // HACK: If layout calculates a non-finite result, something went wrong. Force it to zero and log a little whine.
  1059. dbgln("FIXME: Calculated non-finite min-content height for {}", box.debug_description());
  1060. min_content_height = 0;
  1061. }
  1062. if (auto* cache_slot = get_cache_slot()) {
  1063. *cache_slot = min_content_height;
  1064. }
  1065. return min_content_height;
  1066. }
  1067. CSSPixels FormattingContext::calculate_max_content_height(Layout::Box const& box, AvailableSize const& available_width) const
  1068. {
  1069. if (box.has_intrinsic_aspect_ratio() && available_width.is_definite())
  1070. return available_width.to_px() / static_cast<double>(*box.intrinsic_aspect_ratio());
  1071. if (box.has_intrinsic_height())
  1072. return *box.intrinsic_height();
  1073. bool is_cacheable = available_width.is_definite() || available_width.is_intrinsic_sizing_constraint();
  1074. auto get_cache_slot = [&]() -> Optional<CSSPixels>* {
  1075. if (!is_cacheable)
  1076. return {};
  1077. auto& root_state = m_state.m_root;
  1078. auto& cache = *root_state.intrinsic_sizes.ensure(&box, [] { return adopt_own(*new LayoutState::IntrinsicSizes); });
  1079. if (available_width.is_definite())
  1080. return &cache.max_content_height_with_definite_available_width.ensure(available_width.to_px());
  1081. if (available_width.is_min_content())
  1082. return &cache.max_content_height_with_min_content_available_width;
  1083. if (available_width.is_max_content())
  1084. return &cache.max_content_height_with_max_content_available_width;
  1085. return {};
  1086. };
  1087. if (auto* cache_slot = get_cache_slot(); cache_slot && cache_slot->has_value())
  1088. return cache_slot->value();
  1089. LayoutState throwaway_state(&m_state);
  1090. auto& box_state = throwaway_state.get_mutable(box);
  1091. box_state.height_constraint = SizeConstraint::MaxContent;
  1092. box_state.set_indefinite_content_height();
  1093. if (available_width.is_definite())
  1094. box_state.set_content_width(available_width.to_px());
  1095. auto context = const_cast<FormattingContext*>(this)->create_independent_formatting_context_if_needed(throwaway_state, box);
  1096. if (!context) {
  1097. context = make<BlockFormattingContext>(throwaway_state, verify_cast<BlockContainer>(box), nullptr);
  1098. }
  1099. context->run(box, LayoutMode::IntrinsicSizing, AvailableSpace(available_width, AvailableSize::make_max_content()));
  1100. auto max_content_height = context->automatic_content_height();
  1101. if (!isfinite(max_content_height.value())) {
  1102. // HACK: If layout calculates a non-finite result, something went wrong. Force it to zero and log a little whine.
  1103. dbgln("FIXME: Calculated non-finite max-content height for {}", box.debug_description());
  1104. max_content_height = 0;
  1105. }
  1106. if (auto* cache_slot = get_cache_slot()) {
  1107. *cache_slot = max_content_height;
  1108. }
  1109. return max_content_height;
  1110. }
  1111. CSS::Length FormattingContext::calculate_inner_width(Layout::Box const& box, AvailableSize const& available_width, CSS::Size const& width) const
  1112. {
  1113. auto width_of_containing_block = available_width.to_px();
  1114. auto width_of_containing_block_as_length_for_resolve = CSS::Length::make_px(width_of_containing_block);
  1115. if (width.is_auto()) {
  1116. return width.resolved(box, width_of_containing_block_as_length_for_resolve);
  1117. }
  1118. if (width.is_fit_content()) {
  1119. return CSS::Length::make_px(calculate_fit_content_width(box, AvailableSpace { available_width, AvailableSize::make_indefinite() }));
  1120. }
  1121. if (width.is_max_content()) {
  1122. return CSS::Length::make_px(calculate_max_content_width(box));
  1123. }
  1124. if (width.is_min_content()) {
  1125. return CSS::Length::make_px(calculate_min_content_width(box));
  1126. }
  1127. auto& computed_values = box.computed_values();
  1128. if (computed_values.box_sizing() == CSS::BoxSizing::BorderBox) {
  1129. auto const padding_left = computed_values.padding().left().resolved(box, width_of_containing_block_as_length_for_resolve);
  1130. auto const padding_right = computed_values.padding().right().resolved(box, width_of_containing_block_as_length_for_resolve);
  1131. auto inner_width = width.to_px(box, width_of_containing_block)
  1132. - computed_values.border_left().width
  1133. - padding_left.to_px(box)
  1134. - computed_values.border_right().width
  1135. - padding_right.to_px(box);
  1136. return CSS::Length::make_px(max(inner_width, 0));
  1137. }
  1138. return width.resolved(box, width_of_containing_block_as_length_for_resolve);
  1139. }
  1140. CSS::Length FormattingContext::calculate_inner_height(Layout::Box const& box, AvailableSize const&, CSS::Size const& height) const
  1141. {
  1142. auto height_of_containing_block = m_state.get(*box.non_anyonymous_containing_block()).content_height();
  1143. auto height_of_containing_block_as_length_for_resolve = CSS::Length::make_px(height_of_containing_block);
  1144. if (height.is_auto()) {
  1145. return height.resolved(box, height_of_containing_block_as_length_for_resolve);
  1146. }
  1147. auto& computed_values = box.computed_values();
  1148. if (computed_values.box_sizing() == CSS::BoxSizing::BorderBox) {
  1149. auto width_of_containing_block = CSS::Length::make_px(containing_block_width_for(box));
  1150. auto const padding_top = computed_values.padding().top().resolved(box, width_of_containing_block);
  1151. auto const padding_bottom = computed_values.padding().bottom().resolved(box, width_of_containing_block);
  1152. auto inner_height = height.to_px(box, height_of_containing_block)
  1153. - computed_values.border_top().width
  1154. - padding_top.to_px(box)
  1155. - computed_values.border_bottom().width
  1156. - padding_bottom.to_px(box);
  1157. return CSS::Length::make_px(max(inner_height, 0));
  1158. }
  1159. return height.resolved(box, height_of_containing_block_as_length_for_resolve);
  1160. }
  1161. CSSPixels FormattingContext::containing_block_width_for(Box const& box, LayoutState const& state)
  1162. {
  1163. auto& containing_block_state = state.get(*box.containing_block());
  1164. auto& box_state = state.get(box);
  1165. switch (box_state.width_constraint) {
  1166. case SizeConstraint::MinContent:
  1167. return 0;
  1168. case SizeConstraint::MaxContent:
  1169. return INFINITY;
  1170. case SizeConstraint::None:
  1171. return containing_block_state.content_width();
  1172. }
  1173. VERIFY_NOT_REACHED();
  1174. }
  1175. CSSPixels FormattingContext::containing_block_height_for(Box const& box, LayoutState const& state)
  1176. {
  1177. auto& containing_block_state = state.get(*box.containing_block());
  1178. auto& box_state = state.get(box);
  1179. switch (box_state.height_constraint) {
  1180. case SizeConstraint::MinContent:
  1181. return 0;
  1182. case SizeConstraint::MaxContent:
  1183. return INFINITY;
  1184. case SizeConstraint::None:
  1185. return containing_block_state.content_height();
  1186. }
  1187. VERIFY_NOT_REACHED();
  1188. }
  1189. // https://drafts.csswg.org/css-sizing-3/#stretch-fit-size
  1190. CSSPixels FormattingContext::calculate_stretch_fit_width(Box const& box, AvailableSize const& available_width, LayoutState const& state)
  1191. {
  1192. // The size a box would take if its outer size filled the available space in the given axis;
  1193. // in other words, the stretch fit into the available space, if that is definite.
  1194. // Undefined if the available space is indefinite.
  1195. auto const& box_state = state.get(box);
  1196. return available_width.to_px()
  1197. - box_state.margin_left
  1198. - box_state.margin_right
  1199. - box_state.padding_left
  1200. - box_state.padding_right
  1201. - box_state.border_left
  1202. - box_state.border_right;
  1203. }
  1204. CSSPixels FormattingContext::calculate_stretch_fit_width(Box const& box, AvailableSize const& available_width) const
  1205. {
  1206. return calculate_stretch_fit_width(box, available_width, m_state);
  1207. }
  1208. // https://drafts.csswg.org/css-sizing-3/#stretch-fit-size
  1209. CSSPixels FormattingContext::calculate_stretch_fit_height(Box const& box, AvailableSize const& available_height, LayoutState const& state)
  1210. {
  1211. // The size a box would take if its outer size filled the available space in the given axis;
  1212. // in other words, the stretch fit into the available space, if that is definite.
  1213. // Undefined if the available space is indefinite.
  1214. auto const& box_state = state.get(box);
  1215. return available_height.to_px()
  1216. - box_state.margin_top
  1217. - box_state.margin_bottom
  1218. - box_state.padding_top
  1219. - box_state.padding_bottom
  1220. - box_state.border_top
  1221. - box_state.border_bottom;
  1222. }
  1223. CSSPixels FormattingContext::calculate_stretch_fit_height(Box const& box, AvailableSize const& available_height) const
  1224. {
  1225. return calculate_stretch_fit_height(box, available_height, m_state);
  1226. }
  1227. bool FormattingContext::should_treat_width_as_auto(Box const& box, AvailableSpace const& available_space)
  1228. {
  1229. return box.computed_values().width().is_auto()
  1230. || (box.computed_values().width().contains_percentage() && !available_space.width.is_definite());
  1231. }
  1232. bool FormattingContext::should_treat_height_as_auto(Box const& box, AvailableSpace const& available_space)
  1233. {
  1234. return box.computed_values().height().is_auto()
  1235. || (box.computed_values().height().contains_percentage() && !available_space.height.is_definite());
  1236. }
  1237. bool FormattingContext::can_skip_is_anonymous_text_run(Box& box)
  1238. {
  1239. if (box.is_anonymous() && !box.is_generated() && !box.first_child_of_type<BlockContainer>()) {
  1240. bool contains_only_white_space = true;
  1241. box.for_each_in_subtree([&](auto const& node) {
  1242. if (!is<TextNode>(node) || !static_cast<TextNode const&>(node).dom_node().data().is_whitespace()) {
  1243. contains_only_white_space = false;
  1244. return IterationDecision::Break;
  1245. }
  1246. return IterationDecision::Continue;
  1247. });
  1248. if (contains_only_white_space)
  1249. return true;
  1250. }
  1251. return false;
  1252. }
  1253. }