Skip to content

Commit

Permalink
Import "Fix percent absolute position and size calcuate different wit…
Browse files Browse the repository at this point in the history 
…h web" behind experimental feature (facebook#1028)

Fixes facebook#850

facebook#850 describes a conformance issue where positioning of an absolute child using percentages is not calculated againt the correct box size.

This takes the fix for that in facebook#1028, regenerates tests, and fixes tests so that the experimental feature can be enabled. Goal is to run this as an experiment internally to see if we can enable by default.

Changelog:
[Internal]
  • Loading branch information
@NickGerleman
NickGerleman committed Dec 29, 2022
1 parent b842a9e commit 1903212
Show file tree
Hide file tree
Showing 87 changed files with 1,989 additions and 13 deletions.
1 change: 1 addition & 0 deletions csharp/Facebook.Yoga/YogaExperimentalFeature.cs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,5 +12,6 @@ namespace Facebook.Yoga
public enum YogaExperimentalFeature
{
WebFlexBasis,
AbsolutePercentageAgainstPaddingEdge,
}
}
168 changes: 168 additions & 0 deletions csharp/tests/Facebook.Yoga/YGAbsolutePositionTest.cs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,7 @@ public class YGAbsolutePositionTest
public void Test_absolute_layout_width_height_start_top()
{
YogaConfig config = new YogaConfig();
config.SetExperimentalFeatureEnabled(YogaExperimentalFeature.AbsolutePercentageAgainstPaddingEdge, true);

YogaNode root = new YogaNode(config);
root.Width = 100;
Expand Down Expand Up @@ -62,6 +63,7 @@ public void Test_absolute_layout_width_height_start_top()
public void Test_absolute_layout_width_height_end_bottom()
{
YogaConfig config = new YogaConfig();
config.SetExperimentalFeatureEnabled(YogaExperimentalFeature.AbsolutePercentageAgainstPaddingEdge, true);

YogaNode root = new YogaNode(config);
root.Width = 100;
Expand Down Expand Up @@ -105,6 +107,7 @@ public void Test_absolute_layout_width_height_end_bottom()
public void Test_absolute_layout_start_top_end_bottom()
{
YogaConfig config = new YogaConfig();
config.SetExperimentalFeatureEnabled(YogaExperimentalFeature.AbsolutePercentageAgainstPaddingEdge, true);

YogaNode root = new YogaNode(config);
root.Width = 100;
Expand Down Expand Up @@ -148,6 +151,7 @@ public void Test_absolute_layout_start_top_end_bottom()
public void Test_absolute_layout_width_height_start_top_end_bottom()
{
YogaConfig config = new YogaConfig();
config.SetExperimentalFeatureEnabled(YogaExperimentalFeature.AbsolutePercentageAgainstPaddingEdge, true);

YogaNode root = new YogaNode(config);
root.Width = 100;
Expand Down Expand Up @@ -193,6 +197,7 @@ public void Test_absolute_layout_width_height_start_top_end_bottom()
public void Test_do_not_clamp_height_of_absolute_node_to_height_of_its_overflow_hidden_parent()
{
YogaConfig config = new YogaConfig();
config.SetExperimentalFeatureEnabled(YogaExperimentalFeature.AbsolutePercentageAgainstPaddingEdge, true);

YogaNode root = new YogaNode(config);
root.FlexDirection = YogaFlexDirection.Row;
Expand Down Expand Up @@ -251,6 +256,7 @@ public void Test_do_not_clamp_height_of_absolute_node_to_height_of_its_overflow_
public void Test_absolute_layout_within_border()
{
YogaConfig config = new YogaConfig();
config.SetExperimentalFeatureEnabled(YogaExperimentalFeature.AbsolutePercentageAgainstPaddingEdge, true);

YogaNode root = new YogaNode(config);
root.MarginLeft = 10;
Expand Down Expand Up @@ -368,6 +374,7 @@ public void Test_absolute_layout_within_border()
public void Test_absolute_layout_align_items_and_justify_content_center()
{
YogaConfig config = new YogaConfig();
config.SetExperimentalFeatureEnabled(YogaExperimentalFeature.AbsolutePercentageAgainstPaddingEdge, true);

YogaNode root = new YogaNode(config);
root.JustifyContent = YogaJustify.Center;
Expand Down Expand Up @@ -412,6 +419,7 @@ public void Test_absolute_layout_align_items_and_justify_content_center()
public void Test_absolute_layout_align_items_and_justify_content_flex_end()
{
YogaConfig config = new YogaConfig();
config.SetExperimentalFeatureEnabled(YogaExperimentalFeature.AbsolutePercentageAgainstPaddingEdge, true);

YogaNode root = new YogaNode(config);
root.JustifyContent = YogaJustify.FlexEnd;
Expand Down Expand Up @@ -456,6 +464,7 @@ public void Test_absolute_layout_align_items_and_justify_content_flex_end()
public void Test_absolute_layout_justify_content_center()
{
YogaConfig config = new YogaConfig();
config.SetExperimentalFeatureEnabled(YogaExperimentalFeature.AbsolutePercentageAgainstPaddingEdge, true);

YogaNode root = new YogaNode(config);
root.JustifyContent = YogaJustify.Center;
Expand Down Expand Up @@ -499,6 +508,7 @@ public void Test_absolute_layout_justify_content_center()
public void Test_absolute_layout_align_items_center()
{
YogaConfig config = new YogaConfig();
config.SetExperimentalFeatureEnabled(YogaExperimentalFeature.AbsolutePercentageAgainstPaddingEdge, true);

YogaNode root = new YogaNode(config);
root.AlignItems = YogaAlign.Center;
Expand Down Expand Up @@ -542,6 +552,7 @@ public void Test_absolute_layout_align_items_center()
public void Test_absolute_layout_align_items_center_on_child_only()
{
YogaConfig config = new YogaConfig();
config.SetExperimentalFeatureEnabled(YogaExperimentalFeature.AbsolutePercentageAgainstPaddingEdge, true);

YogaNode root = new YogaNode(config);
root.FlexGrow = 1;
Expand Down Expand Up @@ -585,6 +596,7 @@ public void Test_absolute_layout_align_items_center_on_child_only()
public void Test_absolute_layout_align_items_and_justify_content_center_and_top_position()
{
YogaConfig config = new YogaConfig();
config.SetExperimentalFeatureEnabled(YogaExperimentalFeature.AbsolutePercentageAgainstPaddingEdge, true);

YogaNode root = new YogaNode(config);
root.JustifyContent = YogaJustify.Center;
Expand Down Expand Up @@ -630,6 +642,7 @@ public void Test_absolute_layout_align_items_and_justify_content_center_and_top_
public void Test_absolute_layout_align_items_and_justify_content_center_and_bottom_position()
{
YogaConfig config = new YogaConfig();
config.SetExperimentalFeatureEnabled(YogaExperimentalFeature.AbsolutePercentageAgainstPaddingEdge, true);

YogaNode root = new YogaNode(config);
root.JustifyContent = YogaJustify.Center;
Expand Down Expand Up @@ -675,6 +688,7 @@ public void Test_absolute_layout_align_items_and_justify_content_center_and_bott
public void Test_absolute_layout_align_items_and_justify_content_center_and_left_position()
{
YogaConfig config = new YogaConfig();
config.SetExperimentalFeatureEnabled(YogaExperimentalFeature.AbsolutePercentageAgainstPaddingEdge, true);

YogaNode root = new YogaNode(config);
root.JustifyContent = YogaJustify.Center;
Expand Down Expand Up @@ -720,6 +734,7 @@ public void Test_absolute_layout_align_items_and_justify_content_center_and_left
public void Test_absolute_layout_align_items_and_justify_content_center_and_right_position()
{
YogaConfig config = new YogaConfig();
config.SetExperimentalFeatureEnabled(YogaExperimentalFeature.AbsolutePercentageAgainstPaddingEdge, true);

YogaNode root = new YogaNode(config);
root.JustifyContent = YogaJustify.Center;
Expand Down Expand Up @@ -765,6 +780,7 @@ public void Test_absolute_layout_align_items_and_justify_content_center_and_righ
public void Test_position_root_with_rtl_should_position_withoutdirection()
{
YogaConfig config = new YogaConfig();
config.SetExperimentalFeatureEnabled(YogaExperimentalFeature.AbsolutePercentageAgainstPaddingEdge, true);

YogaNode root = new YogaNode(config);
root.Left = 72;
Expand All @@ -791,6 +807,7 @@ public void Test_position_root_with_rtl_should_position_withoutdirection()
public void Test_absolute_layout_percentage_bottom_based_on_parent_height()
{
YogaConfig config = new YogaConfig();
config.SetExperimentalFeatureEnabled(YogaExperimentalFeature.AbsolutePercentageAgainstPaddingEdge, true);

YogaNode root = new YogaNode(config);
root.Width = 100;
Expand Down Expand Up @@ -867,6 +884,7 @@ public void Test_absolute_layout_percentage_bottom_based_on_parent_height()
public void Test_absolute_layout_in_wrap_reverse_column_container()
{
YogaConfig config = new YogaConfig();
config.SetExperimentalFeatureEnabled(YogaExperimentalFeature.AbsolutePercentageAgainstPaddingEdge, true);

YogaNode root = new YogaNode(config);
root.Wrap = YogaWrap.WrapReverse;
Expand Down Expand Up @@ -909,6 +927,7 @@ public void Test_absolute_layout_in_wrap_reverse_column_container()
public void Test_absolute_layout_in_wrap_reverse_row_container()
{
YogaConfig config = new YogaConfig();
config.SetExperimentalFeatureEnabled(YogaExperimentalFeature.AbsolutePercentageAgainstPaddingEdge, true);

YogaNode root = new YogaNode(config);
root.FlexDirection = YogaFlexDirection.Row;
Expand Down Expand Up @@ -952,6 +971,7 @@ public void Test_absolute_layout_in_wrap_reverse_row_container()
public void Test_absolute_layout_in_wrap_reverse_column_container_flex_end()
{
YogaConfig config = new YogaConfig();
config.SetExperimentalFeatureEnabled(YogaExperimentalFeature.AbsolutePercentageAgainstPaddingEdge, true);

YogaNode root = new YogaNode(config);
root.Wrap = YogaWrap.WrapReverse;
Expand Down Expand Up @@ -995,6 +1015,7 @@ public void Test_absolute_layout_in_wrap_reverse_column_container_flex_end()
public void Test_absolute_layout_in_wrap_reverse_row_container_flex_end()
{
YogaConfig config = new YogaConfig();
config.SetExperimentalFeatureEnabled(YogaExperimentalFeature.AbsolutePercentageAgainstPaddingEdge, true);

YogaNode root = new YogaNode(config);
root.FlexDirection = YogaFlexDirection.Row;
Expand Down Expand Up @@ -1035,5 +1056,152 @@ public void Test_absolute_layout_in_wrap_reverse_row_container_flex_end()
Assert.AreEqual(20f, root_child0.LayoutHeight);
}

[Test]
public void Test_percent_absolute_position_infinite_height()
{
YogaConfig config = new YogaConfig();
config.SetExperimentalFeatureEnabled(YogaExperimentalFeature.AbsolutePercentageAgainstPaddingEdge, true);

YogaNode root = new YogaNode(config);
root.Width = 300;

YogaNode root_child0 = new YogaNode(config);
root_child0.Width = 300;
root.Insert(0, root_child0);

YogaNode root_child1 = new YogaNode(config);
root_child1.PositionType = YogaPositionType.Absolute;
root_child1.Left = 20.Percent();
root_child1.Top = 20.Percent();
root_child1.Width = 20.Percent();
root_child1.Height = 20.Percent();
root.Insert(1, root_child1);
root.StyleDirection = YogaDirection.LTR;
root.CalculateLayout();

Assert.AreEqual(0f, root.LayoutX);
Assert.AreEqual(0f, root.LayoutY);
Assert.AreEqual(300f, root.LayoutWidth);
Assert.AreEqual(0f, root.LayoutHeight);

Assert.AreEqual(0f, root_child0.LayoutX);
Assert.AreEqual(0f, root_child0.LayoutY);
Assert.AreEqual(300f, root_child0.LayoutWidth);
Assert.AreEqual(0f, root_child0.LayoutHeight);

Assert.AreEqual(60f, root_child1.LayoutX);
Assert.AreEqual(0f, root_child1.LayoutY);
Assert.AreEqual(60f, root_child1.LayoutWidth);
Assert.AreEqual(0f, root_child1.LayoutHeight);

root.StyleDirection = YogaDirection.RTL;
root.CalculateLayout();

Assert.AreEqual(0f, root.LayoutX);
Assert.AreEqual(0f, root.LayoutY);
Assert.AreEqual(300f, root.LayoutWidth);
Assert.AreEqual(0f, root.LayoutHeight);

Assert.AreEqual(0f, root_child0.LayoutX);
Assert.AreEqual(0f, root_child0.LayoutY);
Assert.AreEqual(300f, root_child0.LayoutWidth);
Assert.AreEqual(0f, root_child0.LayoutHeight);

Assert.AreEqual(60f, root_child1.LayoutX);
Assert.AreEqual(0f, root_child1.LayoutY);
Assert.AreEqual(60f, root_child1.LayoutWidth);
Assert.AreEqual(0f, root_child1.LayoutHeight);
}

[Test]
public void Test_absolute_layout_percentage_height_based_on_padded_parent()
{
YogaConfig config = new YogaConfig();
config.SetExperimentalFeatureEnabled(YogaExperimentalFeature.AbsolutePercentageAgainstPaddingEdge, true);

YogaNode root = new YogaNode(config);
root.PaddingTop = 10;
root.BorderTopWidth = 10;
root.Width = 100;
root.Height = 100;

YogaNode root_child0 = new YogaNode(config);
root_child0.PositionType = YogaPositionType.Absolute;
root_child0.Width = 100;
root_child0.Height = 50.Percent();
root.Insert(0, root_child0);
root.StyleDirection = YogaDirection.LTR;
root.CalculateLayout();

Assert.AreEqual(0f, root.LayoutX);
Assert.AreEqual(0f, root.LayoutY);
Assert.AreEqual(100f, root.LayoutWidth);
Assert.AreEqual(100f, root.LayoutHeight);

Assert.AreEqual(0f, root_child0.LayoutX);
Assert.AreEqual(10f, root_child0.LayoutY);
Assert.AreEqual(100f, root_child0.LayoutWidth);
Assert.AreEqual(50f, root_child0.LayoutHeight);

root.StyleDirection = YogaDirection.RTL;
root.CalculateLayout();

Assert.AreEqual(0f, root.LayoutX);
Assert.AreEqual(0f, root.LayoutY);
Assert.AreEqual(100f, root.LayoutWidth);
Assert.AreEqual(100f, root.LayoutHeight);

Assert.AreEqual(0f, root_child0.LayoutX);
Assert.AreEqual(10f, root_child0.LayoutY);
Assert.AreEqual(100f, root_child0.LayoutWidth);
Assert.AreEqual(50f, root_child0.LayoutHeight);
}

[Test]
public void Test_absolute_layout_percentage_height_based_on_padded_parent_and_align_items_center()
{
YogaConfig config = new YogaConfig();
config.SetExperimentalFeatureEnabled(YogaExperimentalFeature.AbsolutePercentageAgainstPaddingEdge, true);

YogaNode root = new YogaNode(config);
root.JustifyContent = YogaJustify.Center;
root.AlignItems = YogaAlign.Center;
root.PaddingTop = 20;
root.PaddingBottom = 20;
root.Width = 100;
root.Height = 100;

YogaNode root_child0 = new YogaNode(config);
root_child0.PositionType = YogaPositionType.Absolute;
root_child0.Width = 100;
root_child0.Height = 50.Percent();
root.Insert(0, root_child0);
root.StyleDirection = YogaDirection.LTR;
root.CalculateLayout();

Assert.AreEqual(0f, root.LayoutX);
Assert.AreEqual(0f, root.LayoutY);
Assert.AreEqual(100f, root.LayoutWidth);
Assert.AreEqual(100f, root.LayoutHeight);

Assert.AreEqual(0f, root_child0.LayoutX);
Assert.AreEqual(25f, root_child0.LayoutY);
Assert.AreEqual(100f, root_child0.LayoutWidth);
Assert.AreEqual(50f, root_child0.LayoutHeight);

root.StyleDirection = YogaDirection.RTL;
root.CalculateLayout();

Assert.AreEqual(0f, root.LayoutX);
Assert.AreEqual(0f, root.LayoutY);
Assert.AreEqual(100f, root.LayoutWidth);
Assert.AreEqual(100f, root.LayoutHeight);

Assert.AreEqual(0f, root_child0.LayoutX);
Assert.AreEqual(25f, root_child0.LayoutY);
Assert.AreEqual(100f, root_child0.LayoutWidth);
Assert.AreEqual(50f, root_child0.LayoutHeight);
}

}
}
Loading

0 comments on commit 1903212

Please sign in to comment.