Make aspectRatio property spec compliant

[nicoburns]

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 (#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

yoga/website/contents/properties/aspect-ratio.md

Line 2 in 974473a

path: "/docs/aspect-ratio"

which documents Yoga's aspectRatio support as non-standard

[NextThread]

can I work on this?