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

New Issue

2023-09-02T21:22:51-07:00

thecodrr commented

2023-09-02 21:22:51 -07:00

(Migrated from github.com)

Report

I have searched existing issues and this is not a duplicate

Issues and Steps to Reproduce

In the following test:

31b6c0ddc9/tests/YGAlignBaselineTest.cpp (L418)

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

31b6c0ddc9/tests/YGAlignBaselineTest.cpp (L453-L454)

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

31b6c0ddc9/tests/YGAlignBaselineTest.cpp (L428-L437)

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/

# Report - [x] I have searched [existing issues](https://github.com/facebook/yoga/issues) and this is not a duplicate # Issues and Steps to Reproduce In the following test: https://github.com/facebook/yoga/blob/31b6c0ddc91d2f071f4ec7650dd7e2bfed657b14/tests/YGAlignBaselineTest.cpp#L418 The expected `left` position of `root_child1_child1` is 500px while it should be 250px: https://github.com/facebook/yoga/blob/31b6c0ddc91d2f071f4ec7650dd7e2bfed657b14/tests/YGAlignBaselineTest.cpp#L453-L454 Because its parent's (`root_child1`) width is 500px with `flexDirection: row` and 2 children of width `500px` each: https://github.com/facebook/yoga/blob/31b6c0ddc91d2f071f4ec7650dd7e2bfed657b14/tests/YGAlignBaselineTest.cpp#L428-L437 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: ```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/

NextThread commented

2023-09-06 20:49:16 -07:00

(Migrated from github.com)

hi, can I work on this?

NickGerleman commented

2023-09-06 21:10:13 -07:00

(Migrated from github.com)

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

Sign in to join this conversation.

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: DaddyFrosty/yoga#1358