Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Margin collapsing doesn't work for direct children of a root node #601

Closed
thecodrr opened this issue Jan 21, 2024 · 1 comment
Closed

Margin collapsing doesn't work for direct children of a root node #601

thecodrr opened this issue Jan 21, 2024 · 1 comment
Labels
bug Something isn't working

Comments

@thecodrr
Copy link

taffy version

563d5dc

Platform

Rust

What you did

    use taffy::prelude::*;

    // First create an instance of TaffyTree
    let mut tree: TaffyTree<()> = TaffyTree::new();

    let node1 = tree
        .new_leaf(Style {
            size: Size { width: length(100.0), height: length(50.0) },
            margin: Rect::<LengthPercentageAuto> {
                bottom: LengthPercentageAuto::Length(0.0),
                top: LengthPercentageAuto::Length(10.0),
                left: LengthPercentageAuto::Length(0.0),
                right: LengthPercentageAuto::Length(0.0),
            },
            ..Default::default()
        })
        .unwrap();

    let node2 = tree
        .new_leaf(Style {
            size: Size { width: length(100.0), height: length(50.0) },
            margin: Rect::<LengthPercentageAuto> {
                bottom: LengthPercentageAuto::Length(0.0),
                top: LengthPercentageAuto::Length(10.0),
                left: LengthPercentageAuto::Length(0.0),
                right: LengthPercentageAuto::Length(0.0),
            },
            ..Default::default()
        })
        .unwrap();

    let root_node = tree
        .new_with_children(
            Style {
                display: Display::Block,
                position: Position::Relative,
                size: Size { width: length(100.0), height: length(100.0) },
                ..Default::default()
            },
            &[node1, node2],
        )
        .unwrap();

    tree.compute_layout(root_node, Size::MAX_CONTENT).unwrap();

    assert_eq!(tree.layout(node1).unwrap().location.y, 0.0);
    assert_eq!(tree.layout(node2).unwrap().location.y, 60.0);

What went wrong

When Display::Block is set for a root node, margin collapsing doesn't work for its direct children.

Additional information

This is probably occuring due to this line:

taffy/src/compute/mod.rs

Line 48 in 563d5dc

Line::FALSE,

@thecodrr thecodrr added the bug Something isn't working label Jan 21, 2024
@nicoburns
Copy link
Collaborator

@thecodrr I may be wrong, but looking at this example again, I don't think that there should be any margin collapsing happening here. I believe your example is equivalent to the following HTML:

<body>
     <div style="width: 100px; height: 100px;">
         <div style="width: 100px; height: 50px; margin-top: 10px;"></div>
         <div style="width: 100px; height: 50px; margin-top: 10px;"></div>
     </div>
</body>
  • The margins of node1 and node2 cannot collapse because they are both top margins (and therefore are not adjacent to each other).
  • The margins of node1 cannot collapse with the margins of root_node because root_node doesn't have any margin set.
  • Same for node2 and root_node

Did you mean to set bottom margin on node1?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
bug Something isn't working
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@nicoburns @thecodrr