mirror of
https://github.com/LadybirdBrowser/ladybird.git
synced 2024-09-11 05:25:32 +03:00
LibWeb: Blockify pseudo elements that are flex items
When deciding on a box type transformation (blockify/inlinify) for a pseudo element, we have to use the originating element as a reference rather than the parent. (The originating element *is* the parent for its pseudo elements.)
This commit is contained in:
parent
806e08425a
commit
c0b4083b02
Notes:
sideshowbarker
2024-07-16 22:11:09 +09:00
Author: https://github.com/awesomekling Commit: https://github.com/SerenityOS/serenity/commit/c0b4083b02 Pull-request: https://github.com/SerenityOS/serenity/pull/18538
@ -0,0 +1,19 @@
|
||||
Viewport <#document> at (0,0) content-size 800x600 children: not-inline
|
||||
BlockContainer <html> at (0,0) content-size 800x33.46875 children: not-inline
|
||||
BlockContainer <body> at (8,8) content-size 784x17.46875 children: not-inline
|
||||
Box <div.foo> 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>
|
@ -0,0 +1,15 @@
|
||||
<style>
|
||||
* {
|
||||
font: 16px SerenitySans;
|
||||
}
|
||||
.foo {
|
||||
display: flex;
|
||||
gap: 1ch;
|
||||
}
|
||||
.foo:before {
|
||||
content: "well";
|
||||
}
|
||||
.foo:after {
|
||||
content: "friends";
|
||||
}
|
||||
</style><div class="foo">hello</div>
|
@ -1425,7 +1425,7 @@ enum class BoxTypeTransformation {
|
||||
Inlinify,
|
||||
};
|
||||
|
||||
static BoxTypeTransformation required_box_type_transformation(StyleProperties const& style, DOM::Element const& element, Optional<CSS::Selector::PseudoElement> const&)
|
||||
static BoxTypeTransformation required_box_type_transformation(StyleProperties const& style, DOM::Element const& element, Optional<CSS::Selector::PseudoElement> 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;
|
||||
}
|
||||
|
Loading…
Reference in New Issue
Block a user