RGBCube/serenity
1
Fork 0
mirror of https://github.com/RGBCube/serenity synced 2025-07-26 07:47:37 +00:00
Code Issues Activity Actions

LibWeb: Parse "display: flex" and create BlockBox layout nodes for them

Browse source 
I'm not 100% sure that BlockBox is the right layout node for flex
containers, but it's the most obviously fitting one we already have.
This commit is contained in:
Andreas Kling 2021-01-18 17:32:34 +01:00
parent 6715ca3e16
commit 140463e833
5 changed files with 10 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

1
Userland/Libraries/LibWeb/CSS/Identifiers.json
View file

@ -70,6 +70,7 @@
"dotted",
"double",
"fixed",
"flex",
"full-size-kana",
"full-width",
"groove",

2
Userland/Libraries/LibWeb/CSS/StyleProperties.cpp
View file

@ -410,6 +410,8 @@ CSS::Display StyleProperties::display() const
return CSS::Display::TableHeaderGroup;
case CSS::ValueID::TableFooterGroup:
return CSS::Display::TableFooterGroup;
case CSS::ValueID::Flex:
return CSS::Display::Flex;
default:
return CSS::Display::Block;
}

1
Userland/Libraries/LibWeb/CSS/StyleValue.h
View file

@ -90,6 +90,7 @@ enum class Display {
TableColumn,
TableColumnGroup,
TableCaption,
Flex,
};
enum class WhiteSpace {

2
Userland/Libraries/LibWeb/DOM/Element.cpp
View file

@ -147,6 +147,8 @@ RefPtr<Layout::Node> Element::create_layout_node()
inline_block->set_inline(true);
return inline_block;
}
if (display == CSS::Display::Flex)
return adopt(*new Layout::BlockBox(document(), this, move(style)));
ASSERT_NOT_REACHED();
}

4
Userland/Libraries/LibWeb/Dump.cpp
View file

@ -128,6 +128,7 @@ void dump_tree(StringBuilder& builder, const Layout::Node& layout_node, bool sho
const char* inline_block_color_on = "";
const char* line_box_color_on = "";
const char* fragment_color_on = "";
const char* flex_color_on = "";
const char* color_off = "";
if (interactive) {
@ -138,6 +139,7 @@ void dump_tree(StringBuilder& builder, const Layout::Node& layout_node, bool sho
inline_block_color_on = "\033[36;1m";
line_box_color_on = "\033[34;1m";
fragment_color_on = "\033[35;1m";
flex_color_on = "\033[34;1m";
color_off = "\033[0m";
}
@ -179,6 +181,8 @@ void dump_tree(StringBuilder& builder, const Layout::Node& layout_node, bool sho
builder.appendff(" {}floating{}", floating_color_on, color_off);
if (box.is_inline_block())
builder.appendff(" {}inline-block{}", inline_block_color_on, color_off);
if (box.computed_values().display() == CSS::Display::Flex)
builder.appendff(" {}flex{}", flex_color_on, color_off);
if (show_box_model) {
// Dump the horizontal box properties