We use cookies to ensure you get the best experience on our website
Home Explore Help
Register Sign In
0ct0pu5
/
ladybird
1
0
Fork 0
Files Issues 0 Pull Requests 0 Wiki
Browse Source

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.)
Andreas Kling 2 years ago
parent
806e08425a
commit
c0b4083b02
3 changed files with 40 additions and 3 deletions
Unified View Show Diff Stats
  1. 19 0
      Tests/LibWeb/Layout/expected/css-pseudo-element-blockification.txt
  2. 15 0
      Tests/LibWeb/Layout/input/css-pseudo-element-blockification.html
  3. 6 3
      Userland/Libraries/LibWeb/CSS/StyleComputer.cpp

+ 19 - 0
Tests/LibWeb/Layout/expected/css-pseudo-element-blockification.txt
View File 

@@ -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>

+ 15 - 0
Tests/LibWeb/Layout/input/css-pseudo-element-blockification.html
View File 

@@ -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>

+ 6 - 3
Userland/Libraries/LibWeb/CSS/StyleComputer.cpp
View File 

@@ -1425,7 +1425,7 @@ enum class BoxTypeTransformation {
 
     Inlinify,
 
     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]
 
     // 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)
 
     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].
 
     // 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]
 
     // 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())
 
         if (parent_display.is_grid_inside() || parent_display.is_flex_inside())
 
             return BoxTypeTransformation::Blockify;
 
             return BoxTypeTransformation::Blockify;
 
     }
 
     }

Contact | Legal | Takedown | Status
Self-hosted public services - About
NibbleSpot by 0ct0pu5