DaddyFrosty/yoga
1
0
Fork 0
Code Issues 96 Pull Requests 31 Actions Packages Projects Releases 33 Wiki Activity

Make aspectRatio property spec compliant #1295

New Issue
Open
opened 2023-05-15 06:59:42 -07:00 by nicoburns · 1 comment
nicoburns commented 2023-05-15 06:59:42 -07:00 (Migrated from github.com)
Copy Link

Report

Issues and Steps to Reproduce

The following can be added as gentest/fixtures/YGAspectRatioTest.html. Note that for the tests containing text, the test generation script/template will need support added for measuring text and generating a measure function (https://github.com/facebook/yoga/issues/1296)

<div id="aspect_ratio_flex_column_fill_height" style="display: flex; flex-direction: column; align-items: start; height: 100px; width: 100px;">
  <div style="width: 40px; aspect-ratio: 2;"></div>
</div>

<div id="aspect_ratio_flex_column_fill_max_height" style="display: flex; flex-direction: column; align-items: start; height: 100px; width: 100px;">
  <div style="max-width: 40px; aspect-ratio: 2;">HH​HH​HH​HH​HH​HH​HH​HH​HH​HH​HH</div>
</div>

<div id="aspect_ratio_flex_column_fill_max_width" style="display: flex; flex-direction: column; align-items: start; height: 100px; width: 100px;">
  <div style="max-height: 20px; aspect-ratio: 2;">HH​HH​HH​HH</div>
</div>

<div id="aspect_ratio_flex_column_fill_min_height" style="display: flex; flex-direction: column; align-items: start; height: 100px; width: 100px;">
  <div style="min-width: 40px; aspect-ratio: 2;"></div>
</div>

<div id="aspect_ratio_flex_column_fill_min_width" style="display: flex; flex-direction: column; align-items: start; height: 100px; width: 100px;">
  <div style="min-height: 40px; aspect-ratio: 2;">
    
  </div>
</div>

<div id="aspect_ratio_flex_column_fill_width" style="display: flex; flex-direction: column; align-items: start; height: 100px; width: 100px;">
  <div style="height: 40px; aspect-ratio: 2;"></div>
</div>

<div id="aspect_ratio_flex_column_fill_width_flex" style="display: grid; flex-direction: column; height: 100px; width: 100px;">
  <div style="height: 50px; aspect-ratio: 2;"></div>
</div>

<div id="aspect_ratio_flex_column_stretch_fill_height" style="display: flex; flex-direction: column; height: 100px; width: 100px;">
  <div style="width: 40px; aspect-ratio: 2;"></div>
</div>

<div id="aspect_ratio_flex_column_stretch_fill_max_height" style="display: flex; flex-direction: column; height: 100px; width: 100px;">
  <div style="max-width: 40px; aspect-ratio: 2;">HH​HH​HH​HH​HH​HH​HH​HH​HH​HH​HH</div>
</div>

<div id="aspect_ratio_flex_column_stretch_fill_max_width" style="display: flex; flex-direction: column; height: 100px; width: 100px;">
  <div style="max-height: 20px; aspect-ratio: 2;">HH​HH​HH​HH</div>
</div>

<div id="xaspect_ratio_flex_column_stretch_fill_min_height" style="display: flex; flex-direction: column; height: 100px; width: 100px;">
  <div style="min-width: 40px; aspect-ratio: 2;"></div>
</div>

<div id="xaspect_ratio_flex_column_stretch_fill_min_width" style="display: flex; flex-direction: column; height: 100px; width: 100px;">
  <div style="min-height: 40px; aspect-ratio: 2;">
    
  </div>
</div>

<div id="aspect_ratio_flex_column_stretch_fill_width" style="display: flex; flex-direction: column; height: 100px; width: 100px;">
  <div style="height: 40px; aspect-ratio: 2;"></div>
</div>

<div id="aspect_ratio_flex_row_fill_height" style="display: flex; align-items: start; height: 100px; width: 100px;">
  <div style="width: 40px; aspect-ratio: 2;"></div>
</div>

<div id="aspect_ratio_flex_row_fill_max_height" style="display: flex; align-items: start; height: 100px; width: 100px;">
  <div style="max-width: 40px; aspect-ratio: 2;">HH​HH​HH​HH​HH​HH​HH​HH​HH​HH​HH</div>
</div>

<div id="aspect_ratio_flex_row_fill_max_width" style="display: flex; align-items: start; height: 100px; width: 100px;">
  <div style="max-height: 20px; aspect-ratio: 2;">HH​HH​HH​HH</div>
</div>

<div id="aspect_ratio_flex_row_fill_min_height" style="display: flex; align-items: start; height: 100px; width: 100px;">
  <div style="min-width: 40px; aspect-ratio: 2;"></div>
</div>

<div id="aspect_ratio_flex_row_fill_min_width" style="display: flex; align-items: start; height: 100px; width: 100px;">
  <div style="min-height: 40px; aspect-ratio: 2;">
    
  </div>
</div>

<div id="aspect_ratio_flex_row_fill_width" style="display: flex; align-items: start; height: 100px; width: 100px;">
  <div style="height: 40px; aspect-ratio: 2;"></div>
</div>

<div id="aspect_ratio_flex_row_fill_width_flex" style="display: grid; align-items: start; height: 100px; width: 100px;">
  <div style="height: 50px; aspect-ratio: 2;"></div>
</div>

<div id="aspect_ratio_flex_row_stretch_fill_height" style="display: flex; height: 100px; width: 100px;">
  <div style="width: 40px; aspect-ratio: 2;"></div>
</div>

<div id="aspect_ratio_flex_row_stretch_fill_max_height" style="display: flex; height: 100px; width: 100px;">
  <div style="max-width: 40px; aspect-ratio: 2;">HH​HH​HH​HH​HH​HH​HH​HH​HH​HH​HH</div>
</div>

<div id="aspect_ratio_flex_row_stretch_fill_max_width" style="display: flex; height: 100px; width: 100px;">
  <div style="max-height: 20px; aspect-ratio: 2;">HH​HH​HH​HH</div>
</div>

<div id="aspect_ratio_flex_row_stretch_fill_min_height" style="display: flex; height: 100px; width: 100px;">
  <div style="min-width: 40px; aspect-ratio: 2;"></div>
</div>

<div id="aspect_ratio_flex_row_stretch_fill_min_width" style="display: flex; height: 100px; width: 100px;">
  <div style="min-height: 40px; aspect-ratio: 2;"></div>
</div>

<div id="aspect_ratio_flex_row_stretch_fill_width" style="display: flex; height: 100px; width: 100px;">
  <div style="height: 40px; aspect-ratio: 2;"></div>
</div>

<div id="absolute_aspect_ratio_aspect_ratio_overrides_height_of_full_inset" style="display: flex; width: 400px; height: 300px;">
  <div style="position: absolute; top: 5%; bottom: 5%; left: 5%; right: 5%; aspect-ratio: 3;"></div>
</div>

<div id="absolute_aspect_ratio_fill_height" style="display: flex; width: 400px; height: 300px;">
  <div style="position: absolute; top: 5%; left: 5%; width: 50%; aspect-ratio: 3;"></div>
</div>

<div id="absolute_aspect_ratio_fill_height_from_inset" style="display: flex; width: 400px; height: 300px;">
  <div style="position: absolute; top: 5%; left: 10%; right: 10%; aspect-ratio: 3;"></div>
</div>

<div id="absolute_aspect_ratio_fill_max_height" style="display: flex; width: 400px; height: 300px;">
  <div style="position: absolute; max-width: 50px; aspect-ratio: 3;">HHHH​HHHH​HHHH​HHHH​HHHH​HHHH​HHHH​HHHH​HHHH</div>
</div>

<div id="absolute_aspect_ratio_fill_max_width" style="display: flex; width: 400px; height: 300px;">
  <div style="position: absolute; max-height: 50px; aspect-ratio: 0.5;">HHHH​HHHH​HHHH​HHHH​HHHH​HHHH​HHHH​HHHH​HHHH</div>
</div>

<div id="absolute_aspect_ratio_fill_min_height" style="display: flex; width: 400px; height: 300px;">
  <div style="position: absolute; min-width: 50px; aspect-ratio: 3;"></div>
</div>

<div id="absolute_aspect_ratio_fill_min_width" style="display: flex; width: 400px; height: 300px;">
  <div style="position: absolute; min-height: 50px; aspect-ratio: 0.5;"></div>
</div>

<div id="absolute_aspect_ratio_fill_width" style="display: flex; width: 400px; height: 300px;">
  <div style="position: absolute; top: 5%; left: 5%; height: 20%; aspect-ratio: 3;"></div>
</div>

<div id="absolute_aspect_ratio_fill_width_from_inset" style="display: flex; width: 400px; height: 300px;">
  <div style="position: absolute; top: 30%; bottom: 50%; aspect-ratio: 3;"></div>
</div>

<div id="absolute_aspect_ratio_height_overrides_inset" style="display: flex; width: 400px; height: 300px;">
  <div style="position: absolute; top: 30%; bottom: 50%; height: 10%; aspect-ratio: 3;"></div>
</div>

<div id="absolute_aspect_ratio_width_overrides_inset" style="display: flex; width: 400px; height: 300px;">
  <div style="position: absolute; top: 5%; left: 10%; right: 10%; width: 40%; aspect-ratio: 3;"></div>
</div>

Expected Behavior

Tests should pass

Actual Behavior

Tests fail

Link to Code

See 974473aa99/website/contents/properties/aspect-ratio.md (L2) which documents Yoga's aspectRatio support as non-standard

# Report # Issues and Steps to Reproduce The following can be added as `gentest/fixtures/YGAspectRatioTest.html`. Note that for the tests containing text, the test generation script/template will need support added for measuring text and generating a measure function (https://github.com/facebook/yoga/issues/1296) ```html <div id="aspect_ratio_flex_column_fill_height" style="display: flex; flex-direction: column; align-items: start; height: 100px; width: 100px;"> <div style="width: 40px; aspect-ratio: 2;"></div> </div> <div id="aspect_ratio_flex_column_fill_max_height" style="display: flex; flex-direction: column; align-items: start; height: 100px; width: 100px;"> <div style="max-width: 40px; aspect-ratio: 2;">HH​HH​HH​HH​HH​HH​HH​HH​HH​HH​HH</div> </div> <div id="aspect_ratio_flex_column_fill_max_width" style="display: flex; flex-direction: column; align-items: start; height: 100px; width: 100px;"> <div style="max-height: 20px; aspect-ratio: 2;">HH​HH​HH​HH</div> </div> <div id="aspect_ratio_flex_column_fill_min_height" style="display: flex; flex-direction: column; align-items: start; height: 100px; width: 100px;"> <div style="min-width: 40px; aspect-ratio: 2;"></div> </div> <div id="aspect_ratio_flex_column_fill_min_width" style="display: flex; flex-direction: column; align-items: start; height: 100px; width: 100px;"> <div style="min-height: 40px; aspect-ratio: 2;"> </div> </div> <div id="aspect_ratio_flex_column_fill_width" style="display: flex; flex-direction: column; align-items: start; height: 100px; width: 100px;"> <div style="height: 40px; aspect-ratio: 2;"></div> </div> <div id="aspect_ratio_flex_column_fill_width_flex" style="display: grid; flex-direction: column; height: 100px; width: 100px;"> <div style="height: 50px; aspect-ratio: 2;"></div> </div> <div id="aspect_ratio_flex_column_stretch_fill_height" style="display: flex; flex-direction: column; height: 100px; width: 100px;"> <div style="width: 40px; aspect-ratio: 2;"></div> </div> <div id="aspect_ratio_flex_column_stretch_fill_max_height" style="display: flex; flex-direction: column; height: 100px; width: 100px;"> <div style="max-width: 40px; aspect-ratio: 2;">HH​HH​HH​HH​HH​HH​HH​HH​HH​HH​HH</div> </div> <div id="aspect_ratio_flex_column_stretch_fill_max_width" style="display: flex; flex-direction: column; height: 100px; width: 100px;"> <div style="max-height: 20px; aspect-ratio: 2;">HH​HH​HH​HH</div> </div> <div id="xaspect_ratio_flex_column_stretch_fill_min_height" style="display: flex; flex-direction: column; height: 100px; width: 100px;"> <div style="min-width: 40px; aspect-ratio: 2;"></div> </div> <div id="xaspect_ratio_flex_column_stretch_fill_min_width" style="display: flex; flex-direction: column; height: 100px; width: 100px;"> <div style="min-height: 40px; aspect-ratio: 2;"> </div> </div> <div id="aspect_ratio_flex_column_stretch_fill_width" style="display: flex; flex-direction: column; height: 100px; width: 100px;"> <div style="height: 40px; aspect-ratio: 2;"></div> </div> <div id="aspect_ratio_flex_row_fill_height" style="display: flex; align-items: start; height: 100px; width: 100px;"> <div style="width: 40px; aspect-ratio: 2;"></div> </div> <div id="aspect_ratio_flex_row_fill_max_height" style="display: flex; align-items: start; height: 100px; width: 100px;"> <div style="max-width: 40px; aspect-ratio: 2;">HH​HH​HH​HH​HH​HH​HH​HH​HH​HH​HH</div> </div> <div id="aspect_ratio_flex_row_fill_max_width" style="display: flex; align-items: start; height: 100px; width: 100px;"> <div style="max-height: 20px; aspect-ratio: 2;">HH​HH​HH​HH</div> </div> <div id="aspect_ratio_flex_row_fill_min_height" style="display: flex; align-items: start; height: 100px; width: 100px;"> <div style="min-width: 40px; aspect-ratio: 2;"></div> </div> <div id="aspect_ratio_flex_row_fill_min_width" style="display: flex; align-items: start; height: 100px; width: 100px;"> <div style="min-height: 40px; aspect-ratio: 2;"> </div> </div> <div id="aspect_ratio_flex_row_fill_width" style="display: flex; align-items: start; height: 100px; width: 100px;"> <div style="height: 40px; aspect-ratio: 2;"></div> </div> <div id="aspect_ratio_flex_row_fill_width_flex" style="display: grid; align-items: start; height: 100px; width: 100px;"> <div style="height: 50px; aspect-ratio: 2;"></div> </div> <div id="aspect_ratio_flex_row_stretch_fill_height" style="display: flex; height: 100px; width: 100px;"> <div style="width: 40px; aspect-ratio: 2;"></div> </div> <div id="aspect_ratio_flex_row_stretch_fill_max_height" style="display: flex; height: 100px; width: 100px;"> <div style="max-width: 40px; aspect-ratio: 2;">HH​HH​HH​HH​HH​HH​HH​HH​HH​HH​HH</div> </div> <div id="aspect_ratio_flex_row_stretch_fill_max_width" style="display: flex; height: 100px; width: 100px;"> <div style="max-height: 20px; aspect-ratio: 2;">HH​HH​HH​HH</div> </div> <div id="aspect_ratio_flex_row_stretch_fill_min_height" style="display: flex; height: 100px; width: 100px;"> <div style="min-width: 40px; aspect-ratio: 2;"></div> </div> <div id="aspect_ratio_flex_row_stretch_fill_min_width" style="display: flex; height: 100px; width: 100px;"> <div style="min-height: 40px; aspect-ratio: 2;"></div> </div> <div id="aspect_ratio_flex_row_stretch_fill_width" style="display: flex; height: 100px; width: 100px;"> <div style="height: 40px; aspect-ratio: 2;"></div> </div> <div id="absolute_aspect_ratio_aspect_ratio_overrides_height_of_full_inset" style="display: flex; width: 400px; height: 300px;"> <div style="position: absolute; top: 5%; bottom: 5%; left: 5%; right: 5%; aspect-ratio: 3;"></div> </div> <div id="absolute_aspect_ratio_fill_height" style="display: flex; width: 400px; height: 300px;"> <div style="position: absolute; top: 5%; left: 5%; width: 50%; aspect-ratio: 3;"></div> </div> <div id="absolute_aspect_ratio_fill_height_from_inset" style="display: flex; width: 400px; height: 300px;"> <div style="position: absolute; top: 5%; left: 10%; right: 10%; aspect-ratio: 3;"></div> </div> <div id="absolute_aspect_ratio_fill_max_height" style="display: flex; width: 400px; height: 300px;"> <div style="position: absolute; max-width: 50px; aspect-ratio: 3;">HHHH​HHHH​HHHH​HHHH​HHHH​HHHH​HHHH​HHHH​HHHH</div> </div> <div id="absolute_aspect_ratio_fill_max_width" style="display: flex; width: 400px; height: 300px;"> <div style="position: absolute; max-height: 50px; aspect-ratio: 0.5;">HHHH​HHHH​HHHH​HHHH​HHHH​HHHH​HHHH​HHHH​HHHH</div> </div> <div id="absolute_aspect_ratio_fill_min_height" style="display: flex; width: 400px; height: 300px;"> <div style="position: absolute; min-width: 50px; aspect-ratio: 3;"></div> </div> <div id="absolute_aspect_ratio_fill_min_width" style="display: flex; width: 400px; height: 300px;"> <div style="position: absolute; min-height: 50px; aspect-ratio: 0.5;"></div> </div> <div id="absolute_aspect_ratio_fill_width" style="display: flex; width: 400px; height: 300px;"> <div style="position: absolute; top: 5%; left: 5%; height: 20%; aspect-ratio: 3;"></div> </div> <div id="absolute_aspect_ratio_fill_width_from_inset" style="display: flex; width: 400px; height: 300px;"> <div style="position: absolute; top: 30%; bottom: 50%; aspect-ratio: 3;"></div> </div> <div id="absolute_aspect_ratio_height_overrides_inset" style="display: flex; width: 400px; height: 300px;"> <div style="position: absolute; top: 30%; bottom: 50%; height: 10%; aspect-ratio: 3;"></div> </div> <div id="absolute_aspect_ratio_width_overrides_inset" style="display: flex; width: 400px; height: 300px;"> <div style="position: absolute; top: 5%; left: 10%; right: 10%; width: 40%; aspect-ratio: 3;"></div> </div> ``` # Expected Behavior Tests should pass # Actual Behavior Tests fail # Link to Code See https://github.com/facebook/yoga/blob/974473aa99a2432b2f083446fc5ff9f71c4a3b08/website/contents/properties/aspect-ratio.md?plain=1#L2 which documents Yoga's aspectRatio support as non-standard
NextThread commented 2023-08-29 23:36:00 -07:00 (Migrated from github.com)
Copy Link

can I work on this?

can I work on this?
❤️ 1
Sign in to join this conversation.
No Branch/Tag Specified
Branches Tags
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
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: DaddyFrosty/yoga#1295
No description provided.
Delete Branch "%!s()"

Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?