fix(layout): preserve wrapped flex distribution across overflow modes

Adopt the separate Taffy distribution fallback correction. Remove the scroll-only branch, preserve flex-start versus safe center behavior in every writing mode, and add a browser regression that checks child positions for visible and scroll overflow.

Validation: cargo fmt --all; cargo clippy --workspace --all-targets --all-features -- -D warnings; cargo nextest run --no-fail-fast (20287 passed, 18 skipped). The combined working tree passed these checks before this logical split. Frozen Release and focused browser/WPT validation also passed; final full WPT is running.

Original-commit: 4d5786f1a1
This commit is contained in:
ldm0
2026-10-21 17:55:02 +08:00
committed by Donough Liu
parent c00c9f8cd9
commit dc3fc902f0
3 changed files with 43 additions and 3 deletions
Generated
+1 -1
View File
@@ -5650,7 +5650,7 @@ dependencies = [
[[package]]
name = "taffy"
version = "0.15.0"
source = "git+https://github.com/ldm0/taffy?rev=9c9b9257de73437781df7facbd0aa7beac6abe3f#9c9b9257de73437781df7facbd0aa7beac6abe3f"
source = "git+https://github.com/ldm0/taffy?rev=0a337871fa44db7d48571b06668f92737eefa8c2#0a337871fa44db7d48571b06668f92737eefa8c2"
dependencies = [
"serde",
"slotmap",
+2 -2
View File
@@ -117,10 +117,10 @@ stylo_dom = { git = "https://github.com/lexmount/stylo", rev = "973988b9c592a802
stylo_static_prefs = { git = "https://github.com/lexmount/stylo", rev = "973988b9c592a802eefdc5abe6072dd9ba221385" }
stylo_traits = { git = "https://github.com/lexmount/stylo", rev = "973988b9c592a802eefdc5abe6072dd9ba221385" }
svgtypes = { git = "https://github.com/lexmount/svgtypes", branch = "moli" }
taffy = { git = "https://github.com/ldm0/taffy", rev = "9c9b9257de73437781df7facbd0aa7beac6abe3f" }
taffy = { git = "https://github.com/ldm0/taffy", rev = "0a337871fa44db7d48571b06668f92737eefa8c2" }
[patch."https://github.com/DioxusLabs/taffy"]
taffy = { git = "https://github.com/ldm0/taffy", rev = "9c9b9257de73437781df7facbd0aa7beac6abe3f" }
taffy = { git = "https://github.com/ldm0/taffy", rev = "0a337871fa44db7d48571b06668f92737eefa8c2" }
[workspace.lints.clippy]
disallowed_methods = "deny"
@@ -261,3 +261,43 @@ fn wrapped_vertical_flex_keeps_padding_in_its_scroll_extent() -> Result<()> {
}
Ok(())
}
#[test]
fn wrapped_flex_distribution_keeps_child_positions_for_visible_and_scroll_overflow() -> Result<()> {
let mut body = String::from("<!doctype html><body>");
for (mode, direction, flow) in [
("horizontal-tb", "ltr", "row"),
("vertical-rl", "rtl", "column"),
] {
for overflow in ["visible", "scroll"] {
for align in ["stretch", "space-between", "space-around", "space-evenly"] {
body.push_str(&format!("<div id='flex-{mode}-{overflow}-{align}' data-flex-probe style='display:flex;writing-mode:{mode};direction:{direction};flex-flow:{flow} wrap-reverse;width:100px;height:100px;overflow:{overflow};border:3px solid;padding:10px;gap:10px;align-items:start;align-content:{align};margin-top:300px'>"));
for _ in 0..3 {
body.push_str("<div style='min-width:110px;min-height:110px'></div>");
}
body.push_str("</div>");
}
}
}
let expression = r#"JSON.stringify(Object.fromEntries([...document.querySelectorAll('[data-flex-probe]')].map(e => {const top=e.getBoundingClientRect().top;return [e.id,Object.fromEntries([...e.children].map((child,i)=>['y'+i,child.getBoundingClientRect().top-top]))]})))"#;
let value = run_layout(&body, expression, false)?;
for mode in ["horizontal-tb", "vertical-rl"] {
for overflow in ["visible", "scroll"] {
for align in ["stretch", "space-between", "space-around", "space-evenly"] {
// Fixed Chromium control values distinguish flex-start fallback from
// safe center, including the opposite cross flow of vertical RTL.
let expected = match (mode, align) {
("horizontal-tb", "stretch" | "space-between") => [3.0, -117.0, -237.0],
("horizontal-tb", _) => [253.0, 133.0, 13.0],
(_, "stretch" | "space-between") => [13.0, 133.0, 253.0],
_ => [-237.0, -117.0, 3.0],
};
let id = format!("flex-{mode}-{overflow}-{align}");
for (index, y) in expected.into_iter().enumerate() {
assert_dimension(&value, &id, &format!("y{index}"), y);
}
}
}
}
Ok(())
}