9d9b1f0874
Summary: after looking into the issue described in https://github.com/facebook/yoga/issues/1208 it seems to apply to padding too, so adding tests to confirm Reviewed By: NickGerleman Differential Revision: D50153085 fbshipit-source-id: bad0ef50389a71a45ec3a58d87c1dea0c2b26024
111 lines
4.5 KiB
HTML
111 lines
4.5 KiB
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>
|
|
|
|
<div id="flex_direction_row_reverse_padding_left" style="height: 100px; width: 100px; flex-direction: row-reverse; padding-left: 100px;">
|
|
<div style="width: 10px;"></div>
|
|
<div style="width: 10px;"></div>
|
|
<div style="width: 10px;"></div>
|
|
</div>
|
|
|
|
<div id="flex_direction_row_reverse_padding_start" data-disabled="true" style="height: 100px; width: 100px; flex-direction: row-reverse; padding-start: 100px;">
|
|
<div style="width: 10px;"></div>
|
|
<div style="width: 10px;"></div>
|
|
<div style="width: 10px;"></div>
|
|
</div>
|
|
|
|
<div id="flex_direction_row_reverse_padding_right" style="height: 100px; width: 100px; flex-direction: row-reverse; padding-right: 100px;">
|
|
<div style="width: 10px;"></div>
|
|
<div style="width: 10px;"></div>
|
|
<div style="width: 10px;"></div>
|
|
</div>
|
|
|
|
<div id="flex_direction_row_reverse_padding_end" data-disabled="true" style="height: 100px; width: 100px; flex-direction: row-reverse; padding-end: 100px;">
|
|
<div style="width: 10px;"></div>
|
|
<div style="width: 10px;"></div>
|
|
<div style="width: 10px;"></div>
|
|
</div>
|
|
|
|
<div id="flex_direction_column_reverse_padding_top" style="height: 100px; width: 100px; flex-direction: column-reverse; padding-top: 100px;">
|
|
<div style="width: 10px;"></div>
|
|
<div style="width: 10px;"></div>
|
|
<div style="width: 10px;"></div>
|
|
</div>
|
|
|
|
<div id="flex_direction_column_reverse_padding_bottom" style="height: 100px; width: 100px; flex-direction: column-reverse; padding-bottom: 100px;">
|
|
<div style="width: 10px;"></div>
|
|
<div style="width: 10px;"></div>
|
|
<div style="width: 10px;"></div>
|
|
</div>
|