LayoutBlock.cpp 34 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781
  1. /*
  2. * Copyright (c) 2018-2020, Andreas Kling <kling@serenityos.org>
  3. * All rights reserved.
  4. *
  5. * Redistribution and use in source and binary forms, with or without
  6. * modification, are permitted provided that the following conditions are met:
  7. *
  8. * 1. Redistributions of source code must retain the above copyright notice, this
  9. * list of conditions and the following disclaimer.
  10. *
  11. * 2. Redistributions in binary form must reproduce the above copyright notice,
  12. * this list of conditions and the following disclaimer in the documentation
  13. * and/or other materials provided with the distribution.
  14. *
  15. * THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS"
  16. * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
  17. * IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
  18. * DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE
  19. * FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL
  20. * DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR
  21. * SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER
  22. * CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY,
  23. * OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
  24. * OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
  25. */
  26. #include <LibGUI/Painter.h>
  27. #include <LibWeb/CSS/StyleResolver.h>
  28. #include <LibWeb/DOM/Element.h>
  29. #include <LibWeb/Dump.h>
  30. #include <LibWeb/Layout/LayoutBlock.h>
  31. #include <LibWeb/Layout/LayoutDocument.h>
  32. #include <LibWeb/Layout/LayoutInline.h>
  33. #include <LibWeb/Layout/LayoutReplaced.h>
  34. #include <LibWeb/Layout/LayoutText.h>
  35. #include <LibWeb/Layout/LayoutWidget.h>
  36. #include <math.h>
  37. namespace Web {
  38. LayoutBlock::LayoutBlock(DOM::Document& document, const DOM::Node* node, NonnullRefPtr<CSS::StyleProperties> style)
  39. : LayoutBox(document, node, move(style))
  40. {
  41. }
  42. LayoutBlock::~LayoutBlock()
  43. {
  44. }
  45. LayoutNode& LayoutBlock::inline_wrapper()
  46. {
  47. if (!last_child() || !last_child()->is_block() || last_child()->node() != nullptr) {
  48. append_child(adopt(*new LayoutBlock(document(), nullptr, style_for_anonymous_block())));
  49. last_child()->set_children_are_inline(true);
  50. }
  51. return *last_child();
  52. }
  53. void LayoutBlock::layout(LayoutMode layout_mode)
  54. {
  55. compute_width();
  56. layout_inside(layout_mode);
  57. compute_height();
  58. layout_absolutely_positioned_descendants();
  59. }
  60. void LayoutBlock::layout_absolutely_positioned_descendant(LayoutBox& box)
  61. {
  62. box.layout(LayoutMode::Default);
  63. auto& box_model = box.box_model();
  64. auto zero_value = CSS::Length::make_px(0);
  65. auto specified_width = box.style().width().resolved_or_auto(box, width());
  66. box_model.margin.left = box.style().margin().left.resolved_or_auto(box, width());
  67. box_model.margin.top = box.style().margin().top.resolved_or_auto(box, height());
  68. box_model.margin.right = box.style().margin().right.resolved_or_auto(box, width());
  69. box_model.margin.bottom = box.style().margin().bottom.resolved_or_auto(box, height());
  70. box_model.border.left = CSS::Length::make_px(box.style().border_left().width);
  71. box_model.border.right = CSS::Length::make_px(box.style().border_right().width);
  72. box_model.border.top = CSS::Length::make_px(box.style().border_top().width);
  73. box_model.border.bottom = CSS::Length::make_px(box.style().border_bottom().width);
  74. box_model.offset.left = box.style().offset().left.resolved_or_auto(box, width());
  75. box_model.offset.top = box.style().offset().top.resolved_or_auto(box, height());
  76. box_model.offset.right = box.style().offset().right.resolved_or_auto(box, width());
  77. box_model.offset.bottom = box.style().offset().bottom.resolved_or_auto(box, height());
  78. if (box_model.offset.left.is_auto() && specified_width.is_auto() && box_model.offset.right.is_auto()) {
  79. if (box_model.margin.left.is_auto())
  80. box_model.margin.left = zero_value;
  81. if (box_model.margin.right.is_auto())
  82. box_model.margin.right = zero_value;
  83. }
  84. Gfx::FloatPoint used_offset;
  85. if (!box_model.offset.left.is_auto()) {
  86. float x_offset = box_model.offset.left.to_px(box)
  87. + box_model.border_box(box).left;
  88. used_offset.set_x(x_offset + box_model.margin.left.to_px(box));
  89. } else if (!box_model.offset.right.is_auto()) {
  90. float x_offset = 0
  91. - box_model.offset.right.to_px(box)
  92. - box_model.border_box(box).right;
  93. used_offset.set_x(width() + x_offset - box.width() - box_model.margin.right.to_px(box));
  94. } else {
  95. float x_offset = box_model.margin_box(box).left;
  96. used_offset.set_x(x_offset);
  97. }
  98. if (!box_model.offset.top.is_auto()) {
  99. float y_offset = box_model.offset.top.to_px(box)
  100. + box_model.border_box(box).top;
  101. used_offset.set_y(y_offset + box_model.margin.top.to_px(box));
  102. } else if (!box_model.offset.bottom.is_auto()) {
  103. float y_offset = 0
  104. - box_model.offset.bottom.to_px(box)
  105. - box_model.border_box(box).bottom;
  106. used_offset.set_y(height() + y_offset - box.height() - box_model.margin.bottom.to_px(box));
  107. } else {
  108. float y_offset = box_model.margin_box(box).top;
  109. used_offset.set_y(y_offset);
  110. }
  111. box.set_offset(used_offset);
  112. }
  113. void LayoutBlock::layout_inside(LayoutMode layout_mode)
  114. {
  115. if (children_are_inline())
  116. layout_inline_children(layout_mode);
  117. else
  118. layout_contained_boxes(layout_mode);
  119. }
  120. void LayoutBlock::layout_absolutely_positioned_descendants()
  121. {
  122. for_each_in_subtree_of_type<LayoutBox>([&](auto& box) {
  123. if (box.is_absolutely_positioned() && box.containing_block() == this) {
  124. layout_absolutely_positioned_descendant(box);
  125. }
  126. return IterationDecision::Continue;
  127. });
  128. }
  129. void LayoutBlock::layout_contained_boxes(LayoutMode layout_mode)
  130. {
  131. float content_height = 0;
  132. float content_width = 0;
  133. for_each_in_subtree_of_type<LayoutBox>([&](auto& box) {
  134. if (box.is_absolutely_positioned() || box.containing_block() != this)
  135. return IterationDecision::Continue;
  136. box.layout(layout_mode);
  137. if (box.is_replaced())
  138. place_block_level_replaced_element_in_normal_flow(downcast<LayoutReplaced>(box));
  139. else if (box.is_block())
  140. place_block_level_non_replaced_element_in_normal_flow(downcast<LayoutBlock>(box));
  141. else
  142. dbg() << "FIXME: LayoutBlock::layout_contained_boxes doesn't know how to place a " << box.class_name();
  143. content_height = max(content_height, box.effective_offset().y() + box.height() + box.box_model().margin_box(*this).bottom);
  144. content_width = max(content_width, downcast<LayoutBox>(box).width());
  145. return IterationDecision::Continue;
  146. });
  147. if (layout_mode != LayoutMode::Default) {
  148. if (style().width().is_undefined() || style().width().is_auto())
  149. set_width(content_width);
  150. }
  151. set_height(content_height);
  152. }
  153. void LayoutBlock::layout_inline_children(LayoutMode layout_mode)
  154. {
  155. ASSERT(children_are_inline());
  156. m_line_boxes.clear();
  157. for_each_child([&](auto& child) {
  158. ASSERT(child.is_inline());
  159. if (child.is_absolutely_positioned())
  160. return;
  161. child.split_into_lines(*this, layout_mode);
  162. });
  163. for (auto& line_box : m_line_boxes) {
  164. line_box.trim_trailing_whitespace();
  165. }
  166. // If there's an empty line box at the bottom, just remove it instead of giving it height.
  167. if (!m_line_boxes.is_empty() && m_line_boxes.last().fragments().is_empty())
  168. m_line_boxes.take_last();
  169. auto text_align = style().text_align();
  170. float min_line_height = specified_style().line_height(*this);
  171. float line_spacing = min_line_height - specified_style().font().glyph_height();
  172. float content_height = 0;
  173. float max_linebox_width = 0;
  174. for (auto& line_box : m_line_boxes) {
  175. float max_height = min_line_height;
  176. for (auto& fragment : line_box.fragments()) {
  177. max_height = max(max_height, fragment.height());
  178. }
  179. float x_offset = 0;
  180. float excess_horizontal_space = (float)width() - line_box.width();
  181. switch (text_align) {
  182. case CSS::TextAlign::Center:
  183. case CSS::TextAlign::VendorSpecificCenter:
  184. x_offset += excess_horizontal_space / 2;
  185. break;
  186. case CSS::TextAlign::Right:
  187. x_offset += excess_horizontal_space;
  188. break;
  189. case CSS::TextAlign::Left:
  190. case CSS::TextAlign::Justify:
  191. default:
  192. break;
  193. }
  194. float excess_horizontal_space_including_whitespace = excess_horizontal_space;
  195. int whitespace_count = 0;
  196. if (text_align == CSS::TextAlign::Justify) {
  197. for (auto& fragment : line_box.fragments()) {
  198. if (fragment.is_justifiable_whitespace()) {
  199. ++whitespace_count;
  200. excess_horizontal_space_including_whitespace += fragment.width();
  201. }
  202. }
  203. }
  204. float justified_space_width = whitespace_count ? (excess_horizontal_space_including_whitespace / (float)whitespace_count) : 0;
  205. for (size_t i = 0; i < line_box.fragments().size(); ++i) {
  206. auto& fragment = line_box.fragments()[i];
  207. // Vertically align everyone's bottom to the line.
  208. // FIXME: Support other kinds of vertical alignment.
  209. fragment.set_offset({ roundf(x_offset + fragment.offset().x()), content_height + (max_height - fragment.height()) - (line_spacing / 2) });
  210. if (text_align == CSS::TextAlign::Justify) {
  211. if (fragment.is_justifiable_whitespace()) {
  212. if (fragment.width() != justified_space_width) {
  213. float diff = justified_space_width - fragment.width();
  214. fragment.set_width(justified_space_width);
  215. // Shift subsequent sibling fragments to the right to adjust for change in width.
  216. for (size_t j = i + 1; j < line_box.fragments().size(); ++j) {
  217. auto offset = line_box.fragments()[j].offset();
  218. offset.move_by(diff, 0);
  219. line_box.fragments()[j].set_offset(offset);
  220. }
  221. }
  222. }
  223. }
  224. if (fragment.layout_node().is_inline_block()) {
  225. auto& inline_block = const_cast<LayoutBlock&>(downcast<LayoutBlock>(fragment.layout_node()));
  226. inline_block.set_size(fragment.size());
  227. inline_block.layout(layout_mode);
  228. }
  229. float final_line_box_width = 0;
  230. for (auto& fragment : line_box.fragments())
  231. final_line_box_width += fragment.width();
  232. line_box.m_width = final_line_box_width;
  233. max_linebox_width = max(max_linebox_width, final_line_box_width);
  234. }
  235. content_height += max_height;
  236. }
  237. if (layout_mode != LayoutMode::Default) {
  238. set_width(max_linebox_width);
  239. }
  240. set_height(content_height);
  241. }
  242. void LayoutBlock::compute_width_for_absolutely_positioned_block()
  243. {
  244. auto& containing_block = *this->containing_block();
  245. auto zero_value = CSS::Length::make_px(0);
  246. auto margin_left = CSS::Length::make_auto();
  247. auto margin_right = CSS::Length::make_auto();
  248. const auto border_left = style().border_left().width;
  249. const auto border_right = style().border_right().width;
  250. const auto padding_left = style().padding().left.resolved(zero_value, *this, containing_block.width());
  251. const auto padding_right = style().padding().right.resolved(zero_value, *this, containing_block.width());
  252. auto try_compute_width = [&](const auto& a_width) {
  253. margin_left = style().margin().left.resolved(zero_value, *this, containing_block.width());
  254. margin_right = style().margin().right.resolved(zero_value, *this, containing_block.width());
  255. auto left = style().offset().left.resolved_or_auto(*this, containing_block.width());
  256. auto right = style().offset().right.resolved_or_auto(*this, containing_block.width());
  257. auto width = a_width;
  258. auto solve_for_left = [&] {
  259. return CSS::Length(containing_block.width() - margin_left.to_px(*this) - border_left - padding_left.to_px(*this) - width.to_px(*this) - padding_right.to_px(*this) - border_right - margin_right.to_px(*this) - right.to_px(*this), CSS::Length::Type::Px);
  260. };
  261. auto solve_for_width = [&] {
  262. return CSS::Length(containing_block.width() - left.to_px(*this) - margin_left.to_px(*this) - border_left - padding_left.to_px(*this) - padding_right.to_px(*this) - border_right - margin_right.to_px(*this) - right.to_px(*this), CSS::Length::Type::Px);
  263. };
  264. auto solve_for_right = [&] {
  265. return CSS::Length(containing_block.width() - left.to_px(*this) - margin_left.to_px(*this) - border_left - padding_left.to_px(*this) - width.to_px(*this) - padding_right.to_px(*this) - border_right - margin_right.to_px(*this), CSS::Length::Type::Px);
  266. };
  267. // If all three of 'left', 'width', and 'right' are 'auto':
  268. if (left.is_auto() && width.is_auto() && right.is_auto()) {
  269. // First set any 'auto' values for 'margin-left' and 'margin-right' to 0.
  270. if (margin_left.is_auto())
  271. margin_left = CSS::Length::make_px(0);
  272. if (margin_right.is_auto())
  273. margin_right = CSS::Length::make_px(0);
  274. // Then, if the 'direction' property of the element establishing the static-position containing block
  275. // is 'ltr' set 'left' to the static position and apply rule number three below;
  276. // otherwise, set 'right' to the static position and apply rule number one below.
  277. // FIXME: This is very hackish.
  278. left = CSS::Length::make_px(0);
  279. goto Rule3;
  280. }
  281. if (!left.is_auto() && !width.is_auto() && !right.is_auto()) {
  282. // FIXME: This should be solved in a more complicated way.
  283. return width;
  284. }
  285. if (margin_left.is_auto())
  286. margin_left = CSS::Length::make_px(0);
  287. if (margin_right.is_auto())
  288. margin_right = CSS::Length::make_px(0);
  289. // 1. 'left' and 'width' are 'auto' and 'right' is not 'auto',
  290. // then the width is shrink-to-fit. Then solve for 'left'
  291. if (left.is_auto() && width.is_auto() && !right.is_auto()) {
  292. auto result = calculate_shrink_to_fit_width();
  293. solve_for_left();
  294. auto available_width = solve_for_width();
  295. width = CSS::Length(min(max(result.preferred_minimum_width, available_width.to_px(*this)), result.preferred_width), CSS::Length::Type::Px);
  296. }
  297. // 2. 'left' and 'right' are 'auto' and 'width' is not 'auto',
  298. // then if the 'direction' property of the element establishing
  299. // the static-position containing block is 'ltr' set 'left'
  300. // to the static position, otherwise set 'right' to the static position.
  301. // Then solve for 'left' (if 'direction is 'rtl') or 'right' (if 'direction' is 'ltr').
  302. else if (left.is_auto() && right.is_auto() && !width.is_auto()) {
  303. // FIXME: Check direction
  304. // FIXME: Use the static-position containing block
  305. left = zero_value;
  306. right = solve_for_right();
  307. }
  308. // 3. 'width' and 'right' are 'auto' and 'left' is not 'auto',
  309. // then the width is shrink-to-fit. Then solve for 'right'
  310. else if (width.is_auto() && right.is_auto() && !left.is_auto()) {
  311. Rule3:
  312. auto result = calculate_shrink_to_fit_width();
  313. right = solve_for_right();
  314. auto available_width = solve_for_width();
  315. width = CSS::Length(min(max(result.preferred_minimum_width, available_width.to_px(*this)), result.preferred_width), CSS::Length::Type::Px);
  316. }
  317. // 4. 'left' is 'auto', 'width' and 'right' are not 'auto', then solve for 'left'
  318. else if (left.is_auto() && !width.is_auto() && !right.is_auto()) {
  319. left = solve_for_left();
  320. }
  321. // 5. 'width' is 'auto', 'left' and 'right' are not 'auto', then solve for 'width'
  322. else if (width.is_auto() && !left.is_auto() && !right.is_auto()) {
  323. width = solve_for_width();
  324. }
  325. // 6. 'right' is 'auto', 'left' and 'width' are not 'auto', then solve for 'right'
  326. else if (right.is_auto() && !left.is_auto() && !width.is_auto()) {
  327. right = solve_for_right();
  328. }
  329. return width;
  330. };
  331. auto specified_width = style().width().resolved_or_auto(*this, containing_block.width());
  332. // 1. The tentative used width is calculated (without 'min-width' and 'max-width')
  333. auto used_width = try_compute_width(specified_width);
  334. // 2. The tentative used width is greater than 'max-width', the rules above are applied again,
  335. // but this time using the computed value of 'max-width' as the computed value for 'width'.
  336. auto specified_max_width = style().max_width().resolved_or_auto(*this, containing_block.width());
  337. if (!specified_max_width.is_auto()) {
  338. if (used_width.to_px(*this) > specified_max_width.to_px(*this)) {
  339. used_width = try_compute_width(specified_max_width);
  340. }
  341. }
  342. // 3. If the resulting width is smaller than 'min-width', the rules above are applied again,
  343. // but this time using the value of 'min-width' as the computed value for 'width'.
  344. auto specified_min_width = style().min_width().resolved_or_auto(*this, containing_block.width());
  345. if (!specified_min_width.is_auto()) {
  346. if (used_width.to_px(*this) < specified_min_width.to_px(*this)) {
  347. used_width = try_compute_width(specified_min_width);
  348. }
  349. }
  350. set_width(used_width.to_px(*this));
  351. box_model().margin.left = margin_left;
  352. box_model().margin.right = margin_right;
  353. box_model().border.left = CSS::Length::make_px(border_left);
  354. box_model().border.right = CSS::Length::make_px(border_right);
  355. box_model().padding.left = padding_left;
  356. box_model().padding.right = padding_right;
  357. }
  358. float LayoutBlock::width_of_logical_containing_block() const
  359. {
  360. auto* containing_block = this->containing_block();
  361. ASSERT(containing_block);
  362. return containing_block->width();
  363. }
  364. void LayoutBlock::compute_width()
  365. {
  366. if (is_absolutely_positioned())
  367. return compute_width_for_absolutely_positioned_block();
  368. float width_of_containing_block = this->width_of_logical_containing_block();
  369. auto zero_value = CSS::Length::make_px(0);
  370. auto margin_left = CSS::Length::make_auto();
  371. auto margin_right = CSS::Length::make_auto();
  372. const auto padding_left = style().padding().left.resolved_or_zero(*this, width_of_containing_block);
  373. const auto padding_right = style().padding().right.resolved_or_zero(*this, width_of_containing_block);
  374. auto try_compute_width = [&](const auto& a_width) {
  375. CSS::Length width = a_width;
  376. margin_left = style().margin().left.resolved_or_zero(*this, width_of_containing_block);
  377. margin_right = style().margin().right.resolved_or_zero(*this, width_of_containing_block);
  378. float total_px = style().border_left().width + style().border_right().width;
  379. for (auto& value : { margin_left, padding_left, width, padding_right, margin_right }) {
  380. total_px += value.to_px(*this);
  381. }
  382. #ifdef HTML_DEBUG
  383. dbg() << "Total: " << total_px;
  384. #endif
  385. if (!is_replaced() && !is_inline()) {
  386. // 10.3.3 Block-level, non-replaced elements in normal flow
  387. // If 'width' is not 'auto' and 'border-left-width' + 'padding-left' + 'width' + 'padding-right' + 'border-right-width' (plus any of 'margin-left' or 'margin-right' that are not 'auto') is larger than the width of the containing block, then any 'auto' values for 'margin-left' or 'margin-right' are, for the following rules, treated as zero.
  388. if (width.is_auto() && total_px > width_of_containing_block) {
  389. if (margin_left.is_auto())
  390. margin_left = zero_value;
  391. if (margin_right.is_auto())
  392. margin_right = zero_value;
  393. }
  394. // 10.3.3 cont'd.
  395. auto underflow_px = width_of_containing_block - total_px;
  396. if (width.is_auto()) {
  397. if (margin_left.is_auto())
  398. margin_left = zero_value;
  399. if (margin_right.is_auto())
  400. margin_right = zero_value;
  401. if (underflow_px >= 0) {
  402. width = CSS::Length(underflow_px, CSS::Length::Type::Px);
  403. } else {
  404. width = zero_value;
  405. margin_right = CSS::Length(margin_right.to_px(*this) + underflow_px, CSS::Length::Type::Px);
  406. }
  407. } else {
  408. if (!margin_left.is_auto() && !margin_right.is_auto()) {
  409. margin_right = CSS::Length(margin_right.to_px(*this) + underflow_px, CSS::Length::Type::Px);
  410. } else if (!margin_left.is_auto() && margin_right.is_auto()) {
  411. margin_right = CSS::Length(underflow_px, CSS::Length::Type::Px);
  412. } else if (margin_left.is_auto() && !margin_right.is_auto()) {
  413. margin_left = CSS::Length(underflow_px, CSS::Length::Type::Px);
  414. } else { // margin_left.is_auto() && margin_right.is_auto()
  415. auto half_of_the_underflow = CSS::Length(underflow_px / 2, CSS::Length::Type::Px);
  416. margin_left = half_of_the_underflow;
  417. margin_right = half_of_the_underflow;
  418. }
  419. }
  420. } else if (!is_replaced() && is_inline_block()) {
  421. // 10.3.9 'Inline-block', non-replaced elements in normal flow
  422. // A computed value of 'auto' for 'margin-left' or 'margin-right' becomes a used value of '0'.
  423. if (margin_left.is_auto())
  424. margin_left = zero_value;
  425. if (margin_right.is_auto())
  426. margin_right = zero_value;
  427. // If 'width' is 'auto', the used value is the shrink-to-fit width as for floating elements.
  428. if (width.is_auto()) {
  429. // Find the available width: in this case, this is the width of the containing
  430. // block minus the used values of 'margin-left', 'border-left-width', 'padding-left',
  431. // 'padding-right', 'border-right-width', 'margin-right', and the widths of any relevant scroll bars.
  432. float available_width = width_of_containing_block
  433. - margin_left.to_px(*this) - style().border_left().width - padding_left.to_px(*this)
  434. - padding_right.to_px(*this) - style().border_right().width - margin_right.to_px(*this);
  435. auto result = calculate_shrink_to_fit_width();
  436. // Then the shrink-to-fit width is: min(max(preferred minimum width, available width), preferred width).
  437. width = CSS::Length(min(max(result.preferred_minimum_width, available_width), result.preferred_width), CSS::Length::Type::Px);
  438. }
  439. }
  440. return width;
  441. };
  442. auto specified_width = style().width().resolved_or_auto(*this, width_of_containing_block);
  443. // 1. The tentative used width is calculated (without 'min-width' and 'max-width')
  444. auto used_width = try_compute_width(specified_width);
  445. // 2. The tentative used width is greater than 'max-width', the rules above are applied again,
  446. // but this time using the computed value of 'max-width' as the computed value for 'width'.
  447. auto specified_max_width = style().max_width().resolved_or_auto(*this, width_of_containing_block);
  448. if (!specified_max_width.is_auto()) {
  449. if (used_width.to_px(*this) > specified_max_width.to_px(*this)) {
  450. used_width = try_compute_width(specified_max_width);
  451. }
  452. }
  453. // 3. If the resulting width is smaller than 'min-width', the rules above are applied again,
  454. // but this time using the value of 'min-width' as the computed value for 'width'.
  455. auto specified_min_width = style().min_width().resolved_or_auto(*this, width_of_containing_block);
  456. if (!specified_min_width.is_auto()) {
  457. if (used_width.to_px(*this) < specified_min_width.to_px(*this)) {
  458. used_width = try_compute_width(specified_min_width);
  459. }
  460. }
  461. set_width(used_width.to_px(*this));
  462. box_model().margin.left = margin_left;
  463. box_model().margin.right = margin_right;
  464. box_model().border.left = CSS::Length::make_px(style().border_left().width);
  465. box_model().border.right = CSS::Length::make_px(style().border_right().width);
  466. box_model().padding.left = padding_left;
  467. box_model().padding.right = padding_right;
  468. }
  469. void LayoutBlock::place_block_level_replaced_element_in_normal_flow(LayoutReplaced& box)
  470. {
  471. ASSERT(!is_absolutely_positioned());
  472. auto& containing_block = *this;
  473. auto& replaced_element_box_model = box.box_model();
  474. replaced_element_box_model.margin.top = box.style().margin().top.resolved_or_zero(*this, containing_block.width());
  475. replaced_element_box_model.margin.bottom = box.style().margin().bottom.resolved_or_zero(*this, containing_block.width());
  476. replaced_element_box_model.border.top = CSS::Length::make_px(box.style().border_top().width);
  477. replaced_element_box_model.border.bottom = CSS::Length::make_px(box.style().border_bottom().width);
  478. replaced_element_box_model.padding.top = box.style().padding().top.resolved_or_zero(*this, containing_block.width());
  479. replaced_element_box_model.padding.bottom = box.style().padding().bottom.resolved_or_zero(*this, containing_block.width());
  480. float x = replaced_element_box_model.margin.left.to_px(*this)
  481. + replaced_element_box_model.border.left.to_px(*this)
  482. + replaced_element_box_model.padding.left.to_px(*this)
  483. + replaced_element_box_model.offset.left.to_px(*this);
  484. float y = replaced_element_box_model.margin_box(*this).top + box_model().offset.top.to_px(*this);
  485. box.set_offset(x, y);
  486. }
  487. LayoutBlock::ShrinkToFitResult LayoutBlock::calculate_shrink_to_fit_width()
  488. {
  489. auto greatest_child_width = [&] {
  490. float max_width = 0;
  491. if (children_are_inline()) {
  492. for (auto& box : line_boxes()) {
  493. max_width = max(max_width, box.width());
  494. }
  495. } else {
  496. for_each_child([&](auto& child) {
  497. if (child.is_box())
  498. max_width = max(max_width, downcast<LayoutBox>(child).width());
  499. });
  500. }
  501. return max_width;
  502. };
  503. // Calculate the preferred width by formatting the content without breaking lines
  504. // other than where explicit line breaks occur.
  505. layout_inside(LayoutMode::OnlyRequiredLineBreaks);
  506. float preferred_width = greatest_child_width();
  507. // Also calculate the preferred minimum width, e.g., by trying all possible line breaks.
  508. // CSS 2.2 does not define the exact algorithm.
  509. layout_inside(LayoutMode::AllPossibleLineBreaks);
  510. float preferred_minimum_width = greatest_child_width();
  511. return { preferred_width, preferred_minimum_width };
  512. }
  513. void LayoutBlock::place_block_level_non_replaced_element_in_normal_flow(LayoutBlock& block)
  514. {
  515. auto zero_value = CSS::Length::make_px(0);
  516. auto& containing_block = *this;
  517. auto& box = block.box_model();
  518. auto& style = block.style();
  519. box.margin.top = style.margin().top.resolved(zero_value, *this, containing_block.width());
  520. box.margin.bottom = style.margin().bottom.resolved(zero_value, *this, containing_block.width());
  521. box.border.top = CSS::Length::make_px(style.border_top().width);
  522. box.border.bottom = CSS::Length::make_px(style.border_bottom().width);
  523. box.padding.top = style.padding().top.resolved(zero_value, *this, containing_block.width());
  524. box.padding.bottom = style.padding().bottom.resolved(zero_value, *this, containing_block.width());
  525. float x = box.margin.left.to_px(*this)
  526. + box.border.left.to_px(*this)
  527. + box.padding.left.to_px(*this)
  528. + box.offset.left.to_px(*this);
  529. if (this->style().text_align() == CSS::TextAlign::VendorSpecificCenter) {
  530. x = (containing_block.width() / 2) - block.width() / 2;
  531. }
  532. float y = box.margin_box(*this).top
  533. + box.offset.top.to_px(*this);
  534. // NOTE: Empty (0-height) preceding siblings have their margins collapsed with *their* preceding sibling, etc.
  535. float collapsed_bottom_margin_of_preceding_siblings = 0;
  536. auto* relevant_sibling = block.previous_sibling();
  537. while (relevant_sibling != nullptr) {
  538. if (!relevant_sibling->is_absolutely_positioned() && !relevant_sibling->is_floating()) {
  539. collapsed_bottom_margin_of_preceding_siblings = max(collapsed_bottom_margin_of_preceding_siblings, relevant_sibling->box_model().margin.bottom.to_px(*relevant_sibling));
  540. if (relevant_sibling->height() > 0)
  541. break;
  542. }
  543. relevant_sibling = relevant_sibling->previous_sibling();
  544. }
  545. if (relevant_sibling) {
  546. y += relevant_sibling->effective_offset().y() + relevant_sibling->height();
  547. // Collapse top margin with bottom margin of preceding siblings if needed
  548. float my_margin_top = box.margin.top.to_px(*this);
  549. if (my_margin_top < 0 || collapsed_bottom_margin_of_preceding_siblings < 0) {
  550. // Negative margins present.
  551. float largest_negative_margin = -min(my_margin_top, collapsed_bottom_margin_of_preceding_siblings);
  552. float largest_positive_margin = (my_margin_top < 0 && collapsed_bottom_margin_of_preceding_siblings < 0) ? 0 : max(my_margin_top, collapsed_bottom_margin_of_preceding_siblings);
  553. float final_margin = largest_positive_margin - largest_negative_margin;
  554. y += final_margin - my_margin_top;
  555. } else if (collapsed_bottom_margin_of_preceding_siblings > my_margin_top) {
  556. // Sibling's margin is larger than mine, adjust so we use sibling's.
  557. y += collapsed_bottom_margin_of_preceding_siblings - my_margin_top;
  558. }
  559. }
  560. block.set_offset(x, y);
  561. }
  562. void LayoutBlock::compute_height()
  563. {
  564. auto& containing_block = *this->containing_block();
  565. CSS::Length specified_height;
  566. if (style().height().is_percentage() && !containing_block.style().height().is_absolute()) {
  567. specified_height = CSS::Length::make_auto();
  568. } else {
  569. specified_height = style().height().resolved_or_auto(*this, containing_block.height());
  570. }
  571. auto specified_max_height = style().max_height().resolved_or_auto(*this, containing_block.height());
  572. box_model().margin.top = style().margin().top.resolved_or_zero(*this, containing_block.width());
  573. box_model().margin.bottom = style().margin().bottom.resolved_or_zero(*this, containing_block.width());
  574. box_model().border.top = CSS::Length::make_px(style().border_top().width);
  575. box_model().border.bottom = CSS::Length::make_px(style().border_bottom().width);
  576. box_model().padding.top = style().padding().top.resolved_or_zero(*this, containing_block.width());
  577. box_model().padding.bottom = style().padding().bottom.resolved_or_zero(*this, containing_block.width());
  578. if (!specified_height.is_auto()) {
  579. float used_height = specified_height.to_px(*this);
  580. if (!specified_max_height.is_auto())
  581. used_height = min(used_height, specified_max_height.to_px(*this));
  582. set_height(used_height);
  583. }
  584. }
  585. void LayoutBlock::paint(PaintContext& context, PaintPhase phase)
  586. {
  587. if (!is_visible())
  588. return;
  589. LayoutBox::paint(context, phase);
  590. // FIXME: Inline backgrounds etc.
  591. if (phase == PaintPhase::Foreground) {
  592. if (children_are_inline()) {
  593. for (auto& line_box : m_line_boxes) {
  594. for (auto& fragment : line_box.fragments()) {
  595. if (context.should_show_line_box_borders())
  596. context.painter().draw_rect(enclosing_int_rect(fragment.absolute_rect()), Color::Green);
  597. fragment.paint(context);
  598. }
  599. }
  600. }
  601. }
  602. }
  603. HitTestResult LayoutBlock::hit_test(const Gfx::IntPoint& position) const
  604. {
  605. if (!children_are_inline())
  606. return LayoutBox::hit_test(position);
  607. HitTestResult last_good_candidate;
  608. for (auto& line_box : m_line_boxes) {
  609. for (auto& fragment : line_box.fragments()) {
  610. if (is<LayoutBox>(fragment.layout_node()) && downcast<LayoutBox>(fragment.layout_node()).stacking_context())
  611. continue;
  612. if (enclosing_int_rect(fragment.absolute_rect()).contains(position)) {
  613. if (fragment.layout_node().is_block())
  614. return downcast<LayoutBlock>(fragment.layout_node()).hit_test(position);
  615. return { fragment.layout_node(), fragment.text_index_at(position.x()) };
  616. }
  617. if (fragment.absolute_rect().top() <= position.y())
  618. last_good_candidate = { fragment.layout_node(), fragment.text_index_at(position.x()) };
  619. }
  620. }
  621. if (last_good_candidate.layout_node)
  622. return last_good_candidate;
  623. return { absolute_rect().contains(position.x(), position.y()) ? this : nullptr };
  624. }
  625. NonnullRefPtr<CSS::StyleProperties> LayoutBlock::style_for_anonymous_block() const
  626. {
  627. auto new_style = CSS::StyleProperties::create();
  628. specified_style().for_each_property([&](auto property_id, auto& value) {
  629. if (CSS::StyleResolver::is_inherited_property(property_id))
  630. new_style->set_property(property_id, value);
  631. });
  632. return new_style;
  633. }
  634. LineBox& LayoutBlock::ensure_last_line_box()
  635. {
  636. if (m_line_boxes.is_empty())
  637. m_line_boxes.append(LineBox());
  638. return m_line_boxes.last();
  639. }
  640. LineBox& LayoutBlock::add_line_box()
  641. {
  642. m_line_boxes.append(LineBox());
  643. return m_line_boxes.last();
  644. }
  645. void LayoutBlock::split_into_lines(LayoutBlock& container, LayoutMode layout_mode)
  646. {
  647. layout(layout_mode);
  648. auto* line_box = &container.ensure_last_line_box();
  649. if (layout_mode != LayoutMode::OnlyRequiredLineBreaks && line_box->width() > 0 && line_box->width() + width() > container.width()) {
  650. line_box = &container.add_line_box();
  651. }
  652. line_box->add_fragment(*this, 0, 0, width(), height());
  653. }
  654. }