TableFormattingContext.cpp 60 KB

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