diff --git a/crates/obscura-render/src/dom.rs b/crates/obscura-render/src/dom.rs
index a0b1694..4c3b65b 100644
--- a/crates/obscura-render/src/dom.rs
+++ b/crates/obscura-render/src/dom.rs
@@ -7767,7 +7767,7 @@ fn can_use_native_float_band(
|| matches!(parent_style.position, Some(taffy::Position::Absolute))
|| !matches!(
parent_style.width,
- crate::Dimension::Px(_) | crate::Dimension::Percent(_)
+ crate::Dimension::Auto | crate::Dimension::Px(_) | crate::Dimension::Percent(_)
)
|| parent_style.size_expressions[0].is_some()
{
diff --git a/crates/obscura-render/tests/layout_test.rs b/crates/obscura-render/tests/layout_test.rs
index e92f770..c5708c2 100644
--- a/crates/obscura-render/tests/layout_test.rs
+++ b/crates/obscura-render/tests/layout_test.rs
@@ -978,6 +978,104 @@ fn clearfix_contains_a_full_width_definite_height_float() {
);
}
+#[test]
+fn auto_width_clearfix_keeps_a_content_sized_percentage_float_at_block_start() {
+ let tree = parse_html(
+ r#"
+
+
+ "#,
+ );
+ let layout = layout_dom(&tree, (800.0, 700.0));
+ let rect = |id| layout.rects[&tree.get_element_by_id(id).unwrap()];
+ let host = rect("host");
+ let float = rect("float");
+ let content = rect("content");
+ let card = rect("card");
+ assert!(
+ (host.x - 0.0).abs() < 0.01
+ && (host.y - 0.0).abs() < 0.01
+ && (host.width - 800.0).abs() < 0.01
+ && (host.height - 600.0).abs() < 0.01,
+ "host: {host:?}"
+ );
+ assert!(
+ (float.x - 0.0).abs() < 0.01
+ && (float.y - 0.0).abs() < 0.01
+ && (float.width - 800.0).abs() < 0.01
+ && (float.height - 600.0).abs() < 0.01,
+ "float: {float:?}"
+ );
+ assert!(
+ (content.x - 0.0).abs() < 0.01
+ && (content.y - 0.0).abs() < 0.01
+ && (content.width - 800.0).abs() < 0.01
+ && (content.height - 600.0).abs() < 0.01,
+ "content: {content:?}"
+ );
+ assert!(
+ (card.x - 200.0).abs() < 0.01
+ && (card.y - 150.0).abs() < 0.01
+ && (card.width - 400.0).abs() < 0.01
+ && (card.height - 300.0).abs() < 0.01,
+ "card: {card:?}"
+ );
+}
+
+#[test]
+fn min_height_alone_does_not_resolve_a_floats_percentage_height() {
+ let tree = parse_html(
+ r#"
+
+
+ "#,
+ );
+ let layout = layout_dom(&tree, (800.0, 700.0));
+ let host = layout.rects[&tree.get_element_by_id("host").unwrap()];
+ let float = layout.rects[&tree.get_element_by_id("float").unwrap()];
+ assert!(
+ (host.width - 800.0).abs() < 0.01 && (host.height - 600.0).abs() < 0.01,
+ "host: {host:?}"
+ );
+ assert!(
+ (float.x - 0.0).abs() < 0.01
+ && (float.y - 0.0).abs() < 0.01
+ && (float.width - 800.0).abs() < 0.01
+ && float.height.abs() < 0.01,
+ "an indefinite percentage height must behave as auto: {float:?}"
+ );
+}
+
#[test]
fn min_height_floor_keeps_a_full_width_float_at_block_start() {
let tree = parse_html(