Fix auto margin computation in block layout (#663)
* Remove special for auto margins. Browsers do not apply this rule.
* Add test for block auto margins with auto width
fd9112585b697975a342fdb76ca5b263a2b62891 · por Nico Burns · (hace 2 años) · padre 9129d5adb · ver el árbol en este commit
Delta semántico · 3
tests/generated/block/block_margin_auto_left_and_right_with_auto_width.rs
tests/generated/block/mod.rs
diff --git a/src/compute/block.rs b/src/compute/block.rs
index 0b09947a0..ea89f639c 100644
--- a/src/compute/block.rs
+++ b/src/compute/block.rs
@@ -389,9 +389,7 @@ fn perform_final_layout_on_in_flow_children(
let free_x_space = f32_max(0.0, container_inner_width - final_size.width - item_non_auto_x_margin_sum);
let x_axis_auto_margin_size = {
let auto_margin_count = item_margin.left.is_none() as u8 + item_margin.right.is_none() as u8;
- if auto_margin_count == 2 && item.size.width.is_none() {
- 0.0
- } else if auto_margin_count > 0 {
+ if auto_margin_count > 0 {
free_x_space / auto_margin_count as f32
} else {
0.0
diff --git a/test_fixtures/block/block_margin_auto_left_and_right_with_auto_width.html b/test_fixtures/block/block_margin_auto_left_and_right_with_auto_width.html
new file mode 100644
index 000000000..1a7f8816d
--- /dev/null
+++ b/test_fixtures/block/block_margin_auto_left_and_right_with_auto_width.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <script src="../../scripts/gentest/test_helper.js"></script>
+ <link rel="stylesheet" type="text/css" href="../../scripts/gentest/test_base_style.css">
+ <title>
+ Test description
+ </title>
+</head>
+<body>
+
+<div id="test-root" style="display: block; width: 200px; height: 200px;">
+ <div style="width: auto; max-width: 100px; height: 50px; margin-left: auto; margin-right: auto;">
+ </div>
+</div>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/tests/generated/block/block_margin_auto_left_and_right_with_auto_width.rs b/tests/generated/block/block_margin_auto_left_and_right_with_auto_width.rs
new file mode 100644
index 000000000..1d87a2804
--- /dev/null
+++ b/tests/generated/block/block_margin_auto_left_and_right_with_auto_width.rs
@@ -0,0 +1,90 @@
+#[test]
+fn block_margin_auto_left_and_right_with_auto_width() {
+ #[allow(unused_imports)]
+ use taffy::{prelude::*, tree::Layout, TaffyTree};
+ let mut taffy: TaffyTree<crate::TextMeasure> = TaffyTree::new();
+ let node0 = taffy
+ .new_leaf_with_context(
+ taffy::style::Style {
+ size: taffy::geometry::Size {
+ width: taffy::style::Dimension::Auto,
+ height: taffy::style::Dimension::Length(50f32),
+ },
+ max_size: taffy::geometry::Size { width: taffy::style::Dimension::Length(100f32), height: auto() },
+ margin: taffy::geometry::Rect {
+ left: taffy::style::LengthPercentageAuto::Auto,
+ right: taffy::style::LengthPercentageAuto::Auto,
+ top: zero(),
+ bottom: zero(),
+ },
+ ..Default::default()
+ },
+ crate::TextMeasure { text_content: "", writing_mode: crate::WritingMode::Horizontal, _aspect_ratio: None },
+ )
+ .unwrap();
+ let node = taffy
+ .new_with_children(
+ taffy::style::Style {
+ display: taffy::style::Display::Block,
+ size: taffy::geometry::Size {
+ width: taffy::style::Dimension::Length(200f32),
+ height: taffy::style::Dimension::Length(200f32),
+ },
+ ..Default::default()
+ },
+ &[node0],
+ )
+ .unwrap();
+ taffy.compute_layout_with_measure(node, taffy::geometry::Size::MAX_CONTENT, crate::test_measure_function).unwrap();
+ println!("\nComputed tree:");
+ taffy.print_tree(node);
+ println!();
+ #[cfg_attr(not(feature = "content_size"), allow(unused_variables))]
+ let layout @ Layout { size, location, .. } = taffy.layout(node).unwrap();
+ assert_eq!(size.width, 200f32, "width of node {:?}. Expected {}. Actual {}", node, 200f32, size.width);
+ assert_eq!(size.height, 200f32, "height of node {:?}. Expected {}. Actual {}", node, 200f32, size.height);
+ assert_eq!(location.x, 0f32, "x of node {:?}. Expected {}. Actual {}", node, 0f32, location.x);
+ assert_eq!(location.y, 0f32, "y of node {:?}. Expected {}. Actual {}", node, 0f32, location.y);
+ #[cfg(feature = "content_size")]
+ assert_eq!(
+ layout.scroll_width(),
+ 0f32,
+ "scroll_width of node {:?}. Expected {}. Actual {}",
+ node,
+ 0f32,
+ layout.scroll_width()
+ );
+ #[cfg(feature = "content_size")]
+ assert_eq!(
+ layout.scroll_height(),
+ 0f32,
+ "scroll_height of node {:?}. Expected {}. Actual {}",
+ node,
+ 0f32,
+ layout.scroll_height()
+ );
+ #[cfg_attr(not(feature = "content_size"), allow(unused_variables))]
+ let layout @ Layout { size, location, .. } = taffy.layout(node0).unwrap();
+ assert_eq!(size.width, 100f32, "width of node {:?}. Expected {}. Actual {}", node0, 100f32, size.width);
+ assert_eq!(size.height, 50f32, "height of node {:?}. Expected {}. Actual {}", node0, 50f32, size.height);
+ assert_eq!(location.x, 50f32, "x of node {:?}. Expected {}. Actual {}", node0, 50f32, location.x);
+ assert_eq!(location.y, 0f32, "y of node {:?}. Expected {}. Actual {}", node0, 0f32, location.y);
+ #[cfg(feature = "content_size")]
+ assert_eq!(
+ layout.scroll_width(),
+ 0f32,
+ "scroll_width of node {:?}. Expected {}. Actual {}",
+ node0,
+ 0f32,
+ layout.scroll_width()
+ );
+ #[cfg(feature = "content_size")]
+ assert_eq!(
+ layout.scroll_height(),
+ 0f32,
+ "scroll_height of node {:?}. Expected {}. Actual {}",
+ node0,
+ 0f32,
+ layout.scroll_height()
+ );
+}
diff --git a/tests/generated/block/mod.rs b/tests/generated/block/mod.rs
index ec4df52ee..39011a84e 100644
--- a/tests/generated/block/mod.rs
+++ b/tests/generated/block/mod.rs
@@ -84,6 +84,7 @@ mod block_margin_auto_bottom;
mod block_margin_auto_bottom_and_top;
mod block_margin_auto_left;
mod block_margin_auto_left_and_right;
+mod block_margin_auto_left_and_right_with_auto_width;
mod block_margin_auto_left_child_bigger_than_parent;
mod block_margin_auto_left_fix_right_child_bigger_than_parent;
mod block_margin_auto_left_right_child_bigger_than_parent;