diff --git a/Cargo.lock b/Cargo.lock index 22761832b8..52de8cefc9 100644 --- a/Cargo.lock +++ b/Cargo.lock @@ -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", diff --git a/Cargo.toml b/Cargo.toml index e62ca4b7ef..ab6f8951cc 100644 --- a/Cargo.toml +++ b/Cargo.toml @@ -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" diff --git a/moli/tests/fetch_cli/layout_regressions.rs b/moli/tests/fetch_cli/layout_regressions.rs index 969a78ad8b..f59afec7b7 100644 --- a/moli/tests/fetch_cli/layout_regressions.rs +++ b/moli/tests/fetch_cli/layout_regressions.rs @@ -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(""); + 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!("
")); + for _ in 0..3 { + body.push_str("
"); + } + body.push_str("
"); + } + } + } + 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(()) +}