From 0e8a0a819107d5bd252030fdad68131540b7bcc3 Mon Sep 17 00:00:00 2001 From: Aliaksandr Kalenik Date: Thu, 27 Jul 2023 23:31:42 +0200 Subject: [PATCH] LibWeb: Add support for "display: contents" This change makes tree builder omit elements with "display: contents" from the layout tree during construction. Their child elements are instead directly appended to the parent element in layout tree. --- .../flex/list-container-display-contents.txt | 14 ++++++++++++++ .../flex/list-container-display-contents.html | 10 ++++++++++ Userland/Libraries/LibWeb/CSS/Parser/Parser.cpp | 3 +-- Userland/Libraries/LibWeb/DOM/Element.cpp | 2 +- Userland/Libraries/LibWeb/Layout/TreeBuilder.cpp | 5 +++++ 5 files changed, 31 insertions(+), 3 deletions(-) create mode 100644 Tests/LibWeb/Layout/expected/flex/list-container-display-contents.txt create mode 100644 Tests/LibWeb/Layout/input/flex/list-container-display-contents.html diff --git a/Tests/LibWeb/Layout/expected/flex/list-container-display-contents.txt b/Tests/LibWeb/Layout/expected/flex/list-container-display-contents.txt new file mode 100644 index 00000000000..09f1b551be2 --- /dev/null +++ b/Tests/LibWeb/Layout/expected/flex/list-container-display-contents.txt @@ -0,0 +1,14 @@ +Viewport <#document> at (0,0) content-size 800x600 children: not-inline + BlockContainer at (0,0) content-size 800x41.46875 [BFC] children: not-inline + BlockContainer at (8,16) content-size 784x17.46875 children: not-inline + Box at (48,16) content-size 744x17.46875 flex-container(row) [FFC] children: not-inline + BlockContainer at (48,16) content-size 46.734375x17.46875 flex-item [BFC] children: inline + line 0 width: 46.734375, height: 17.46875, bottom: 17.46875, baseline: 13.53125 + frag 0 from TextNode start: 0, length: 5, rect: [48,16 46.734375x17.46875] + "Store" + TextNode <#text> + BlockContainer at (762,16) content-size 30x17.46875 flex-item [BFC] children: inline + line 0 width: 30, height: 17.46875, bottom: 17.46875, baseline: 13.53125 + frag 0 from TextNode start: 0, length: 3, rect: [762,16 30x17.46875] + "Mac" + TextNode <#text> diff --git a/Tests/LibWeb/Layout/input/flex/list-container-display-contents.html b/Tests/LibWeb/Layout/input/flex/list-container-display-contents.html new file mode 100644 index 00000000000..b8111fe2338 --- /dev/null +++ b/Tests/LibWeb/Layout/input/flex/list-container-display-contents.html @@ -0,0 +1,10 @@ + +
  • Store
    Mac
    \ No newline at end of file diff --git a/Userland/Libraries/LibWeb/CSS/Parser/Parser.cpp b/Userland/Libraries/LibWeb/CSS/Parser/Parser.cpp index 4bcc2920547..e141162aa81 100644 --- a/Userland/Libraries/LibWeb/CSS/Parser/Parser.cpp +++ b/Userland/Libraries/LibWeb/CSS/Parser/Parser.cpp @@ -5327,8 +5327,7 @@ ErrorOr> Parser::parse_display_value(Vector c // display-box case ValueID::Contents: - // FIXME this should be Display::Short::Contents but contents is currently not implemented - return Display::from_short(Display::Short::Flow); + return Display::from_short(Display::Short::Contents); case ValueID::None: return Display::from_short(Display::Short::None); diff --git a/Userland/Libraries/LibWeb/DOM/Element.cpp b/Userland/Libraries/LibWeb/DOM/Element.cpp index d1d9452d51d..2b59330fede 100644 --- a/Userland/Libraries/LibWeb/DOM/Element.cpp +++ b/Userland/Libraries/LibWeb/DOM/Element.cpp @@ -347,7 +347,7 @@ JS::GCPtr Element::create_layout_node_for_display_type(DOM::Docume if (display.is_flex_inside() || display.is_grid_inside()) return document.heap().allocate_without_realm(document, element, move(style)); - if (display.is_flow_inside() || display.is_flow_root_inside()) + if (display.is_flow_inside() || display.is_flow_root_inside() || display.is_contents()) return document.heap().allocate_without_realm(document, element, move(style)); dbgln("FIXME: CSS display '{}' not implemented yet.", display.to_string().release_value_but_fixme_should_propagate_errors()); diff --git a/Userland/Libraries/LibWeb/Layout/TreeBuilder.cpp b/Userland/Libraries/LibWeb/Layout/TreeBuilder.cpp index e06640854b0..aacef3e9995 100644 --- a/Userland/Libraries/LibWeb/Layout/TreeBuilder.cpp +++ b/Userland/Libraries/LibWeb/Layout/TreeBuilder.cpp @@ -129,6 +129,9 @@ static Layout::Node& insertion_parent_for_block_node(Layout::NodeWithStyle& layo void TreeBuilder::insert_node_into_inline_or_block_ancestor(Layout::Node& node, CSS::Display display, AppendOrPrepend mode) { + if (node.display().is_contents()) + return; + if (display.is_inline_outside()) { // Inlines can be inserted into the nearest ancestor. auto& insertion_point = insertion_parent_for_inline_node(m_ancestor_stack.last()); @@ -141,6 +144,8 @@ void TreeBuilder::insert_node_into_inline_or_block_ancestor(Layout::Node& node, // Non-inlines can't be inserted into an inline parent, so find the nearest non-inline ancestor. auto& nearest_non_inline_ancestor = [&]() -> Layout::NodeWithStyle& { for (auto& ancestor : m_ancestor_stack.in_reverse()) { + if (ancestor->display().is_contents()) + continue; if (!ancestor->display().is_inline_outside()) return ancestor; if (!ancestor->display().is_flow_inside())