fix(layout): include percentage padding in flex content sizing

Resolve percentage padding against the flex containing block while measuring a content flex basis. This keeps the text content width intact before line breaking. The browser regression covers three container widths, four padding percentages and both box-sizing modes.

MOL-467: Taffy 02c4920e93348e20cb197667a366e0a15e91db39. Browser before/after probes retained.

Validation: cargo fmt --all; cargo clippy --workspace --all-targets --all-features -- -D warnings; cargo nextest run --no-fail-fast: 20279 passed,18 skipped.

Cargo.lock

@@ -5542,7 +5542,7 @@ dependencies = [
 [[package]]
 name = "taffy"
 version = "0.13.0"
-source = "git+https://github.com/ldm0/taffy?rev=a34a7a82e5144b311b2fcb34feeb8412db9d0117#a34a7a82e5144b311b2fcb34feeb8412db9d0117"
+source = "git+https://github.com/ldm0/taffy?rev=02c4920e93348e20cb197667a366e0a15e91db39#02c4920e93348e20cb197667a366e0a15e91db39"
 dependencies = [
  "arrayvec",
  "serde",

Cargo.toml

@@ -117,7 +117,7 @@ stylo_dom = { git = "https://github.com/lexmount/stylo", rev = "0c7e8baf63b6714e
 stylo_static_prefs = { git = "https://github.com/lexmount/stylo", rev = "0c7e8baf63b6714e7614834fadbc09710f3c3d27" }
 stylo_traits = { git = "https://github.com/lexmount/stylo", rev = "0c7e8baf63b6714e7614834fadbc09710f3c3d27" }
 svgtypes = { git = "https://github.com/lexmount/svgtypes", branch = "moli" }
-taffy = { git = "https://github.com/ldm0/taffy", rev = "a34a7a82e5144b311b2fcb34feeb8412db9d0117" }
+taffy = { git = "https://github.com/ldm0/taffy", rev = "02c4920e93348e20cb197667a366e0a15e91db39" }
 
 [workspace.lints.clippy]
 disallowed_methods = "deny"

moli/tests/fetch_cli/layout_regressions.rs

@@ -154,3 +154,33 @@ fn inline_block_intrinsic_maximum_constrains_auto_width_and_preserves_minimum_si
     }
     Ok(())
 }
+
+#[test]
+fn flex_percentage_padding_keeps_the_text_content_width_before_line_breaking() -> Result<()> {
+    let mut body = String::new();
+    for width in [240, 300, 400] {
+        for padding in [0, 5, 10, 20] {
+            for sizing in ["content-box", "border-box"] {
+                body.push_str(&format!(
+                    "<section><div style='display:flex;width:{width}px'><div id='item-{width}-{padding}-{sizing}' style='padding:0 {padding}%;box-sizing:{sizing}'>aaa bbb ccc</div></div></section>"
+                ));
+            }
+        }
+    }
+    let value = run_layout(&probe_font_document(&body), GEOMETRY, true)?;
+    for width in [240, 300, 400] {
+        for padding in [0, 5, 10, 20] {
+            for sizing in ["content-box", "border-box"] {
+                let id = format!("item-{width}-{padding}-{sizing}");
+                assert_dimension(
+                    &value,
+                    &id,
+                    "width",
+                    132.0 + 2.0 * f64::from(width * padding) / 100.0,
+                );
+                assert_dimension(&value, &id, "height", 20.0);
+            }
+        }
+    }
+    Ok(())
+}