RGBCube/serenity
1
Fork 0
mirror of https://github.com/RGBCube/serenity synced 2025-07-25 04:27:43 +00:00
Code Issues Activity Actions

LibWeb: Begin formatting the grid

Browse source 
This is a really starter attempt at formatting the grid. It doesn't yet
take into account the computed_values of grid-template-rows, nor the
values in grid-column-start and like CSS properties.

But these changes are a start and make it so the examples in
display-grid.html work.

To be fleshed out further..
This commit is contained in:
martinfalisse 2022-08-23 20:17:07 +02:00 • committed by Andreas Kling
parent 7bb3a8d646
commit 79a630adef
1 changed files with 67 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

67
Userland/Libraries/LibWeb/Layout/GridFormattingContext.cpp
View file

@ -4,6 +4,7 @@
* SPDX-License-Identifier: BSD-2-Clause
*/
#include <LibWeb/DOM/Node.h>
#include <LibWeb/Layout/Box.h>
#include <LibWeb/Layout/GridFormattingContext.h>
@ -18,9 +19,75 @@ GridFormattingContext::~GridFormattingContext() = default;
void GridFormattingContext::run(Box const& box, LayoutMode)
{
auto should_skip_is_anonymous_text_run = [&](Box& child_box) -> bool {
if (child_box.is_anonymous() && !child_box.first_child_of_type<BlockContainer>()) {
bool contains_only_white_space = true;
child_box.for_each_in_subtree([&](auto const& node) {
if (!is<TextNode>(node) || !static_cast<TextNode const&>(node).dom_node().data().is_whitespace()) {
contains_only_white_space = false;
return IterationDecision::Break;
}
return IterationDecision::Continue;
});
if (contains_only_white_space)
return true;
}
return false;
};
auto number_of_columns = (int)box.computed_values().grid_template_columns().size();
struct GridRow {
float height { 0 };
Vector<Box&> boxes;
};
Vector<GridRow> grid_rows;
auto current_column_count = 0;
box.for_each_child_of_type<Box>([&](Box& child_box) {
if (should_skip_is_anonymous_text_run(child_box))
return IterationDecision::Continue;
if (current_column_count == 0)
grid_rows.append(GridRow());
GridRow& grid_row = grid_rows.last();
grid_row.boxes.append(child_box);
auto& child_box_state = m_state.get_mutable(child_box);
if (child_box_state.content_height() > grid_row.height)
grid_row.height = child_box_state.content_height();
(void)layout_inside(child_box, LayoutMode::Normal);
if (child_box_state.content_height() > grid_row.height)
grid_row.height = child_box_state.content_height();
current_column_count++;
if (current_column_count == number_of_columns)
current_column_count = 0;
return IterationDecision::Continue;
});
auto& box_state = m_state.get_mutable(box);
float current_y_position = 0;
current_column_count = 0;
for (auto& grid_row : grid_rows) {
for (auto& child_box : grid_row.boxes) {
if (should_skip_is_anonymous_text_run(child_box))
continue;
auto& child_box_state = m_state.get_mutable(child_box);
// FIXME: instead of dividing the parent width equally between the columns, should use
// the values in the GridTrackSize objects.
child_box_state.set_content_width(box_state.content_width() / number_of_columns);
child_box_state.set_content_height(grid_row.height);
child_box_state.offset = { current_column_count * (box_state.content_width() / number_of_columns), current_y_position };
current_column_count++;
if (current_column_count == number_of_columns) {
current_y_position += grid_row.height;
current_column_count = 0;
}
continue;
}
}
}
}