layout: Allocate inline box start space on segment (#32486)

Instead of allocating the inline padding and border space on the line, allocate it on the segment -- which where the inline box start goes. Co-authored-by: Rakhi Sharma <atbrakhi@igalia.com>
servo · Jun 18, 2024 · 70982df · 70982df
1 parent 63889b7
commit 70982df
Show file tree

Hide file tree

Showing 5 changed files with 116 additions and 12 deletions.
diff --git a/components/layout_2020/flow/inline/mod.rs b/components/layout_2020/flow/inline/mod.rs
@@ -771,18 +771,6 @@ impl<'a, 'b> InlineFormattingContextState<'a, 'b> {
                 .map(|index| &self.fonts[index].metrics),
         );
 
-        if inline_box.is_first_fragment {
-            self.current_line.inline_position += Length::from(
-                inline_box_state.pbm.padding.inline_start +
-                    inline_box_state.pbm.border.inline_start,
-            ) + inline_box_state
-                .pbm
-                .margin
-                .inline_start
-                .auto_is(Au::zero)
-                .into()
-        }
-
         // If we are starting a `<br>` element prepare to clear after its deferred linebreak has been
         // processed. Note that a `<br>` is composed of the element itself and the inner pseudo-element
         // with the actual linebreak. Both will have this `FragmentFlag`; that's why this code only
@@ -796,6 +784,18 @@ impl<'a, 'b> InlineFormattingContextState<'a, 'b> {
             self.deferred_br_clear = inline_box_state.base.style.clone_clear();
         }
 
+        if inline_box.is_first_fragment {
+            self.current_line_segment.inline_size += Length::from(
+                inline_box_state.pbm.padding.inline_start +
+                    inline_box_state.pbm.border.inline_start,
+            ) + inline_box_state
+                .pbm
+                .margin
+                .inline_start
+                .auto_is(Au::zero)
+                .into()
+        }
+
         let line_item = inline_box_state
             .layout_into_line_item(inline_box.is_first_fragment, inline_box.is_last_fragment);
         self.push_line_item_to_unbreakable_segment(LineItem::StartInlineBox(line_item));

diff --git a/tests/wpt/meta/MANIFEST.json b/tests/wpt/meta/MANIFEST.json
@@ -79166,6 +79166,32 @@
         {}
        ]
       ],
+      "inline-box-border-line-break.html": [
+       "6688d5e3ada2483288fc5f23c42a915d44a6300b",
+       [
+        null,
+        [
+         [
+          "/css/CSS2/normal-flow/inline-box-border-line-break-ref.html",
+          "=="
+         ]
+        ],
+        {}
+       ]
+      ],
+      "inline-box-padding-line-break.html": [
+       "70d518f411efb383debce5cd06cf604569217aee",
+       [
+        null,
+        [
+         [
+          "/css/CSS2/normal-flow/inline-box-border-line-break-ref.html",
+          "=="
+         ]
+        ],
+        {}
+       ]
+      ],
       "inline-non-replaced-height-002.xht": [
        "e3568f555d516824c3ccdb2a92cb925fadebf311",
        [
@@ -378853,6 +378879,10 @@
        "22204233d95d1deb05ca71ae04a885434db1d3ac",
        []
       ],
+      "inline-box-border-line-break-ref.html": [
+       "6b66951fcc76b42253fb1486563a029bb845b9b2",
+       []
+      ],
       "inline-non-replaced-height-002-ref.xht": [
        "0cc109939200d47938bf06729b150ce54d8dcb55",
        []

diff --git a/tests/wpt/tests/css/CSS2/normal-flow/inline-box-border-line-break-ref.html b/tests/wpt/tests/css/CSS2/normal-flow/inline-box-border-line-break-ref.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html lang="en">
+  <link
+    rel="help"
+    href="https://drafts.csswg.org/css2/#inline-formatting"
+  />
+  <link rel="help" href="https://github.com/servo/servo/pull/32486" />
+  <link rel="author" href="mrobinson@igalia.com" />
+  <link rel="author" href="atbrakhi@igalia.com" />
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+  <body>
+
+    <div style="width: 80px; outline: solid 1px black; font: 20px/1 Ahem;">
+      xx
+      <div style="display: inline-block; padding-left: 50px;">x</div>
+       xx
+    </div>
+
+  </body>
+</html>
+
+
diff --git a/tests/wpt/tests/css/CSS2/normal-flow/inline-box-border-line-break.html b/tests/wpt/tests/css/CSS2/normal-flow/inline-box-border-line-break.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html lang="en">
+  <link
+    rel="help"
+    href="https://drafts.csswg.org/css2/#inline-formatting"
+  />
+  <link rel="help" href="https://github.com/servo/servo/pull/32486" />
+  <link rel="author" href="mrobinson@igalia.com" />
+  <link rel="author" href="atbrakhi@igalia.com" />
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+  <meta name="assert" content="Inline borders should cause content that follows to wrap." />
+  <link rel="match" href="inline-box-border-line-break-ref.html" />
+  <body>
+
+    <div style="width: 80px; outline: solid 1px black; font: 20px/1 Ahem;">
+      xx
+      <!- The left border on this span should trigger a line break before the
+          final xx. -->
+      <span style="border-left: 50px solid transparent">x</span>
+      xx
+    </div>
+
+  </body>
+</html>
+
+
diff --git a/tests/wpt/tests/css/CSS2/normal-flow/inline-box-padding-line-break.html b/tests/wpt/tests/css/CSS2/normal-flow/inline-box-padding-line-break.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html lang="en">
+  <link
+    rel="help"
+    href="https://drafts.csswg.org/css2/#inline-formatting"
+  />
+  <link rel="help" href="https://github.com/servo/servo/pull/32486" />
+  <link rel="author" href="mrobinson@igalia.com" />
+  <link rel="author" href="atbrakhi@igalia.com" />
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+  <meta name="assert" content="Inline padding should cause content that follows to wrap." />
+  <link rel="match" href="inline-box-border-line-break-ref.html" />
+  <body>
+
+    <div style="width: 80px; outline: solid 1px black; font: 20px/1 Ahem;">
+      xx
+      <!- The left padding on this span should trigger a line break before the
+          final xx. -->
+      <span style="padding-left: 50px;">x</span>
+      xx
+    </div>
+
+  </body>
+</html>
+
+