Skip to content

Commit

Permalink
Fix row-reverse flex direction fixtures
Browse files Browse the repository at this point in the history 
Summary:
These tests were a bit weird for testing something with position. The gentest setup makes it so that the fixtures are wrapped in a absolutely positioned container with height and width bot 0. However, the generated yoga tests do NOT do this and instead have the root node as the fixture itself with no wrapping container.

This causes a problem when testing left/right/top/bottom position insets. Because left/right/top/bottom will position the element relative to its containing block when position is absolute, we will get different values on yoga and chrome even if the implementation is correct: https://developer.mozilla.org/en-US/docs/Web/CSS/right#description

To fix this, we just wrap the fixture in a set size div that is also absolutely positioned.

The file was also formatted.

Reviewed By: NickGerleman

Differential Revision: D50389229
  • Loading branch information
@joevilches @facebook-github-bot
joevilches authored and facebook-github-bot committed Oct 18, 2023
1 parent 0d28b28 commit 0616714
Show file tree
Hide file tree
Showing 4 changed files with 914 additions and 620 deletions.
114 changes: 72 additions & 42 deletions gentest/fixtures/YGFlexDirectionTest.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,147 +34,177 @@
<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 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 -->
<div id="flex_direction_row_reverse_margin_start" style="height: 100px; width: 100px; flex-direction: row-reverse; margin-start: 100px;">
<div id="flex_direction_row_reverse_margin_start"
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 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>

<div id="flex_direction_row_reverse_margin_end" style="height: 100px; width: 100px; flex-direction: row-reverse; margin-end: 100px;">
<div id="flex_direction_row_reverse_margin_end"
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 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 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 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" style="height: 100px; width: 100px; flex-direction: row-reverse; padding-start: 100px;">
<div id="flex_direction_row_reverse_padding_start"
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 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" style="height: 100px; width: 100px; flex-direction: row-reverse; padding-end: 100px;">
<div id="flex_direction_row_reverse_padding_end"
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 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 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>

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

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

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

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

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

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

<div id="flex_direction_row_reverse_pos_left" data-disabled="true" style="height: 100px; width: 100px; flex-direction: row-reverse; left: 100px;">
<div style="width: 10px;"></div>
<div style="width: 10px;"></div>
<div style="width: 10px;"></div>
<div id="flex_direction_row_reverse_pos_left" data-disabled="true" style="height: 100px; width: 100px;">
<div style="height: 100px; width: 100px; flex-direction: row-reverse; left: 100px;">
<div style="width: 10px;"></div>
<div style="width: 10px;"></div>
<div style="width: 10px;"></div>
</div>
</div>

<div id="flex_direction_row_reverse_pos_start" data-disabled="true" style="height: 100px; width: 100px; flex-direction: row-reverse; start: 100px;">
<div style="width: 10px;"></div>
<div style="width: 10px;"></div>
<div style="width: 10px;"></div>
<div id="flex_direction_row_reverse_pos_start" style="height: 100px; width: 100px;">
<div style="height: 100px; width: 100px; flex-direction: row-reverse; start: 100px;">
<div style="width: 10px;"></div>
<div style="width: 10px;"></div>
<div style="width: 10px;"></div>
</div>
</div>

<div id="flex_direction_row_reverse_pos_right" data-disabled="true" style="height: 100px; width: 100px; flex-direction: row-reverse; right: 100px;">
<div style="width: 10px;"></div>
<div style="width: 10px;"></div>
<div style="width: 10px;"></div>
<div id="flex_direction_row_reverse_pos_right" data-disabled="true" style="height: 100px; width: 100px;">
<div style="height: 100px; width: 100px; flex-direction: row-reverse; right: 100px;">
<div style="width: 10px;"></div>
<div style="width: 10px;"></div>
<div style="width: 10px;"></div>
</div>
</div>

<div id="flex_direction_row_reverse_pos_end" data-disabled="true" style="height: 100px; width: 100px; flex-direction: row-reverse; end: 100px;">
<div style="width: 10px;"></div>
<div style="width: 10px;"></div>
<div style="width: 10px;"></div>
<div id="flex_direction_row_reverse_pos_end" style="height: 100px; width: 100px;">
<div style="height: 100px; width: 100px; flex-direction: row-reverse; end: 100px;">
<div style="width: 10px;"></div>
<div style="width: 10px;"></div>
<div style="width: 10px;"></div>
</div>
</div>

<div id="flex_direction_column_reverse_pos_top" data-disabled="true" style="height: 100px; width: 100px; flex-direction: column-reverse; top: 100px;">
<div style="width: 10px;"></div>
<div style="width: 10px;"></div>
<div style="width: 10px;"></div>
<div id="flex_direction_column_reverse_pos_top" data-disabled="true" style="height: 100px; width: 100px;">
<div style="height: 100px; width: 100px; flex-direction: column-reverse; top: 100px;">
<div style="width: 10px;"></div>
<div style="width: 10px;"></div>
<div style="width: 10px;"></div>
</div>
</div>

<div id="flex_direction_column_reverse_pos_bottom" data-disabled="true" style="height: 100px; width: 100px; flex-direction: column-reverse; bottom: 100px;">
<div style="width: 10px;"></div>
<div style="width: 10px;"></div>
<div style="width: 10px;"></div>
<div id="flex_direction_column_reverse_pos_bottom" data-disabled="true" style="height: 100px; width: 100px;">
<div style="height: 100px; width: 100px; flex-direction: column-reverse; bottom: 100px;">
<div style="width: 10px;"></div>
<div style="width: 10px;"></div>
<div style="width: 10px;"></div>
</div>
</div>
Loading

0 comments on commit 0616714

Please sign in to comment.