RGBCube/serenity
1
Fork 0
mirror of https://github.com/RGBCube/serenity synced 2025-07-26 18:07:35 +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", "dotted",
"double", "double",
"fixed", "fixed",
"flex",
"full-size-kana", "full-size-kana",
"full-width", "full-width",
"groove", "groove",

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

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

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

@ -90,6 +90,7 @@ enum class Display {
TableColumn, TableColumn,
TableColumnGroup, TableColumnGroup,
TableCaption, TableCaption,
Flex,
}; };
enum class WhiteSpace { 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); inline_block->set_inline(true);
return inline_block; return inline_block;
} }
if (display == CSS::Display::Flex)
return adopt(*new Layout::BlockBox(document(), this, move(style)));
ASSERT_NOT_REACHED(); 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* inline_block_color_on = "";
const char* line_box_color_on = ""; const char* line_box_color_on = "";
const char* fragment_color_on = ""; const char* fragment_color_on = "";
const char* flex_color_on = "";
const char* color_off = ""; const char* color_off = "";
if (interactive) { 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"; inline_block_color_on = "\033[36;1m";
line_box_color_on = "\033[34;1m"; line_box_color_on = "\033[34;1m";
fragment_color_on = "\033[35;1m"; fragment_color_on = "\033[35;1m";
flex_color_on = "\033[34;1m";
color_off = "\033[0m"; 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); builder.appendff(" {}floating{}", floating_color_on, color_off);
if (box.is_inline_block()) if (box.is_inline_block())
builder.appendff(" {}inline-block{}", inline_block_color_on, color_off); 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) { if (show_box_model) {
// Dump the horizontal box properties // Dump the horizontal box properties