TableFormattingContext.cpp 19 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455
  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/Layout/Box.h>
  9. #include <LibWeb/Layout/InlineFormattingContext.h>
  10. #include <LibWeb/Layout/TableBox.h>
  11. #include <LibWeb/Layout/TableCellBox.h>
  12. #include <LibWeb/Layout/TableFormattingContext.h>
  13. #include <LibWeb/Layout/TableRowBox.h>
  14. #include <LibWeb/Layout/TableRowGroupBox.h>
  15. struct GridPosition {
  16. size_t x;
  17. size_t y;
  18. };
  19. inline bool operator==(GridPosition const& a, GridPosition const& b)
  20. {
  21. return a.x == b.x && a.y == b.y;
  22. }
  23. namespace AK {
  24. template<>
  25. struct Traits<GridPosition> : public GenericTraits<GridPosition> {
  26. static unsigned hash(GridPosition const& key)
  27. {
  28. return pair_int_hash(key.x, key.y);
  29. }
  30. };
  31. }
  32. namespace Web::Layout {
  33. TableFormattingContext::TableFormattingContext(LayoutState& state, BlockContainer const& root, FormattingContext* parent)
  34. : FormattingContext(Type::Table, state, root, parent)
  35. {
  36. }
  37. TableFormattingContext::~TableFormattingContext() = default;
  38. void TableFormattingContext::calculate_row_column_grid(Box const& box)
  39. {
  40. // Implements https://html.spec.whatwg.org/multipage/tables.html#forming-a-table
  41. HashMap<GridPosition, bool> grid;
  42. size_t x_width = 0, y_height = 0;
  43. size_t x_current = 0, y_current = 0;
  44. auto process_row = [&](auto& row) {
  45. if (y_height == y_current)
  46. y_height++;
  47. x_current = 0;
  48. while (x_current < x_width && grid.contains(GridPosition { x_current, y_current }))
  49. x_current++;
  50. for (auto* child = row.first_child(); child; child = child->next_sibling()) {
  51. if (is<TableCellBox>(*child)) {
  52. Box* box = static_cast<Box*>(child);
  53. if (x_current == x_width)
  54. x_width++;
  55. const size_t colspan = static_cast<TableCellBox*>(child)->colspan();
  56. const size_t rowspan = static_cast<TableCellBox*>(child)->rowspan();
  57. if (x_width < x_current + colspan)
  58. x_width = x_current + colspan;
  59. if (y_height < y_current + rowspan)
  60. y_height = y_current + rowspan;
  61. for (size_t y = y_current; y < y_current + rowspan; y++)
  62. for (size_t x = x_current; x < x_current + colspan; x++)
  63. grid.set(GridPosition { x, y }, true);
  64. m_cells.append(Cell { *box, x_current, y_current, colspan, rowspan });
  65. x_current += colspan;
  66. }
  67. }
  68. m_rows.append(Row { row });
  69. y_current++;
  70. };
  71. box.template for_each_child_of_type<TableRowGroupBox>([&](auto& row_group_box) {
  72. row_group_box.template for_each_child_of_type<TableRowBox>([&](auto& row) {
  73. process_row(row);
  74. return IterationDecision::Continue;
  75. });
  76. });
  77. box.template for_each_child_of_type<TableRowBox>([&](auto& row) {
  78. process_row(row);
  79. return IterationDecision::Continue;
  80. });
  81. m_columns.resize(x_width);
  82. }
  83. void TableFormattingContext::compute_table_measures()
  84. {
  85. for (auto& cell : m_cells) {
  86. auto width_of_containing_block = m_available_space->width.to_px();
  87. auto width_of_containing_block_as_length = CSS::Length::make_px(width_of_containing_block);
  88. auto& computed_values = cell.box.computed_values();
  89. CSSPixels padding_left = computed_values.padding().left().resolved(cell.box, width_of_containing_block_as_length).to_px(cell.box);
  90. CSSPixels padding_right = computed_values.padding().right().resolved(cell.box, width_of_containing_block_as_length).to_px(cell.box);
  91. auto is_left_most_cell = cell.column_index == 0;
  92. auto is_right_most_cell = cell.column_index == m_columns.size() - 1;
  93. auto should_hide_borders = cell.box.computed_values().border_collapse() == CSS::BorderCollapse::Collapse;
  94. CSSPixels border_left = should_hide_borders && !is_left_most_cell ? 0 : computed_values.border_left().width;
  95. CSSPixels border_right = should_hide_borders && !is_right_most_cell ? 0 : computed_values.border_right().width;
  96. CSSPixels width = computed_values.width().resolved(cell.box, width_of_containing_block_as_length).to_px(cell.box);
  97. auto cell_intrinsic_offsets = padding_left + padding_right + border_left + border_right;
  98. auto min_content_width = calculate_min_content_width(cell.box);
  99. auto max_content_width = calculate_max_content_width(cell.box);
  100. CSSPixels min_width = min_content_width;
  101. if (!computed_values.min_width().is_auto())
  102. min_width = max(min_width, computed_values.min_width().resolved(cell.box, width_of_containing_block_as_length).to_px(cell.box));
  103. CSSPixels max_width = computed_values.width().is_auto() ? max_content_width.value() : width;
  104. if (!computed_values.max_width().is_none())
  105. max_width = min(max_width, computed_values.max_width().resolved(cell.box, width_of_containing_block_as_length).to_px(cell.box));
  106. auto computed_width = computed_values.width();
  107. if (computed_width.is_percentage()) {
  108. m_columns[cell.column_index].type = ColumnType::Percent;
  109. m_columns[cell.column_index].percentage_width = max(m_columns[cell.column_index].percentage_width, computed_width.percentage().value());
  110. } else if (computed_width.is_length()) {
  111. m_columns[cell.column_index].type = ColumnType::Pixel;
  112. }
  113. auto cell_outer_min_content_width = min_width + cell_intrinsic_offsets;
  114. auto cell_outer_max_content_width = max(max(width, min_width), max_width) + cell_intrinsic_offsets;
  115. m_columns[cell.column_index].min_width = max(m_columns[cell.column_index].min_width, cell_outer_min_content_width);
  116. m_columns[cell.column_index].max_width = max(m_columns[cell.column_index].max_width, cell_outer_max_content_width);
  117. }
  118. }
  119. void TableFormattingContext::compute_table_width()
  120. {
  121. auto const& table_box = context_box();
  122. auto& table_box_state = m_state.get_mutable(table_box);
  123. auto& computed_values = table_box.computed_values();
  124. CSSPixels width_of_table_containing_block = m_state.get(*table_box.containing_block()).content_width();
  125. // The row/column-grid width minimum (GRIDMIN) width is the sum of the min-content width
  126. // of all the columns plus cell spacing or borders.
  127. CSSPixels grid_min = 0.0f;
  128. for (auto& column : m_columns) {
  129. grid_min += column.min_width;
  130. }
  131. // The row/column-grid width maximum (GRIDMAX) width is the sum of the max-content width
  132. // of all the columns plus cell spacing or borders.
  133. CSSPixels grid_max = 0.0f;
  134. for (auto& column : m_columns) {
  135. grid_max += column.max_width;
  136. }
  137. // The used min-width of a table is the greater of the resolved min-width, CAPMIN, and GRIDMIN.
  138. auto used_min_width = grid_min;
  139. if (!computed_values.min_width().is_auto()) {
  140. used_min_width = max(used_min_width, computed_values.min_width().resolved(table_box, CSS::Length::make_px(width_of_table_containing_block)).to_px(table_box));
  141. }
  142. CSSPixels used_width;
  143. if (computed_values.width().is_auto()) {
  144. // If the table-root has 'width: auto', the used width is the greater of
  145. // min(GRIDMAX, the table’s containing block width), the used min-width of the table.
  146. used_width = max(min(grid_max, width_of_table_containing_block), used_min_width);
  147. table_box_state.set_content_width(used_width);
  148. } else {
  149. // If the table-root’s width property has a computed value (resolving to
  150. // resolved-table-width) other than auto, the used width is the greater
  151. // of resolved-table-width, and the used min-width of the table.
  152. CSSPixels resolved_table_width = computed_values.width().resolved(table_box, CSS::Length::make_px(width_of_table_containing_block)).to_px(table_box);
  153. used_width = max(resolved_table_width, used_min_width);
  154. table_box_state.set_content_width(used_width);
  155. }
  156. }
  157. void TableFormattingContext::distribute_width_to_columns()
  158. {
  159. // Implements https://www.w3.org/TR/css-tables-3/#width-distribution-algorithm
  160. CSSPixels available_width = m_state.get(context_box()).content_width();
  161. auto columns_total_used_width = [&]() {
  162. CSSPixels total_used_width = 0;
  163. for (auto& column : m_columns) {
  164. total_used_width += column.used_width;
  165. }
  166. return total_used_width;
  167. };
  168. auto column_preferred_width = [&](Column& column) {
  169. switch (column.type) {
  170. case ColumnType::Percent: {
  171. return max(column.min_width, column.percentage_width / 100 * available_width);
  172. }
  173. case ColumnType::Pixel:
  174. case ColumnType::Auto: {
  175. return column.max_width;
  176. }
  177. default: {
  178. VERIFY_NOT_REACHED();
  179. }
  180. }
  181. };
  182. auto expand_columns_to_fill_available_width = [&](ColumnType column_type) {
  183. CSSPixels remaining_available_width = available_width;
  184. CSSPixels total_preferred_width_increment = 0;
  185. for (auto& column : m_columns) {
  186. remaining_available_width -= column.used_width;
  187. if (column.type == column_type) {
  188. total_preferred_width_increment += column_preferred_width(column) - column.min_width;
  189. }
  190. }
  191. for (auto& column : m_columns) {
  192. if (column.type == column_type) {
  193. CSSPixels preferred_width_increment = column_preferred_width(column) - column.min_width;
  194. column.used_width += preferred_width_increment * remaining_available_width / total_preferred_width_increment;
  195. }
  196. }
  197. };
  198. auto shrink_columns_to_fit_available_width = [&](ColumnType column_type) {
  199. for (auto& column : m_columns) {
  200. if (column.type == column_type)
  201. column.used_width = column.min_width;
  202. }
  203. expand_columns_to_fill_available_width(column_type);
  204. };
  205. for (auto& column : m_columns) {
  206. column.used_width = column.min_width;
  207. }
  208. for (auto& column : m_columns) {
  209. if (column.type == ColumnType::Percent) {
  210. column.used_width = max(column.min_width, column.percentage_width / 100 * available_width);
  211. }
  212. }
  213. if (columns_total_used_width() > available_width) {
  214. shrink_columns_to_fit_available_width(ColumnType::Percent);
  215. return;
  216. }
  217. for (auto& column : m_columns) {
  218. if (column.type == ColumnType::Pixel) {
  219. column.used_width = column.max_width;
  220. }
  221. }
  222. if (columns_total_used_width() > available_width) {
  223. shrink_columns_to_fit_available_width(ColumnType::Pixel);
  224. return;
  225. }
  226. if (columns_total_used_width() < available_width) {
  227. expand_columns_to_fill_available_width(ColumnType::Auto);
  228. }
  229. if (columns_total_used_width() < available_width) {
  230. expand_columns_to_fill_available_width(ColumnType::Pixel);
  231. }
  232. if (columns_total_used_width() < available_width) {
  233. expand_columns_to_fill_available_width(ColumnType::Percent);
  234. }
  235. }
  236. void TableFormattingContext::determine_intrisic_size_of_table_container(AvailableSpace const& available_space)
  237. {
  238. auto const& table_box = context_box();
  239. auto& table_box_state = m_state.get_mutable(table_box);
  240. if (available_space.width.is_min_content()) {
  241. // The min-content width of a table is the width required to fit all of its columns min-content widths and its undistributable spaces.
  242. CSSPixels grid_min = 0.0f;
  243. for (auto& column : m_columns)
  244. grid_min += column.min_width;
  245. table_box_state.set_content_width(grid_min);
  246. }
  247. if (available_space.width.is_max_content()) {
  248. // The max-content width of a table is the width required to fit all of its columns max-content widths and its undistributable spaces.
  249. CSSPixels grid_max = 0.0f;
  250. for (auto& column : m_columns)
  251. grid_max += column.max_width;
  252. table_box_state.set_content_width(grid_max);
  253. }
  254. }
  255. void TableFormattingContext::run(Box const& box, LayoutMode, AvailableSpace const& available_space)
  256. {
  257. m_available_space = available_space;
  258. CSSPixels total_content_height = 0;
  259. // Determine the number of rows/columns the table requires.
  260. calculate_row_column_grid(box);
  261. // Compute the minimum width of each column.
  262. compute_table_measures();
  263. if (available_space.width.is_intrinsic_sizing_constraint()) {
  264. determine_intrisic_size_of_table_container(available_space);
  265. return;
  266. }
  267. // Compute the width of the table.
  268. compute_table_width();
  269. // Distribute the width of the table among columns.
  270. distribute_width_to_columns();
  271. CSSPixels left_column_offset = 0;
  272. for (auto& column : m_columns) {
  273. column.left_offset = left_column_offset;
  274. left_column_offset += column.used_width;
  275. }
  276. for (auto& cell : m_cells) {
  277. auto& cell_state = m_state.get_mutable(cell.box);
  278. CSSPixels span_width = 0;
  279. for (size_t i = 0; i < cell.column_span; ++i)
  280. span_width += m_columns[cell.column_index + i].used_width;
  281. auto width_of_containing_block = m_state.get(*cell.box.containing_block()).content_width();
  282. auto width_of_containing_block_as_length = CSS::Length::make_px(width_of_containing_block);
  283. cell_state.padding_top = cell.box.computed_values().padding().top().resolved(cell.box, width_of_containing_block_as_length).to_px(cell.box);
  284. cell_state.padding_bottom = cell.box.computed_values().padding().bottom().resolved(cell.box, width_of_containing_block_as_length).to_px(cell.box);
  285. cell_state.padding_left = cell.box.computed_values().padding().left().resolved(cell.box, width_of_containing_block_as_length).to_px(cell.box);
  286. cell_state.padding_right = cell.box.computed_values().padding().right().resolved(cell.box, width_of_containing_block_as_length).to_px(cell.box);
  287. auto is_top_most_cell = cell.row_index == 0;
  288. auto is_left_most_cell = cell.column_index == 0;
  289. auto is_right_most_cell = cell.column_index == m_columns.size() - 1;
  290. auto is_bottom_most_cell = cell.row_index == m_rows.size() - 1;
  291. auto should_hide_borders = cell.box.computed_values().border_collapse() == CSS::BorderCollapse::Collapse;
  292. cell_state.border_top = (should_hide_borders && is_top_most_cell) ? 0 : cell.box.computed_values().border_top().width;
  293. cell_state.border_bottom = (should_hide_borders && is_bottom_most_cell) ? 0 : cell.box.computed_values().border_bottom().width;
  294. cell_state.border_left = (should_hide_borders && is_left_most_cell) ? 0 : cell.box.computed_values().border_left().width;
  295. cell_state.border_right = (should_hide_borders && is_right_most_cell) ? 0 : cell.box.computed_values().border_right().width;
  296. cell_state.set_content_width((span_width - cell_state.border_box_left() - cell_state.border_box_right()));
  297. auto independent_formatting_context = layout_inside(cell.box, LayoutMode::Normal, cell_state.available_inner_space_or_constraints_from(available_space));
  298. VERIFY(independent_formatting_context);
  299. cell_state.set_content_height(independent_formatting_context->automatic_content_height());
  300. independent_formatting_context->parent_context_did_dimension_child_root_box();
  301. cell.baseline = box_baseline(m_state, cell.box);
  302. auto& row = m_rows[cell.row_index];
  303. row.used_width = max(row.used_width, cell_state.border_box_height());
  304. row.baseline = max(row.baseline, cell.baseline);
  305. }
  306. CSSPixels row_top_offset = 0.0f;
  307. for (size_t y = 0; y < m_rows.size(); y++) {
  308. auto& row = m_rows[y];
  309. auto& row_state = m_state.get_mutable(row.box);
  310. CSSPixels row_width = 0.0f;
  311. for (auto& column : m_columns) {
  312. row_width += column.used_width;
  313. }
  314. row_state.set_content_height(row.used_width);
  315. row_state.set_content_width(row_width);
  316. row_state.set_content_y(row_top_offset);
  317. row_top_offset += row_state.content_height();
  318. }
  319. CSSPixels row_group_top_offset = 0.0f;
  320. box.for_each_child_of_type<TableRowGroupBox>([&](auto& row_group_box) {
  321. CSSPixels row_group_height = 0.0f;
  322. CSSPixels row_group_width = 0.0f;
  323. auto& row_group_box_state = m_state.get_mutable(row_group_box);
  324. row_group_box_state.set_content_y(row_group_top_offset);
  325. CSSPixels row_top_offset = 0.0f;
  326. row_group_box.template for_each_child_of_type<TableRowBox>([&](auto& row) {
  327. auto& row_state = m_state.get_mutable(row);
  328. row_state.set_content_y(row_top_offset);
  329. row_group_height += row_state.border_box_height();
  330. row_group_width = max(row_group_width, row_state.border_box_width());
  331. row_top_offset += row_state.border_box_height();
  332. });
  333. row_group_top_offset += row_top_offset;
  334. row_group_box_state.set_content_height(row_group_height);
  335. row_group_box_state.set_content_width(row_group_width);
  336. });
  337. for (auto& cell : m_cells) {
  338. auto& cell_state = m_state.get_mutable(cell.box);
  339. auto& row_state = m_state.get(m_rows[cell.row_index].box);
  340. CSSPixels const cell_border_box_height = cell_state.content_height() + cell_state.border_box_top() + cell_state.border_box_bottom();
  341. CSSPixels const row_content_height = row_state.content_height();
  342. auto const& vertical_align = cell.box.computed_values().vertical_align();
  343. if (vertical_align.has<CSS::VerticalAlign>()) {
  344. switch (vertical_align.get<CSS::VerticalAlign>()) {
  345. case CSS::VerticalAlign::Middle: {
  346. cell_state.padding_top += (row_content_height - cell_border_box_height) / 2;
  347. cell_state.padding_bottom += (row_content_height - cell_border_box_height) / 2;
  348. break;
  349. }
  350. // FIXME: implement actual 'top' and 'bottom' support instead of fall back to 'baseline'
  351. case CSS::VerticalAlign::Top:
  352. case CSS::VerticalAlign::Bottom:
  353. case CSS::VerticalAlign::Baseline: {
  354. cell_state.padding_top += m_rows[cell.row_index].baseline - cell.baseline;
  355. cell_state.padding_bottom += row_content_height - cell_border_box_height;
  356. break;
  357. }
  358. default:
  359. VERIFY_NOT_REACHED();
  360. }
  361. }
  362. cell_state.offset = row_state.offset.translated(cell_state.border_box_left() + m_columns[cell.column_index].left_offset, cell_state.border_box_top());
  363. }
  364. m_state.get_mutable(context_box()).set_content_height(total_content_height);
  365. // FIXME: This is a total hack, we should respect the 'height' property.
  366. m_automatic_content_height = total_content_height;
  367. }
  368. CSSPixels TableFormattingContext::automatic_content_height() const
  369. {
  370. return m_automatic_content_height;
  371. }
  372. }