From 40dea272d2cb015d5146f86d96e2cc06b4ca2de4 Mon Sep 17 00:00:00 2001 From: Aliaksandr Kalenik Date: Sun, 10 Sep 2023 22:34:41 +0200 Subject: [PATCH] LibWeb: Add boxes for before/after pseudos post button layout tweak When a button should use flex for alignment and also has ::before and/or ::after, we previously did the following: 1. Prepended/appended the button's children with boxes for pseudo-elements. 2. Replaced the button's direct children with a flex container that contains its children. As a result, the generated boxes for ::before/::after ended up as children of the generated flex item, instead of being direct children of the button layout box as they were supposed to be. This change reverses these steps, ensuring that boxes for pseudo-elements are generated only after modifications inside the button layout are completed. --- .../button-with-abspos-pseudo-element.txt | 12 +++++----- .../button-with-after-pseudo.txt | 23 +++++++++++++++++++ .../button-with-before-pseudo.txt | 23 +++++++++++++++++++ .../button-with-after-pseudo.html | 20 ++++++++++++++++ .../button-with-before-pseudo.html | 18 +++++++++++++++ .../Libraries/LibWeb/Layout/TreeBuilder.cpp | 18 +++++++-------- 6 files changed, 99 insertions(+), 15 deletions(-) create mode 100644 Tests/LibWeb/Layout/expected/block-and-inline/button-with-after-pseudo.txt create mode 100644 Tests/LibWeb/Layout/expected/block-and-inline/button-with-before-pseudo.txt create mode 100644 Tests/LibWeb/Layout/input/block-and-inline/button-with-after-pseudo.html create mode 100644 Tests/LibWeb/Layout/input/block-and-inline/button-with-before-pseudo.html diff --git a/Tests/LibWeb/Layout/expected/block-and-inline/button-with-abspos-pseudo-element.txt b/Tests/LibWeb/Layout/expected/block-and-inline/button-with-abspos-pseudo-element.txt index 151afd1937..81ccd3d56b 100644 --- a/Tests/LibWeb/Layout/expected/block-and-inline/button-with-abspos-pseudo-element.txt +++ b/Tests/LibWeb/Layout/expected/block-and-inline/button-with-abspos-pseudo-element.txt @@ -5,15 +5,15 @@ Viewport <#document> at (0,0) content-size 800x600 children: not-inline frag 0 from BlockContainer start: 0, length: 0, rect: [29,29 0x0] BlockContainer \ No newline at end of file diff --git a/Tests/LibWeb/Layout/input/block-and-inline/button-with-before-pseudo.html b/Tests/LibWeb/Layout/input/block-and-inline/button-with-before-pseudo.html new file mode 100644 index 0000000000..6e54f8c7f6 --- /dev/null +++ b/Tests/LibWeb/Layout/input/block-and-inline/button-with-before-pseudo.html @@ -0,0 +1,18 @@ + \ No newline at end of file diff --git a/Userland/Libraries/LibWeb/Layout/TreeBuilder.cpp b/Userland/Libraries/LibWeb/Layout/TreeBuilder.cpp index d0034bdf08..1a2dccbe40 100644 --- a/Userland/Libraries/LibWeb/Layout/TreeBuilder.cpp +++ b/Userland/Libraries/LibWeb/Layout/TreeBuilder.cpp @@ -332,15 +332,6 @@ ErrorOr TreeBuilder::create_layout_tree(DOM::Node& dom_node, TreeBuilder:: pop_parent(); } - // Add nodes for the ::before and ::after pseudo-elements. - if (is(dom_node)) { - auto& element = static_cast(dom_node); - push_parent(verify_cast(*layout_node)); - TRY(create_pseudo_element_if_needed(element, CSS::Selector::PseudoElement::Before, AppendOrPrepend::Prepend)); - TRY(create_pseudo_element_if_needed(element, CSS::Selector::PseudoElement::After, AppendOrPrepend::Append)); - pop_parent(); - } - if (is(*layout_node)) { auto& element = static_cast(dom_node); int child_index = layout_node->parent()->index_of_child(*layout_node).value(); @@ -414,6 +405,15 @@ ErrorOr TreeBuilder::create_layout_tree(DOM::Node& dom_node, TreeBuilder:: parent.set_children_are_inline(false); } + // Add nodes for the ::before and ::after pseudo-elements. + if (is(dom_node)) { + auto& element = static_cast(dom_node); + push_parent(verify_cast(*layout_node)); + TRY(create_pseudo_element_if_needed(element, CSS::Selector::PseudoElement::Before, AppendOrPrepend::Prepend)); + TRY(create_pseudo_element_if_needed(element, CSS::Selector::PseudoElement::After, AppendOrPrepend::Append)); + pop_parent(); + } + return {}; }