Fix flex-basis incompatibilities with the browsers #427

New Issue

Open

opened 2017-02-22 04:09:02 -08:00 by emilsjolander · 2 comments

emilsjolander commented 2017-02-22 04:09:02 -08:00 (Migrated from github.com)

Copy Link

I went through a bunch of edge cases with flex-basis and identified where Yoga does not match the behavior of chrome and other browsers. Bellow are the gentest fixtures which I found were generating failing tests.

To test these add them to YGFlexTest.html and run ruby rubygentest/gentest.rb to generate the tests. The run the test suite and see these tests fail. Most failures seem to be due to us expecting width/height and flexbasis to behave identically. This is not the case. The most obvious case is a container with a set flexbasis can grow to accommodate children of larger size but a container with a set width/height cannot.

<div id="flex_basis_unconstraint_row" style="flex-direction: row;">
  <div style="flex-basis: 50px; height: 100px"></div>
</div>

<div id="flex_basis_unconstraint_column" >
  <div style="flex-basis: 50px; width: 100px"></div>
</div>

<div id="flex_basis_smaller_than_content_row" style="flex-direction: row; width: 100px;">
  <div style="flex-basis: 50px;">
    <div style="width: 100px; height: 100px;"></div>
  </div>
</div>

<div id="flex_basis_larger_than_content_row" style="flex-direction: row; width: 100px;">
  <div style="flex-basis: 50px;">
    <div style="width: 10px; height: 100px;"></div>
  </div>
</div>

<div id="flex_basis_smaller_than_content_column" style="height: 100px;">
  <div style="flex-basis: 50px;">
    <div style="width: 100px; height: 100px;"></div>
  </div>
</div>

<div id="flex_basis_larger_than_content_column" style="height: 100px;">
  <div style="flex-basis: 50px;">
    <div style="width: 100px; height: 10px;"></div>
  </div>
</div>

<div id="flex_basis_smaller_then_content_with_flex_grow_large_size" style="flex-direction: row; width: 100px;">
  <div style="flex-basis: 0px; flex-grow: 1;">
    <div style="width: 70px; height: 100px;"></div>
  </div>
  <div style="flex-basis: 0px; flex-grow: 1;">
    <div style="width: 20px; height: 100px;"></div>
  </div>
</div>

<div id="flex_basis_slightly_smaller_then_content_with_flex_grow_large_size" style="flex-direction: row; width: 100px;">
  <div style="flex-basis: 60px; flex-grow: 1;">
    <div style="width: 70px; height: 100px;"></div>
  </div>
  <div style="flex-basis: 0px; flex-grow: 1;">
    <div style="width: 20px; height: 100px;"></div>
  </div>
</div>

<div id="flex_basis_smaller_then_content_with_flex_grow_very_large_size" style="flex-direction: row; width: 200px;">
  <div style="flex-basis: 0px; flex-grow: 1;">
    <div style="width: 70px; height: 100px;"></div>
  </div>
  <div style="flex-basis: 0px; flex-grow: 1;">
    <div style="width: 20px; height: 100px;"></div>
  </div>
</div>

<div id="flex_basis_smaller_then_content_with_flex_grow_small_size" style="flex-direction: row; width: 10px;">
  <div style="flex-basis: 0px; flex-grow: 1;">
    <div style="width: 70px; height: 100px;"></div>
  </div>
  <div style="flex-basis: 0px; flex-grow: 1;">
    <div style="width: 20px; height: 100px;"></div>
  </div>
</div>

<div id="flex_basis_smaller_then_content_with_flex_grow_unconstraint_size" style="flex-direction: row;">
  <div style="flex-basis: 0px; flex-grow: 1;">
    <div style="width: 70px; height: 100px;"></div>
  </div>
  <div style="flex-basis: 0px; flex-grow: 1;">
    <div style="width: 20px; height: 100px;"></div>
  </div>
</div>

<div id="width_smaller_then_content_with_flex_grow_large_size" style="flex-direction: row; width: 100px;">
  <div style="width: 0px; flex-grow: 1;">
    <div style="width: 70px; height: 100px;"></div>
  </div>
  <div style="width: 0px; flex-grow: 1;">
    <div style="width: 20px; height: 100px;"></div>
  </div>
</div>

<div id="width_smaller_then_content_with_flex_grow_very_large_size" style="flex-direction: row; width: 200px;">
  <div style="width: 0px; flex-grow: 1;">
    <div style="width: 70px; height: 100px;"></div>
  </div>
  <div style="width: 0px; flex-grow: 1;">
    <div style="width: 20px; height: 100px;"></div>
  </div>
</div>

<div id="width_smaller_then_content_with_flex_grow_small_size" style="flex-direction: row; width: 10px;">
  <div style="width: 0px; flex-grow: 1;">
    <div style="width: 70px; height: 100px;"></div>
  </div>
  <div style="width: 0px; flex-grow: 1;">
    <div style="width: 20px; height: 100px;"></div>
  </div>
</div>

<div id="width_smaller_then_content_with_flex_grow_unconstraint_size" style="flex-direction: row;">
  <div style="width: 0px; flex-grow: 1;">
    <div style="width: 70px; height: 100px;"></div>
  </div>
  <div style="width: 0px; flex-grow: 1;">
    <div style="width: 20px; height: 100px;"></div>
  </div>
</div>

<div id="flex_basis_smaller_than_main_dimen_row" style="flex-direction: row; width: 100px;">
  <div style="flex-basis: 10px; width: 50px; height: 50px;"></div>
</div>

<div id="flex_basis_smaller_than_main_dimen_column" style="height: 100px;">
  <div style="flex-basis: 10px; width: 50px; height: 50px;"></div>
</div>

<div id="flex_basis_and_main_dimen_set_when_flexing" style="flex-direction: row; width: 100px;">
  <div style="flex-basis: 10px; width: 50px; height: 50px; flex-grow: 1;"></div>
  <div style="flex-basis: 10px; width: 0px; height: 50px; flex-grow: 1;"></div>
</div>

I went through a bunch of edge cases with flex-basis and identified where Yoga does not match the behavior of chrome and other browsers. Bellow are the gentest fixtures which I found were generating failing tests. To test these add them to `YGFlexTest.html` and run `ruby rubygentest/gentest.rb` to generate the tests. The run the test suite and see these tests fail. Most failures seem to be due to us expecting width/height and flexbasis to behave identically. This is not the case. The most obvious case is a container with a set flexbasis can grow to accommodate children of larger size but a container with a set width/height cannot. ``` <div id="flex_basis_unconstraint_row" style="flex-direction: row;"> <div style="flex-basis: 50px; height: 100px"></div> </div> <div id="flex_basis_unconstraint_column" > <div style="flex-basis: 50px; width: 100px"></div> </div> <div id="flex_basis_smaller_than_content_row" style="flex-direction: row; width: 100px;"> <div style="flex-basis: 50px;"> <div style="width: 100px; height: 100px;"></div> </div> </div> <div id="flex_basis_larger_than_content_row" style="flex-direction: row; width: 100px;"> <div style="flex-basis: 50px;"> <div style="width: 10px; height: 100px;"></div> </div> </div> <div id="flex_basis_smaller_than_content_column" style="height: 100px;"> <div style="flex-basis: 50px;"> <div style="width: 100px; height: 100px;"></div> </div> </div> <div id="flex_basis_larger_than_content_column" style="height: 100px;"> <div style="flex-basis: 50px;"> <div style="width: 100px; height: 10px;"></div> </div> </div> <div id="flex_basis_smaller_then_content_with_flex_grow_large_size" style="flex-direction: row; width: 100px;"> <div style="flex-basis: 0px; flex-grow: 1;"> <div style="width: 70px; height: 100px;"></div> </div> <div style="flex-basis: 0px; flex-grow: 1;"> <div style="width: 20px; height: 100px;"></div> </div> </div> <div id="flex_basis_slightly_smaller_then_content_with_flex_grow_large_size" style="flex-direction: row; width: 100px;"> <div style="flex-basis: 60px; flex-grow: 1;"> <div style="width: 70px; height: 100px;"></div> </div> <div style="flex-basis: 0px; flex-grow: 1;"> <div style="width: 20px; height: 100px;"></div> </div> </div> <div id="flex_basis_smaller_then_content_with_flex_grow_very_large_size" style="flex-direction: row; width: 200px;"> <div style="flex-basis: 0px; flex-grow: 1;"> <div style="width: 70px; height: 100px;"></div> </div> <div style="flex-basis: 0px; flex-grow: 1;"> <div style="width: 20px; height: 100px;"></div> </div> </div> <div id="flex_basis_smaller_then_content_with_flex_grow_small_size" style="flex-direction: row; width: 10px;"> <div style="flex-basis: 0px; flex-grow: 1;"> <div style="width: 70px; height: 100px;"></div> </div> <div style="flex-basis: 0px; flex-grow: 1;"> <div style="width: 20px; height: 100px;"></div> </div> </div> <div id="flex_basis_smaller_then_content_with_flex_grow_unconstraint_size" style="flex-direction: row;"> <div style="flex-basis: 0px; flex-grow: 1;"> <div style="width: 70px; height: 100px;"></div> </div> <div style="flex-basis: 0px; flex-grow: 1;"> <div style="width: 20px; height: 100px;"></div> </div> </div> <div id="width_smaller_then_content_with_flex_grow_large_size" style="flex-direction: row; width: 100px;"> <div style="width: 0px; flex-grow: 1;"> <div style="width: 70px; height: 100px;"></div> </div> <div style="width: 0px; flex-grow: 1;"> <div style="width: 20px; height: 100px;"></div> </div> </div> <div id="width_smaller_then_content_with_flex_grow_very_large_size" style="flex-direction: row; width: 200px;"> <div style="width: 0px; flex-grow: 1;"> <div style="width: 70px; height: 100px;"></div> </div> <div style="width: 0px; flex-grow: 1;"> <div style="width: 20px; height: 100px;"></div> </div> </div> <div id="width_smaller_then_content_with_flex_grow_small_size" style="flex-direction: row; width: 10px;"> <div style="width: 0px; flex-grow: 1;"> <div style="width: 70px; height: 100px;"></div> </div> <div style="width: 0px; flex-grow: 1;"> <div style="width: 20px; height: 100px;"></div> </div> </div> <div id="width_smaller_then_content_with_flex_grow_unconstraint_size" style="flex-direction: row;"> <div style="width: 0px; flex-grow: 1;"> <div style="width: 70px; height: 100px;"></div> </div> <div style="width: 0px; flex-grow: 1;"> <div style="width: 20px; height: 100px;"></div> </div> </div> <div id="flex_basis_smaller_than_main_dimen_row" style="flex-direction: row; width: 100px;"> <div style="flex-basis: 10px; width: 50px; height: 50px;"></div> </div> <div id="flex_basis_smaller_than_main_dimen_column" style="height: 100px;"> <div style="flex-basis: 10px; width: 50px; height: 50px;"></div> </div> <div id="flex_basis_and_main_dimen_set_when_flexing" style="flex-direction: row; width: 100px;"> <div style="flex-basis: 10px; width: 50px; height: 50px; flex-grow: 1;"></div> <div style="flex-basis: 10px; width: 0px; height: 50px; flex-grow: 1;"></div> </div> ```

woehrl01 commented 2017-02-22 15:22:13 -08:00 (Migrated from github.com)

Copy Link

just had a look at some of these tests. These are super strange.

e.g: flex_basis_unconstraint_row

Chrome calculates root_child0.width = 50 but the root itself is root.width = 0.

I found the required change to make root_child0 with a width of 50, but it fails on root.width (because this is 50, then too)

just had a look at some of these tests. These are super strange. e.g: ```flex_basis_unconstraint_row``` Chrome calculates ```root_child0.width = 50``` but the root itself is ```root.width = 0```. I found the required change to make ```root_child0``` with a width of 50, but it fails on ```root.width``` (because this is 50, then too)

emilsjolander commented 2017-02-23 01:00:09 -08:00 (Migrated from github.com)

Copy Link

@woehrl01 Yeah this is all pretty strange. I don't expect there to be any quick fix for this and it might require re-architecting core parts of the algorithm due to early assumptions made on how browsers handle flex-basis.

This is high impact to fix but I suggest only working on this if you have a lot of time to spend :P I have been trying to find a quicker solution from time to time but failed. Open sourced this issue for transparency more than hope that someone else will tackle it. Thanks for having a look though!

@woehrl01 Yeah this is all pretty strange. I don't expect there to be any quick fix for this and it might require re-architecting core parts of the algorithm due to early assumptions made on how browsers handle flex-basis. This is high impact to fix but I suggest only working on this if you have a lot of time to spend :P I have been trying to find a quicker solution from time to time but failed. Open sourced this issue for transparency more than hope that someone else will tackle it. Thanks for having a look though!

Sign in to join this conversation.

No Branch/Tag Specified

Branches Tags

main

export-D80452590

export-D80174965

export-D80174963

export-D70986391

export-D70792047

NickGerleman-ubuntu-24-04

release-v3.2

dependabot/npm_and_yarn/cross-spawn-7.0.6

dependabot/npm_and_yarn/http-proxy-middleware-2.0.7

dependabot/npm_and_yarn/express-4.21.0

dependabot/npm_and_yarn/micromatch-4.0.8

dependabot/npm_and_yarn/webpack-5.94.0

release-v3.1

release-v3.0

release-v2.0

v3.2.1

v3.2.0

v3.1.0

v3.0.4

v3.0.3

v3.0.2

v3.0.1

v3.0.0

v2.0.1

v2.0.0

v2.0.0-beta.2

v2.0.0-beta.1

v1.19.0

1.18.0

v1.17.0

1.17.0

1.15.0

1.16.0

1.14.0

1.12.0-pre.3

1.12.0-pre.2

v1.13.0

v1.12.0-pre.1

1.12.0-pre.1

v1.12.0-pre.0

1.11.0

1.10.0

1.9.0

v1.8.0

1.8.0

1.7.0

1.6.0

1.5.2

1.5.1

1.5.0

1.4.1

1.4.0

1.3.0

1.2.0

v2017.02.07.00

v2017.01.27.00

v2017.01.23.00

v2017.01.16.00

v2017.01.09.00

v2017.01.02.00

v2016.12.26.00

v2016.12.19.00

v2016.12.12.00

v2016.12.05.00

v2016.11.28.00

v2016.11.21.00

v2016.11.14.00

v1.1.1

v1.1.0

v1.0.0

v0.0.6

v0.0.5

v0.0.4

0.0.3

Labels

Clear labels

Algorithm

Build and Infrastructure

C#

C++ Enhancement

CLA Signed

Discussion

Documentation

Feature Request

Java

JavaScript

Merged

Question

Reverted

Shared with Meta

Applied via automation to indicate that an Issue or Pull Request has been shared with the team.

YogaKit

YogaLayout ViewGroup

bug

dependencies

Pull requests that update a dependency file

duplicate

enhancement

fb-exported

fh:direct-merge-enabled

invalid

ruby

Pull requests that update Ruby code

wontfix

No Label

Algorithm

Milestone

No items

No Milestone

Projects

Clear projects

No project

Assignees

Clear assignees

DaddyFrosty

No Assignees

1 Participants

Notifications

Subscribe

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: DaddyFrosty/yoga#427

No description provided.