TableFormattingContext.cpp 57 KB

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