Fix row-reverse flex direction fixtures

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

fbshipit-source-id: ecd23939b973225cfb0611dc87f30c262952c5fc

gentest/fixtures/YGFlexDirectionTest.html

@@ -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>