TableFormattingContext.cpp 68 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036103710381039104010411042104310441045104610471048104910501051105210531054105510561057105810591060106110621063106410651066106710681069107010711072107310741075107610771078107910801081108210831084108510861087108810891090109110921093109410951096109710981099110011011102110311041105110611071108110911101111111211131114111511161117111811191120112111221123112411251126112711281129113011311132113311341135113611371138113911401141114211431144114511461147114811491150115111521153115411551156115711581159116011611162116311641165116611671168116911701171117211731174117511761177117811791180118111821183118411851186118711881189119011911192119311941195119611971198119912001201120212031204120512061207120812091210121112121213121412151216121712181219122012211222122312241225122612271228122912301231123212331234123512361237123812391240124112421243124412451246124712481249125012511252125312541255125612571258125912601261126212631264126512661267126812691270127112721273127412751276127712781279128012811282128312841285128612871288128912901291129212931294129512961297129812991300130113021303130413051306130713081309131013111312131313141315131613171318131913201321132213231324132513261327132813291330133113321333133413351336133713381339134013411342134313441345134613471348134913501351135213531354135513561357135813591360136113621363136413651366136713681369137013711372137313741375137613771378137913801381138213831384138513861387138813891390139113921393139413951396139713981399140014011402140314041405140614071408140914101411
  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/HTML/HTMLTableColElement.h>
  10. #include <LibWeb/HTML/HTMLTableRowElement.h>
  11. #include <LibWeb/Layout/BlockFormattingContext.h>
  12. #include <LibWeb/Layout/Box.h>
  13. #include <LibWeb/Layout/InlineFormattingContext.h>
  14. #include <LibWeb/Layout/TableFormattingContext.h>
  15. struct GridPosition {
  16. size_t x;
  17. size_t y;
  18. };
  19. inline bool operator==(GridPosition const& a, GridPosition const& b)
  20. {
  21. return a.x == b.x && a.y == b.y;
  22. }
  23. namespace AK {
  24. template<>
  25. struct Traits<GridPosition> : public GenericTraits<GridPosition> {
  26. static unsigned hash(GridPosition const& key)
  27. {
  28. return pair_int_hash(key.x, key.y);
  29. }
  30. };
  31. }
  32. namespace Web::Layout {
  33. TableFormattingContext::TableFormattingContext(LayoutState& state, Box const& root, FormattingContext* parent)
  34. : FormattingContext(Type::Table, state, root, parent)
  35. {
  36. }
  37. TableFormattingContext::~TableFormattingContext() = default;
  38. static inline bool is_table_row_group(Box const& box)
  39. {
  40. auto const& display = box.display();
  41. return display.is_table_row_group() || display.is_table_header_group() || display.is_table_footer_group();
  42. }
  43. static inline bool is_table_row(Box const& box)
  44. {
  45. return box.display().is_table_row();
  46. }
  47. static inline bool is_table_column_group(Box const& box)
  48. {
  49. return box.display().is_table_column_group();
  50. }
  51. static inline bool is_table_column(Box const& box)
  52. {
  53. return box.display().is_table_column();
  54. }
  55. template<typename Matcher, typename Callback>
  56. static void for_each_child_box_matching(Box const& parent, Matcher matcher, Callback callback)
  57. {
  58. parent.for_each_child_of_type<Box>([&](Box const& child_box) {
  59. if (matcher(child_box))
  60. callback(child_box);
  61. });
  62. }
  63. CSSPixels TableFormattingContext::run_caption_layout(LayoutMode layout_mode, CSS::CaptionSide phase)
  64. {
  65. CSSPixels caption_height = 0;
  66. for (auto* child = table_box().first_child(); child; child = child->next_sibling()) {
  67. if (!child->display().is_table_caption() || child->computed_values().caption_side() != phase) {
  68. continue;
  69. }
  70. // The caption boxes are principal block-level boxes that retain their own content, padding, margin, and border areas,
  71. // and are rendered as normal block boxes inside the table wrapper box, as described in https://www.w3.org/TR/CSS22/tables.html#model
  72. auto caption_context = make<BlockFormattingContext>(m_state, *verify_cast<BlockContainer>(child), this);
  73. caption_context->run(table_box(), layout_mode, *m_available_space);
  74. VERIFY(child->is_box());
  75. auto const& child_box = static_cast<Box const&>(*child);
  76. // FIXME: Since caption only has inline children, BlockFormattingContext doesn't resolve the vertical metrics.
  77. // We need to do it manually here.
  78. caption_context->resolve_vertical_box_model_metrics(child_box);
  79. auto const& caption_state = m_state.get(child_box);
  80. if (phase == CSS::CaptionSide::Top) {
  81. m_state.get_mutable(table_box()).set_content_y(caption_state.margin_box_height());
  82. } else {
  83. m_state.get_mutable(child_box).set_content_y(
  84. m_state.get(table_box()).margin_box_height() + caption_state.margin_box_top());
  85. }
  86. caption_height += caption_state.margin_box_height();
  87. }
  88. return caption_height;
  89. }
  90. void TableFormattingContext::calculate_row_column_grid(Box const& box)
  91. {
  92. // Implements https://html.spec.whatwg.org/multipage/tables.html#forming-a-table
  93. HashMap<GridPosition, bool> grid;
  94. size_t x_width = 0, y_height = 0;
  95. size_t x_current = 0, y_current = 0;
  96. size_t max_cell_x = 0, max_cell_y = 0;
  97. // Implements https://html.spec.whatwg.org/multipage/tables.html#algorithm-for-processing-rows
  98. auto process_row = [&](auto& row) {
  99. if (y_height == y_current)
  100. y_height++;
  101. x_current = 0;
  102. for (auto* child = row.first_child(); child; child = child->next_sibling()) {
  103. if (child->display().is_table_cell()) {
  104. // Cells: While x_current is less than x_width and the slot with coordinate (x_current, y_current) already has a cell assigned to it, increase x_current by 1.
  105. while (x_current < x_width && grid.contains(GridPosition { x_current, y_current }))
  106. x_current++;
  107. Box const* box = static_cast<Box const*>(child);
  108. if (x_current == x_width)
  109. x_width++;
  110. size_t colspan = 1, rowspan = 1;
  111. if (box->dom_node() && is<HTML::HTMLTableCellElement>(*box->dom_node())) {
  112. auto const& node = static_cast<HTML::HTMLTableCellElement const&>(*box->dom_node());
  113. colspan = node.col_span();
  114. rowspan = node.row_span();
  115. }
  116. if (x_width < x_current + colspan)
  117. x_width = x_current + colspan;
  118. if (y_height < y_current + rowspan)
  119. y_height = y_current + rowspan;
  120. for (size_t y = y_current; y < y_current + rowspan; y++)
  121. for (size_t x = x_current; x < x_current + colspan; x++)
  122. grid.set(GridPosition { x, y }, true);
  123. m_cells.append(Cell { *box, x_current, y_current, colspan, rowspan });
  124. max_cell_x = max(x_current, max_cell_x);
  125. max_cell_y = max(y_current, max_cell_y);
  126. x_current += colspan;
  127. }
  128. }
  129. m_rows.append(Row { row });
  130. y_current++;
  131. };
  132. for_each_child_box_matching(box, is_table_row_group, [&](auto& row_group_box) {
  133. for_each_child_box_matching(row_group_box, is_table_row, [&](auto& row_box) {
  134. process_row(row_box);
  135. return IterationDecision::Continue;
  136. });
  137. });
  138. for_each_child_box_matching(box, is_table_row, [&](auto& row_box) {
  139. process_row(row_box);
  140. return IterationDecision::Continue;
  141. });
  142. m_columns.resize(x_width);
  143. for (auto& cell : m_cells) {
  144. // Clip spans to the end of the table.
  145. cell.row_span = min(cell.row_span, m_rows.size() - cell.row_index);
  146. cell.column_span = min(cell.column_span, m_columns.size() - cell.column_index);
  147. }
  148. m_cells_by_coordinate.resize(max_cell_y + 1);
  149. for (auto& position_to_cell_row : m_cells_by_coordinate) {
  150. position_to_cell_row.resize(max_cell_x + 1);
  151. }
  152. for (auto const& cell : m_cells) {
  153. m_cells_by_coordinate[cell.row_index][cell.column_index] = cell;
  154. }
  155. }
  156. void TableFormattingContext::compute_constrainedness()
  157. {
  158. // Definition of constrainedness: https://www.w3.org/TR/css-tables-3/#constrainedness
  159. size_t column_index = 0;
  160. for_each_child_box_matching(table_box(), is_table_column_group, [&](auto& column_group_box) {
  161. for_each_child_box_matching(column_group_box, is_table_column, [&](auto& column_box) {
  162. auto const& computed_values = column_box.computed_values();
  163. if (!computed_values.width().is_auto() && !computed_values.width().is_percentage()) {
  164. m_columns[column_index].is_constrained = true;
  165. }
  166. auto const& col_node = static_cast<HTML::HTMLTableColElement const&>(*column_box.dom_node());
  167. unsigned span = col_node.attribute(HTML::AttributeNames::span).to_uint().value_or(1);
  168. column_index += span;
  169. });
  170. });
  171. for (auto& row : m_rows) {
  172. auto const& computed_values = row.box->computed_values();
  173. if (!computed_values.height().is_auto() && !computed_values.height().is_percentage()) {
  174. row.is_constrained = true;
  175. }
  176. }
  177. for (auto& cell : m_cells) {
  178. auto const& computed_values = cell.box->computed_values();
  179. if (!computed_values.width().is_auto() && !computed_values.width().is_percentage()) {
  180. m_columns[cell.column_index].is_constrained = true;
  181. }
  182. if (!computed_values.height().is_auto() && !computed_values.height().is_percentage()) {
  183. m_rows[cell.row_index].is_constrained = true;
  184. }
  185. }
  186. }
  187. void TableFormattingContext::compute_cell_measures(AvailableSpace const& available_space)
  188. {
  189. // Implements https://www.w3.org/TR/css-tables-3/#computing-cell-measures.
  190. auto const& containing_block = m_state.get(*table_wrapper().containing_block());
  191. auto table_width_is_auto = table_box().computed_values().width().is_auto();
  192. compute_constrainedness();
  193. for (auto& cell : m_cells) {
  194. auto const& computed_values = cell.box->computed_values();
  195. if (computed_values.width().is_percentage()) {
  196. m_columns[cell.column_index].has_percentage_width = true;
  197. m_columns[cell.column_index].percentage_width = max(m_columns[cell.column_index].percentage_width, computed_values.width().percentage().value());
  198. }
  199. if (computed_values.height().is_percentage()) {
  200. m_rows[cell.row_index].has_percentage_height = true;
  201. m_rows[cell.row_index].percentage_height = max(m_rows[cell.row_index].percentage_height, computed_values.height().percentage().value());
  202. }
  203. }
  204. for (auto& cell : m_cells) {
  205. auto const& computed_values = cell.box->computed_values();
  206. CSSPixels padding_top = computed_values.padding().top().to_px(cell.box, containing_block.content_height());
  207. CSSPixels padding_bottom = computed_values.padding().bottom().to_px(cell.box, containing_block.content_height());
  208. CSSPixels padding_left = computed_values.padding().left().to_px(cell.box, containing_block.content_width());
  209. CSSPixels padding_right = computed_values.padding().right().to_px(cell.box, containing_block.content_width());
  210. auto const& cell_state = m_state.get(cell.box);
  211. auto use_collapsing_borders_model = cell_state.override_borders_data().has_value();
  212. // Implement the collapsing border model https://www.w3.org/TR/CSS22/tables.html#collapsing-borders.
  213. CSSPixels border_top = use_collapsing_borders_model ? round(cell_state.border_top / 2) : computed_values.border_top().width;
  214. CSSPixels border_bottom = use_collapsing_borders_model ? round(cell_state.border_bottom / 2) : computed_values.border_bottom().width;
  215. CSSPixels border_left = use_collapsing_borders_model ? round(cell_state.border_left / 2) : computed_values.border_left().width;
  216. CSSPixels border_right = use_collapsing_borders_model ? round(cell_state.border_right / 2) : computed_values.border_right().width;
  217. auto min_content_height = calculate_min_content_height(cell.box, available_space.width);
  218. auto max_content_height = calculate_max_content_height(cell.box, available_space.width);
  219. auto min_content_width = calculate_min_content_width(cell.box);
  220. auto max_content_width = calculate_max_content_width(cell.box);
  221. // The outer min-content height of a table-cell is max(min-height, min-content height) adjusted by the cell intrinsic offsets.
  222. auto min_height = computed_values.min_height().to_px(cell.box, containing_block.content_height());
  223. auto cell_intrinsic_height_offsets = padding_top + padding_bottom + border_top + border_bottom;
  224. cell.outer_min_height = max(min_height, min_content_height) + cell_intrinsic_height_offsets;
  225. // The outer min-content width of a table-cell is max(min-width, min-content width) adjusted by the cell intrinsic offsets.
  226. auto min_width = computed_values.min_width().to_px(cell.box, containing_block.content_width());
  227. auto cell_intrinsic_width_offsets = padding_left + padding_right + border_left + border_right;
  228. cell.outer_min_width = max(min_width, min_content_width) + cell_intrinsic_width_offsets;
  229. // FIXME: Compute outer min-content width / height of a table-column or table-column-group / table-row or table-row-group.
  230. // FIXME: Compute height, max_height correctly.
  231. auto height = computed_values.height().to_px(cell.box, containing_block.content_height());
  232. auto max_height = computed_values.height().is_auto() ? max_content_height : height;
  233. if (!should_treat_max_height_as_none(cell.box, available_space.height))
  234. max_height = min(max_height, computed_values.max_height().to_px(cell.box, containing_block.content_height()));
  235. if (m_rows[cell.row_index].is_constrained) {
  236. // The outer max-content height of a table-cell in a constrained row is
  237. // max(min-height, height, min-content height, min(max-height, height)) adjusted by the cell intrinsic offsets.
  238. // NB: min(max-height, height) doesn't have any effect here, we can simplify the expression to max(min-height, height, min-content height).
  239. cell.outer_max_height = max(min_height, max(height, min_content_height)) + cell_intrinsic_height_offsets;
  240. } else {
  241. // The outer max-content height of a table-cell in a non-constrained row is
  242. // max(min-height, height, min-content height, min(max-height, max-content height)) adjusted by the cell intrinsic offsets.
  243. cell.outer_max_height = max(min_height, max(height, max(min_content_height, min(max_height, max_content_height)))) + cell_intrinsic_height_offsets;
  244. }
  245. // FIXME: The outer max-content height of a table-row or table-row-group is max(min-height, min(max-height, height)).
  246. // FIXME: Compute width, max_width correctly.
  247. auto width = (computed_values.width().is_length() || !table_width_is_auto) ? computed_values.width().to_px(cell.box, containing_block.content_width()) : 0;
  248. auto max_width = computed_values.width().is_length() ? width : max_content_width;
  249. if (!should_treat_max_width_as_none(cell.box, available_space.width))
  250. max_width = min(max_width, computed_values.max_width().to_px(cell.box, containing_block.content_width()));
  251. if (m_columns[cell.column_index].is_constrained) {
  252. // The outer max-content width of a table-cell in a constrained column is
  253. // max(min-width, width, min-content width, min(max-width, width)) adjusted by the cell intrinsic offsets.
  254. // NB: min(max-width, width) doesn't have any effect here, we can simplify the expression to max(min-width, width, min-content width).
  255. cell.outer_max_width = max(min_width, max(width, min_content_width)) + cell_intrinsic_width_offsets;
  256. } else {
  257. // The outer max-content width of a table-cell in a non-constrained column is
  258. // max(min-width, width, min-content width, min(max-width, max-content width)) adjusted by the cell intrinsic offsets.
  259. cell.outer_max_width = max(min_width, max(width, max(min_content_width, min(max_width, max_content_width)))) + cell_intrinsic_width_offsets;
  260. }
  261. // FIXME: The outer max-content width of a table-column or table-column-group is max(min-width, min(max-width, width)).
  262. }
  263. }
  264. template<>
  265. void TableFormattingContext::initialize_table_measures<TableFormattingContext::Row>()
  266. {
  267. auto const& containing_block = m_state.get(*table_wrapper().containing_block());
  268. for (auto& cell : m_cells) {
  269. auto const& computed_values = cell.box->computed_values();
  270. if (cell.row_span == 1) {
  271. auto specified_height = computed_values.height().to_px(cell.box, containing_block.content_height());
  272. // https://www.w3.org/TR/css-tables-3/#row-layout makes specified cell height part of the initialization formula for row table measures:
  273. // This is done by running the same algorithm as the column measurement, with the span=1 value being initialized (for min-content) with
  274. // the largest of the resulting height of the previous row layout, the height specified on the corresponding table-row (if any), and
  275. // the largest height specified on cells that span this row only (the algorithm starts by considering cells of span 2 on top of that assignment).
  276. m_rows[cell.row_index].min_size = max(m_rows[cell.row_index].min_size, max(cell.outer_min_height, specified_height));
  277. m_rows[cell.row_index].max_size = max(m_rows[cell.row_index].max_size, cell.outer_max_height);
  278. }
  279. }
  280. }
  281. template<>
  282. void TableFormattingContext::initialize_table_measures<TableFormattingContext::Column>()
  283. {
  284. for (auto& cell : m_cells) {
  285. if (cell.column_span == 1) {
  286. m_columns[cell.column_index].min_size = max(m_columns[cell.column_index].min_size, cell.outer_min_width);
  287. m_columns[cell.column_index].max_size = max(m_columns[cell.column_index].max_size, cell.outer_max_width);
  288. }
  289. }
  290. }
  291. template<class RowOrColumn>
  292. void TableFormattingContext::compute_table_measures()
  293. {
  294. initialize_table_measures<RowOrColumn>();
  295. auto& rows_or_columns = table_rows_or_columns<RowOrColumn>();
  296. size_t max_cell_span = 1;
  297. for (auto& cell : m_cells) {
  298. max_cell_span = max(max_cell_span, cell_span<RowOrColumn>(cell));
  299. }
  300. for (size_t current_span = 2; current_span <= max_cell_span; current_span++) {
  301. // https://www.w3.org/TR/css-tables-3/#min-content-width-of-a-column-based-on-cells-of-span-up-to-n-n--1
  302. Vector<Vector<CSSPixels>> cell_min_contributions_by_rc_index;
  303. cell_min_contributions_by_rc_index.resize(rows_or_columns.size());
  304. // https://www.w3.org/TR/css-tables-3/#max-content-width-of-a-column-based-on-cells-of-span-up-to-n-n--1
  305. Vector<Vector<CSSPixels>> cell_max_contributions_by_rc_index;
  306. cell_max_contributions_by_rc_index.resize(rows_or_columns.size());
  307. for (auto& cell : m_cells) {
  308. auto cell_span_value = cell_span<RowOrColumn>(cell);
  309. if (cell_span_value == current_span) {
  310. // Define the baseline max-content size as the sum of the max-content sizes based on cells of span up to N-1 of all columns that the cell spans.
  311. CSSPixels baseline_max_content_size = 0;
  312. auto cell_start_rc_index = cell_index<RowOrColumn>(cell);
  313. auto cell_end_rc_index = cell_start_rc_index + cell_span_value;
  314. for (auto rc_index = cell_start_rc_index; rc_index < cell_end_rc_index; rc_index++) {
  315. baseline_max_content_size += rows_or_columns[rc_index].max_size;
  316. }
  317. // Define the baseline border spacing as the sum of the horizontal border-spacing for any columns spanned by the cell, other than the one in which the cell originates.
  318. auto baseline_border_spacing = border_spacing<RowOrColumn>() * (cell_span_value - 1);
  319. // Add contribution from all rows / columns, since we've weighted the gap to the desired spanned size by the the
  320. // ratio of the max-content size based on cells of span up to N-1 of the row / column to the baseline max-content width.
  321. for (auto rc_index = cell_start_rc_index; rc_index < cell_end_rc_index; rc_index++) {
  322. // The contribution of the cell is the sum of:
  323. // the min-content size of the column based on cells of span up to N-1
  324. auto cell_min_contribution = rows_or_columns[rc_index].min_size;
  325. // and the product of:
  326. // - the ratio of the max-content size based on cells of span up to N-1 of the column to the baseline max-content size
  327. // - the outer min-content size of the cell minus the baseline max-content size and baseline border spacing, or 0 if this is negative
  328. cell_min_contribution += (rows_or_columns[rc_index].max_size / baseline_max_content_size)
  329. * max(CSSPixels(0), cell_min_size<RowOrColumn>(cell) - baseline_max_content_size - baseline_border_spacing);
  330. // The contribution of the cell is the sum of:
  331. // the max-content size of the column based on cells of span up to N-1
  332. auto cell_max_contribution = rows_or_columns[rc_index].max_size;
  333. // and the product of:
  334. // - the ratio of the max-content size based on cells of span up to N-1 of the column to the baseline max-content size
  335. // - the outer max-content size of the cell minus the baseline max-content size and the baseline border spacing, or 0 if this is negative
  336. cell_max_contribution += (rows_or_columns[rc_index].max_size / baseline_max_content_size)
  337. * max(CSSPixels(0), cell_max_size<RowOrColumn>(cell) - baseline_max_content_size - baseline_border_spacing);
  338. cell_min_contributions_by_rc_index[rc_index].append(cell_min_contribution);
  339. cell_max_contributions_by_rc_index[rc_index].append(cell_max_contribution);
  340. }
  341. }
  342. }
  343. for (size_t rc_index = 0; rc_index < rows_or_columns.size(); rc_index++) {
  344. // min-content size of a row / column based on cells of span up to N (N > 1) is
  345. // the largest of the min-content size of the row / column based on cells of span up to N-1 and
  346. // the contributions of the cells in the row / column whose rowSpan / colSpan is N
  347. for (auto min_contribution : cell_min_contributions_by_rc_index[rc_index])
  348. rows_or_columns[rc_index].min_size = max(rows_or_columns[rc_index].min_size, min_contribution);
  349. // max-content size of a row / column based on cells of span up to N (N > 1) is
  350. // the largest of the max-content size based on cells of span up to N-1 and the contributions of
  351. // the cells in the row / column whose rowSpan / colSpan is N
  352. for (auto max_contribution : cell_max_contributions_by_rc_index[rc_index])
  353. rows_or_columns[rc_index].max_size = max(rows_or_columns[rc_index].max_size, max_contribution);
  354. }
  355. }
  356. }
  357. CSSPixels TableFormattingContext::compute_capmin()
  358. {
  359. // The caption width minimum (CAPMIN) is the largest of the table captions min-content contribution:
  360. // https://drafts.csswg.org/css-tables-3/#computing-the-table-width
  361. CSSPixels capmin = 0;
  362. for (auto* child = table_box().first_child(); child; child = child->next_sibling()) {
  363. if (!child->display().is_table_caption()) {
  364. continue;
  365. }
  366. VERIFY(child->is_box());
  367. capmin = max(calculate_min_content_width(static_cast<Box const&>(*child)), capmin);
  368. }
  369. return capmin;
  370. }
  371. void TableFormattingContext::compute_table_width()
  372. {
  373. // https://drafts.csswg.org/css-tables-3/#computing-the-table-width
  374. auto& table_box_state = m_state.get_mutable(table_box());
  375. auto& computed_values = table_box().computed_values();
  376. CSSPixels width_of_table_containing_block = m_state.get(*table_box().containing_block()).content_width();
  377. // Percentages on 'width' and 'height' on the table are relative to the table wrapper box's containing block,
  378. // not the table wrapper box itself.
  379. CSSPixels width_of_table_wrapper_containing_block = m_state.get(*table_wrapper().containing_block()).content_width();
  380. // Compute undistributable space due to border spacing: https://www.w3.org/TR/css-tables-3/#computing-undistributable-space.
  381. auto undistributable_space = (m_columns.size() + 1) * border_spacing_horizontal();
  382. // The row/column-grid width minimum (GRIDMIN) width is the sum of the min-content width
  383. // of all the columns plus cell spacing or borders.
  384. CSSPixels grid_min = 0.0f;
  385. for (auto& column : m_columns) {
  386. grid_min += column.min_size;
  387. }
  388. grid_min += undistributable_space;
  389. // The row/column-grid width maximum (GRIDMAX) width is the sum of the max-content width
  390. // of all the columns plus cell spacing or borders.
  391. CSSPixels grid_max = 0.0f;
  392. for (auto& column : m_columns) {
  393. grid_max += column.max_size;
  394. }
  395. grid_max += undistributable_space;
  396. // The used min-width of a table is the greater of the resolved min-width, CAPMIN, and GRIDMIN.
  397. auto used_min_width = max(grid_min, compute_capmin());
  398. if (!computed_values.min_width().is_auto()) {
  399. used_min_width = max(used_min_width, computed_values.min_width().to_px(table_box(), width_of_table_wrapper_containing_block));
  400. }
  401. CSSPixels used_width;
  402. if (computed_values.width().is_auto()) {
  403. // If the table-root has 'width: auto', the used width is the greater of
  404. // min(GRIDMAX, the table’s containing block width), the used min-width of the table.
  405. used_width = max(min(grid_max, width_of_table_containing_block), used_min_width);
  406. // https://www.w3.org/TR/CSS22/tables.html#auto-table-layout
  407. // A percentage value for a column width is relative to the table width. If the table has 'width: auto',
  408. // a percentage represents a constraint on the column's width, which a UA should try to satisfy.
  409. CSSPixels adjusted_used_width = 0;
  410. for (auto& cell : m_cells) {
  411. auto const& cell_width = cell.box->computed_values().width();
  412. if (cell_width.is_percentage()) {
  413. adjusted_used_width = 100 / cell_width.percentage().value() * cell.outer_min_width;
  414. used_width = min(max(used_width, adjusted_used_width), width_of_table_containing_block);
  415. }
  416. }
  417. } else {
  418. // If the table-root’s width property has a computed value (resolving to
  419. // resolved-table-width) other than auto, the used width is the greater
  420. // of resolved-table-width, and the used min-width of the table.
  421. CSSPixels resolved_table_width = computed_values.width().to_px(table_box(), width_of_table_wrapper_containing_block);
  422. // Since used_width is content width, we need to subtract the border spacing from the specified width for a consistent comparison.
  423. used_width = max(resolved_table_width - table_box_state.border_box_left() - table_box_state.border_box_right(), used_min_width);
  424. if (!should_treat_max_width_as_none(table_box(), m_available_space->width))
  425. used_width = min(used_width, computed_values.max_width().to_px(table_box(), width_of_table_wrapper_containing_block));
  426. }
  427. table_box_state.set_content_width(used_width);
  428. }
  429. void TableFormattingContext::distribute_width_to_columns()
  430. {
  431. // Implements https://www.w3.org/TR/css-tables-3/#width-distribution-algorithm
  432. // The total horizontal border spacing is defined for each table:
  433. // - For tables laid out in separated-borders mode containing at least one column, the horizontal component of the computed value of the border-spacing property times one plus the number of columns in the table
  434. // - Otherwise, 0
  435. auto total_horizontal_border_spacing = m_columns.is_empty() ? 0 : (m_columns.size() + 1) * border_spacing_horizontal();
  436. // The assignable table width is the used width of the table minus the total horizontal border spacing (if any).
  437. // This is the width that we will be able to allocate to the columns.
  438. CSSPixels available_width = m_state.get(table_box()).content_width() - total_horizontal_border_spacing;
  439. Vector<CSSPixels> candidate_widths;
  440. candidate_widths.resize(m_columns.size());
  441. auto compute_columns_total_used_width = [&]() {
  442. CSSPixels total_used_width = 0;
  443. for (auto& column : m_columns) {
  444. total_used_width += column.used_width;
  445. }
  446. return total_used_width;
  447. };
  448. auto compute_columns_total_candidate_width = [&]() {
  449. CSSPixels total_candidate_width = 0;
  450. for (auto width : candidate_widths) {
  451. total_candidate_width += width;
  452. }
  453. return total_candidate_width;
  454. };
  455. auto commit_candidate_widths = [&]() {
  456. for (size_t i = 0; i < m_columns.size(); ++i) {
  457. auto& column = m_columns[i];
  458. column.used_width = candidate_widths[i];
  459. }
  460. };
  461. auto compute_linear_combination = [&](CSSPixels columns_total_candidate_width) {
  462. auto columns_total_used_width = compute_columns_total_used_width();
  463. if (columns_total_candidate_width == columns_total_used_width) {
  464. return;
  465. }
  466. auto candidate_weight = ((available_width - columns_total_used_width) / (columns_total_candidate_width - columns_total_used_width)).to_double();
  467. for (size_t i = 0; i < m_columns.size(); ++i) {
  468. auto& column = m_columns[i];
  469. column.used_width = candidate_weight * candidate_widths[i] + (1 - candidate_weight) * column.used_width;
  470. }
  471. };
  472. // 1. The min-content sizing-guess is the set of column width assignments where each column is assigned its min-content width.
  473. for (size_t i = 0; i < m_columns.size(); ++i) {
  474. auto& column = m_columns[i];
  475. column.used_width = column.min_size;
  476. candidate_widths[i] = column.min_size;
  477. }
  478. // 2. The min-content-percentage sizing-guess is the set of column width assignments where:
  479. // - each percent-column is assigned the larger of:
  480. // - its intrinsic percentage width times the assignable width and
  481. // - its min-content width.
  482. // - all other columns are assigned their min-content width.
  483. for (size_t i = 0; i < m_columns.size(); ++i) {
  484. auto& column = m_columns[i];
  485. if (column.has_percentage_width) {
  486. candidate_widths[i] = max(column.min_size, column.percentage_width / 100 * available_width);
  487. }
  488. }
  489. auto columns_total_candidate_width = compute_columns_total_candidate_width();
  490. // If the assignable table width is less than or equal to the max-content sizing-guess, the used widths of the columns must be the
  491. // linear combination (with weights adding to 1) of the two consecutive sizing-guesses whose width sums bound the available width.
  492. if (available_width < columns_total_candidate_width) {
  493. compute_linear_combination(columns_total_candidate_width);
  494. return;
  495. } else {
  496. commit_candidate_widths();
  497. }
  498. // 3. The min-content-specified sizing-guess is the set of column width assignments where:
  499. // - each percent-column is assigned the larger of:
  500. // - its intrinsic percentage width times the assignable width and
  501. // - its min-content width
  502. // - any other column that is constrained is assigned its max-content width
  503. // - all other columns are assigned their min-content width.
  504. for (size_t i = 0; i < m_columns.size(); ++i) {
  505. auto& column = m_columns[i];
  506. if (column.is_constrained) {
  507. candidate_widths[i] = column.max_size;
  508. }
  509. }
  510. columns_total_candidate_width = compute_columns_total_candidate_width();
  511. if (available_width < columns_total_candidate_width) {
  512. compute_linear_combination(columns_total_candidate_width);
  513. return;
  514. } else {
  515. commit_candidate_widths();
  516. }
  517. // 4. The max-content sizing-guess is the set of column width assignments where:
  518. // - each percent-column is assigned the larger of:
  519. // - its intrinsic percentage width times the assignable width and
  520. // - its min-content width
  521. // - all other columns are assigned their max-content width.
  522. for (size_t i = 0; i < m_columns.size(); ++i) {
  523. auto& column = m_columns[i];
  524. if (!column.has_percentage_width) {
  525. candidate_widths[i] = column.max_size;
  526. }
  527. }
  528. columns_total_candidate_width = compute_columns_total_candidate_width();
  529. if (available_width < columns_total_candidate_width) {
  530. compute_linear_combination(columns_total_candidate_width);
  531. return;
  532. } else {
  533. commit_candidate_widths();
  534. }
  535. // Otherwise, the used widths of the columns are the result of starting from the max-content sizing-guess and distributing
  536. // the excess width to the columns of the table according to the rules for distributing excess width to columns (for used width).
  537. // Implements steps 1 and 2 of https://www.w3.org/TR/css-tables-3/#distributing-width-to-columns
  538. // FIXME: Implement steps 3-6 as well, which distribute excess width to constrained columns.
  539. auto columns_total_used_width = compute_columns_total_used_width();
  540. if (columns_total_used_width < available_width) {
  541. // NOTE: if all columns got their max width and there is still width to distribute left
  542. // it should be assigned to columns proportionally to their max width
  543. CSSPixels grid_max = 0.0f;
  544. size_t unconstrained_column_count = 0;
  545. for (auto& column : m_columns) {
  546. if (column.is_constrained) {
  547. continue;
  548. }
  549. grid_max += column.max_size;
  550. ++unconstrained_column_count;
  551. }
  552. auto width_to_distribute = available_width - columns_total_used_width;
  553. if (grid_max == 0) {
  554. // If total max width of columns is zero then divide distributable width equally among them
  555. auto column_width = width_to_distribute / unconstrained_column_count;
  556. for (auto& column : m_columns) {
  557. if (column.is_constrained)
  558. continue;
  559. column.used_width = column_width;
  560. }
  561. } else {
  562. // Distribute width to columns proportionally to their max width
  563. for (auto& column : m_columns) {
  564. if (column.is_constrained)
  565. continue;
  566. column.used_width += width_to_distribute * column.max_size / grid_max;
  567. }
  568. }
  569. }
  570. }
  571. void TableFormattingContext::compute_table_height(LayoutMode layout_mode)
  572. {
  573. // First pass of row height calculation:
  574. for (auto& row : m_rows) {
  575. auto row_computed_height = row.box->computed_values().height();
  576. if (row_computed_height.is_length()) {
  577. auto height_of_containing_block = m_state.get(*row.box->containing_block()).content_height();
  578. auto row_used_height = row_computed_height.to_px(row.box, height_of_containing_block);
  579. row.base_height = max(row.base_height, row_used_height);
  580. }
  581. }
  582. // First pass of cells layout:
  583. for (auto& cell : m_cells) {
  584. auto& row = m_rows[cell.row_index];
  585. auto& cell_state = m_state.get_mutable(cell.box);
  586. CSSPixels span_width = 0;
  587. for (size_t i = 0; i < cell.column_span; ++i)
  588. span_width += m_columns[cell.column_index + i].used_width;
  589. auto width_of_containing_block = m_state.get(*cell.box->containing_block()).content_width();
  590. auto width_of_containing_block_as_length = CSS::Length::make_px(width_of_containing_block);
  591. auto height_of_containing_block = m_state.get(*cell.box->containing_block()).content_height();
  592. auto height_of_containing_block_as_length = CSS::Length::make_px(height_of_containing_block);
  593. cell_state.padding_top = cell.box->computed_values().padding().top().to_px(cell.box, width_of_containing_block);
  594. cell_state.padding_bottom = cell.box->computed_values().padding().bottom().to_px(cell.box, width_of_containing_block);
  595. cell_state.padding_left = cell.box->computed_values().padding().left().to_px(cell.box, width_of_containing_block);
  596. cell_state.padding_right = cell.box->computed_values().padding().right().to_px(cell.box, width_of_containing_block);
  597. if (cell.box->computed_values().border_collapse() == CSS::BorderCollapse::Separate) {
  598. cell_state.border_top = cell.box->computed_values().border_top().width;
  599. cell_state.border_bottom = cell.box->computed_values().border_bottom().width;
  600. cell_state.border_left = cell.box->computed_values().border_left().width;
  601. cell_state.border_right = cell.box->computed_values().border_right().width;
  602. }
  603. auto cell_computed_height = cell.box->computed_values().height();
  604. if (cell_computed_height.is_length()) {
  605. auto cell_used_height = cell_computed_height.to_px(cell.box, height_of_containing_block);
  606. cell_state.set_content_height(cell_used_height - cell_state.border_box_top() - cell_state.border_box_bottom());
  607. row.base_height = max(row.base_height, cell_used_height);
  608. }
  609. // Compute cell width as specified by https://www.w3.org/TR/css-tables-3/#bounding-box-assignment:
  610. // The position of any table-cell, table-track, or table-track-group box within the table is defined as the rectangle whose width/height is the sum of:
  611. // - the widths/heights of all spanned visible columns/rows
  612. // - the horizontal/vertical border-spacing times the amount of spanned visible columns/rows minus one
  613. // FIXME: Account for visibility.
  614. cell_state.set_content_width(span_width - cell_state.border_box_left() - cell_state.border_box_right() + (cell.column_span - 1) * border_spacing_horizontal());
  615. if (auto independent_formatting_context = layout_inside(cell.box, layout_mode, cell_state.available_inner_space_or_constraints_from(*m_available_space))) {
  616. cell_state.set_content_height(independent_formatting_context->automatic_content_height());
  617. independent_formatting_context->parent_context_did_dimension_child_root_box();
  618. }
  619. cell.baseline = box_baseline(cell.box);
  620. // Implements https://www.w3.org/TR/css-tables-3/#computing-the-table-height
  621. // The minimum height of a row is the maximum of:
  622. // - the computed height (if definite, percentages being considered 0px) of its corresponding table-row (if nay)
  623. // - the computed height of each cell spanning the current row exclusively (if definite, percentages being treated as 0px), and
  624. // - the minimum height (ROWMIN) required by the cells spanning the row.
  625. // Note that we've already applied the first rule at the top of the method.
  626. if (cell.row_span == 1) {
  627. row.base_height = max(row.base_height, cell_state.border_box_height());
  628. }
  629. row.base_height = max(row.base_height, m_rows[cell.row_index].min_size);
  630. row.baseline = max(row.baseline, cell.baseline);
  631. }
  632. CSSPixels sum_rows_height = 0;
  633. for (auto& row : m_rows) {
  634. sum_rows_height += row.base_height;
  635. }
  636. m_table_height = sum_rows_height;
  637. if (!table_box().computed_values().height().is_auto()) {
  638. // If the table has a height property with a value other than auto, it is treated as a minimum height for the
  639. // table grid, and will eventually be distributed to the height of the rows if their collective minimum height
  640. // ends up smaller than this number.
  641. CSSPixels height_of_table_containing_block = m_state.get(*table_wrapper().containing_block()).content_height();
  642. auto specified_table_height = table_box().computed_values().height().to_px(table_box(), height_of_table_containing_block);
  643. auto const& table_state = m_state.get(table_box());
  644. m_table_height = max(m_table_height, specified_table_height - table_state.border_box_top() - table_state.border_box_bottom());
  645. }
  646. for (auto& row : m_rows) {
  647. // Reference size is the largest of
  648. // - its initial base height and
  649. // - its new base height (the one evaluated during the second layout pass, where percentages used in
  650. // rowgroups/rows/cells' specified heights were resolved according to the table height, instead of
  651. // being ignored as 0px).
  652. // Assign reference size to base size. Later, the reference size might change to a larger value during
  653. // the second pass of rows layout.
  654. row.reference_height = row.base_height;
  655. }
  656. // Second pass of rows height calculation:
  657. // At this point, percentage row height can be resolved because the final table height is calculated.
  658. for (auto& row : m_rows) {
  659. auto row_computed_height = row.box->computed_values().height();
  660. if (row_computed_height.is_percentage()) {
  661. auto row_used_height = row_computed_height.to_px(row.box, m_table_height);
  662. row.reference_height = max(row.reference_height, row_used_height);
  663. } else {
  664. continue;
  665. }
  666. }
  667. // Second pass cells layout:
  668. // At this point, percentage cell height can be resolved because the final table height is calculated.
  669. for (auto& cell : m_cells) {
  670. auto& row = m_rows[cell.row_index];
  671. auto& cell_state = m_state.get_mutable(cell.box);
  672. CSSPixels span_width = 0;
  673. for (size_t i = 0; i < cell.column_span; ++i)
  674. span_width += m_columns[cell.column_index + i].used_width;
  675. auto cell_computed_height = cell.box->computed_values().height();
  676. if (cell_computed_height.is_percentage()) {
  677. auto cell_used_height = cell_computed_height.to_px(cell.box, m_table_height);
  678. cell_state.set_content_height(cell_used_height - cell_state.border_box_top() - cell_state.border_box_bottom());
  679. row.reference_height = max(row.reference_height, cell_used_height);
  680. } else {
  681. continue;
  682. }
  683. cell_state.set_content_width(span_width - cell_state.border_box_left() - cell_state.border_box_right() + (cell.column_span - 1) * border_spacing_horizontal());
  684. if (auto independent_formatting_context = layout_inside(cell.box, layout_mode, cell_state.available_inner_space_or_constraints_from(*m_available_space))) {
  685. independent_formatting_context->parent_context_did_dimension_child_root_box();
  686. }
  687. cell.baseline = box_baseline(cell.box);
  688. row.reference_height = max(row.reference_height, cell_state.border_box_height());
  689. row.baseline = max(row.baseline, cell.baseline);
  690. }
  691. }
  692. void TableFormattingContext::distribute_height_to_rows()
  693. {
  694. CSSPixels sum_reference_height = 0;
  695. for (auto& row : m_rows) {
  696. sum_reference_height += row.reference_height;
  697. }
  698. if (sum_reference_height == 0)
  699. return;
  700. Vector<Row&> rows_with_auto_height;
  701. for (auto& row : m_rows) {
  702. if (row.box->computed_values().height().is_auto()) {
  703. rows_with_auto_height.append(row);
  704. }
  705. }
  706. if (m_table_height <= sum_reference_height) {
  707. // If the table height is equal or smaller than sum of reference sizes, the final height assigned to each row
  708. // will be the weighted mean of the base and the reference size that yields the correct total height.
  709. for (auto& row : m_rows) {
  710. auto weight = row.reference_height / sum_reference_height;
  711. auto final_height = m_table_height * weight;
  712. row.final_height = final_height;
  713. }
  714. } else if (rows_with_auto_height.size() > 0) {
  715. // Else, if the table owns any “auto-height” row (a row whose size is only determined by its content size and
  716. // none of the specified heights), each non-auto-height row receives its reference height and auto-height rows
  717. // receive their reference size plus some increment which is equal to the height missing to amount to the
  718. // specified table height divided by the amount of such rows.
  719. for (auto& row : m_rows) {
  720. row.final_height = row.reference_height;
  721. }
  722. auto auto_height_rows_increment = (m_table_height - sum_reference_height) / rows_with_auto_height.size();
  723. for (auto& row : rows_with_auto_height) {
  724. row.final_height += auto_height_rows_increment;
  725. }
  726. } else {
  727. // Else, all rows receive their reference size plus some increment which is equal to the height missing to
  728. // amount to the specified table height divided by the amount of rows.
  729. auto increment = (m_table_height - sum_reference_height) / m_rows.size();
  730. for (auto& row : m_rows) {
  731. row.final_height = row.reference_height + increment;
  732. }
  733. }
  734. // Add undistributable space due to border spacing: https://www.w3.org/TR/css-tables-3/#computing-undistributable-space.
  735. m_table_height += (m_rows.size() + 1) * border_spacing_vertical();
  736. }
  737. void TableFormattingContext::position_row_boxes()
  738. {
  739. auto const& table_state = m_state.get(table_box());
  740. CSSPixels row_top_offset = table_state.offset.y() + table_state.padding_top + border_spacing_vertical();
  741. CSSPixels row_left_offset = table_state.border_left + table_state.padding_left + border_spacing_horizontal();
  742. for (size_t y = 0; y < m_rows.size(); y++) {
  743. auto& row = m_rows[y];
  744. auto& row_state = m_state.get_mutable(row.box);
  745. CSSPixels row_width = 0.0f;
  746. for (auto& column : m_columns) {
  747. row_width += column.used_width;
  748. }
  749. row_state.set_content_height(row.final_height);
  750. row_state.set_content_width(row_width);
  751. row_state.set_content_x(row_left_offset);
  752. row_state.set_content_y(row_top_offset);
  753. row_top_offset += row_state.content_height() + border_spacing_vertical();
  754. }
  755. CSSPixels row_group_top_offset = table_state.border_top + table_state.padding_top;
  756. CSSPixels row_group_left_offset = table_state.border_left + table_state.padding_left;
  757. for_each_child_box_matching(table_box(), is_table_row_group, [&](auto& row_group_box) {
  758. CSSPixels row_group_height = 0.0f;
  759. CSSPixels row_group_width = 0.0f;
  760. auto& row_group_box_state = m_state.get_mutable(row_group_box);
  761. row_group_box_state.set_content_x(row_group_left_offset);
  762. row_group_box_state.set_content_y(row_group_top_offset);
  763. for_each_child_box_matching(row_group_box, is_table_row, [&](auto& row) {
  764. auto const& row_state = m_state.get(row);
  765. row_group_height += row_state.border_box_height();
  766. row_group_width = max(row_group_width, row_state.border_box_width());
  767. });
  768. row_group_box_state.set_content_height(row_group_height);
  769. row_group_box_state.set_content_width(row_group_width);
  770. row_group_top_offset += row_group_height;
  771. });
  772. auto total_content_height = max(row_top_offset, row_group_top_offset) - table_state.offset.y() - table_state.padding_top;
  773. m_table_height = max(total_content_height, m_table_height);
  774. }
  775. void TableFormattingContext::position_cell_boxes()
  776. {
  777. CSSPixels left_column_offset = 0;
  778. for (auto& column : m_columns) {
  779. column.left_offset = left_column_offset;
  780. left_column_offset += column.used_width;
  781. }
  782. for (auto& cell : m_cells) {
  783. auto& cell_state = m_state.get_mutable(cell.box);
  784. auto& row_state = m_state.get(m_rows[cell.row_index].box);
  785. CSSPixels const cell_border_box_height = cell_state.content_height() + cell_state.border_box_top() + cell_state.border_box_bottom();
  786. CSSPixels const row_content_height = compute_row_content_height(cell);
  787. auto const& vertical_align = cell.box->computed_values().vertical_align();
  788. // The following image shows various alignment lines of a row:
  789. // https://www.w3.org/TR/css-tables-3/images/cell-align-explainer.png
  790. if (vertical_align.has<CSS::VerticalAlign>()) {
  791. auto height_diff = row_content_height - cell_border_box_height;
  792. switch (vertical_align.get<CSS::VerticalAlign>()) {
  793. case CSS::VerticalAlign::Middle: {
  794. cell_state.padding_top += height_diff / 2;
  795. cell_state.padding_bottom += height_diff / 2;
  796. break;
  797. }
  798. case CSS::VerticalAlign::Top: {
  799. cell_state.padding_bottom += height_diff;
  800. break;
  801. }
  802. case CSS::VerticalAlign::Bottom: {
  803. cell_state.padding_top += height_diff;
  804. break;
  805. }
  806. case CSS::VerticalAlign::Baseline: {
  807. cell_state.padding_top += m_rows[cell.row_index].baseline - cell.baseline;
  808. cell_state.padding_bottom += height_diff;
  809. break;
  810. }
  811. default:
  812. VERIFY_NOT_REACHED();
  813. }
  814. }
  815. // Compute cell position as specified by https://www.w3.org/TR/css-tables-3/#bounding-box-assignment:
  816. // left/top location is the sum of:
  817. // - for top: the height reserved for top captions (including margins), if any
  818. // - the padding-left/padding-top and border-left-width/border-top-width of the table
  819. // FIXME: Account for visibility.
  820. cell_state.offset = row_state.offset.translated(
  821. cell_state.border_box_left() + m_columns[cell.column_index].left_offset + cell.column_index * border_spacing_horizontal(),
  822. cell_state.border_box_top());
  823. }
  824. }
  825. bool TableFormattingContext::border_is_less_specific(const CSS::BorderData& a, const CSS::BorderData& b)
  826. {
  827. // Implements criteria for steps 1, 2 and 3 of border conflict resolution algorithm.
  828. static HashMap<CSS::LineStyle, unsigned> const line_style_score = {
  829. { CSS::LineStyle::Inset, 0 },
  830. { CSS::LineStyle::Groove, 1 },
  831. { CSS::LineStyle::Outset, 2 },
  832. { CSS::LineStyle::Ridge, 3 },
  833. { CSS::LineStyle::Dotted, 4 },
  834. { CSS::LineStyle::Dashed, 5 },
  835. { CSS::LineStyle::Solid, 6 },
  836. { CSS::LineStyle::Double, 7 },
  837. };
  838. if (a.line_style == CSS::LineStyle::Hidden) {
  839. return false;
  840. }
  841. if (b.line_style == CSS::LineStyle::Hidden) {
  842. return true;
  843. }
  844. if (a.line_style == CSS::LineStyle::None) {
  845. return true;
  846. }
  847. if (b.line_style == CSS::LineStyle::None) {
  848. return false;
  849. }
  850. if (a.width > b.width) {
  851. return false;
  852. } else if (a.width < b.width) {
  853. return true;
  854. }
  855. if (*line_style_score.get(a.line_style) > *line_style_score.get(b.line_style)) {
  856. return false;
  857. } else if (*line_style_score.get(a.line_style) < *line_style_score.get(b.line_style)) {
  858. return true;
  859. }
  860. return false;
  861. }
  862. static const CSS::BorderData& winning_border_style(const CSS::BorderData& a, const CSS::BorderData& b)
  863. {
  864. return TableFormattingContext::border_is_less_specific(a, b) ? b : a;
  865. }
  866. const CSS::BorderData& TableFormattingContext::border_data_conflicting_edge(TableFormattingContext::ConflictingEdge const& conflicting_edge)
  867. {
  868. auto const& style = conflicting_edge.element->computed_values();
  869. switch (conflicting_edge.side) {
  870. case ConflictingSide::Top: {
  871. return style.border_top();
  872. }
  873. case ConflictingSide::Bottom: {
  874. return style.border_bottom();
  875. }
  876. case ConflictingSide::Left: {
  877. return style.border_left();
  878. }
  879. case ConflictingSide::Right: {
  880. return style.border_right();
  881. }
  882. default: {
  883. VERIFY_NOT_REACHED();
  884. }
  885. }
  886. }
  887. void TableFormattingContext::border_conflict_resolution()
  888. {
  889. // Partially implements border conflict resolution, as described in
  890. // https://www.w3.org/TR/CSS22/tables.html#border-conflict-resolution
  891. BorderConflictFinder finder(this);
  892. for (auto& cell : m_cells) {
  893. auto& cell_state = m_state.get_mutable(cell.box);
  894. cell_state.set_table_cell_coordinates(
  895. Painting::PaintableBox::TableCellCoordinates {
  896. .row_index = cell.row_index,
  897. .column_index = cell.column_index,
  898. .row_span = cell.row_span,
  899. .column_span = cell.column_span });
  900. if (cell.box->computed_values().border_collapse() == CSS::BorderCollapse::Separate) {
  901. continue;
  902. }
  903. // Execute steps 1, 2 and 3 of the algorithm for each edge.
  904. Painting::BordersData override_borders_data;
  905. auto const& cell_style = cell.box->computed_values();
  906. auto winning_border_left = cell_style.border_left();
  907. for (auto const conflicting_edge : finder.conflicting_edges(cell, ConflictingSide::Left)) {
  908. winning_border_left = winning_border_style(winning_border_left, border_data_conflicting_edge(conflicting_edge));
  909. }
  910. override_borders_data.left = winning_border_left;
  911. cell_state.border_left = winning_border_left.width;
  912. auto winning_border_right = cell_style.border_right();
  913. for (auto const conflicting_edge : finder.conflicting_edges(cell, ConflictingSide::Right)) {
  914. winning_border_right = winning_border_style(winning_border_right, border_data_conflicting_edge(conflicting_edge));
  915. }
  916. override_borders_data.right = winning_border_right;
  917. cell_state.border_right = winning_border_right.width;
  918. auto winning_border_top = cell_style.border_top();
  919. for (auto const conflicting_edge : finder.conflicting_edges(cell, ConflictingSide::Top)) {
  920. winning_border_top = winning_border_style(winning_border_top, border_data_conflicting_edge(conflicting_edge));
  921. }
  922. override_borders_data.top = winning_border_top;
  923. cell_state.border_top = winning_border_top.width;
  924. auto winning_border_bottom = cell_style.border_bottom();
  925. for (auto const conflicting_edge : finder.conflicting_edges(cell, ConflictingSide::Bottom)) {
  926. winning_border_bottom = winning_border_style(winning_border_bottom, border_data_conflicting_edge(conflicting_edge));
  927. }
  928. override_borders_data.bottom = winning_border_bottom;
  929. cell_state.border_bottom = override_borders_data.bottom.width;
  930. // FIXME: 4. If border styles differ only in color, then a style set on a cell wins over one on a row, which wins over a
  931. // row group, column, column group and, lastly, table. When two elements of the same type conflict, then the one
  932. // further to the left (if the table's 'direction' is 'ltr'; right, if it is 'rtl') and further to the top wins.
  933. cell_state.set_override_borders_data(override_borders_data);
  934. }
  935. }
  936. CSSPixels TableFormattingContext::compute_row_content_height(Cell const& cell) const
  937. {
  938. auto& row_state = m_state.get(m_rows[cell.row_index].box);
  939. if (cell.row_span == 1) {
  940. return row_state.content_height();
  941. }
  942. // The height of a cell is the sum of all spanned rows, as described in
  943. // https://www.w3.org/TR/css-tables-3/#bounding-box-assignment
  944. // When the row span is greater than 1, the borders of inner rows within the span have to be
  945. // included in the content height of the spanning cell. First top and final bottom borders are
  946. // excluded to be consistent with the handling of row span 1 case above, which uses the content
  947. // height (no top and bottom borders) of the row.
  948. CSSPixels span_height = 0;
  949. for (size_t i = 0; i < cell.row_span; ++i) {
  950. auto const& row_state = m_state.get(m_rows[cell.row_index + i].box);
  951. if (i == 0) {
  952. span_height += row_state.content_height() + row_state.border_box_bottom();
  953. } else if (i == cell.row_span - 1) {
  954. span_height += row_state.border_box_top() + row_state.content_height();
  955. } else {
  956. span_height += row_state.border_box_height();
  957. }
  958. }
  959. // Compute cell height as specified by https://www.w3.org/TR/css-tables-3/#bounding-box-assignment:
  960. // width/height is the sum of:
  961. // - the widths/heights of all spanned visible columns/rows
  962. // - the horizontal/vertical border-spacing times the amount of spanned visible columns/rows minus one
  963. // FIXME: Account for visibility.
  964. span_height += (cell.row_span - 1) * border_spacing_vertical();
  965. return span_height;
  966. }
  967. TableFormattingContext::BorderConflictFinder::BorderConflictFinder(TableFormattingContext const* context)
  968. : m_context(context)
  969. {
  970. collect_conflicting_col_elements();
  971. collect_conflicting_row_group_elements();
  972. }
  973. void TableFormattingContext::BorderConflictFinder::collect_conflicting_col_elements()
  974. {
  975. m_col_elements_by_index.resize(m_context->m_columns.size());
  976. for (auto* child = m_context->table_box().first_child(); child; child = child->next_sibling()) {
  977. if (!child->display().is_table_column_group()) {
  978. continue;
  979. }
  980. size_t column_index = 0;
  981. for (auto* child_of_column_group = child->first_child(); child_of_column_group; child_of_column_group = child_of_column_group->next_sibling()) {
  982. VERIFY(child_of_column_group->display().is_table_column());
  983. auto const& col_node = static_cast<HTML::HTMLTableColElement const&>(*child_of_column_group->dom_node());
  984. unsigned span = col_node.attribute(HTML::AttributeNames::span).to_uint().value_or(1);
  985. for (size_t i = column_index; i < column_index + span; ++i) {
  986. m_col_elements_by_index[i] = child_of_column_group;
  987. }
  988. column_index += span;
  989. }
  990. }
  991. }
  992. void TableFormattingContext::BorderConflictFinder::collect_conflicting_row_group_elements()
  993. {
  994. m_row_group_elements_by_index.resize(m_context->m_rows.size());
  995. size_t current_row_index = 0;
  996. for_each_child_box_matching(m_context->table_box(), is_table_row_group, [&](auto& row_group_box) {
  997. auto start_row_index = current_row_index;
  998. size_t row_count = 0;
  999. for_each_child_box_matching(row_group_box, is_table_row, [&](auto&) {
  1000. ++row_count;
  1001. });
  1002. for_each_child_box_matching(row_group_box, is_table_row, [&](auto&) {
  1003. m_row_group_elements_by_index[current_row_index] = RowGroupInfo {
  1004. .row_group = &row_group_box, .start_index = start_row_index, .row_count = row_count
  1005. };
  1006. ++current_row_index;
  1007. return IterationDecision::Continue;
  1008. });
  1009. });
  1010. }
  1011. Vector<TableFormattingContext::ConflictingEdge> TableFormattingContext::BorderConflictFinder::conflicting_edges(
  1012. Cell const& cell, TableFormattingContext::ConflictingSide edge) const
  1013. {
  1014. Vector<ConflictingEdge> result = {};
  1015. if (cell.column_index >= cell.column_span && edge == ConflictingSide::Left) {
  1016. auto maybe_cell_to_left = m_context->m_cells_by_coordinate[cell.row_index][cell.column_index - cell.column_span];
  1017. if (maybe_cell_to_left.has_value()) {
  1018. result.append({ maybe_cell_to_left->box, ConflictingSide::Right });
  1019. }
  1020. }
  1021. if (cell.column_index + cell.column_span < m_context->m_cells_by_coordinate[cell.row_index].size() && edge == ConflictingSide::Right) {
  1022. auto maybe_cell_to_right = m_context->m_cells_by_coordinate[cell.row_index][cell.column_index + cell.column_span];
  1023. if (maybe_cell_to_right.has_value()) {
  1024. result.append({ maybe_cell_to_right->box, ConflictingSide::Left });
  1025. }
  1026. }
  1027. if (cell.row_index >= cell.row_span && edge == ConflictingSide::Top) {
  1028. auto maybe_cell_above = m_context->m_cells_by_coordinate[cell.row_index - cell.row_span][cell.column_index];
  1029. if (maybe_cell_above.has_value()) {
  1030. result.append({ maybe_cell_above->box, ConflictingSide::Bottom });
  1031. }
  1032. }
  1033. if (cell.row_index + cell.row_span < m_context->m_cells_by_coordinate.size() && edge == ConflictingSide::Bottom) {
  1034. auto maybe_cell_below = m_context->m_cells_by_coordinate[cell.row_index + cell.row_span][cell.column_index];
  1035. if (maybe_cell_below.has_value()) {
  1036. result.append({ maybe_cell_below->box, ConflictingSide::Top });
  1037. }
  1038. }
  1039. if (edge == ConflictingSide::Top) {
  1040. result.append({ m_context->m_rows[cell.row_index].box, ConflictingSide::Top });
  1041. }
  1042. if (edge == ConflictingSide::Bottom) {
  1043. result.append({ m_context->m_rows[cell.row_index].box, ConflictingSide::Bottom });
  1044. }
  1045. if (cell.row_index >= cell.row_span && edge == ConflictingSide::Top) {
  1046. result.append({ m_context->m_rows[cell.row_index - cell.row_span].box, ConflictingSide::Bottom });
  1047. }
  1048. if (cell.row_index + cell.row_span < m_context->m_rows.size() && edge == ConflictingSide::Bottom) {
  1049. result.append({ m_context->m_rows[cell.row_index + cell.row_span].box, ConflictingSide::Top });
  1050. }
  1051. auto const& maybe_row_group = m_row_group_elements_by_index[cell.row_index];
  1052. if (maybe_row_group.has_value() && cell.row_index == maybe_row_group->start_index && edge == ConflictingSide::Top) {
  1053. result.append({ maybe_row_group->row_group, ConflictingSide::Top });
  1054. }
  1055. if (cell.row_index >= cell.row_span) {
  1056. auto const& maybe_row_group_above = m_row_group_elements_by_index[cell.row_index - cell.row_span];
  1057. if (maybe_row_group_above.has_value() && cell.row_index == maybe_row_group_above->start_index + maybe_row_group_above->row_count && edge == ConflictingSide::Top) {
  1058. result.append({ maybe_row_group_above->row_group, ConflictingSide::Bottom });
  1059. }
  1060. }
  1061. if (maybe_row_group.has_value() && cell.row_index == maybe_row_group->start_index + maybe_row_group->row_count - 1 && edge == ConflictingSide::Bottom) {
  1062. result.append({ maybe_row_group->row_group, ConflictingSide::Bottom });
  1063. }
  1064. if (cell.row_index + cell.row_span < m_row_group_elements_by_index.size()) {
  1065. auto const& maybe_row_group_below = m_row_group_elements_by_index[cell.row_index + cell.row_span];
  1066. if (maybe_row_group_below.has_value() && cell.row_index + cell.row_span == maybe_row_group_below->start_index && edge == ConflictingSide::Bottom) {
  1067. result.append({ maybe_row_group_below->row_group, ConflictingSide::Top });
  1068. }
  1069. }
  1070. if (m_col_elements_by_index[cell.column_index] && edge == ConflictingSide::Left) {
  1071. result.append({ m_col_elements_by_index[cell.column_index], ConflictingSide::Left });
  1072. }
  1073. if (cell.column_index >= cell.column_span && m_col_elements_by_index[cell.column_index - cell.column_span] && edge == ConflictingSide::Left) {
  1074. result.append({ m_col_elements_by_index[cell.column_index - cell.column_span], ConflictingSide::Right });
  1075. }
  1076. if (m_col_elements_by_index[cell.column_index] && edge == ConflictingSide::Right) {
  1077. result.append({ m_col_elements_by_index[cell.column_index], ConflictingSide::Right });
  1078. }
  1079. if (cell.column_index + cell.column_span < m_col_elements_by_index.size() && m_col_elements_by_index[cell.column_index + cell.column_span] && edge == ConflictingSide::Right) {
  1080. result.append({ m_col_elements_by_index[cell.column_index + cell.column_span], ConflictingSide::Left });
  1081. }
  1082. if (cell.row_index == 0 && edge == ConflictingSide::Top) {
  1083. if (m_col_elements_by_index[cell.column_index]) {
  1084. result.append({ m_col_elements_by_index[cell.column_index], ConflictingSide::Top });
  1085. }
  1086. result.append({ &m_context->table_box(), ConflictingSide::Top });
  1087. }
  1088. if (cell.row_index == m_context->m_rows.size() - 1 && edge == ConflictingSide::Bottom) {
  1089. if (m_col_elements_by_index[cell.column_index]) {
  1090. result.append({ m_col_elements_by_index[cell.column_index], ConflictingSide::Bottom });
  1091. }
  1092. result.append({ &m_context->table_box(), ConflictingSide::Bottom });
  1093. }
  1094. if (cell.column_index == 0 && edge == ConflictingSide::Left) {
  1095. result.append({ m_context->m_rows[cell.row_index].box, ConflictingSide::Left });
  1096. if (m_row_group_elements_by_index[cell.row_index].has_value()) {
  1097. result.append({ m_row_group_elements_by_index[cell.row_index]->row_group, ConflictingSide::Left });
  1098. }
  1099. result.append({ &m_context->table_box(), ConflictingSide::Left });
  1100. }
  1101. if (cell.column_index == m_context->m_columns.size() - 1 && edge == ConflictingSide::Right) {
  1102. result.append({ m_context->m_rows[cell.row_index].box, ConflictingSide::Right });
  1103. if (m_row_group_elements_by_index[cell.row_index].has_value()) {
  1104. result.append({ m_row_group_elements_by_index[cell.row_index]->row_group, ConflictingSide::Right });
  1105. }
  1106. result.append({ &m_context->table_box(), ConflictingSide::Right });
  1107. }
  1108. return result;
  1109. }
  1110. void TableFormattingContext::run(Box const& box, LayoutMode layout_mode, AvailableSpace const& available_space)
  1111. {
  1112. m_available_space = available_space;
  1113. auto total_captions_height = run_caption_layout(layout_mode, CSS::CaptionSide::Top);
  1114. // Determine the number of rows/columns the table requires.
  1115. calculate_row_column_grid(box);
  1116. border_conflict_resolution();
  1117. // Compute the minimum width of each column.
  1118. compute_cell_measures(available_space);
  1119. compute_table_measures<Column>();
  1120. // https://www.w3.org/TR/css-tables-3/#row-layout
  1121. // Since during row layout the specified heights of cells in the row were ignored and cells that were spanning more than one rows
  1122. // have not been sized correctly, their height will need to be eventually distributed to the set of rows they spanned. This is done
  1123. // by running the same algorithm as the column measurement, with the span=1 value being initialized (for min-content) with the largest
  1124. // of the resulting height of the previous row layout, the height specified on the corresponding table-row (if any), and the largest
  1125. // height specified on cells that span this row only (the algorithm starts by considering cells of span 2 on top of that assignment).
  1126. compute_table_measures<Row>();
  1127. // Compute the width of the table.
  1128. compute_table_width();
  1129. if (available_space.width.is_intrinsic_sizing_constraint() && !available_space.height.is_intrinsic_sizing_constraint()) {
  1130. return;
  1131. }
  1132. // Distribute the width of the table among columns.
  1133. distribute_width_to_columns();
  1134. compute_table_height(layout_mode);
  1135. distribute_height_to_rows();
  1136. position_row_boxes();
  1137. position_cell_boxes();
  1138. m_state.get_mutable(table_box()).set_content_height(m_table_height);
  1139. total_captions_height += run_caption_layout(layout_mode, CSS::CaptionSide::Bottom);
  1140. // Table captions are positioned between the table margins and its borders (outside the grid box borders) as described in
  1141. // https://www.w3.org/TR/css-tables-3/#bounding-box-assignment
  1142. // A visual representation of this model can be found at https://www.w3.org/TR/css-tables-3/images/table_container.png
  1143. m_state.get_mutable(table_box()).margin_bottom += total_captions_height;
  1144. m_automatic_content_height = m_table_height;
  1145. }
  1146. CSSPixels TableFormattingContext::automatic_content_width() const
  1147. {
  1148. return greatest_child_width(context_box());
  1149. }
  1150. CSSPixels TableFormattingContext::automatic_content_height() const
  1151. {
  1152. return m_automatic_content_height;
  1153. }
  1154. template<>
  1155. size_t TableFormattingContext::cell_span<TableFormattingContext::Row>(TableFormattingContext::Cell const& cell)
  1156. {
  1157. return cell.row_span;
  1158. }
  1159. template<>
  1160. size_t TableFormattingContext::cell_span<TableFormattingContext::Column>(TableFormattingContext::Cell const& cell)
  1161. {
  1162. return cell.column_span;
  1163. }
  1164. template<>
  1165. size_t TableFormattingContext::cell_index<TableFormattingContext::Row>(TableFormattingContext::Cell const& cell)
  1166. {
  1167. return cell.row_index;
  1168. }
  1169. template<>
  1170. size_t TableFormattingContext::cell_index<TableFormattingContext::Column>(TableFormattingContext::Cell const& cell)
  1171. {
  1172. return cell.column_index;
  1173. }
  1174. template<>
  1175. CSSPixels TableFormattingContext::cell_min_size<TableFormattingContext::Row>(TableFormattingContext::Cell const& cell)
  1176. {
  1177. return cell.outer_min_height;
  1178. }
  1179. template<>
  1180. CSSPixels TableFormattingContext::cell_min_size<TableFormattingContext::Column>(TableFormattingContext::Cell const& cell)
  1181. {
  1182. return cell.outer_min_width;
  1183. }
  1184. template<>
  1185. CSSPixels TableFormattingContext::cell_max_size<TableFormattingContext::Row>(TableFormattingContext::Cell const& cell)
  1186. {
  1187. return cell.outer_max_height;
  1188. }
  1189. template<>
  1190. CSSPixels TableFormattingContext::cell_max_size<TableFormattingContext::Column>(TableFormattingContext::Cell const& cell)
  1191. {
  1192. return cell.outer_max_width;
  1193. }
  1194. template<>
  1195. CSSPixels TableFormattingContext::border_spacing<TableFormattingContext::Row>()
  1196. {
  1197. return border_spacing_vertical();
  1198. }
  1199. template<>
  1200. CSSPixels TableFormattingContext::border_spacing<TableFormattingContext::Column>()
  1201. {
  1202. return border_spacing_horizontal();
  1203. }
  1204. CSSPixels TableFormattingContext::border_spacing_horizontal() const
  1205. {
  1206. auto const& computed_values = table_box().computed_values();
  1207. // When a table is laid out in collapsed-borders mode, the border-spacing of the table-root is ignored (as if it was set to 0px):
  1208. // https://www.w3.org/TR/css-tables-3/#collapsed-style-overrides
  1209. if (computed_values.border_collapse() == CSS::BorderCollapse::Collapse)
  1210. return 0;
  1211. return computed_values.border_spacing_horizontal().to_px(table_box());
  1212. }
  1213. CSSPixels TableFormattingContext::border_spacing_vertical() const
  1214. {
  1215. auto const& computed_values = table_box().computed_values();
  1216. // When a table is laid out in collapsed-borders mode, the border-spacing of the table-root is ignored (as if it was set to 0px):
  1217. // https://www.w3.org/TR/css-tables-3/#collapsed-style-overrides
  1218. if (computed_values.border_collapse() == CSS::BorderCollapse::Collapse)
  1219. return 0;
  1220. return computed_values.border_spacing_vertical().to_px(table_box());
  1221. }
  1222. template<>
  1223. Vector<TableFormattingContext::Row>& TableFormattingContext::table_rows_or_columns()
  1224. {
  1225. return m_rows;
  1226. }
  1227. template<>
  1228. Vector<TableFormattingContext::Column>& TableFormattingContext::table_rows_or_columns()
  1229. {
  1230. return m_columns;
  1231. }
  1232. }