diff --git a/crates/obscura-render/tests/layout_test.rs b/crates/obscura-render/tests/layout_test.rs index af27940..ec85ca7 100644 --- a/crates/obscura-render/tests/layout_test.rs +++ b/crates/obscura-render/tests/layout_test.rs @@ -504,6 +504,10 @@ fn item_self_alignment_places_flex_and_grid_items() { let grid_place = rect("grid-place"); let parent_one = rect("parent-one"); let parent_two = rect("parent-two"); + let line_one = rect("line-one"); + let line_two = rect("line-two"); + let track_one = rect("track-one"); + let track_two = rect("track-two"); assert!( (flex_center.x - 0.0).abs() < 0.01 && (flex_center.y - 40.0).abs() < 0.01 @@ -527,6 +531,20 @@ fn item_self_alignment_places_flex_and_grid_items() { && (parent_two.y - 330.0).abs() < 0.01, "parent-aligned grid items: {parent_one:?} {parent_two:?}" ); + assert!( + (line_one.x - 0.0).abs() < 0.01 + && (line_one.y - 380.0).abs() < 0.01 + && (line_two.x - 0.0).abs() < 0.01 + && (line_two.y - 480.0).abs() < 0.01, + "aligned flex lines: {line_one:?} {line_two:?}" + ); + assert!( + (track_one.x - 100.0).abs() < 0.01 + && (track_one.y - 570.0).abs() < 0.01 + && (track_two.x - 100.0).abs() < 0.01 + && (track_two.y - 620.0).abs() < 0.01, + "aligned grid tracks: {track_one:?} {track_two:?}" + ); } #[test] diff --git a/render-repros/checks.json b/render-repros/checks.json index a66a86b..750209f 100644 --- a/render-repros/checks.json +++ b/render-repros/checks.json @@ -86,7 +86,11 @@ {"name": "grid item aligns block end and inline center", "color": "#6741d9", "x": 200, "y": 220, "width": 50, "height": 20}, {"name": "place self sets both grid axes", "color": "#0b7285", "x": 420, "y": 160, "width": 30, "height": 40}, {"name": "place items aligns first grid child", "color": "#e03131", "x": 55, "y": 340, "width": 40, "height": 20}, - {"name": "place items aligns second grid child", "color": "#2b8a3e", "x": 195, "y": 330, "width": 60, "height": 30} + {"name": "place items aligns second grid child", "color": "#2b8a3e", "x": 195, "y": 330, "width": 60, "height": 30}, + {"name": "align content distributes flex lines", "color": "#f76707", "x": 0, "y": 380, "width": 70, "height": 20}, + {"name": "align content reaches cross end", "color": "#1098ad", "x": 0, "y": 480, "width": 70, "height": 20}, + {"name": "place content aligns first grid track", "color": "#7048e8", "x": 100, "y": 570, "width": 100, "height": 50}, + {"name": "place content aligns second grid track", "color": "#37b24d", "x": 100, "y": 620, "width": 100, "height": 50} ], "mixed-content-block": [ {"name": "full-width block child", "color": "#ccddff", "width": 400} diff --git a/render-repros/item-self-alignment.html b/render-repros/item-self-alignment.html index 4f38e45..d5e3994 100644 --- a/render-repros/item-self-alignment.html +++ b/render-repros/item-self-alignment.html @@ -73,11 +73,44 @@ height: 30px; background: #2b8a3e; } + #flex-content { + display: flex; + flex-wrap: wrap; + align-content: space-between; + width: 120px; + height: 120px; + margin-top: 20px; + background: #d0ebff; + } + #line-one, #line-two { + width: 70px; + height: 20px; + } + #line-one { background: #f76707; } + #line-two { background: #1098ad; } + #grid-content { + display: grid; + grid-template-columns: 100px; + grid-template-rows: 50px 50px; + place-content: center end; + width: 200px; + height: 200px; + margin-top: 20px; + background: #fff3bf; + } + #track-one, #track-two { + width: 100px; + height: 50px; + } + #track-one { background: #7048e8; } + #track-two { background: #37b24d; }
+
+