diff --git a/Tests/LibWeb/Layout/expected/css-pseudo-element-blockification.txt b/Tests/LibWeb/Layout/expected/css-pseudo-element-blockification.txt new file mode 100644 index 0000000000..03ec5cf771 --- /dev/null +++ b/Tests/LibWeb/Layout/expected/css-pseudo-element-blockification.txt @@ -0,0 +1,19 @@ +Viewport <#document> at (0,0) content-size 800x600 children: not-inline + BlockContainer at (0,0) content-size 800x33.46875 children: not-inline + BlockContainer at (8,8) content-size 784x17.46875 children: not-inline + Box at (8,8) content-size 784x17.46875 flex-container(row) children: not-inline + BlockContainer <(anonymous)> at (8,8) content-size 28.40625x17.46875 flex-item children: inline + line 0 width: 28.40625, height: 17.46875, bottom: 17.46875, baseline: 13.53125 + frag 0 from TextNode start: 0, length: 4, rect: [8,8 28.40625x17.46875] + "well" + TextNode <#text> + BlockContainer <(anonymous)> at (46,8) content-size 36.84375x17.46875 flex-item children: inline + line 0 width: 36.84375, height: 17.46875, bottom: 17.46875, baseline: 13.53125 + frag 0 from TextNode start: 0, length: 5, rect: [46,8 36.84375x17.46875] + "hello" + TextNode <#text> + BlockContainer <(anonymous)> at (92.4375,8) content-size 55.359375x17.46875 flex-item children: inline + line 0 width: 55.359375, height: 17.46875, bottom: 17.46875, baseline: 13.53125 + frag 0 from TextNode start: 0, length: 7, rect: [92.4375,8 55.359375x17.46875] + "friends" + TextNode <#text> diff --git a/Tests/LibWeb/Layout/input/css-pseudo-element-blockification.html b/Tests/LibWeb/Layout/input/css-pseudo-element-blockification.html new file mode 100644 index 0000000000..949f48e96f --- /dev/null +++ b/Tests/LibWeb/Layout/input/css-pseudo-element-blockification.html @@ -0,0 +1,15 @@ +
hello
\ No newline at end of file diff --git a/Userland/Libraries/LibWeb/CSS/StyleComputer.cpp b/Userland/Libraries/LibWeb/CSS/StyleComputer.cpp index 512f619263..29636cf5ab 100644 --- a/Userland/Libraries/LibWeb/CSS/StyleComputer.cpp +++ b/Userland/Libraries/LibWeb/CSS/StyleComputer.cpp @@ -1425,7 +1425,7 @@ enum class BoxTypeTransformation { Inlinify, }; -static BoxTypeTransformation required_box_type_transformation(StyleProperties const& style, DOM::Element const& element, Optional const&) +static BoxTypeTransformation required_box_type_transformation(StyleProperties const& style, DOM::Element const& element, Optional const& pseudo_element) { // Absolute positioning or floating an element blockifies the box’s display type. [CSS2] if (style.position() == CSS::Position::Absolute || style.position() == CSS::Position::Fixed || style.float_() != CSS::Float::None) @@ -1433,9 +1433,12 @@ static BoxTypeTransformation required_box_type_transformation(StyleProperties co // FIXME: Containment in a ruby container inlinifies the box’s display type, as described in [CSS-RUBY-1]. + // NOTE: If we're computing style for a pseudo-element, the effective parent will be the originating element itself, not its parent. + auto const* parent = pseudo_element.has_value() ? &element : element.parent_element(); + // A parent with a grid or flex display value blockifies the box’s display type. [CSS-GRID-1] [CSS-FLEXBOX-1] - if (element.parent_element() && element.parent_element()->computed_css_values()) { - auto const& parent_display = element.parent_element()->computed_css_values()->display(); + if (parent && parent->computed_css_values()) { + auto const& parent_display = parent->computed_css_values()->display(); if (parent_display.is_grid_inside() || parent_display.is_flex_inside()) return BoxTypeTransformation::Blockify; }