diff --git a/crates/obscura-render/tests/layout_test.rs b/crates/obscura-render/tests/layout_test.rs index 6749ec9..d5f97f3 100644 --- a/crates/obscura-render/tests/layout_test.rs +++ b/crates/obscura-render/tests/layout_test.rs @@ -257,6 +257,45 @@ fn legacy_center_keeps_block_flow_and_centers_descendants() { ); } +#[test] +fn list_indentation_is_reset_from_the_container() { + let tree = parse_html(include_str!("../../../render-repros/list-indentation.html")); + let layout = layout_dom(&tree, (900.0, 1000.0)); + let rect = |selector| { + let id = tree.query_selector_all(selector).unwrap()[0]; + layout.rects[&id] + }; + let default_item = rect("#default li"); + let reset_item = rect("#reset li"); + let ordered_item = rect("#ordered-reset li"); + let ex_box = rect("#ex-box"); + + assert!( + (default_item.x - 40.0).abs() < 0.01 + && (default_item.width - 360.0).abs() < 0.01, + "default list indentation: {default_item:?}" + ); + assert!( + (reset_item.x - 0.0).abs() < 0.01 + && (reset_item.y - 40.0).abs() < 0.01 + && (reset_item.width - 400.0).abs() < 0.01, + "reset unordered list: {reset_item:?}" + ); + assert!( + (ordered_item.x - 0.0).abs() < 0.01 + && (ordered_item.y - 80.0).abs() < 0.01 + && (ordered_item.width - 400.0).abs() < 0.01, + "reset ordered list: {ordered_item:?}" + ); + assert!( + (ex_box.x - 0.0).abs() < 0.01 + && (ex_box.y - 120.0).abs() < 0.01 + && (ex_box.width - 44.0).abs() < 0.01 + && (ex_box.height - 22.0).abs() < 0.01, + "ex padding: {ex_box:?}" + ); +} + #[test] fn transforms_establish_absolute_and_fixed_containing_blocks() { let html = r##" @@ -671,3 +710,34 @@ fn opposing_floats_share_header_band_through_inline_wrapper() { "menu: {menu:?}" ); } + +#[test] +fn mixed_float_run_shares_one_band() { + let tree = parse_html(include_str!("../../../render-repros/mixed-float-run.html")); + let layout = layout_dom(&tree, (900.0, 1000.0)); + let rect = |id| layout.rects[&tree.get_element_by_id(id).unwrap()]; + let left_one = rect("left-one"); + let left_two = rect("left-two"); + let right_one = rect("right-one"); + assert!( + (left_one.x - 0.0).abs() < 0.01 + && (left_one.y - 0.0).abs() < 0.01 + && (left_one.width - 80.0).abs() < 0.01 + && (left_one.height - 30.0).abs() < 0.01, + "first left float: {left_one:?}" + ); + assert!( + (left_two.x - 80.0).abs() < 0.01 + && (left_two.y - 0.0).abs() < 0.01 + && (left_two.width - 80.0).abs() < 0.01 + && (left_two.height - 30.0).abs() < 0.01, + "second left float: {left_two:?}" + ); + assert!( + (right_one.x - 340.0).abs() < 0.01 + && (right_one.y - 0.0).abs() < 0.01 + && (right_one.width - 60.0).abs() < 0.01 + && (right_one.height - 30.0).abs() < 0.01, + "right float: {right_one:?}" + ); +} diff --git a/render-repros/checks.json b/render-repros/checks.json index e36b521..6b24864 100644 --- a/render-repros/checks.json +++ b/render-repros/checks.json @@ -108,9 +108,20 @@ {"name": "author text alignment overrides the UA rule", "color": "#e8590c", "x": 0, "y": 120, "width": 80, "height": 20}, {"name": "pure text center remains fill available", "color": "#2f9e44", "x": 0, "y": 240, "width": 400, "height": 20} ], + "list-indentation": [ + {"name": "default list keeps UA indentation", "color": "#087f5b", "x": 40, "y": 0, "width": 360, "height": 20}, + {"name": "unordered list reset removes indentation", "color": "#1971c2", "x": 0, "y": 40, "width": 400, "height": 20}, + {"name": "ordered list reset removes indentation", "color": "#862e9c", "x": 0, "y": 80, "width": 400, "height": 20}, + {"name": "ex padding follows font x height", "color": "#e8590c", "x": 0, "y": 120, "width": 44, "height": 22} + ], "mixed-content-block": [ {"name": "full-width block child", "color": "#ccddff", "width": 400} ], + "mixed-float-run": [ + {"name": "first left float starts the band", "color": "#087f5b", "x": 0, "y": 0, "width": 80, "height": 30}, + {"name": "same-side floats remain adjacent", "color": "#1971c2", "x": 80, "y": 0, "width": 80, "height": 30}, + {"name": "trailing right float shares the band", "color": "#e8590c", "x": 340, "y": 0, "width": 60, "height": 30} + ], "modern-hydration-contracts": [ {"name": "modern hydration contracts", "color": "#16803c", "width": 360, "height": 90} ], diff --git a/render-repros/list-indentation.html b/render-repros/list-indentation.html new file mode 100644 index 0000000..66095d5 --- /dev/null +++ b/render-repros/list-indentation.html @@ -0,0 +1,49 @@ + + + + + list indentation belongs to the list container + + + +
+
+
+
+ + diff --git a/render-repros/mixed-float-run.html b/render-repros/mixed-float-run.html new file mode 100644 index 0000000..6babfa6 --- /dev/null +++ b/render-repros/mixed-float-run.html @@ -0,0 +1,37 @@ + + + + + mixed float run + + + + + +