Possible divergence from Chrome?

[simonchatts]

Thanks for Stretch!

Here's a very basic flexbox layout with five divs, where the yellow top-row div is 24px high in Chrome.

Below is (supposed to be) a purely mechanical translation of that into Stretch, which outputs the size of that top-row node:

size: Size {
    width: 20000.0,
    height: 0.0,
},

So the height from Stretch is 0px, not 24px (and the width a bit squiffy too).

It seems Stretch thinks that the 100% high other_node should win almost all the available 73.0 points of height. Adding a flex_shrink: 0.0 to top_row, or specifying the height of other_node in points rather than 100%, both work around the issue.

Any ideas as to the divergence welcome - apologies if this is just user error somehow.

use std::default::Default;
use stretch::{geometry::*, node::Stretch, style::*, Error};

fn main() -> Result<(), Error> {
    let mut stretch = Stretch::new();

    // top-row (yellow)
    let top_row = stretch.new_node(
        Style {
            size: Size {
                width: Dimension::Percent(100.0),
                height: Dimension::Points(24.0),
            },
            // one way to fix the issue:
            // flex_shrink: 0.0,
            ..Default::default()
        },
        vec![],
    )?;

    // lower-row (cyan)
    let lower_row_1 = stretch.new_node(
        Style {
            size: Size {
                width: Dimension::Percent(100.0),
                height: Dimension::Points(20.0),
            },
            ..Default::default()
        },
        vec![],
    )?;
    let lower_row_2 = lower_row_1.clone();

    // other-rows (red)
    let other_rows = stretch.new_node(
        Style {
            flex_direction: FlexDirection::Column,
            justify_content: JustifyContent::Center,
            size: Size {
                width: Dimension::Percent(100.0),
                height: Dimension::Percent(100.0),
            },
            margin: Rect {
                top: Dimension::Points(5.0),
                ..Default::default()
            },
            ..Default::default()
        },
        vec![lower_row_1, lower_row_2],
    )?;

    // outer (blue)
    let outer = stretch.new_node(
        Style {
            size: Size {
                width: Dimension::Points(200.0),
                height: Dimension::Points(73.0),
            },
            flex_direction: FlexDirection::Column,
            padding: Rect {
                top: Dimension::Points(5.0),
                ..Default::default()
            },
            ..Default::default()
        },
        vec![top_row, other_rows],
    )?;
    stretch.compute_layout(outer, Size::undefined())?;
    dbg!(stretch.layout(top_row)?);
    Ok(())
}

[jkelleyrtp]

I have noticed this too, and flex_shrink = 0 fixes the issue. I'll see if I can fix this in an active fork. Might be incorrect handling of flex-shrink.

I think the culprit code is here:

stretch/src/algo.rs

Lines 468 to 481 in 6879b9a

	// TODO this should really only be set inside the if-statement below but
	// that causes the target_main_size to never be set for some items
	child.outer_target_size.set_main(dir, child.target_size.main(dir) + child.margin.main(dir));
	let child_style = &self.nodes[child.node].style;
	if (child_style.flex_grow == 0.0 && child_style.flex_shrink == 0.0)
	|| (growing && child.flex_basis > child.hypothetical_inner_size.main(dir))
	|| (shrinking && child.flex_basis < child.hypothetical_inner_size.main(dir))
	{
	child.frozen = true;
	}
	}

Expected from chrome:

Returned from stretch:

Stretch with flex-shrink=0: