yoga/gentest/fixtures/YGAlignItemsTest.html

<div id="align_items_stretch" style="width: 100px; height: 100px;">
  <div style="height: 10px;"></div>
</div>

<div id="align_items_center" style="width: 100px; height: 100px; align-items: center;">
  <div style="height: 10px; width: 10px;"></div>
</div>

<div id="align_items_flex_start" style="width: 100px; height: 100px; align-items: flex-start;">
  <div style="height: 10px; width: 10px;"></div>
</div>

<div id="align_items_flex_end" style="width: 100px; height: 100px; align-items: flex-end;">
  <div style="height: 10px; width: 10px;"></div>
</div>

<div id="align_baseline" style="width: 100px; height: 100px; flex-direction:row; align-items: baseline;">
  <div style="width: 50px; height: 50px;"></div>
  <div style="width: 50px; height: 20px;"></div>
</div>

<div id="align_baseline_child" style="width: 100px; height: 100px; flex-direction:row; align-items: baseline;">
  <div style="width: 50px; height: 50px;"></div>
  <div style="width: 50px; height: 20px;">
    <div style="width: 50px; height: 10px;"></div>
  </div>
</div>

<div id="align_baseline_child_multiline"
  style="width: 100px; height: 100px; flex-direction:row; align-items: baseline;">
  <div style="width: 50px; height: 60px;"></div>
  <div style="width: 50px; height: 25px;flex-wrap:wrap;flex-direction:row;">
    <div style="width: 25px; height: 20px;"></div>
    <div style="width: 25px; height: 10px;"></div>
    <div style="width: 25px; height: 20px;"></div>
    <div style="width: 25px; height: 10px;"></div>
  </div>
</div>

<div id="align_baseline_child_multiline_override"
  style="width: 100px; height: 100px; flex-direction:row; align-items: baseline;">
  <div style="width: 50px; height: 60px;"></div>
  <div style="width: 50px; height: 25px;flex-wrap:wrap;flex-direction:row;">
    <div style="width: 25px; height: 20px;"></div>
    <div style="width: 25px; height: 10px;align-self:baseline;"></div>
    <div style="width: 25px; height: 20px;"></div>
    <div style="width: 25px; height: 10px;align-self:baseline;"></div>
  </div>
</div>

<div id="align_baseline_child_multiline_no_override_on_secondline"
  style="width: 100px; height: 100px; flex-direction:row; align-items: baseline;">
  <div style="width: 50px; height: 60px;"></div>
  <div style="width: 50px; height: 25px;flex-wrap:wrap;flex-direction:row;">
    <div style="width: 25px; height: 20px;"></div>
    <div style="width: 25px; height: 10px;"></div>
    <div style="width: 25px; height: 20px;"></div>
    <div style="width: 25px; height: 10px;align-self:baseline;"></div>
  </div>
</div>


<div id="align_baseline_child_top" style="width: 100px; height: 100px; flex-direction:row; align-items: baseline;">
  <div style="width: 50px; height: 50px;top:10px;"></div>
  <div style="width: 50px; height: 20px;">
    <div style="width: 50px; height: 10px;"></div>
  </div>
</div>

<div id="align_baseline_child_top2" style="width: 100px; height: 100px; flex-direction:row; align-items: baseline;">
  <div style="width: 50px; height: 50px;"></div>
  <div style="width: 50px; height: 20px;top:5px">
    <div style="width: 50px; height: 10px;"></div>
  </div>
</div>

<div id="align_baseline_double_nested_child"
  style="width: 100px; height: 100px; flex-direction:row; align-items: baseline;">
  <div style="width: 50px; height: 50px;">
    <div style="width: 50px; height: 20px;"></div>
  </div>
  <div style="width: 50px; height: 20px;">
    <div style="width: 50px; height: 15px;"></div>
  </div>
</div>


<div id="align_baseline_column" style="width: 100px; height: 100px; flex-direction:column; align-items: baseline;">
  <div style="width: 50px; height: 50px;"></div>
  <div style="width: 50px; height: 20px;"></div>
</div>

<div id="align_baseline_child_margin" style="width: 100px; height: 100px; flex-direction:row; align-items: baseline;">
  <div style="width: 50px; height: 50px;margin: 5px;"></div>
  <div style="width: 50px; height: 20px;">
    <div style="width: 50px; height: 10px;margin: 1px;"></div>
  </div>
</div>

<div id="align_baseline_child_padding"
  style="width: 100px; height: 100px; padding:5px; flex-direction:row; align-items: baseline;">
  <div style="width: 50px; height: 50px;"></div>
  <div style="width: 50px; height: 20px;padding:5px;">
    <div style="width: 50px; height: 10px;"></div>
  </div>
</div>

<div id="align_baseline_multiline"
  style="width: 100px; height: 100px; flex-direction:row; align-items: baseline;flex-wrap:wrap;">
  <div style="width: 50px; height: 50px;"></div>
  <div style="width: 50px; height: 20px;">
    <div style="width: 50px; height: 10px;"></div>
  </div>
  <div style="width: 50px; height: 20px;">
    <div style="width: 50px; height: 10px;"></div>
  </div>
  <div style="width: 50px; height: 50px;"></div>
</div>

<!-- TODO: Yoga's behavior is no longer in line with Chromium  -->
<div id="align_baseline_multiline_column" data-disabled="true"
  style="width: 100px; height: 100px; flex-direction:column; align-items: baseline;flex-wrap:wrap;">
  <div style="width: 50px; height: 50px;"></div>
  <div style="width: 30px; height: 50px;">
    <div style="width: 20px; height: 20px;"></div>
  </div>
  <div style="width: 40px; height: 70px;">
    <div style="width: 10px; height: 10px;"></div>
  </div>
  <div style="width: 50px; height: 20px;"></div>
</div>

<!-- TODO: Yoga's behavior is no longer in line with Chromium  -->
<div id="align_baseline_multiline_column2" data-disabled="true"
  style="width: 100px; height: 100px; flex-direction:column; align-items: baseline;flex-wrap:wrap;">
  <div style="width: 50px; height: 50px;flex-direction:column;"></div>
  <div style="width: 30px; height: 50px;flex-direction:column;">
    <div style="width: 20px; height: 20px;flex-direction:column;"></div>
  </div>
  <div style="width: 40px; height: 70px;flex-direction:column;">
    <div style="width: 10px; height: 10px;flex-direction:column;"></div>
  </div>
  <div style="width: 50px; height: 20px;flex-direction:column;"></div>
</div>

<div id="align_baseline_multiline_row_and_column"
  style="width: 100px; height: 100px; flex-direction:row; align-items: baseline;flex-wrap:wrap;">
  <div style="width: 50px; height: 50px;"></div>
  <div style="width: 50px; height: 50px;flex-direction:column;">
    <div style="width: 50px; height: 10px;"></div>
  </div>
  <div style="width: 50px; height: 20px;flex-direction:column;">
    <div style="width: 50px; height: 10px;"></div>
  </div>
  <div style="width: 50px; height: 20px;"></div>
</div>

<div id="align_items_center_child_with_margin_bigger_than_parent"
  style="height: 52px; width: 52px; align-items: center; justify-content: center;">
  <div style="align-items: center;">
    <div style="width: 52px; height: 52px; margin-left: 10px; margin-right: 10px;"></div>
  </div>
</div>

<div id="align_items_flex_end_child_with_margin_bigger_than_parent"
  style="height: 52px; width: 52px; align-items: center; justify-content: center;">
  <div style="align-items: flex-end;">
    <div style="width: 52px; height: 52px; margin-left: 10px; margin-right: 10px;"></div>
  </div>
</div>

<div id="align_items_center_child_without_margin_bigger_than_parent"
  style="height: 52px; width: 52px; align-items: center; justify-content: center;">
  <div style="align-items: center;">
    <div style="width: 72px; height: 72px;"></div>
  </div>
</div>

<div id="align_items_flex_end_child_without_margin_bigger_than_parent"
  style="height: 52px; width: 52px; align-items: center; justify-content: center;">
  <div style="align-items: flex-end;">
    <div style="width: 72px; height: 72px;"></div>
  </div>
</div>

<div id="align_center_should_size_based_on_content"
  style="width: 100px; height: 100px; align-items: center; margin-top: 20px;">
  <div style="flex-grow: 0; flex-shrink: 1; justify-content: center;">
    <div style="flex-grow: 1; flex-shrink: 1;">
      <div style="width: 20px; height: 20px;"></div>
    </div>
  </div>
</div>

<div id="align_stretch_should_size_based_on_parent"
  style="width: 100px; height: 100px; align-items: stretch; margin-top: 20px;">
  <div style="flex-grow: 0; flex-shrink: 1; justify-content: center;">
    <div style="flex-grow: 1; flex-shrink: 1;">
      <div style="width: 20px; height: 20px;"></div>
    </div>
  </div>
</div>

<div id="align_flex_start_with_shrinking_children" style="height: 500px; width: 500px">
  <div style="align-items: flex-start;">
    <div style="flex-grow: 1; flex-shrink: 1;">
      <div style="flex-grow: 1; flex-shrink: 1;"></div>
    </div>
  </div>
</div>

<div id="align_flex_start_with_stretching_children" style="height: 500px; width: 500px">
  <div style="align-items: stretch;">
    <div style="flex-grow: 1; flex-shrink: 1;">
      <div style="flex-grow: 1; flex-shrink: 1;"></div>
    </div>
  </div>
</div>

<div id="align_flex_start_with_shrinking_children_with_stretch" style="height: 500px; width: 500px">
  <div style="align-items: flex-start;">
    <div style="flex-grow: 1; flex-shrink: 1; align-items: stretch;">
      <div style="flex-grow: 1; flex-shrink: 1;"></div>
    </div>
  </div>
</div>

<div id="align_flex_end_with_row_reverse"
  style="width: 100px; height: 75px; align-items: flex-end; flex-direction: column; flex-wrap: wrap;">
  <div style="position:relative; width:50px; height:50px; margin-right: 5px; margin-left: 3px;">
  </div>
  <div style="position:relative; width:50px; height:50px;">
  </div>
</div>

<div id="align_stretch_with_row_reverse"
  style="width: 100px; height: 75px; align-items: stretch; flex-direction: column; flex-wrap: wrap;">
  <div style="position:relative; width:50px; height:50px; margin-right: 5px; margin-left: 3px;">
  </div>
  <div style="position:relative; width:50px; height:50px;">
  </div>
</div>

<div id="align_items_non_stretch_s526008"
  style="flex-direction: column; width: 400px; height: 400px;">
  <div style="flex-direction: row;">
    <div style="flex-direction: column; align-items: flex-start;">
      <div>
        <div style="width: 0; height: 10px;"></div>
      </div>
    </div>
  </div>
</div>