yoga/gentest/fixtures/YGAlignContentTest.html

<!-- ALIGN CONTENT: FLEX-START -->

<div id="align_content_flex_start_nowrap" style="width: 140px; height: 120px; flex-direction: row; align-content: flex-start;">
  <div style="width: 50px; height: 10px;"></div>
  <div style="width: 50px; height: 10px;"></div>
</div>

<div id="align_content_flex_start_wrap" style="width: 140px; height: 120px; flex-wrap: wrap; flex-direction: row; align-content: flex-start;">
  <div style="width: 50px; height: 10px;"></div>
  <div style="width: 50px; height: 10px;"></div>
  <div style="width: 50px; height: 10px;"></div>
  <div style="width: 50px; height: 10px;"></div>
  <div style="width: 50px; height: 10px;"></div>
</div>

<!-- This tests the case where `flex-wrap: wrap` but the content does not actually wrap -->
<div id="align_content_flex_start_wrap_singleline" style="width: 140px; height: 120px; flex-wrap: wrap; flex-direction: row; align-content: flex-start;">
  <div style="width: 50px; height: 10px;"></div>
  <div style="width: 50px; height: 10px;"></div>
</div>

<div id="align_content_flex_start_wrapped_negative_space" style="display: flex; flex-direction: column; width: 320px; height: 320px; border-width: 60px;">
  <div style="display: flex; flex-direction: row; flex-wrap: wrap; align-content: flex-start; justify-content: center; height: 10px;">
    <div style="width: 80%; height: 20px; flex-shrink: 0;"></div>
    <div style="width: 80%; height: 20px; flex-shrink: 0;"></div>
    <div style="width: 80%; height: 20px; flex-shrink: 0;"></div>
  </div>
</div>

<div id="align_content_flex_start_wrapped_negative_space_gap" style="display: flex; flex-direction: column; width: 320px; height: 320px; border-width: 60px;">
  <div style="display: flex; flex-direction: row; flex-wrap: wrap; align-content: flex-start; justify-content: center; height: 10px; gap: 10px;">
    <div style="width: 80%; height: 20px; flex-shrink: 0;"></div>
    <div style="width: 80%; height: 20px; flex-shrink: 0;"></div>
    <div style="width: 80%; height: 20px; flex-shrink: 0;"></div>
  </div>
</div>

<div id="align_content_flex_start_without_height_on_children" style="width: 100px; height: 100px; flex-wrap: wrap; flex-direction: column; align-content: flex-start;">
  <div style="width: 50px;"></div>
  <div style="width: 50px; height: 10px;"></div>
  <div style="width: 50px;"></div>
  <div style="width: 50px; height: 10px;"></div>
  <div style="width: 50px;"></div>
</div>

<div id="align_content_flex_start_with_flex" style="width: 100px; height: 120px; flex-wrap: wrap; flex-direction: column; align-content: flex-start;">
  <div style="width: 50px; flex: 1; flex-shrink: 0;"></div>
  <div style="width: 50px; flex: 1; height: 10px; flex-shrink: 0;"></div>
  <div style="width: 50px;"></div>
  <div style="width: 50px; flex: 1;"></div>
  <div style="width: 50px;"></div>
</div>

<!-- ALIGN CONTENT: FLEX-END -->

<div id="align_content_flex_end_nowrap" style="width: 140px; height: 120px; flex-direction: row; align-content: flex-end;">
  <div style="width: 50px; height: 10px;"></div>
  <div style="width: 50px; height: 10px;"></div>
</div>

<div id="align_content_flex_end_wrap" style="width: 140px; height: 120px; flex-wrap: wrap; flex-direction: row; align-content: flex-end;">
  <div style="width: 50px; height: 10px;"></div>
  <div style="width: 50px; height: 10px;"></div>
  <div style="width: 50px; height: 10px;"></div>
  <div style="width: 50px; height: 10px;"></div>
  <div style="width: 50px; height: 10px;"></div>
</div>

<!-- This tests the case where `flex-wrap: wrap` but the content does not actually wrap -->
<div id="align_content_flex_end_wrap_singleline" style="width: 140px; height: 120px; flex-wrap: wrap; flex-direction: row; align-content: flex-end;">
  <div style="width: 50px; height: 10px;"></div>
  <div style="width: 50px; height: 10px;"></div>
</div>

<div id="align_content_flex_end_wrapped_negative_space" style="display: flex; flex-direction: column; width: 320px; height: 320px; border-width: 60px;">
  <div style="display: flex; flex-direction: row; flex-wrap: wrap; align-content: flex-end; justify-content: center; height: 10px;">
    <div style="width: 80%; height: 20px; flex-shrink: 0;"></div>
    <div style="width: 80%; height: 20px; flex-shrink: 0;"></div>
    <div style="width: 80%; height: 20px; flex-shrink: 0;"></div>
  </div>
</div>

<div id="align_content_flex_end_wrapped_negative_space_gap" style="display: flex; flex-direction: column; width: 320px; height: 320px; border-width: 60px;">
  <div style="display: flex; flex-direction: row; flex-wrap: wrap; align-content: flex-end; justify-content: center; height: 10px; gap: 10px;">
    <div style="width: 80%; height: 20px; flex-shrink: 0;"></div>
    <div style="width: 80%; height: 20px; flex-shrink: 0;"></div>
    <div style="width: 80%; height: 20px; flex-shrink: 0;"></div>
  </div>
</div>


<!-- ALIGN CONTENT: CENTER -->

<div id="align_content_center_nowrap" style="width: 140px; height: 120px; flex-direction: row; align-content: center;">
  <div style="width: 50px; height: 10px;"></div>
  <div style="width: 50px; height: 10px;"></div>
</div>

<div id="align_content_center_wrap" style="width: 140px; height: 120px; flex-wrap: wrap; flex-direction: row; align-content: center;">
  <div style="width: 50px; height: 10px;"></div>
  <div style="width: 50px; height: 10px;"></div>
  <div style="width: 50px; height: 10px;"></div>
  <div style="width: 50px; height: 10px;"></div>
  <div style="width: 50px; height: 10px;"></div>
</div>

<!-- This tests the case where `flex-wrap: wrap` but the content does not actually wrap -->
<div id="align_content_center_wrap_singleline" style="width: 140px; height: 120px; flex-wrap: wrap; flex-direction: row; align-content: center;">
  <div style="width: 50px; height: 10px;"></div>
  <div style="width: 50px; height: 10px;"></div>
</div>

<div id="align_content_center_wrapped_negative_space" style="display: flex; flex-direction: column; width: 320px; height: 320px; border-width: 60px;">
  <div style="display: flex; flex-direction: row; flex-wrap: wrap; align-content: center; justify-content: center; height: 10px;">
    <div style="width: 80%; height: 20px; flex-shrink: 0;"></div>
    <div style="width: 80%; height: 20px; flex-shrink: 0;"></div>
    <div style="width: 80%; height: 20px; flex-shrink: 0;"></div>
  </div>
</div>

<div id="align_content_center_wrapped_negative_space_gap" style="display: flex; flex-direction: column; width: 320px; height: 320px; border-width: 60px;">
  <div style="display: flex; flex-direction: row; flex-wrap: wrap; align-content: center; justify-content: center; height: 10px; gap: 10px;">
    <div style="width: 80%; height: 20px; flex-shrink: 0;"></div>
    <div style="width: 80%; height: 20px; flex-shrink: 0;"></div>
    <div style="width: 80%; height: 20px; flex-shrink: 0;"></div>
  </div>
</div>

<!-- ALIGN CONTENT: SPACE-BETWEEN -->

<div id="align_content_space_between_nowrap" style="width: 140px; height: 120px; flex-direction: row; align-content: space-between;">
  <div style="width: 50px; height: 10px;"></div>
  <div style="width: 50px; height: 10px;"></div>
</div>

<div id="align_content_space_between_wrap" style="width: 140px; height: 120px; flex-wrap: wrap; flex-direction: row; align-content: space-between;">
  <div style="width: 50px; height: 10px;"></div>
  <div style="width: 50px; height: 10px;"></div>
  <div style="width: 50px; height: 10px;"></div>
  <div style="width: 50px; height: 10px;"></div>
  <div style="width: 50px; height: 10px;"></div>
</div>

<!-- This tests the case where `flex-wrap: wrap` but the content does not actually wrap -->
<div id="align_content_space_between_wrap_singleline" style="width: 140px; height: 120px; flex-wrap: wrap; flex-direction: row; align-content: space-between;">
  <div style="width: 50px; height: 10px;"></div>
  <div style="width: 50px; height: 10px;"></div>
</div>

<div id="align_content_space_between_wrapped_negative_space" style="display: flex; flex-direction: column; width: 320px; height: 320px; border-width: 60px;">
  <div style="display: flex; flex-direction: row; flex-wrap: wrap; align-content: space-between; justify-content: center; height: 10px;">
    <div style="width: 80%; height: 20px; flex-shrink: 0;"></div>
    <div style="width: 80%; height: 20px; flex-shrink: 0;"></div>
    <div style="width: 80%; height: 20px; flex-shrink: 0;"></div>
  </div>
</div>

<div id="align_content_space_between_wrapped_negative_space_gap" style="display: flex; flex-direction: column; width: 320px; height: 320px; border-width: 60px;">
  <div style="display: flex; flex-direction: row; flex-wrap: wrap; align-content: space-between; justify-content: center; height: 10px; gap: 10px;">
    <div style="width: 80%; height: 20px; flex-shrink: 0;"></div>
    <div style="width: 80%; height: 20px; flex-shrink: 0;"></div>
    <div style="width: 80%; height: 20px; flex-shrink: 0;"></div>
  </div>
</div>

<!-- ALIGN CONTENT: SPACE-AROUND -->

<div id="align_content_space_around_nowrap" style="width: 140px; height: 120px; flex-direction: row; align-content: space-around;">
  <div style="width: 50px; height: 10px;"></div>
  <div style="width: 50px; height: 10px;"></div>
</div>

<div id="align_content_space_around_wrap" style="width: 140px; height: 120px; flex-wrap: wrap; flex-direction: row; align-content: space-around;">
  <div style="width: 50px; height: 10px;"></div>
  <div style="width: 50px; height: 10px;"></div>
  <div style="width: 50px; height: 10px;"></div>
  <div style="width: 50px; height: 10px;"></div>
  <div style="width: 50px; height: 10px;"></div>
</div>

<!-- This tests the case where `flex-wrap: wrap` but the content does not actually wrap -->
<div id="align_content_space_around_wrap_singleline" style="width: 140px; height: 120px; flex-wrap: wrap; flex-direction: row; align-content: space-around;">
  <div style="width: 50px; height: 10px;"></div>
  <div style="width: 50px; height: 10px;"></div>
</div>

<div id="align_content_space_around_wrapped_negative_space" style="display: flex; flex-direction: column; width: 320px; height: 320px; border-width: 60px;">
  <div style="display: flex; flex-direction: row; flex-wrap: wrap; align-content: space-around; justify-content: center; height: 10px;">
    <div style="width: 80%; height: 20px; flex-shrink: 0;"></div>
    <div style="width: 80%; height: 20px; flex-shrink: 0;"></div>
    <div style="width: 80%; height: 20px; flex-shrink: 0;"></div>
  </div>
</div>

<div id="align_content_space_around_wrapped_negative_space_gap" style="display: flex; flex-direction: column; width: 320px; height: 320px; border-width: 60px;">
  <div style="display: flex; flex-direction: row; flex-wrap: wrap; align-content: space-around; justify-content: center; height: 10px; gap: 10px;">
    <div style="width: 80%; height: 20px; flex-shrink: 0;"></div>
    <div style="width: 80%; height: 20px; flex-shrink: 0;"></div>
    <div style="width: 80%; height: 20px; flex-shrink: 0;"></div>
  </div>
</div>


<!-- ALIGN CONTENT: SPACE-EVENLY -->

<div id="align_content_space_evenly_nowrap" style="width: 140px; height: 120px; flex-direction: row; align-content: space-evenly;">
  <div style="width: 50px; height: 10px;"></div>
  <div style="width: 50px; height: 10px;"></div>
</div>

<div id="align_content_space_evenly_wrap" style="width: 140px; height: 120px; flex-wrap: wrap; flex-direction: row; align-content: space-evenly;">
  <div style="width: 50px; height: 10px;"></div>
  <div style="width: 50px; height: 10px;"></div>
  <div style="width: 50px; height: 10px;"></div>
  <div style="width: 50px; height: 10px;"></div>
  <div style="width: 50px; height: 10px;"></div>
</div>

<!-- This tests the case where `flex-wrap: wrap` but the content does not actually wrap -->
<div id="align_content_space_evenly_wrap_singleline" style="width: 140px; height: 120px; flex-wrap: wrap; flex-direction: row; align-content: space-evenly;">
  <div style="width: 50px; height: 10px;"></div>
  <div style="width: 50px; height: 10px;"></div>
</div>

<div id="align_content_space_evenly_wrapped_negative_space" style="display: flex; flex-direction: column; width: 320px; height: 320px; border-width: 60px;">
  <div style="display: flex; flex-direction: row; flex-wrap: wrap; align-content: space-evenly; justify-content: center; height: 10px;">
    <div style="width: 80%; height: 20px; flex-shrink: 0;"></div>
    <div style="width: 80%; height: 20px; flex-shrink: 0;"></div>
    <div style="width: 80%; height: 20px; flex-shrink: 0;"></div>
  </div>
</div>

<div id="align_content_space_evenly_wrapped_negative_space_gap" style="display: flex; flex-direction: column; width: 320px; height: 320px; border-width: 60px;">
  <div style="display: flex; flex-direction: row; flex-wrap: wrap; align-content: space-evenly; justify-content: center; height: 10px; gap: 10px;">
    <div style="width: 80%; height: 20px; flex-shrink: 0;"></div>
    <div style="width: 80%; height: 20px; flex-shrink: 0;"></div>
    <div style="width: 80%; height: 20px; flex-shrink: 0;"></div>
  </div>
</div>


<!-- ALIGN CONTENT: STRETCH -->

<div id="align_content_stretch" style="width: 150px; height: 100px; flex-wrap: wrap; flex-direction: column; align-content: stretch;">
  <div style="width: 50px;"></div>
  <div style="width: 50px;"></div>
  <div style="width: 50px;"></div>
  <div style="width: 50px;"></div>
  <div style="width: 50px;"></div>
</div>

<div id="align_content_stretch_row" style="width: 150px; height: 100px; flex-wrap: wrap; flex-direction: row; align-content: stretch;">
  <div style="width: 50px;"></div>
  <div style="width: 50px;"></div>
  <div style="width: 50px;"></div>
  <div style="width: 50px;"></div>
  <div style="width: 50px;"></div>
</div>

<div id="align_content_stretch_row_with_children" style="width: 150px; height: 100px; flex-wrap: wrap; flex-direction: row; align-content: stretch;">
  <div style="width: 50px;">
    <div style="flex: 1;"></div>
  </div>
  <div style="width: 50px;"></div>
  <div style="width: 50px;"></div>
  <div style="width: 50px;"></div>
  <div style="width: 50px;"></div>
</div>

<div id="align_content_stretch_row_with_flex" style="width: 150px; height: 100px; flex-wrap: wrap; flex-direction: row; align-content: stretch;">
  <div style="width: 50px;"></div>
  <div style="width: 50px; flex: 1;"></div>
  <div style="width: 50px;"></div>
  <div style="width: 50px; flex: 1;"></div>
  <div style="width: 50px;"></div>
</div>

<div id="align_content_stretch_row_with_flex_no_shrink" style="width: 150px; height: 100px; flex-wrap: wrap; flex-direction: row; align-content: stretch;">
  <div style="width: 50px;"></div>
  <div style="width: 50px; flex: 1;"></div>
  <div style="width: 50px;"></div>
  <div style="width: 50px; flex: 1; flex-shrink: 0;"></div>
  <div style="width: 50px;"></div>
</div>

<div id="align_content_stretch_row_with_margin" style="width: 150px; height: 100px; flex-wrap: wrap; flex-direction: row; align-content: stretch;">
  <div style="width: 50px;"></div>
  <div style="width: 50px; margin: 10px;"></div>
  <div style="width: 50px;"></div>
  <div style="width: 50px; margin: 10px;"></div>
  <div style="width: 50px;"></div>
</div>

<div id="align_content_stretch_row_with_padding" style="width: 150px; height: 100px; flex-wrap: wrap; flex-direction: row; align-content: stretch;">
  <div style="width: 50px;"></div>
  <div style="width: 50px; padding: 10px;"></div>
  <div style="width: 50px;"></div>
  <div style="width: 50px; padding: 10px;"></div>
  <div style="width: 50px;"></div>
</div>

<div id="align_content_stretch_row_with_single_row" style="width: 150px; height: 100px; flex-wrap: wrap; flex-direction: row; align-content: stretch;">
  <div style="width: 50px;"></div>
  <div style="width: 50px;"></div>
</div>

<div id="align_content_stretch_row_with_fixed_height" style="width: 150px; height: 100px; flex-wrap: wrap; flex-direction: row; align-content: stretch;">
  <div style="width: 50px;"></div>
  <div style="width: 50px; height: 60px;"></div>
  <div style="width: 50px;"></div>
  <div style="width: 50px;"></div>
  <div style="width: 50px;"></div>
</div>

<div id="align_content_stretch_row_with_max_height" style="width: 150px; height: 100px; flex-wrap: wrap; flex-direction: row; align-content: stretch;">
  <div style="width: 50px;"></div>
  <div style="width: 50px; max-height: 20px;"></div>
  <div style="width: 50px;"></div>
  <div style="width: 50px;"></div>
  <div style="width: 50px;"></div>
</div>

<div id="align_content_stretch_row_with_min_height" style="width: 150px; height: 100px; flex-wrap: wrap; flex-direction: row; align-content: stretch;">
  <div style="width: 50px;"></div>
  <div style="width: 50px; min-height: 80px;"></div>
  <div style="width: 50px;"></div>
  <div style="width: 50px;"></div>
  <div style="width: 50px;"></div>
</div>

<div id="align_content_stretch_column" style="width: 100px; height: 150px; flex-wrap: wrap; flex-direction: column; align-content: stretch;">
  <div style="height: 50px;">
    <div style="flex: 1;"></div>
  </div>
  <div style="height: 50px; flex: 1;"></div>
  <div style="height: 50px;"></div>
  <div style="height: 50px;"></div>
  <div style="height: 50px;"></div>
</div>

<div id="align_content_stretch_is_not_overriding_align_items" style="align-content:stretch;">
  <div style="width:100px; height: 100px; align-items: center; flex-direction: row; align-content:stretch;">
    <div style="height: 10px; width: 10px; align-content:stretch;"></div>
  </div>
</div>