yoga/gentest/fixtures/YGFlexDirectionTest.html

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

<div id="flex_direction_row_no_width" style="height: 100px; flex-direction: row;">
  <div style="width: 10px;"></div>
  <div style="width: 10px;"></div>
  <div style="width: 10px;"></div>
</div>

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

<div id="flex_direction_row" style="height: 100px; width: 100px; flex-direction: row;">
  <div style="width: 10px;"></div>
  <div style="width: 10px;"></div>
  <div style="width: 10px;"></div>
</div>

<div id="flex_direction_column_reverse" style="height: 100px; width: 100px; flex-direction: column-reverse;">
  <div style="height: 10px;"></div>
  <div style="height: 10px;"></div>
  <div style="height: 10px;"></div>
</div>

<div id="flex_direction_row_reverse" style="height: 100px; width: 100px; flex-direction: row-reverse;">
  <div style="width: 10px;"></div>
  <div style="width: 10px;"></div>
  <div style="width: 10px;"></div>
</div>

<div id="flex_direction_row_reverse_margin_left" style="height: 100px; width: 100px; flex-direction: row-reverse; margin-left: 100px;">
  <div style="width: 10px;"></div>
  <div style="width: 10px;"></div>
  <div style="width: 10px;"></div>
</div>

<!-- gentest.rb will swap margin-start to margin-left. This is needed to use YGEdgeStart instead of YGEdgeLeft in the generated tests -->
<!-- TODO: Yoga flips marginStart and marginEnd with rowReverse direction -->
<div id="flex_direction_row_reverse_margin_start" data-disabled="true" style="height: 100px; width: 100px; flex-direction: row-reverse; margin-start: 100px;">
  <div style="width: 10px;"></div>
  <div style="width: 10px;"></div>
  <div style="width: 10px;"></div>
</div>

<div id="flex_direction_row_reverse_margin_right" style="height: 100px; width: 100px; flex-direction: row-reverse; margin-right: 100px;">
  <div style="width: 10px;"></div>
  <div style="width: 10px;"></div>
  <div style="width: 10px;"></div>
</div>

<!-- TODO: Yoga flips marginStart and marginEnd with rowReverse direction -->
<div id="flex_direction_row_reverse_margin_end" data-disabled="true" style="height: 100px; width: 100px; flex-direction: row-reverse; margin-end: 100px;">
  <div style="width: 10px;"></div>
  <div style="width: 10px;"></div>
  <div style="width: 10px;"></div>
</div>

<div id="flex_direction_column_reverse_margin_top" style="height: 100px; width: 100px; flex-direction: column-reverse; margin-top: 100px;">
  <div style="width: 10px;"></div>
  <div style="width: 10px;"></div>
  <div style="width: 10px;"></div>
</div>

<div id="flex_direction_column_reverse_margin_bottom" style="height: 100px; width: 100px; flex-direction: column-reverse; margin-bottom: 100px;">
  <div style="width: 10px;"></div>
  <div style="width: 10px;"></div>
  <div style="width: 10px;"></div>
</div>