TableFormattingContext.cpp 37 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825
  1. /*
  2. * Copyright (c) 2020, Andreas Kling <kling@serenityos.org>
  3. *
  4. * SPDX-License-Identifier: BSD-2-Clause
  5. */
  6. #include <LibWeb/DOM/Node.h>
  7. #include <LibWeb/HTML/BrowsingContext.h>
  8. #include <LibWeb/HTML/HTMLTableCellElement.h>
  9. #include <LibWeb/Layout/BlockFormattingContext.h>
  10. #include <LibWeb/Layout/Box.h>
  11. #include <LibWeb/Layout/InlineFormattingContext.h>
  12. #include <LibWeb/Layout/TableFormattingContext.h>
  13. struct GridPosition {
  14. size_t x;
  15. size_t y;
  16. };
  17. inline bool operator==(GridPosition const& a, GridPosition const& b)
  18. {
  19. return a.x == b.x && a.y == b.y;
  20. }
  21. namespace AK {
  22. template<>
  23. struct Traits<GridPosition> : public GenericTraits<GridPosition> {
  24. static unsigned hash(GridPosition const& key)
  25. {
  26. return pair_int_hash(key.x, key.y);
  27. }
  28. };
  29. }
  30. namespace Web::Layout {
  31. TableFormattingContext::TableFormattingContext(LayoutState& state, Box const& root, FormattingContext* parent)
  32. : FormattingContext(Type::Table, state, root, parent)
  33. {
  34. }
  35. TableFormattingContext::~TableFormattingContext() = default;
  36. static inline bool is_table_row_group(Box const& box)
  37. {
  38. auto const& display = box.display();
  39. return display.is_table_row_group() || display.is_table_header_group() || display.is_table_footer_group();
  40. }
  41. static inline bool is_table_row(Box const& box)
  42. {
  43. return box.display().is_table_row();
  44. }
  45. template<typename Matcher, typename Callback>
  46. static void for_each_child_box_matching(Box const& parent, Matcher matcher, Callback callback)
  47. {
  48. parent.for_each_child_of_type<Box>([&](Box const& child_box) {
  49. if (matcher(child_box))
  50. callback(child_box);
  51. });
  52. }
  53. CSSPixels TableFormattingContext::run_caption_layout(LayoutMode layout_mode, CSS::CaptionSide phase)
  54. {
  55. CSSPixels caption_height = 0;
  56. for (auto* child = table_box().first_child(); child; child = child->next_sibling()) {
  57. if (!child->display().is_table_caption() || child->computed_values().caption_side() != phase) {
  58. continue;
  59. }
  60. // The caption boxes are principal block-level boxes that retain their own content, padding, margin, and border areas,
  61. // and are rendered as normal block boxes inside the table wrapper box, as described in https://www.w3.org/TR/CSS22/tables.html#model
  62. auto caption_context = make<BlockFormattingContext>(m_state, *verify_cast<BlockContainer>(child), this);
  63. caption_context->run(table_box(), layout_mode, *m_available_space);
  64. VERIFY(child->is_box());
  65. auto const& child_box = static_cast<Box const&>(*child);
  66. // FIXME: Since caption only has inline children, BlockFormattingContext doesn't resolve the vertical metrics.
  67. // We need to do it manually here.
  68. caption_context->resolve_vertical_box_model_metrics(child_box);
  69. auto const& caption_state = m_state.get(child_box);
  70. if (phase == CSS::CaptionSide::Top) {
  71. m_state.get_mutable(table_box()).set_content_y(caption_state.margin_box_height());
  72. } else {
  73. m_state.get_mutable(child_box).set_content_y(
  74. m_state.get(table_box()).margin_box_height() + caption_state.margin_box_top());
  75. }
  76. caption_height += caption_state.margin_box_height();
  77. }
  78. return caption_height;
  79. }
  80. void TableFormattingContext::calculate_row_column_grid(Box const& box)
  81. {
  82. // Implements https://html.spec.whatwg.org/multipage/tables.html#forming-a-table
  83. HashMap<GridPosition, bool> grid;
  84. size_t x_width = 0, y_height = 0;
  85. size_t x_current = 0, y_current = 0;
  86. auto process_row = [&](auto& row) {
  87. if (y_height == y_current)
  88. y_height++;
  89. x_current = 0;
  90. while (x_current < x_width && grid.contains(GridPosition { x_current, y_current }))
  91. x_current++;
  92. for (auto* child = row.first_child(); child; child = child->next_sibling()) {
  93. if (child->display().is_table_cell()) {
  94. Box const* box = static_cast<Box const*>(child);
  95. if (x_current == x_width)
  96. x_width++;
  97. size_t colspan = 1, rowspan = 1;
  98. if (box->dom_node() && is<HTML::HTMLTableCellElement>(*box->dom_node())) {
  99. auto const& node = static_cast<HTML::HTMLTableCellElement const&>(*box->dom_node());
  100. colspan = node.col_span();
  101. rowspan = node.row_span();
  102. }
  103. if (x_width < x_current + colspan)
  104. x_width = x_current + colspan;
  105. if (y_height < y_current + rowspan)
  106. y_height = y_current + rowspan;
  107. for (size_t y = y_current; y < y_current + rowspan; y++)
  108. for (size_t x = x_current; x < x_current + colspan; x++)
  109. grid.set(GridPosition { x, y }, true);
  110. m_cells.append(Cell { *box, x_current, y_current, colspan, rowspan });
  111. x_current += colspan;
  112. }
  113. }
  114. m_rows.append(Row { row });
  115. y_current++;
  116. };
  117. for_each_child_box_matching(box, is_table_row_group, [&](auto& row_group_box) {
  118. for_each_child_box_matching(row_group_box, is_table_row, [&](auto& row_box) {
  119. process_row(row_box);
  120. return IterationDecision::Continue;
  121. });
  122. });
  123. for_each_child_box_matching(box, is_table_row, [&](auto& row_box) {
  124. process_row(row_box);
  125. return IterationDecision::Continue;
  126. });
  127. m_columns.resize(x_width);
  128. }
  129. void TableFormattingContext::compute_table_measures()
  130. {
  131. size_t max_cell_column_span = 1;
  132. for (auto& cell : m_cells) {
  133. auto width_of_containing_block = m_state.get(*table_wrapper().containing_block()).content_width();
  134. auto& computed_values = cell.box->computed_values();
  135. CSSPixels padding_left = computed_values.padding().left().to_px(cell.box, width_of_containing_block);
  136. CSSPixels padding_right = computed_values.padding().right().to_px(cell.box, width_of_containing_block);
  137. auto is_left_most_cell = cell.column_index == 0;
  138. auto is_right_most_cell = cell.column_index == m_columns.size() - 1;
  139. auto should_hide_borders = cell.box->computed_values().border_collapse() == CSS::BorderCollapse::Collapse;
  140. CSSPixels border_left = should_hide_borders && !is_left_most_cell ? 0 : computed_values.border_left().width;
  141. CSSPixels border_right = should_hide_borders && !is_right_most_cell ? 0 : computed_values.border_right().width;
  142. CSSPixels width = computed_values.width().to_px(cell.box, width_of_containing_block);
  143. auto cell_intrinsic_offsets = padding_left + padding_right + border_left + border_right;
  144. auto min_content_width = calculate_min_content_width(cell.box);
  145. auto max_content_width = calculate_max_content_width(cell.box);
  146. CSSPixels min_width = min_content_width;
  147. if (!computed_values.min_width().is_auto())
  148. min_width = max(min_width, computed_values.min_width().to_px(cell.box, width_of_containing_block));
  149. CSSPixels max_width = computed_values.width().is_auto() ? max_content_width.value() : width;
  150. if (!computed_values.max_width().is_none())
  151. max_width = min(max_width, computed_values.max_width().to_px(cell.box, width_of_containing_block));
  152. auto computed_width = computed_values.width();
  153. if (computed_width.is_percentage()) {
  154. m_columns[cell.column_index].type = ColumnType::Percent;
  155. m_columns[cell.column_index].percentage_width = max(m_columns[cell.column_index].percentage_width, computed_width.percentage().value());
  156. } else if (computed_width.is_length()) {
  157. m_columns[cell.column_index].type = ColumnType::Pixel;
  158. }
  159. cell.min_width = min_width + cell_intrinsic_offsets;
  160. cell.max_width = max(max(width, min_width), max_width) + cell_intrinsic_offsets;
  161. max_cell_column_span = max(max_cell_column_span, cell.column_span);
  162. }
  163. for (auto& cell : m_cells) {
  164. if (cell.column_span == 1) {
  165. m_columns[cell.column_index].min_width = max(m_columns[cell.column_index].min_width, cell.min_width);
  166. m_columns[cell.column_index].max_width = max(m_columns[cell.column_index].max_width, cell.max_width);
  167. }
  168. }
  169. for (size_t current_column_span = 2; current_column_span <= max_cell_column_span; current_column_span++) {
  170. // https://www.w3.org/TR/css-tables-3/#min-content-width-of-a-column-based-on-cells-of-span-up-to-n-n--1
  171. Vector<Vector<CSSPixels>> cell_min_contributions_by_column_index;
  172. cell_min_contributions_by_column_index.resize(m_columns.size());
  173. // https://www.w3.org/TR/css-tables-3/#max-content-width-of-a-column-based-on-cells-of-span-up-to-n-n--1
  174. Vector<Vector<CSSPixels>> cell_max_contributions_by_column_index;
  175. cell_max_contributions_by_column_index.resize(m_columns.size());
  176. for (auto& cell : m_cells) {
  177. if (cell.column_span == current_column_span) {
  178. // Define the baseline max-content width as the sum of the max-content widths based on cells of span up to N-1 of all columns that the cell spans.
  179. CSSPixels baseline_max_content_width = 0;
  180. auto cell_start_column_index = cell.column_index;
  181. auto cell_end_column_index = cell.column_index + cell.column_span;
  182. for (auto column_index = cell_start_column_index; column_index < cell_end_column_index; column_index++) {
  183. baseline_max_content_width += m_columns[column_index].max_width;
  184. }
  185. // The contribution of the cell is the sum of:
  186. // the min-content width of the column based on cells of span up to N-1
  187. auto cell_min_contribution = m_columns[cell.column_index].min_width;
  188. // and the product of:
  189. // - the ratio of the max-content width based on cells of span up to N-1 of the column to the baseline max-content width
  190. // - the outer min-content width of the cell minus the baseline max-content width and baseline border spacing, or 0 if this is negative
  191. cell_min_contribution += (m_columns[cell.column_index].max_width / baseline_max_content_width) * max(CSSPixels(0), cell.min_width - baseline_max_content_width);
  192. // The contribution of the cell is the sum of:
  193. // the max-content width of the column based on cells of span up to N-1
  194. auto cell_max_contribution = m_columns[cell.column_index].max_width;
  195. // and the product of:
  196. // - the ratio of the max-content width based on cells of span up to N-1 of the column to the baseline max-content width
  197. // - the outer max-content width of the cell minus the baseline max-content width and the baseline border spacing, or 0 if this is negative
  198. cell_max_contribution += (m_columns[cell.column_index].max_width / baseline_max_content_width) * max(CSSPixels(0), cell.max_width - baseline_max_content_width);
  199. cell_min_contributions_by_column_index[cell.column_index].append(cell_min_contribution);
  200. cell_max_contributions_by_column_index[cell.column_index].append(cell_max_contribution);
  201. }
  202. }
  203. for (size_t column_index = 0; column_index < m_columns.size(); column_index++) {
  204. // min-content width of a column based on cells of span up to N (N > 1) is
  205. // the largest of the min-content width of the column based on cells of span up to N-1 and the contributions of the cells in the column whose colSpan is N
  206. for (auto min_contribution : cell_min_contributions_by_column_index[column_index])
  207. m_columns[column_index].min_width = max(m_columns[column_index].min_width, min_contribution);
  208. // max-content width of a column based on cells of span up to N (N > 1) is
  209. // the largest of the max-content width based on cells of span up to N-1 and the contributions of the cells in the column whose colSpan is N
  210. for (auto max_contribution : cell_max_contributions_by_column_index[column_index])
  211. m_columns[column_index].max_width = max(m_columns[column_index].max_width, max_contribution);
  212. }
  213. }
  214. }
  215. CSSPixels TableFormattingContext::compute_capmin()
  216. {
  217. // The caption width minimum (CAPMIN) is the largest of the table captions min-content contribution:
  218. // https://drafts.csswg.org/css-tables-3/#computing-the-table-width
  219. CSSPixels capmin = 0;
  220. for (auto* child = table_box().first_child(); child; child = child->next_sibling()) {
  221. if (!child->display().is_table_caption()) {
  222. continue;
  223. }
  224. VERIFY(child->is_box());
  225. capmin = max(calculate_min_content_width(static_cast<Box const&>(*child)), capmin);
  226. }
  227. return capmin;
  228. }
  229. void TableFormattingContext::compute_table_width()
  230. {
  231. // https://drafts.csswg.org/css-tables-3/#computing-the-table-width
  232. auto& table_box_state = m_state.get_mutable(table_box());
  233. auto& computed_values = table_box().computed_values();
  234. CSSPixels width_of_table_containing_block = m_state.get(*table_box().containing_block()).content_width();
  235. // Percentages on 'width' and 'height' on the table are relative to the table wrapper box's containing block,
  236. // not the table wrapper box itself.
  237. CSSPixels width_of_table_wrapper_containing_block = m_state.get(*table_wrapper().containing_block()).content_width();
  238. // The row/column-grid width minimum (GRIDMIN) width is the sum of the min-content width
  239. // of all the columns plus cell spacing or borders.
  240. CSSPixels grid_min = 0.0f;
  241. for (auto& column : m_columns) {
  242. grid_min += column.min_width;
  243. }
  244. // The row/column-grid width maximum (GRIDMAX) width is the sum of the max-content width
  245. // of all the columns plus cell spacing or borders.
  246. CSSPixels grid_max = 0.0f;
  247. for (auto& column : m_columns) {
  248. grid_max += column.max_width;
  249. }
  250. // The used min-width of a table is the greater of the resolved min-width, CAPMIN, and GRIDMIN.
  251. auto used_min_width = max(grid_min, compute_capmin());
  252. if (!computed_values.min_width().is_auto()) {
  253. used_min_width = max(used_min_width, computed_values.min_width().to_px(table_box(), width_of_table_wrapper_containing_block));
  254. }
  255. CSSPixels used_width;
  256. if (computed_values.width().is_auto()) {
  257. // If the table-root has 'width: auto', the used width is the greater of
  258. // min(GRIDMAX, the table’s containing block width), the used min-width of the table.
  259. used_width = max(min(grid_max, width_of_table_containing_block), used_min_width);
  260. } else {
  261. // If the table-root’s width property has a computed value (resolving to
  262. // resolved-table-width) other than auto, the used width is the greater
  263. // of resolved-table-width, and the used min-width of the table.
  264. CSSPixels resolved_table_width = computed_values.width().to_px(table_box(), width_of_table_wrapper_containing_block);
  265. used_width = max(resolved_table_width, used_min_width);
  266. if (!computed_values.max_width().is_none())
  267. used_width = min(used_width, computed_values.max_width().to_px(table_box(), width_of_table_wrapper_containing_block));
  268. }
  269. // The assignable table width is the used width of the table minus the total horizontal border spacing (if any).
  270. // This is the width that we will be able to allocate to the columns.
  271. table_box_state.set_content_width(used_width - table_box_state.border_left - table_box_state.border_right);
  272. }
  273. void TableFormattingContext::distribute_width_to_columns()
  274. {
  275. // Implements https://www.w3.org/TR/css-tables-3/#width-distribution-algorithm
  276. CSSPixels available_width = m_state.get(table_box()).content_width();
  277. auto columns_total_used_width = [&]() {
  278. CSSPixels total_used_width = 0;
  279. for (auto& column : m_columns) {
  280. total_used_width += column.used_width;
  281. }
  282. return total_used_width;
  283. };
  284. auto column_preferred_width = [&](Column& column) {
  285. switch (column.type) {
  286. case ColumnType::Percent: {
  287. return max(column.min_width, column.percentage_width / 100 * available_width);
  288. }
  289. case ColumnType::Pixel:
  290. case ColumnType::Auto: {
  291. return column.max_width;
  292. }
  293. default: {
  294. VERIFY_NOT_REACHED();
  295. }
  296. }
  297. };
  298. auto expand_columns_to_fill_available_width = [&](ColumnType column_type) {
  299. CSSPixels remaining_available_width = available_width;
  300. CSSPixels total_preferred_width_increment = 0;
  301. for (auto& column : m_columns) {
  302. remaining_available_width -= column.used_width;
  303. if (column.type == column_type) {
  304. total_preferred_width_increment += column_preferred_width(column) - column.min_width;
  305. }
  306. }
  307. if (total_preferred_width_increment == 0)
  308. return;
  309. for (auto& column : m_columns) {
  310. if (column.type == column_type) {
  311. CSSPixels preferred_width_increment = column_preferred_width(column) - column.min_width;
  312. column.used_width += preferred_width_increment * remaining_available_width / total_preferred_width_increment;
  313. }
  314. }
  315. };
  316. auto shrink_columns_to_fit_available_width = [&](ColumnType column_type) {
  317. for (auto& column : m_columns) {
  318. if (column.type == column_type)
  319. column.used_width = column.min_width;
  320. }
  321. expand_columns_to_fill_available_width(column_type);
  322. };
  323. for (auto& column : m_columns) {
  324. column.used_width = column.min_width;
  325. }
  326. for (auto& column : m_columns) {
  327. if (column.type == ColumnType::Percent) {
  328. column.used_width = max(column.min_width, column.percentage_width / 100 * available_width);
  329. }
  330. }
  331. if (columns_total_used_width() > available_width) {
  332. shrink_columns_to_fit_available_width(ColumnType::Percent);
  333. return;
  334. }
  335. for (auto& column : m_columns) {
  336. if (column.type == ColumnType::Pixel) {
  337. column.used_width = column.max_width;
  338. }
  339. }
  340. if (columns_total_used_width() > available_width) {
  341. shrink_columns_to_fit_available_width(ColumnType::Pixel);
  342. return;
  343. }
  344. if (columns_total_used_width() < available_width) {
  345. expand_columns_to_fill_available_width(ColumnType::Auto);
  346. }
  347. if (columns_total_used_width() < available_width) {
  348. expand_columns_to_fill_available_width(ColumnType::Pixel);
  349. }
  350. if (columns_total_used_width() < available_width) {
  351. expand_columns_to_fill_available_width(ColumnType::Percent);
  352. }
  353. if (columns_total_used_width() < available_width) {
  354. // NOTE: if all columns got their max width and there is still width to distribute left
  355. // it should be assigned to columns proportionally to their max width
  356. CSSPixels grid_max = 0.0f;
  357. for (auto& column : m_columns) {
  358. grid_max += column.max_width;
  359. }
  360. auto width_to_distribute = available_width - columns_total_used_width();
  361. if (grid_max == 0) {
  362. // If total max width of columns is zero then divide distributable width equally among them
  363. auto column_width = width_to_distribute / m_columns.size();
  364. for (auto& column : m_columns) {
  365. column.used_width = column_width;
  366. }
  367. } else {
  368. // Distribute width to columns proportionally to their max width
  369. for (auto& column : m_columns) {
  370. column.used_width += width_to_distribute * column.max_width / grid_max;
  371. }
  372. }
  373. }
  374. }
  375. void TableFormattingContext::determine_intrisic_size_of_table_container(AvailableSpace const& available_space)
  376. {
  377. auto& table_box_state = m_state.get_mutable(table_box());
  378. if (available_space.width.is_min_content()) {
  379. // The min-content width of a table is the width required to fit all of its columns min-content widths and its undistributable spaces.
  380. CSSPixels grid_min = 0.0f;
  381. for (auto& column : m_columns)
  382. grid_min += column.min_width;
  383. table_box_state.set_content_width(grid_min);
  384. }
  385. if (available_space.width.is_max_content()) {
  386. // The max-content width of a table is the width required to fit all of its columns max-content widths and its undistributable spaces.
  387. CSSPixels grid_max = 0.0f;
  388. for (auto& column : m_columns)
  389. grid_max += column.max_width;
  390. table_box_state.set_content_width(grid_max);
  391. }
  392. }
  393. void TableFormattingContext::compute_table_height(LayoutMode layout_mode)
  394. {
  395. // First pass of row height calculation:
  396. for (auto& row : m_rows) {
  397. auto row_computed_height = row.box->computed_values().height();
  398. if (row_computed_height.is_length()) {
  399. auto height_of_containing_block = m_state.get(*row.box->containing_block()).content_height();
  400. auto row_used_height = row_computed_height.to_px(row.box, height_of_containing_block);
  401. row.base_height = max(row.base_height, row_used_height);
  402. }
  403. }
  404. // First pass of cells layout:
  405. for (auto& cell : m_cells) {
  406. auto& row = m_rows[cell.row_index];
  407. auto& cell_state = m_state.get_mutable(cell.box);
  408. CSSPixels span_width = 0;
  409. for (size_t i = 0; i < cell.column_span; ++i)
  410. span_width += m_columns[cell.column_index + i].used_width;
  411. auto width_of_containing_block = m_state.get(*cell.box->containing_block()).content_width();
  412. auto width_of_containing_block_as_length = CSS::Length::make_px(width_of_containing_block);
  413. auto height_of_containing_block = m_state.get(*cell.box->containing_block()).content_height();
  414. auto height_of_containing_block_as_length = CSS::Length::make_px(height_of_containing_block);
  415. cell_state.padding_top = cell.box->computed_values().padding().top().to_px(cell.box, width_of_containing_block);
  416. cell_state.padding_bottom = cell.box->computed_values().padding().bottom().to_px(cell.box, width_of_containing_block);
  417. cell_state.padding_left = cell.box->computed_values().padding().left().to_px(cell.box, width_of_containing_block);
  418. cell_state.padding_right = cell.box->computed_values().padding().right().to_px(cell.box, width_of_containing_block);
  419. auto is_top_most_cell = cell.row_index == 0;
  420. auto is_left_most_cell = cell.column_index == 0;
  421. auto is_right_most_cell = cell.column_index == m_columns.size() - 1;
  422. auto is_bottom_most_cell = cell.row_index == m_rows.size() - 1;
  423. auto should_hide_borders = cell.box->computed_values().border_collapse() == CSS::BorderCollapse::Collapse;
  424. cell_state.border_top = (should_hide_borders && is_top_most_cell) ? 0 : cell.box->computed_values().border_top().width;
  425. cell_state.border_bottom = (should_hide_borders && is_bottom_most_cell) ? 0 : cell.box->computed_values().border_bottom().width;
  426. cell_state.border_left = (should_hide_borders && is_left_most_cell) ? 0 : cell.box->computed_values().border_left().width;
  427. cell_state.border_right = (should_hide_borders && is_right_most_cell) ? 0 : cell.box->computed_values().border_right().width;
  428. auto cell_computed_height = cell.box->computed_values().height();
  429. if (cell_computed_height.is_length()) {
  430. auto cell_used_height = cell_computed_height.to_px(cell.box, height_of_containing_block);
  431. cell_state.set_content_height(cell_used_height - cell_state.border_box_top() - cell_state.border_box_bottom());
  432. row.base_height = max(row.base_height, cell_used_height);
  433. }
  434. cell_state.set_content_width((span_width - cell_state.border_box_left() - cell_state.border_box_right()));
  435. if (auto independent_formatting_context = layout_inside(cell.box, layout_mode, cell_state.available_inner_space_or_constraints_from(*m_available_space))) {
  436. cell_state.set_content_height(independent_formatting_context->automatic_content_height());
  437. independent_formatting_context->parent_context_did_dimension_child_root_box();
  438. }
  439. cell.baseline = box_baseline(cell.box);
  440. // Only cells spanning the current row exclusively are part of computing minimum height of a row,
  441. // as described in https://www.w3.org/TR/css-tables-3/#computing-the-table-height
  442. if (cell.row_span == 1) {
  443. row.base_height = max(row.base_height, cell_state.border_box_height());
  444. }
  445. row.baseline = max(row.baseline, cell.baseline);
  446. }
  447. CSSPixels sum_rows_height = 0;
  448. for (auto& row : m_rows) {
  449. sum_rows_height += row.base_height;
  450. }
  451. // The height of a table is the sum of the row heights plus any cell spacing or borders.
  452. m_table_height = sum_rows_height;
  453. if (!table_box().computed_values().height().is_auto()) {
  454. // If the table has a height property with a value other than auto, it is treated as a minimum height for the
  455. // table grid, and will eventually be distributed to the height of the rows if their collective minimum height
  456. // ends up smaller than this number.
  457. CSSPixels height_of_table_containing_block = m_state.get(*table_wrapper().containing_block()).content_height();
  458. auto specified_table_height = table_box().computed_values().height().to_px(table_box(), height_of_table_containing_block);
  459. if (m_table_height < specified_table_height) {
  460. m_table_height = specified_table_height;
  461. }
  462. }
  463. for (auto& row : m_rows) {
  464. // Reference size is the largest of
  465. // - its initial base height and
  466. // - its new base height (the one evaluated during the second layout pass, where percentages used in
  467. // rowgroups/rows/cells' specified heights were resolved according to the table height, instead of
  468. // being ignored as 0px).
  469. // Assign reference size to base size. Later reference size might change to largee value during
  470. // second pass of rows layout.
  471. row.reference_height = row.base_height;
  472. }
  473. // Second pass of rows height calculation:
  474. // At this point percentage row height can be resolved because final table height is calculated.
  475. for (auto& row : m_rows) {
  476. auto row_computed_height = row.box->computed_values().height();
  477. if (row_computed_height.is_percentage()) {
  478. auto row_used_height = row_computed_height.to_px(row.box, m_table_height);
  479. row.reference_height = max(row.reference_height, row_used_height);
  480. } else {
  481. continue;
  482. }
  483. }
  484. // Second pass cells layout:
  485. // At this point percantage cell height can be resolved because final table heigh is calculated.
  486. for (auto& cell : m_cells) {
  487. auto& row = m_rows[cell.row_index];
  488. auto& cell_state = m_state.get_mutable(cell.box);
  489. CSSPixels span_width = 0;
  490. for (size_t i = 0; i < cell.column_span; ++i)
  491. span_width += m_columns[cell.column_index + i].used_width;
  492. auto cell_computed_height = cell.box->computed_values().height();
  493. if (cell_computed_height.is_percentage()) {
  494. auto cell_used_height = cell_computed_height.to_px(cell.box, m_table_height);
  495. cell_state.set_content_height(cell_used_height - cell_state.border_box_top() - cell_state.border_box_bottom());
  496. row.reference_height = max(row.reference_height, cell_used_height);
  497. } else {
  498. continue;
  499. }
  500. cell_state.set_content_width((span_width - cell_state.border_box_left() - cell_state.border_box_right()));
  501. if (auto independent_formatting_context = layout_inside(cell.box, layout_mode, cell_state.available_inner_space_or_constraints_from(*m_available_space))) {
  502. independent_formatting_context->parent_context_did_dimension_child_root_box();
  503. }
  504. cell.baseline = box_baseline(cell.box);
  505. row.reference_height = max(row.reference_height, cell_state.border_box_height());
  506. row.baseline = max(row.baseline, cell.baseline);
  507. }
  508. }
  509. void TableFormattingContext::distribute_height_to_rows()
  510. {
  511. CSSPixels sum_reference_height = 0;
  512. for (auto& row : m_rows) {
  513. sum_reference_height += row.reference_height;
  514. }
  515. if (sum_reference_height == 0)
  516. return;
  517. Vector<Row&> rows_with_auto_height;
  518. for (auto& row : m_rows) {
  519. if (row.box->computed_values().height().is_auto()) {
  520. rows_with_auto_height.append(row);
  521. }
  522. }
  523. if (m_table_height <= sum_reference_height) {
  524. // If the table height is equal or smaller than sum of reference sizes, the final height assigned to each row
  525. // will be the weighted mean of the base and the reference size that yields the correct total height.
  526. for (auto& row : m_rows) {
  527. auto weight = row.reference_height / sum_reference_height;
  528. auto final_height = m_table_height * weight;
  529. row.final_height = final_height;
  530. }
  531. } else if (rows_with_auto_height.size() > 0) {
  532. // Else, if the table owns any “auto-height” row (a row whose size is only determined by its content size and
  533. // none of the specified heights), each non-auto-height row receives its reference height and auto-height rows
  534. // receive their reference size plus some increment which is equal to the height missing to amount to the
  535. // specified table height divided by the amount of such rows.
  536. for (auto& row : m_rows) {
  537. row.final_height = row.reference_height;
  538. }
  539. auto auto_height_rows_increment = (m_table_height - sum_reference_height) / rows_with_auto_height.size();
  540. for (auto& row : rows_with_auto_height) {
  541. row.final_height += auto_height_rows_increment;
  542. }
  543. } else {
  544. // Else, all rows receive their reference size plus some increment which is equal to the height missing to
  545. // amount to the specified table height divided by the amount of rows.
  546. auto increment = (m_table_height - sum_reference_height) / m_rows.size();
  547. for (auto& row : m_rows) {
  548. row.final_height = row.reference_height + increment;
  549. }
  550. }
  551. }
  552. void TableFormattingContext::position_row_boxes(CSSPixels& total_content_height)
  553. {
  554. auto const& table_state = m_state.get(table_box());
  555. CSSPixels row_top_offset = table_state.offset.y() + table_state.padding_top;
  556. CSSPixels row_left_offset = table_state.border_left + table_state.padding_left;
  557. for (size_t y = 0; y < m_rows.size(); y++) {
  558. auto& row = m_rows[y];
  559. auto& row_state = m_state.get_mutable(row.box);
  560. CSSPixels row_width = 0.0f;
  561. for (auto& column : m_columns) {
  562. row_width += column.used_width;
  563. }
  564. row_state.set_content_height(row.final_height);
  565. row_state.set_content_width(row_width);
  566. row_state.set_content_x(row_left_offset);
  567. row_state.set_content_y(row_top_offset);
  568. row_top_offset += row_state.content_height();
  569. }
  570. CSSPixels row_group_top_offset = table_state.border_top + table_state.padding_top;
  571. CSSPixels row_group_left_offset = table_state.border_left + table_state.padding_left;
  572. for_each_child_box_matching(table_box(), is_table_row_group, [&](auto& row_group_box) {
  573. CSSPixels row_group_height = 0.0f;
  574. CSSPixels row_group_width = 0.0f;
  575. auto& row_group_box_state = m_state.get_mutable(row_group_box);
  576. row_group_box_state.set_content_x(row_group_left_offset);
  577. row_group_box_state.set_content_y(row_group_top_offset);
  578. for_each_child_box_matching(row_group_box, is_table_row, [&](auto& row) {
  579. auto const& row_state = m_state.get(row);
  580. row_group_height += row_state.border_box_height();
  581. row_group_width = max(row_group_width, row_state.border_box_width());
  582. });
  583. row_group_box_state.set_content_height(row_group_height);
  584. row_group_box_state.set_content_width(row_group_width);
  585. row_group_top_offset += row_group_height;
  586. });
  587. total_content_height = max(row_top_offset, row_group_top_offset) - table_state.offset.y() - table_state.padding_top;
  588. }
  589. void TableFormattingContext::position_cell_boxes()
  590. {
  591. CSSPixels left_column_offset = 0;
  592. for (auto& column : m_columns) {
  593. column.left_offset = left_column_offset;
  594. left_column_offset += column.used_width;
  595. }
  596. for (auto& cell : m_cells) {
  597. auto& cell_state = m_state.get_mutable(cell.box);
  598. auto& row_state = m_state.get(m_rows[cell.row_index].box);
  599. CSSPixels const cell_border_box_height = cell_state.content_height() + cell_state.border_box_top() + cell_state.border_box_bottom();
  600. CSSPixels const row_content_height = compute_row_content_height(cell);
  601. auto const& vertical_align = cell.box->computed_values().vertical_align();
  602. if (vertical_align.has<CSS::VerticalAlign>()) {
  603. switch (vertical_align.get<CSS::VerticalAlign>()) {
  604. case CSS::VerticalAlign::Middle: {
  605. cell_state.padding_top += (row_content_height - cell_border_box_height) / 2;
  606. cell_state.padding_bottom += (row_content_height - cell_border_box_height) / 2;
  607. break;
  608. }
  609. // FIXME: implement actual 'top' and 'bottom' support instead of fall back to 'baseline'
  610. case CSS::VerticalAlign::Top:
  611. case CSS::VerticalAlign::Bottom:
  612. case CSS::VerticalAlign::Baseline: {
  613. cell_state.padding_top += m_rows[cell.row_index].baseline - cell.baseline;
  614. cell_state.padding_bottom += row_content_height - cell_border_box_height;
  615. break;
  616. }
  617. default:
  618. VERIFY_NOT_REACHED();
  619. }
  620. }
  621. cell_state.offset = row_state.offset.translated(cell_state.border_box_left() + m_columns[cell.column_index].left_offset, cell_state.border_box_top());
  622. }
  623. }
  624. CSSPixels TableFormattingContext::compute_row_content_height(Cell const& cell) const
  625. {
  626. auto& row_state = m_state.get(m_rows[cell.row_index].box);
  627. if (cell.row_span == 1) {
  628. return row_state.content_height();
  629. }
  630. // The height of a cell is the sum of all spanned rows, as described in
  631. // https://www.w3.org/TR/css-tables-3/#bounding-box-assignment
  632. // When the row span is greater than 1, the borders of inner rows within the span have to be
  633. // included in the content height of the spanning cell. First top and final bottom borders are
  634. // excluded to be consistent with the handling of row span 1 case above, which uses the content
  635. // height (no top and bottom borders) of the row.
  636. CSSPixels span_height = 0;
  637. for (size_t i = 0; i < cell.row_span; ++i) {
  638. auto const& row_state = m_state.get(m_rows[cell.row_index + i].box);
  639. if (i == 0) {
  640. span_height += row_state.content_height() + row_state.border_box_bottom();
  641. } else if (i == cell.row_span - 1) {
  642. span_height += row_state.border_box_top() + row_state.content_height();
  643. } else {
  644. span_height += row_state.border_box_height();
  645. }
  646. }
  647. return span_height;
  648. }
  649. void TableFormattingContext::run(Box const& box, LayoutMode layout_mode, AvailableSpace const& available_space)
  650. {
  651. m_available_space = available_space;
  652. auto total_captions_height = run_caption_layout(layout_mode, CSS::CaptionSide::Top);
  653. CSSPixels total_content_height = 0;
  654. // Determine the number of rows/columns the table requires.
  655. calculate_row_column_grid(box);
  656. // Compute the minimum width of each column.
  657. compute_table_measures();
  658. if (available_space.width.is_intrinsic_sizing_constraint() && !available_space.height.is_intrinsic_sizing_constraint()) {
  659. determine_intrisic_size_of_table_container(available_space);
  660. return;
  661. }
  662. // Compute the width of the table.
  663. compute_table_width();
  664. // Distribute the width of the table among columns.
  665. distribute_width_to_columns();
  666. compute_table_height(layout_mode);
  667. distribute_height_to_rows();
  668. position_row_boxes(total_content_height);
  669. position_cell_boxes();
  670. m_state.get_mutable(table_box()).set_content_height(total_content_height);
  671. total_captions_height += run_caption_layout(layout_mode, CSS::CaptionSide::Bottom);
  672. // Table captions are positioned between the table margins and its borders (outside the grid box borders) as described in
  673. // https://www.w3.org/TR/css-tables-3/#bounding-box-assignment
  674. // A visual representation of this model can be found at https://www.w3.org/TR/css-tables-3/images/table_container.png
  675. m_state.get_mutable(table_box()).margin_bottom += total_captions_height;
  676. // FIXME: This is a total hack, we should respect the 'height' property.
  677. m_automatic_content_height = total_content_height;
  678. }
  679. CSSPixels TableFormattingContext::automatic_content_width() const
  680. {
  681. return greatest_child_width(context_box());
  682. }
  683. CSSPixels TableFormattingContext::automatic_content_height() const
  684. {
  685. return m_automatic_content_height;
  686. }
  687. }