Make `aspectRatio` property spec compliant

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

Start with the documented behavior in website/contents/properties/aspect-ratio.md and the aspect-ratio implementation and layout tests in the repository. Add gentest/fixtures/YGAspectRatioTest.html from the report, noting that text cases depend on the generator work in issue #1296. Done means the listed flex and absolute-positioned aspect-ratio cases pass.