FormattingContext.cpp 30 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661
  1. /*
  2. * Copyright (c) 2020-2021, 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/InlineFormattingContext.h>
  12. #include <LibWeb/Layout/ReplacedBox.h>
  13. #include <LibWeb/Layout/SVGFormattingContext.h>
  14. #include <LibWeb/Layout/SVGSVGBox.h>
  15. #include <LibWeb/Layout/TableBox.h>
  16. #include <LibWeb/Layout/TableCellBox.h>
  17. #include <LibWeb/Layout/TableFormattingContext.h>
  18. namespace Web::Layout {
  19. FormattingContext::FormattingContext(Box& context_box, FormattingContext* parent)
  20. : m_parent(parent)
  21. , m_context_box(&context_box)
  22. {
  23. }
  24. FormattingContext::~FormattingContext()
  25. {
  26. }
  27. bool FormattingContext::creates_block_formatting_context(const Box& box)
  28. {
  29. if (box.is_root_element())
  30. return true;
  31. if (box.is_floating())
  32. return true;
  33. if (box.is_absolutely_positioned())
  34. return true;
  35. if (box.is_inline_block())
  36. return true;
  37. if (is<TableCellBox>(box))
  38. return true;
  39. CSS::Overflow overflow_x = box.computed_values().overflow_x();
  40. if ((overflow_x != CSS::Overflow::Visible) && (overflow_x != CSS::Overflow::Clip))
  41. return true;
  42. CSS::Overflow overflow_y = box.computed_values().overflow_y();
  43. if ((overflow_y != CSS::Overflow::Visible) && (overflow_y != CSS::Overflow::Clip))
  44. return true;
  45. auto display = box.computed_values().display();
  46. if (display.is_flow_root_inside())
  47. return true;
  48. // FIXME: inline-flex as well
  49. if (box.parent()) {
  50. auto parent_display = box.parent()->computed_values().display();
  51. if (parent_display.is_flex_inside()) {
  52. // FIXME: Flex items (direct children of the element with display: flex or inline-flex) if they are neither flex nor grid nor table containers themselves.
  53. if (!display.is_flex_inside())
  54. return true;
  55. }
  56. }
  57. // FIXME: table-caption
  58. // FIXME: anonymous table cells
  59. // FIXME: Elements with contain: layout, content, or paint.
  60. // FIXME: grid
  61. // FIXME: multicol
  62. // FIXME: column-span: all
  63. return false;
  64. }
  65. void FormattingContext::layout_inside(Box& child_box, LayoutMode layout_mode)
  66. {
  67. if (!child_box.can_have_children())
  68. return;
  69. if (is<SVGSVGBox>(child_box)) {
  70. SVGFormattingContext context(child_box, this);
  71. context.run(child_box, layout_mode);
  72. return;
  73. }
  74. auto child_display = child_box.computed_values().display();
  75. if (child_display.is_flex_inside()) {
  76. FlexFormattingContext context(child_box, this);
  77. context.run(child_box, layout_mode);
  78. return;
  79. }
  80. if (creates_block_formatting_context(child_box)) {
  81. BlockFormattingContext context(verify_cast<BlockContainer>(child_box), this);
  82. context.run(child_box, layout_mode);
  83. return;
  84. }
  85. if (child_display.is_table_inside()) {
  86. TableFormattingContext context(verify_cast<TableBox>(child_box), this);
  87. context.run(child_box, layout_mode);
  88. return;
  89. }
  90. VERIFY(is_block_formatting_context());
  91. if (child_box.children_are_inline()) {
  92. InlineFormattingContext context(verify_cast<BlockContainer>(child_box), this);
  93. context.run(child_box, layout_mode);
  94. return;
  95. }
  96. VERIFY(child_display.is_flow_inside());
  97. run(child_box, layout_mode);
  98. }
  99. static float greatest_child_width(Box const& box)
  100. {
  101. float max_width = 0;
  102. if (box.children_are_inline()) {
  103. for (auto& child : verify_cast<BlockContainer>(box).line_boxes()) {
  104. max_width = max(max_width, child.width());
  105. }
  106. } else {
  107. box.for_each_child_of_type<Box>([&](auto& child) {
  108. max_width = max(max_width, child.border_box_width());
  109. });
  110. }
  111. return max_width;
  112. }
  113. FormattingContext::ShrinkToFitResult FormattingContext::calculate_shrink_to_fit_widths(Box& box)
  114. {
  115. // Calculate the preferred width by formatting the content without breaking lines
  116. // other than where explicit line breaks occur.
  117. layout_inside(box, LayoutMode::OnlyRequiredLineBreaks);
  118. float preferred_width = greatest_child_width(box);
  119. // Also calculate the preferred minimum width, e.g., by trying all possible line breaks.
  120. // CSS 2.2 does not define the exact algorithm.
  121. layout_inside(box, LayoutMode::AllPossibleLineBreaks);
  122. float preferred_minimum_width = greatest_child_width(box);
  123. return { preferred_width, preferred_minimum_width };
  124. }
  125. static Gfx::FloatSize solve_replaced_size_constraint(float w, float h, const ReplacedBox& box)
  126. {
  127. // 10.4 Minimum and maximum widths: 'min-width' and 'max-width'
  128. auto& containing_block = *box.containing_block();
  129. auto specified_min_width = box.computed_values().min_width().resolved_or_zero(box, containing_block.width()).to_px(box);
  130. auto specified_max_width = box.computed_values().max_width().resolved(CSS::Length::make_px(w), box, containing_block.width()).to_px(box);
  131. auto specified_min_height = box.computed_values().min_height().resolved_or_auto(box, containing_block.height()).to_px(box);
  132. auto specified_max_height = box.computed_values().max_height().resolved(CSS::Length::make_px(h), box, containing_block.height()).to_px(box);
  133. auto min_width = min(specified_min_width, specified_max_width);
  134. auto max_width = max(specified_min_width, specified_max_width);
  135. auto min_height = min(specified_min_height, specified_max_height);
  136. auto max_height = max(specified_min_height, specified_max_height);
  137. if (w > max_width)
  138. return { w, max(max_width * h / w, min_height) };
  139. if (w < min_width)
  140. return { max_width, min(min_width * h / w, max_height) };
  141. if (h > max_height)
  142. return { max(max_height * w / h, min_width), max_height };
  143. if (h < min_height)
  144. return { min(min_height * w / h, max_width), min_height };
  145. if ((w > max_width && h > max_height) && (max_width / w < max_height / h))
  146. return { max_width, max(min_height, max_width * h / w) };
  147. if ((w > max_width && h > max_height) && (max_width / w > max_height / h))
  148. return { max(min_width, max_height * w / h), max_height };
  149. if ((w < min_width && h < min_height) && (min_width / w < min_height / h))
  150. return { min(max_width, min_height * w / h), min_height };
  151. if ((w < min_width && h < min_height) && (min_width / w > min_height / h))
  152. return { min_width, min(max_height, min_width * h / w) };
  153. if (w < min_width && h > max_height)
  154. return { min_width, max_height };
  155. if (w > max_width && h < min_height)
  156. return { max_width, min_height };
  157. return { w, h };
  158. }
  159. static float compute_auto_height_for_block_level_element(Box const& box)
  160. {
  161. Optional<float> top;
  162. Optional<float> bottom;
  163. if (box.children_are_inline()) {
  164. // If it only has inline-level children, the height is the distance between
  165. // the top of the topmost line box and the bottom of the bottommost line box.
  166. auto& block_container = verify_cast<BlockContainer>(box);
  167. if (!block_container.line_boxes().is_empty()) {
  168. for (auto& fragment : block_container.line_boxes().first().fragments()) {
  169. if (!top.has_value() || fragment.offset().y() < top.value())
  170. top = fragment.offset().y();
  171. }
  172. for (auto& fragment : block_container.line_boxes().last().fragments()) {
  173. if (!bottom.has_value() || (fragment.offset().y() + fragment.height()) > bottom.value())
  174. bottom = fragment.offset().y() + fragment.height();
  175. }
  176. }
  177. } else {
  178. // If it has block-level children, the height is the distance between
  179. // the top margin-edge of the topmost block-level child box
  180. // and the bottom margin-edge of the bottommost block-level child box.
  181. box.for_each_child_of_type<Box>([&](Layout::Box& child_box) {
  182. if (child_box.is_absolutely_positioned())
  183. return IterationDecision::Continue;
  184. if ((box.computed_values().overflow_y() == CSS::Overflow::Visible) && child_box.is_floating())
  185. return IterationDecision::Continue;
  186. float child_box_top = child_box.effective_offset().y() - child_box.box_model().margin_box().top;
  187. float child_box_bottom = child_box.effective_offset().y() + child_box.height() + child_box.box_model().margin_box().bottom;
  188. if (!top.has_value() || child_box_top < top.value())
  189. top = child_box_top;
  190. if (!bottom.has_value() || child_box_bottom > bottom.value())
  191. bottom = child_box_bottom;
  192. return IterationDecision::Continue;
  193. });
  194. // In addition, if the element has any floating descendants
  195. // whose bottom margin edge is below the element's bottom content edge,
  196. // then the height is increased to include those edges.
  197. box.for_each_child_of_type<Box>([&](Layout::Box& child_box) {
  198. if (!child_box.is_floating())
  199. return IterationDecision::Continue;
  200. float child_box_bottom = child_box.effective_offset().y() + child_box.height();
  201. if (!bottom.has_value() || child_box_bottom > bottom.value())
  202. bottom = child_box_bottom;
  203. return IterationDecision::Continue;
  204. });
  205. }
  206. return bottom.value_or(0) - top.value_or(0);
  207. }
  208. // 10.3.2 Inline, replaced elements, https://www.w3.org/TR/CSS22/visudet.html#inline-replaced-width
  209. float FormattingContext::tentative_width_for_replaced_element(ReplacedBox const& box, CSS::Length const& computed_width)
  210. {
  211. auto& containing_block = *box.containing_block();
  212. auto computed_height = box.computed_values().height().resolved_or_auto(box, containing_block.height());
  213. float used_width = computed_width.to_px(box);
  214. // If 'height' and 'width' both have computed values of 'auto' and the element also has an intrinsic width,
  215. // then that intrinsic width is the used value of 'width'.
  216. if (computed_height.is_auto() && computed_width.is_auto() && box.has_intrinsic_width())
  217. return box.intrinsic_width().value();
  218. // If 'height' and 'width' both have computed values of 'auto' and the element has no intrinsic width,
  219. // but does have an intrinsic height and intrinsic ratio;
  220. // or if 'width' has a computed value of 'auto',
  221. // 'height' has some other computed value, and the element does have an intrinsic ratio; then the used value of 'width' is:
  222. //
  223. // (used height) * (intrinsic ratio)
  224. if ((computed_height.is_auto() && computed_width.is_auto() && !box.has_intrinsic_width() && box.has_intrinsic_height() && box.has_intrinsic_aspect_ratio())
  225. || (computed_width.is_auto() && box.has_intrinsic_aspect_ratio())) {
  226. return compute_height_for_replaced_element(box) * box.intrinsic_aspect_ratio().value();
  227. }
  228. // If 'height' and 'width' both have computed values of 'auto' and the element has an intrinsic ratio but no intrinsic height or width,
  229. // 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
  230. // depend on the replaced element's width, then the used value of 'width' is calculated from the constraint equation used for block-level,
  231. // non-replaced elements in normal flow.
  232. // 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'.
  233. if (computed_width.is_auto() && box.has_intrinsic_width())
  234. return box.intrinsic_width().value();
  235. // 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.
  236. // 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.
  237. if (computed_width.is_auto())
  238. return 300;
  239. return used_width;
  240. }
  241. void FormattingContext::compute_width_for_absolutely_positioned_element(Box& box)
  242. {
  243. if (is<ReplacedBox>(box))
  244. compute_width_for_absolutely_positioned_replaced_element(verify_cast<ReplacedBox>(box));
  245. else
  246. compute_width_for_absolutely_positioned_non_replaced_element(box);
  247. }
  248. void FormattingContext::compute_height_for_absolutely_positioned_element(Box& box)
  249. {
  250. if (is<ReplacedBox>(box))
  251. compute_height_for_absolutely_positioned_replaced_element(verify_cast<ReplacedBox>(box));
  252. else
  253. compute_height_for_absolutely_positioned_non_replaced_element(box);
  254. }
  255. float FormattingContext::compute_width_for_replaced_element(const ReplacedBox& box)
  256. {
  257. // 10.3.4 Block-level, replaced elements in normal flow...
  258. // 10.3.2 Inline, replaced elements
  259. auto zero_value = CSS::Length::make_px(0);
  260. auto& containing_block = *box.containing_block();
  261. auto margin_left = box.computed_values().margin().left.resolved_or_zero(box, containing_block.width());
  262. auto margin_right = box.computed_values().margin().right.resolved_or_zero(box, containing_block.width());
  263. // A computed value of 'auto' for 'margin-left' or 'margin-right' becomes a used value of '0'.
  264. if (margin_left.is_auto())
  265. margin_left = zero_value;
  266. if (margin_right.is_auto())
  267. margin_right = zero_value;
  268. auto specified_width = box.computed_values().width().resolved_or_auto(box, containing_block.width());
  269. // 1. The tentative used width is calculated (without 'min-width' and 'max-width')
  270. auto used_width = tentative_width_for_replaced_element(box, specified_width);
  271. // 2. The tentative used width is greater than 'max-width', the rules above are applied again,
  272. // but this time using the computed value of 'max-width' as the computed value for 'width'.
  273. auto specified_max_width = box.computed_values().max_width().resolved_or_auto(box, containing_block.width());
  274. if (!specified_max_width.is_auto()) {
  275. if (used_width > specified_max_width.to_px(box)) {
  276. used_width = tentative_width_for_replaced_element(box, specified_max_width);
  277. }
  278. }
  279. // 3. If the resulting width is smaller than 'min-width', the rules above are applied again,
  280. // but this time using the value of 'min-width' as the computed value for 'width'.
  281. auto specified_min_width = box.computed_values().min_width().resolved_or_auto(box, containing_block.width());
  282. if (!specified_min_width.is_auto()) {
  283. if (used_width < specified_min_width.to_px(box)) {
  284. used_width = tentative_width_for_replaced_element(box, specified_min_width);
  285. }
  286. }
  287. return used_width;
  288. }
  289. float FormattingContext::tentative_height_for_replaced_element(const ReplacedBox& box, const CSS::Length& height)
  290. {
  291. auto& containing_block = *box.containing_block();
  292. auto specified_width = box.computed_values().width().resolved_or_auto(box, containing_block.width());
  293. float used_height = height.to_px(box);
  294. // If 'height' and 'width' both have computed values of 'auto' and the element also has
  295. // an intrinsic height, then that intrinsic height is the used value of 'height'.
  296. if (specified_width.is_auto() && height.is_auto() && box.has_intrinsic_height())
  297. used_height = box.intrinsic_height().value();
  298. else if (height.is_auto() && box.has_intrinsic_aspect_ratio())
  299. used_height = compute_width_for_replaced_element(box) / box.intrinsic_aspect_ratio().value();
  300. else if (height.is_auto() && box.has_intrinsic_height())
  301. used_height = box.intrinsic_height().value();
  302. else if (height.is_auto())
  303. used_height = 150;
  304. return used_height;
  305. }
  306. float FormattingContext::compute_height_for_replaced_element(const ReplacedBox& box)
  307. {
  308. // 10.6.2 Inline replaced elements, block-level replaced elements in normal flow,
  309. // 'inline-block' replaced elements in normal flow and floating replaced elements
  310. auto& containing_block = *box.containing_block();
  311. auto specified_width = box.computed_values().width().resolved_or_auto(box, containing_block.width());
  312. auto specified_height = box.computed_values().height().resolved_or_auto(box, containing_block.height());
  313. float used_height = tentative_height_for_replaced_element(box, specified_height);
  314. if (specified_width.is_auto() && specified_height.is_auto() && box.has_intrinsic_aspect_ratio()) {
  315. float w = tentative_width_for_replaced_element(box, specified_width);
  316. float h = used_height;
  317. used_height = solve_replaced_size_constraint(w, h, box).height();
  318. }
  319. return used_height;
  320. }
  321. void FormattingContext::compute_width_for_absolutely_positioned_non_replaced_element(Box& box)
  322. {
  323. auto& containing_block = *box.containing_block();
  324. auto& computed_values = box.computed_values();
  325. auto zero_value = CSS::Length::make_px(0);
  326. auto margin_left = CSS::Length::make_auto();
  327. auto margin_right = CSS::Length::make_auto();
  328. const auto border_left = computed_values.border_left().width;
  329. const auto border_right = computed_values.border_right().width;
  330. const auto padding_left = computed_values.padding().left.resolved_or_zero(box, containing_block.width());
  331. const auto padding_right = computed_values.padding().right.resolved_or_zero(box, containing_block.width());
  332. auto try_compute_width = [&](const auto& a_width) {
  333. margin_left = computed_values.margin().left.resolved_or_zero(box, containing_block.width());
  334. margin_right = computed_values.margin().right.resolved_or_zero(box, containing_block.width());
  335. auto left = computed_values.offset().left.resolved_or_auto(box, containing_block.width());
  336. auto right = computed_values.offset().right.resolved_or_auto(box, containing_block.width());
  337. auto width = a_width;
  338. auto solve_for_left = [&] {
  339. return CSS::Length(containing_block.width() - margin_left.to_px(box) - border_left - padding_left.to_px(box) - width.to_px(box) - padding_right.to_px(box) - border_right - margin_right.to_px(box) - right.to_px(box), CSS::Length::Type::Px);
  340. };
  341. auto solve_for_width = [&] {
  342. return CSS::Length(containing_block.width() - left.to_px(box) - margin_left.to_px(box) - border_left - padding_left.to_px(box) - padding_right.to_px(box) - border_right - margin_right.to_px(box) - right.to_px(box), CSS::Length::Type::Px);
  343. };
  344. auto solve_for_right = [&] {
  345. return CSS::Length(containing_block.width() - left.to_px(box) - margin_left.to_px(box) - border_left - padding_left.to_px(box) - width.to_px(box) - padding_right.to_px(box) - border_right - margin_right.to_px(box), CSS::Length::Type::Px);
  346. };
  347. // If all three of 'left', 'width', and 'right' are 'auto':
  348. if (left.is_auto() && width.is_auto() && right.is_auto()) {
  349. // First set any 'auto' values for 'margin-left' and 'margin-right' to 0.
  350. if (margin_left.is_auto())
  351. margin_left = CSS::Length::make_px(0);
  352. if (margin_right.is_auto())
  353. margin_right = CSS::Length::make_px(0);
  354. // Then, if the 'direction' property of the element establishing the static-position containing block
  355. // is 'ltr' set 'left' to the static position and apply rule number three below;
  356. // otherwise, set 'right' to the static position and apply rule number one below.
  357. // FIXME: This is very hackish.
  358. left = CSS::Length::make_px(0);
  359. goto Rule3;
  360. }
  361. if (!left.is_auto() && !width.is_auto() && !right.is_auto()) {
  362. // FIXME: This should be solved in a more complicated way.
  363. return width;
  364. }
  365. if (margin_left.is_auto())
  366. margin_left = CSS::Length::make_px(0);
  367. if (margin_right.is_auto())
  368. margin_right = CSS::Length::make_px(0);
  369. // 1. 'left' and 'width' are 'auto' and 'right' is not 'auto',
  370. // then the width is shrink-to-fit. Then solve for 'left'
  371. if (left.is_auto() && width.is_auto() && !right.is_auto()) {
  372. auto result = calculate_shrink_to_fit_widths(box);
  373. solve_for_left();
  374. auto available_width = solve_for_width();
  375. width = CSS::Length(min(max(result.preferred_minimum_width, available_width.to_px(box)), result.preferred_width), CSS::Length::Type::Px);
  376. }
  377. // 2. 'left' and 'right' are 'auto' and 'width' is not 'auto',
  378. // then if the 'direction' property of the element establishing
  379. // the static-position containing block is 'ltr' set 'left'
  380. // to the static position, otherwise set 'right' to the static position.
  381. // Then solve for 'left' (if 'direction is 'rtl') or 'right' (if 'direction' is 'ltr').
  382. else if (left.is_auto() && right.is_auto() && !width.is_auto()) {
  383. // FIXME: Check direction
  384. // FIXME: Use the static-position containing block
  385. left = zero_value;
  386. right = solve_for_right();
  387. }
  388. // 3. 'width' and 'right' are 'auto' and 'left' is not 'auto',
  389. // then the width is shrink-to-fit. Then solve for 'right'
  390. else if (width.is_auto() && right.is_auto() && !left.is_auto()) {
  391. Rule3:
  392. auto result = calculate_shrink_to_fit_widths(box);
  393. auto available_width = solve_for_width();
  394. width = CSS::Length(min(max(result.preferred_minimum_width, available_width.to_px(box)), result.preferred_width), CSS::Length::Type::Px);
  395. right = solve_for_right();
  396. }
  397. // 4. 'left' is 'auto', 'width' and 'right' are not 'auto', then solve for 'left'
  398. else if (left.is_auto() && !width.is_auto() && !right.is_auto()) {
  399. left = solve_for_left();
  400. }
  401. // 5. 'width' is 'auto', 'left' and 'right' are not 'auto', then solve for 'width'
  402. else if (width.is_auto() && !left.is_auto() && !right.is_auto()) {
  403. width = solve_for_width();
  404. }
  405. // 6. 'right' is 'auto', 'left' and 'width' are not 'auto', then solve for 'right'
  406. else if (right.is_auto() && !left.is_auto() && !width.is_auto()) {
  407. right = solve_for_right();
  408. }
  409. return width;
  410. };
  411. auto specified_width = computed_values.width().resolved_or_auto(box, containing_block.width());
  412. // 1. The tentative used width is calculated (without 'min-width' and 'max-width')
  413. auto used_width = try_compute_width(specified_width);
  414. // 2. The tentative used width is greater than 'max-width', the rules above are applied again,
  415. // but this time using the computed value of 'max-width' as the computed value for 'width'.
  416. auto specified_max_width = computed_values.max_width().resolved_or_auto(box, containing_block.width());
  417. if (!specified_max_width.is_auto()) {
  418. if (used_width.to_px(box) > specified_max_width.to_px(box)) {
  419. used_width = try_compute_width(specified_max_width);
  420. }
  421. }
  422. // 3. If the resulting width is smaller than 'min-width', the rules above are applied again,
  423. // but this time using the value of 'min-width' as the computed value for 'width'.
  424. auto specified_min_width = computed_values.min_width().resolved_or_auto(box, containing_block.width());
  425. if (!specified_min_width.is_auto()) {
  426. if (used_width.to_px(box) < specified_min_width.to_px(box)) {
  427. used_width = try_compute_width(specified_min_width);
  428. }
  429. }
  430. box.set_width(used_width.to_px(box));
  431. box.box_model().margin.left = margin_left.to_px(box);
  432. box.box_model().margin.right = margin_right.to_px(box);
  433. box.box_model().border.left = border_left;
  434. box.box_model().border.right = border_right;
  435. box.box_model().padding.left = padding_left.to_px(box);
  436. box.box_model().padding.right = padding_right.to_px(box);
  437. }
  438. void FormattingContext::compute_width_for_absolutely_positioned_replaced_element(ReplacedBox& box)
  439. {
  440. // 10.3.8 Absolutely positioned, replaced elements
  441. // The used value of 'width' is determined as for inline replaced elements.
  442. box.prepare_for_replaced_layout();
  443. box.set_width(compute_width_for_replaced_element(box));
  444. }
  445. void FormattingContext::compute_height_for_absolutely_positioned_non_replaced_element(Box& box)
  446. {
  447. auto& computed_values = box.computed_values();
  448. auto& containing_block = *box.containing_block();
  449. CSS::Length specified_top = computed_values.offset().top.resolved_or_auto(box, containing_block.height());
  450. CSS::Length specified_bottom = computed_values.offset().bottom.resolved_or_auto(box, containing_block.height());
  451. CSS::Length specified_height;
  452. if (computed_values.height().is_percentage() && !containing_block.computed_values().height().is_absolute()) {
  453. specified_height = CSS::Length::make_auto();
  454. } else {
  455. specified_height = computed_values.height().resolved_or_auto(box, containing_block.height());
  456. }
  457. auto specified_max_height = computed_values.max_height().resolved_or_auto(box, containing_block.height());
  458. auto specified_min_height = computed_values.min_height().resolved_or_auto(box, containing_block.height());
  459. box.box_model().margin.top = computed_values.margin().top.resolved_or_zero(box, containing_block.width()).to_px(box);
  460. box.box_model().margin.bottom = computed_values.margin().bottom.resolved_or_zero(box, containing_block.width()).to_px(box);
  461. box.box_model().border.top = computed_values.border_top().width;
  462. box.box_model().border.bottom = computed_values.border_bottom().width;
  463. box.box_model().padding.top = computed_values.padding().top.resolved_or_zero(box, containing_block.width()).to_px(box);
  464. box.box_model().padding.bottom = computed_values.padding().bottom.resolved_or_zero(box, containing_block.width()).to_px(box);
  465. if (specified_height.is_auto() && !specified_top.is_auto() && specified_bottom.is_auto()) {
  466. const auto& margin = box.box_model().margin;
  467. const auto& padding = box.box_model().padding;
  468. const auto& border = box.box_model().border;
  469. specified_height = CSS::Length(compute_auto_height_for_block_level_element(box), CSS::Length::Type::Px);
  470. box.box_model().offset.bottom = containing_block.height() - specified_height.to_px(box) - specified_top.to_px(box) - margin.top - padding.top - border.top - margin.bottom - padding.bottom - border.bottom;
  471. }
  472. else if (specified_height.is_auto() && !specified_top.is_auto() && !specified_bottom.is_auto()) {
  473. const auto& margin = box.box_model().margin;
  474. const auto& padding = box.box_model().padding;
  475. const auto& border = box.box_model().border;
  476. specified_height = CSS::Length(containing_block.height() - specified_top.to_px(box) - margin.top - padding.top - border.top - specified_bottom.to_px(box) - margin.bottom - padding.bottom - border.bottom, CSS::Length::Type::Px);
  477. }
  478. if (!specified_height.is_auto()) {
  479. float used_height = specified_height.to_px(box);
  480. if (!specified_max_height.is_auto())
  481. used_height = min(used_height, specified_max_height.to_px(box));
  482. if (!specified_min_height.is_auto())
  483. used_height = max(used_height, specified_min_height.to_px(box));
  484. box.set_height(used_height);
  485. }
  486. }
  487. void FormattingContext::layout_absolutely_positioned_element(Box& box)
  488. {
  489. auto& containing_block = *box.containing_block();
  490. auto& box_model = box.box_model();
  491. auto specified_width = box.computed_values().width().resolved_or_auto(box, containing_block.width());
  492. compute_width_for_absolutely_positioned_element(box);
  493. layout_inside(box, LayoutMode::Default);
  494. compute_height_for_absolutely_positioned_element(box);
  495. box_model.margin.left = box.computed_values().margin().left.resolved_or_auto(box, containing_block.width()).to_px(box);
  496. box_model.margin.top = box.computed_values().margin().top.resolved_or_auto(box, containing_block.height()).to_px(box);
  497. box_model.margin.right = box.computed_values().margin().right.resolved_or_auto(box, containing_block.width()).to_px(box);
  498. box_model.margin.bottom = box.computed_values().margin().bottom.resolved_or_auto(box, containing_block.height()).to_px(box);
  499. box_model.border.left = box.computed_values().border_left().width;
  500. box_model.border.right = box.computed_values().border_right().width;
  501. box_model.border.top = box.computed_values().border_top().width;
  502. box_model.border.bottom = box.computed_values().border_bottom().width;
  503. box_model.offset.left = box.computed_values().offset().left.resolved_or_auto(box, containing_block.width()).to_px(box);
  504. box_model.offset.top = box.computed_values().offset().top.resolved_or_auto(box, containing_block.height()).to_px(box);
  505. box_model.offset.right = box.computed_values().offset().right.resolved_or_auto(box, containing_block.width()).to_px(box);
  506. box_model.offset.bottom = box.computed_values().offset().bottom.resolved_or_auto(box, containing_block.height()).to_px(box);
  507. if (box.computed_values().offset().left.is_auto() && specified_width.is_auto() && box.computed_values().offset().right.is_auto()) {
  508. if (box.computed_values().margin().left.is_auto())
  509. box_model.margin.left = 0;
  510. if (box.computed_values().margin().right.is_auto())
  511. box_model.margin.right = 0;
  512. }
  513. Gfx::FloatPoint used_offset;
  514. if (!box.computed_values().offset().left.is_auto()) {
  515. float x_offset = box_model.offset.left
  516. + box_model.border_box().left;
  517. used_offset.set_x(x_offset + box_model.margin.left);
  518. } else if (!box.computed_values().offset().right.is_auto()) {
  519. float x_offset = 0
  520. - box_model.offset.right
  521. - box_model.border_box().right;
  522. used_offset.set_x(containing_block.width() + x_offset - box.width() - box_model.margin.right);
  523. } else {
  524. float x_offset = box_model.margin_box().left;
  525. used_offset.set_x(x_offset);
  526. }
  527. if (!box.computed_values().offset().top.is_auto()) {
  528. float y_offset = box_model.offset.top
  529. + box_model.border_box().top;
  530. used_offset.set_y(y_offset + box_model.margin.top);
  531. } else if (!box.computed_values().offset().bottom.is_auto()) {
  532. float y_offset = 0
  533. - box_model.offset.bottom
  534. - box_model.border_box().bottom;
  535. used_offset.set_y(containing_block.height() + y_offset - box.height() - box_model.margin.bottom);
  536. } else {
  537. float y_offset = box_model.margin_box().top;
  538. used_offset.set_y(y_offset);
  539. }
  540. box.set_offset(used_offset);
  541. }
  542. void FormattingContext::compute_height_for_absolutely_positioned_replaced_element(ReplacedBox& box)
  543. {
  544. // 10.6.5 Absolutely positioned, replaced elements
  545. // The used value of 'height' is determined as for inline replaced elements.
  546. box.set_height(compute_height_for_replaced_element(box));
  547. }
  548. }