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

Incorrect width of children when using align baseline and child in row as reference #1358

Open
1 task done
thecodrr opened this issue Sep 3, 2023 · 2 comments
Open
1 task done

Incorrect width of children when using align baseline and child in row as reference #1358

thecodrr opened this issue Sep 3, 2023 · 2 comments
Labels
Algorithm

Comments

@thecodrr
Copy link

thecodrr commented Sep 3, 2023

Report

Issues and Steps to Reproduce

In the following test:

yoga/tests/YGAlignBaselineTest.cpp

Line 418 in 31b6c0d

TEST(YogaTest, align_baseline_parent_using_child_in_row_as_reference) {

The expected left position of root_child1_child1 is 500px while it should be 250px:

yoga/tests/YGAlignBaselineTest.cpp

Lines 453 to 454 in 31b6c0d

ASSERT_FLOAT_EQ(500, YGNodeLayoutGetLeft(root_child1_child1));
ASSERT_FLOAT_EQ(300, YGNodeLayoutGetTop(root_child1_child1));

Because its parent's (root_child1) width is 500px with flexDirection: row and 2 children of width 500px each:

yoga/tests/YGAlignBaselineTest.cpp

Lines 428 to 437 in 31b6c0d

const YGNodeRef root_child1 =
createYGNode(config, YGFlexDirectionRow, 500, 800, true);
YGNodeInsertChild(root, root_child1, 1);
const YGNodeRef root_child1_child0 =
createYGNode(config, YGFlexDirectionColumn, 500, 500, false);
YGNodeInsertChild(root_child1, root_child1_child0, 0);
const YGNodeRef root_child1_child1 =
createYGNode(config, YGFlexDirectionColumn, 500, 400, false);

Since the parent's width is only 500px, both children can only take 250px to remain within the bounds of the parent element. This is exactly how Firefox & Chrome layout this combination in this HTML:

<!DOCTYPE html>
<html>
  <head>
    <title>align baseline test</title>
    <style>
      body {
        margin: 0px;
      }
      #root {
        width: 1000px;
        height: 1000px;
        align-items: baseline;
        display: flex;
        flex-direction: row;
      }

      #root_child0 {
        display: flex;
        flex-direction: column;
        width: 500px;
        height: 600px;
      }

      #root_child1 {
        display: flex;
        flex-direction: row;
        width: 500px;
        height: 800px;
        align-items: baseline;
      }

      #root_child1_child0 {
        display: flex;
        flex-direction: column;
        width: 500px;
        height: 500px;
      }

      #root_child1_child1 {
        display: flex;
        flex-direction: column;
        width: 500px;
        height: 400px;
      }
    </style>
  </head>
  <body>
    <div id="root">
      <div id="root_child0"></div>
      <div id="root_child1">
        <div id="root_child1_child0"></div>
        <div id="root_child1_child1"></div>
      </div>
    </div>
  </body>
</html>

Note: you'll have to use the DevTools to find the width of root_child1_child0 and root_child1_child1 but it is 250px each.

Expected Behavior

The width of root_child1_child0 and root_child1_child1 should be 250px each.

Actual Behavior

The width of root_child1_child0 and root_child1_child1 is 500px each and overflows the parent.

Link to Code

Here's a fiddle: https://jsfiddle.net/0pLaox48/
@thecodrr thecodrr changed the title Align baseline tests are incorrect Incorrect width of children when using align baseline and child in row as reference Sep 3, 2023
@NextThread
Copy link

hi, can I work on this?

@NickGerleman
Copy link
Contributor

Yes please feel free to debug the logic in "CalculateLayout.cpp" for laying out a box with baseline alignment.

This was referenced Sep 7, 2023
Closed
Closed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
Algorithm
Projects
None yet
Milestone
No milestone
3 participants
@NickGerleman @thecodrr @NextThread