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

LibWeb: Create flex items for empty generated boxes

Browse source 
I couldn't find anything in the specs about this, but GMail uses
empty generated boxes (`::before` and `::after` with `content: ""`)
inside a flexbox container in order to vertically center things.

The flexbox spec tells us to not generate flex items for empty
*anonymous* boxes, so we continue not doing that, but generated boxes
(any pseudo-element box) now always produce a flex item. This probably
isn't perfect either, and we'll have to revisit it for stuff like
`::first-letter`.
This commit is contained in:
Andreas Kling 2022-09-28 17:11:23 +02:00
parent 7abb512a86
commit 9e4226f353
3 changed files with 6 additions and 1 deletions
Download patch file Download diff file Expand all files Collapse all files

2
Userland/Libraries/LibWeb/Layout/FlexFormattingContext.cpp
View file

@ -291,7 +291,7 @@ void FlexFormattingContext::generate_anonymous_flex_items()
flex_container().for_each_child_of_type<Box>([&](Box& child_box) { flex_container().for_each_child_of_type<Box>([&](Box& child_box) {
// Skip anonymous text runs that are only whitespace. // Skip anonymous text runs that are only whitespace.
if (child_box.is_anonymous() && !child_box.first_child_of_type<BlockContainer>()) { if (child_box.is_anonymous() && !child_box.is_generated() && !child_box.first_child_of_type<BlockContainer>()) {
bool contains_only_white_space = true; bool contains_only_white_space = true;
child_box.for_each_in_subtree([&](auto const& node) { child_box.for_each_in_subtree([&](auto const& node) {
if (!is<TextNode>(node) || !static_cast<TextNode const&>(node).dom_node().data().is_whitespace()) { if (!is<TextNode>(node) || !static_cast<TextNode const&>(node).dom_node().data().is_whitespace()) {

4
Userland/Libraries/LibWeb/Layout/Node.h
View file

@ -41,6 +41,9 @@ public:
DOM::Node const* dom_node() const; DOM::Node const* dom_node() const;
DOM::Node* dom_node(); DOM::Node* dom_node();
bool is_generated() const { return m_generated; }
void set_generated(bool b) { m_generated = b; }
Painting::Paintable* paintable() { return m_paintable; } Painting::Paintable* paintable() { return m_paintable; }
Painting::Paintable const* paintable() const { return m_paintable; } Painting::Paintable const* paintable() const { return m_paintable; }
void set_paintable(RefPtr<Painting::Paintable>); void set_paintable(RefPtr<Painting::Paintable>);
@ -153,6 +156,7 @@ private:
SelectionState m_selection_state { SelectionState::None }; SelectionState m_selection_state { SelectionState::None };
bool m_is_flex_item { false }; bool m_is_flex_item { false };
bool m_generated { false };
}; };
class NodeWithStyle : public Node { class NodeWithStyle : public Node {

1
Userland/Libraries/LibWeb/Layout/TreeBuilder.cpp
View file

@ -214,6 +214,7 @@ void TreeBuilder::create_layout_tree(DOM::Node& dom_node, TreeBuilder::Context&
return nullptr; return nullptr;
if (auto pseudo_element_node = DOM::Element::create_layout_node_for_display_type(document, pseudo_element_display, move(pseudo_element_style), nullptr)) { if (auto pseudo_element_node = DOM::Element::create_layout_node_for_display_type(document, pseudo_element_display, move(pseudo_element_style), nullptr)) {
pseudo_element_node->set_generated(true);
// FIXME: Handle images, and multiple values // FIXME: Handle images, and multiple values
if (pseudo_element_content.type == CSS::ContentData::Type::String) { if (pseudo_element_content.type == CSS::ContentData::Type::String) {
auto* text = document.heap().allocate<DOM::Text>(document.realm(), document, pseudo_element_content.data); auto* text = document.heap().allocate<DOM::Text>(document.realm(), document, pseudo_element_content.data);