DaddyFrosty/yoga
1
0
Fork 0
Code Issues 96 Pull Requests 31 Actions Packages Projects Releases 33 Wiki Activity

Import "Fix percent absolute position and size calcuate different with web" behind experimental feature (#1028) (#1201)

Browse Source 
Summary:
Fixes https://github.com/facebook/yoga/issues/850

https://github.com/facebook/yoga/issues/850 describes a conformance issue where positioning of an absolute child using percentages is not calculated against the correct box size.

This takes the fix for that in https://github.com/facebook/yoga/pull/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]

Pull Request resolved: https://github.com/facebook/yoga/pull/1201

Reviewed By: yungsters

Differential Revision: D42282358

Pulled By: NickGerleman

fbshipit-source-id: 57c0dd9b0f1c47cb9335ff6e13d44b4646e5fa58
This commit is contained in:
Nick Gerleman
2023-01-08 13:41:27 -08:00
committed by Facebook GitHub Bot
parent 627255c0e4
commit 7e96b65790
88 changed files with 3077 additions and 67 deletions
Download Patch File Download Diff File Expand all files Collapse all files

228
javascript/tests/generated/YGAbsolutePositionTest.test.js
View File

@@ -11,6 +11,9 @@ test("absolute_layout_width_height_start_top", () => {
const config = Yoga.Config.create();
let root;
config.setExperimentalFeatureEnabled(Yoga.EXPERIMENTAL_FEATURE_ABSOLUTE_PERCENTAGE_AGAINST_PADDING_EDGE, true);
config.setExperimentalFeatureEnabled(Yoga.EXPERIMENTAL_FEATURE_FIX_ABSOLUTE_TRAILING_COLUMN_MARGIN, true);
try {
root = Yoga.Node.create(config);
root.setWidth(100);
@@ -58,6 +61,9 @@ test("absolute_layout_width_height_end_bottom", () => {
const config = Yoga.Config.create();
let root;
config.setExperimentalFeatureEnabled(Yoga.EXPERIMENTAL_FEATURE_ABSOLUTE_PERCENTAGE_AGAINST_PADDING_EDGE, true);
config.setExperimentalFeatureEnabled(Yoga.EXPERIMENTAL_FEATURE_FIX_ABSOLUTE_TRAILING_COLUMN_MARGIN, true);
try {
root = Yoga.Node.create(config);
root.setWidth(100);
@@ -105,6 +111,9 @@ test("absolute_layout_start_top_end_bottom", () => {
const config = Yoga.Config.create();
let root;
config.setExperimentalFeatureEnabled(Yoga.EXPERIMENTAL_FEATURE_ABSOLUTE_PERCENTAGE_AGAINST_PADDING_EDGE, true);
config.setExperimentalFeatureEnabled(Yoga.EXPERIMENTAL_FEATURE_FIX_ABSOLUTE_TRAILING_COLUMN_MARGIN, true);
try {
root = Yoga.Node.create(config);
root.setWidth(100);
@@ -152,6 +161,9 @@ test("absolute_layout_width_height_start_top_end_bottom", () => {
const config = Yoga.Config.create();
let root;
config.setExperimentalFeatureEnabled(Yoga.EXPERIMENTAL_FEATURE_ABSOLUTE_PERCENTAGE_AGAINST_PADDING_EDGE, true);
config.setExperimentalFeatureEnabled(Yoga.EXPERIMENTAL_FEATURE_FIX_ABSOLUTE_TRAILING_COLUMN_MARGIN, true);
try {
root = Yoga.Node.create(config);
root.setWidth(100);
@@ -201,6 +213,9 @@ test("do_not_clamp_height_of_absolute_node_to_height_of_its_overflow_hidden_pare
const config = Yoga.Config.create();
let root;
config.setExperimentalFeatureEnabled(Yoga.EXPERIMENTAL_FEATURE_ABSOLUTE_PERCENTAGE_AGAINST_PADDING_EDGE, true);
config.setExperimentalFeatureEnabled(Yoga.EXPERIMENTAL_FEATURE_FIX_ABSOLUTE_TRAILING_COLUMN_MARGIN, true);
try {
root = Yoga.Node.create(config);
root.setFlexDirection(Yoga.FLEX_DIRECTION_ROW);
@@ -263,6 +278,9 @@ test("absolute_layout_within_border", () => {
const config = Yoga.Config.create();
let root;
config.setExperimentalFeatureEnabled(Yoga.EXPERIMENTAL_FEATURE_ABSOLUTE_PERCENTAGE_AGAINST_PADDING_EDGE, true);
config.setExperimentalFeatureEnabled(Yoga.EXPERIMENTAL_FEATURE_FIX_ABSOLUTE_TRAILING_COLUMN_MARGIN, true);
try {
root = Yoga.Node.create(config);
root.setMargin(Yoga.EDGE_LEFT, 10);
@@ -384,6 +402,9 @@ test("absolute_layout_align_items_and_justify_content_center", () => {
const config = Yoga.Config.create();
let root;
config.setExperimentalFeatureEnabled(Yoga.EXPERIMENTAL_FEATURE_ABSOLUTE_PERCENTAGE_AGAINST_PADDING_EDGE, true);
config.setExperimentalFeatureEnabled(Yoga.EXPERIMENTAL_FEATURE_FIX_ABSOLUTE_TRAILING_COLUMN_MARGIN, true);
try {
root = Yoga.Node.create(config);
root.setJustifyContent(Yoga.JUSTIFY_CENTER);
@@ -432,6 +453,9 @@ test("absolute_layout_align_items_and_justify_content_flex_end", () => {
const config = Yoga.Config.create();
let root;
config.setExperimentalFeatureEnabled(Yoga.EXPERIMENTAL_FEATURE_ABSOLUTE_PERCENTAGE_AGAINST_PADDING_EDGE, true);
config.setExperimentalFeatureEnabled(Yoga.EXPERIMENTAL_FEATURE_FIX_ABSOLUTE_TRAILING_COLUMN_MARGIN, true);
try {
root = Yoga.Node.create(config);
root.setJustifyContent(Yoga.JUSTIFY_FLEX_END);
@@ -480,6 +504,9 @@ test("absolute_layout_justify_content_center", () => {
const config = Yoga.Config.create();
let root;
config.setExperimentalFeatureEnabled(Yoga.EXPERIMENTAL_FEATURE_ABSOLUTE_PERCENTAGE_AGAINST_PADDING_EDGE, true);
config.setExperimentalFeatureEnabled(Yoga.EXPERIMENTAL_FEATURE_FIX_ABSOLUTE_TRAILING_COLUMN_MARGIN, true);
try {
root = Yoga.Node.create(config);
root.setJustifyContent(Yoga.JUSTIFY_CENTER);
@@ -527,6 +554,9 @@ test("absolute_layout_align_items_center", () => {
const config = Yoga.Config.create();
let root;
config.setExperimentalFeatureEnabled(Yoga.EXPERIMENTAL_FEATURE_ABSOLUTE_PERCENTAGE_AGAINST_PADDING_EDGE, true);
config.setExperimentalFeatureEnabled(Yoga.EXPERIMENTAL_FEATURE_FIX_ABSOLUTE_TRAILING_COLUMN_MARGIN, true);
try {
root = Yoga.Node.create(config);
root.setAlignItems(Yoga.ALIGN_CENTER);
@@ -574,6 +604,9 @@ test("absolute_layout_align_items_center_on_child_only", () => {
const config = Yoga.Config.create();
let root;
config.setExperimentalFeatureEnabled(Yoga.EXPERIMENTAL_FEATURE_ABSOLUTE_PERCENTAGE_AGAINST_PADDING_EDGE, true);
config.setExperimentalFeatureEnabled(Yoga.EXPERIMENTAL_FEATURE_FIX_ABSOLUTE_TRAILING_COLUMN_MARGIN, true);
try {
root = Yoga.Node.create(config);
root.setFlexGrow(1);
@@ -621,6 +654,9 @@ test("absolute_layout_align_items_and_justify_content_center_and_top_position",
const config = Yoga.Config.create();
let root;
config.setExperimentalFeatureEnabled(Yoga.EXPERIMENTAL_FEATURE_ABSOLUTE_PERCENTAGE_AGAINST_PADDING_EDGE, true);
config.setExperimentalFeatureEnabled(Yoga.EXPERIMENTAL_FEATURE_FIX_ABSOLUTE_TRAILING_COLUMN_MARGIN, true);
try {
root = Yoga.Node.create(config);
root.setJustifyContent(Yoga.JUSTIFY_CENTER);
@@ -670,6 +706,9 @@ test("absolute_layout_align_items_and_justify_content_center_and_bottom_position
const config = Yoga.Config.create();
let root;
config.setExperimentalFeatureEnabled(Yoga.EXPERIMENTAL_FEATURE_ABSOLUTE_PERCENTAGE_AGAINST_PADDING_EDGE, true);
config.setExperimentalFeatureEnabled(Yoga.EXPERIMENTAL_FEATURE_FIX_ABSOLUTE_TRAILING_COLUMN_MARGIN, true);
try {
root = Yoga.Node.create(config);
root.setJustifyContent(Yoga.JUSTIFY_CENTER);
@@ -719,6 +758,9 @@ test("absolute_layout_align_items_and_justify_content_center_and_left_position",
const config = Yoga.Config.create();
let root;
config.setExperimentalFeatureEnabled(Yoga.EXPERIMENTAL_FEATURE_ABSOLUTE_PERCENTAGE_AGAINST_PADDING_EDGE, true);
config.setExperimentalFeatureEnabled(Yoga.EXPERIMENTAL_FEATURE_FIX_ABSOLUTE_TRAILING_COLUMN_MARGIN, true);
try {
root = Yoga.Node.create(config);
root.setJustifyContent(Yoga.JUSTIFY_CENTER);
@@ -768,6 +810,9 @@ test("absolute_layout_align_items_and_justify_content_center_and_right_position"
const config = Yoga.Config.create();
let root;
config.setExperimentalFeatureEnabled(Yoga.EXPERIMENTAL_FEATURE_ABSOLUTE_PERCENTAGE_AGAINST_PADDING_EDGE, true);
config.setExperimentalFeatureEnabled(Yoga.EXPERIMENTAL_FEATURE_FIX_ABSOLUTE_TRAILING_COLUMN_MARGIN, true);
try {
root = Yoga.Node.create(config);
root.setJustifyContent(Yoga.JUSTIFY_CENTER);
@@ -817,6 +862,9 @@ test("position_root_with_rtl_should_position_withoutdirection", () => {
const config = Yoga.Config.create();
let root;
config.setExperimentalFeatureEnabled(Yoga.EXPERIMENTAL_FEATURE_ABSOLUTE_PERCENTAGE_AGAINST_PADDING_EDGE, true);
config.setExperimentalFeatureEnabled(Yoga.EXPERIMENTAL_FEATURE_FIX_ABSOLUTE_TRAILING_COLUMN_MARGIN, true);
try {
root = Yoga.Node.create(config);
root.setPosition(Yoga.EDGE_LEFT, 72);
@@ -847,6 +895,9 @@ test("absolute_layout_percentage_bottom_based_on_parent_height", () => {
const config = Yoga.Config.create();
let root;
config.setExperimentalFeatureEnabled(Yoga.EXPERIMENTAL_FEATURE_ABSOLUTE_PERCENTAGE_AGAINST_PADDING_EDGE, true);
config.setExperimentalFeatureEnabled(Yoga.EXPERIMENTAL_FEATURE_FIX_ABSOLUTE_TRAILING_COLUMN_MARGIN, true);
try {
root = Yoga.Node.create(config);
root.setWidth(100);
@@ -927,6 +978,9 @@ test("absolute_layout_in_wrap_reverse_column_container", () => {
const config = Yoga.Config.create();
let root;
config.setExperimentalFeatureEnabled(Yoga.EXPERIMENTAL_FEATURE_ABSOLUTE_PERCENTAGE_AGAINST_PADDING_EDGE, true);
config.setExperimentalFeatureEnabled(Yoga.EXPERIMENTAL_FEATURE_FIX_ABSOLUTE_TRAILING_COLUMN_MARGIN, true);
try {
root = Yoga.Node.create(config);
root.setFlexWrap(Yoga.WRAP_WRAP_REVERSE);
@@ -973,6 +1027,9 @@ test("absolute_layout_in_wrap_reverse_row_container", () => {
const config = Yoga.Config.create();
let root;
config.setExperimentalFeatureEnabled(Yoga.EXPERIMENTAL_FEATURE_ABSOLUTE_PERCENTAGE_AGAINST_PADDING_EDGE, true);
config.setExperimentalFeatureEnabled(Yoga.EXPERIMENTAL_FEATURE_FIX_ABSOLUTE_TRAILING_COLUMN_MARGIN, true);
try {
root = Yoga.Node.create(config);
root.setFlexDirection(Yoga.FLEX_DIRECTION_ROW);
@@ -1020,6 +1077,9 @@ test("absolute_layout_in_wrap_reverse_column_container_flex_end", () => {
const config = Yoga.Config.create();
let root;
config.setExperimentalFeatureEnabled(Yoga.EXPERIMENTAL_FEATURE_ABSOLUTE_PERCENTAGE_AGAINST_PADDING_EDGE, true);
config.setExperimentalFeatureEnabled(Yoga.EXPERIMENTAL_FEATURE_FIX_ABSOLUTE_TRAILING_COLUMN_MARGIN, true);
try {
root = Yoga.Node.create(config);
root.setFlexWrap(Yoga.WRAP_WRAP_REVERSE);
@@ -1067,6 +1127,9 @@ test("absolute_layout_in_wrap_reverse_row_container_flex_end", () => {
const config = Yoga.Config.create();
let root;
config.setExperimentalFeatureEnabled(Yoga.EXPERIMENTAL_FEATURE_ABSOLUTE_PERCENTAGE_AGAINST_PADDING_EDGE, true);
config.setExperimentalFeatureEnabled(Yoga.EXPERIMENTAL_FEATURE_FIX_ABSOLUTE_TRAILING_COLUMN_MARGIN, true);
try {
root = Yoga.Node.create(config);
root.setFlexDirection(Yoga.FLEX_DIRECTION_ROW);
@@ -1111,3 +1174,168 @@ test("absolute_layout_in_wrap_reverse_row_container_flex_end", () => {
config.free();
}
});
test("percent_absolute_position_infinite_height", () => {
const config = Yoga.Config.create();
let root;
config.setExperimentalFeatureEnabled(Yoga.EXPERIMENTAL_FEATURE_ABSOLUTE_PERCENTAGE_AGAINST_PADDING_EDGE, true);
config.setExperimentalFeatureEnabled(Yoga.EXPERIMENTAL_FEATURE_FIX_ABSOLUTE_TRAILING_COLUMN_MARGIN, true);
try {
root = Yoga.Node.create(config);
root.setWidth(300);
const root_child0 = Yoga.Node.create(config);
root_child0.setWidth(300);
root.insertChild(root_child0, 0);
const root_child1 = Yoga.Node.create(config);
root_child1.setPositionType(Yoga.POSITION_TYPE_ABSOLUTE);
root_child1.setPosition(Yoga.EDGE_LEFT, "20%");
root_child1.setPosition(Yoga.EDGE_TOP, "20%");
root_child1.setWidth("20%");
root_child1.setHeight("20%");
root.insertChild(root_child1, 1);
root.calculateLayout(Yoga.UNDEFINED, Yoga.UNDEFINED, Yoga.DIRECTION_LTR);
expect(root.getComputedLeft()).toBe(0);
expect(root.getComputedTop()).toBe(0);
expect(root.getComputedWidth()).toBe(300);
expect(root.getComputedHeight()).toBe(0);
expect(root_child0.getComputedLeft()).toBe(0);
expect(root_child0.getComputedTop()).toBe(0);
expect(root_child0.getComputedWidth()).toBe(300);
expect(root_child0.getComputedHeight()).toBe(0);
expect(root_child1.getComputedLeft()).toBe(60);
expect(root_child1.getComputedTop()).toBe(0);
expect(root_child1.getComputedWidth()).toBe(60);
expect(root_child1.getComputedHeight()).toBe(0);
root.calculateLayout(Yoga.UNDEFINED, Yoga.UNDEFINED, Yoga.DIRECTION_RTL);
expect(root.getComputedLeft()).toBe(0);
expect(root.getComputedTop()).toBe(0);
expect(root.getComputedWidth()).toBe(300);
expect(root.getComputedHeight()).toBe(0);
expect(root_child0.getComputedLeft()).toBe(0);
expect(root_child0.getComputedTop()).toBe(0);
expect(root_child0.getComputedWidth()).toBe(300);
expect(root_child0.getComputedHeight()).toBe(0);
expect(root_child1.getComputedLeft()).toBe(60);
expect(root_child1.getComputedTop()).toBe(0);
expect(root_child1.getComputedWidth()).toBe(60);
expect(root_child1.getComputedHeight()).toBe(0);
} finally {
if (typeof root !== "undefined") {
root.freeRecursive();
}
config.free();
}
});
test("absolute_layout_percentage_height_based_on_padded_parent", () => {
const config = Yoga.Config.create();
let root;
config.setExperimentalFeatureEnabled(Yoga.EXPERIMENTAL_FEATURE_ABSOLUTE_PERCENTAGE_AGAINST_PADDING_EDGE, true);
config.setExperimentalFeatureEnabled(Yoga.EXPERIMENTAL_FEATURE_FIX_ABSOLUTE_TRAILING_COLUMN_MARGIN, true);
try {
root = Yoga.Node.create(config);
root.setPadding(Yoga.EDGE_TOP, 10);
root.setBorder(Yoga.EDGE_TOP, 10);
root.setWidth(100);
root.setHeight(100);
const root_child0 = Yoga.Node.create(config);
root_child0.setPositionType(Yoga.POSITION_TYPE_ABSOLUTE);
root_child0.setWidth(100);
root_child0.setHeight("50%");
root.insertChild(root_child0, 0);
root.calculateLayout(Yoga.UNDEFINED, Yoga.UNDEFINED, Yoga.DIRECTION_LTR);
expect(root.getComputedLeft()).toBe(0);
expect(root.getComputedTop()).toBe(0);
expect(root.getComputedWidth()).toBe(100);
expect(root.getComputedHeight()).toBe(100);
expect(root_child0.getComputedLeft()).toBe(0);
expect(root_child0.getComputedTop()).toBe(10);
expect(root_child0.getComputedWidth()).toBe(100);
expect(root_child0.getComputedHeight()).toBe(50);
root.calculateLayout(Yoga.UNDEFINED, Yoga.UNDEFINED, Yoga.DIRECTION_RTL);
expect(root.getComputedLeft()).toBe(0);
expect(root.getComputedTop()).toBe(0);
expect(root.getComputedWidth()).toBe(100);
expect(root.getComputedHeight()).toBe(100);
expect(root_child0.getComputedLeft()).toBe(0);
expect(root_child0.getComputedTop()).toBe(10);
expect(root_child0.getComputedWidth()).toBe(100);
expect(root_child0.getComputedHeight()).toBe(50);
} finally {
if (typeof root !== "undefined") {
root.freeRecursive();
}
config.free();
}
});
test("absolute_layout_percentage_height_based_on_padded_parent_and_align_items_center", () => {
const config = Yoga.Config.create();
let root;
config.setExperimentalFeatureEnabled(Yoga.EXPERIMENTAL_FEATURE_ABSOLUTE_PERCENTAGE_AGAINST_PADDING_EDGE, true);
config.setExperimentalFeatureEnabled(Yoga.EXPERIMENTAL_FEATURE_FIX_ABSOLUTE_TRAILING_COLUMN_MARGIN, true);
try {
root = Yoga.Node.create(config);
root.setJustifyContent(Yoga.JUSTIFY_CENTER);
root.setAlignItems(Yoga.ALIGN_CENTER);
root.setPadding(Yoga.EDGE_TOP, 20);
root.setPadding(Yoga.EDGE_BOTTOM, 20);
root.setWidth(100);
root.setHeight(100);
const root_child0 = Yoga.Node.create(config);
root_child0.setPositionType(Yoga.POSITION_TYPE_ABSOLUTE);
root_child0.setWidth(100);
root_child0.setHeight("50%");
root.insertChild(root_child0, 0);
root.calculateLayout(Yoga.UNDEFINED, Yoga.UNDEFINED, Yoga.DIRECTION_LTR);
expect(root.getComputedLeft()).toBe(0);
expect(root.getComputedTop()).toBe(0);
expect(root.getComputedWidth()).toBe(100);
expect(root.getComputedHeight()).toBe(100);
expect(root_child0.getComputedLeft()).toBe(0);
expect(root_child0.getComputedTop()).toBe(25);
expect(root_child0.getComputedWidth()).toBe(100);
expect(root_child0.getComputedHeight()).toBe(50);
root.calculateLayout(Yoga.UNDEFINED, Yoga.UNDEFINED, Yoga.DIRECTION_RTL);
expect(root.getComputedLeft()).toBe(0);
expect(root.getComputedTop()).toBe(0);
expect(root.getComputedWidth()).toBe(100);
expect(root.getComputedHeight()).toBe(100);
expect(root_child0.getComputedLeft()).toBe(0);
expect(root_child0.getComputedTop()).toBe(25);
expect(root_child0.getComputedWidth()).toBe(100);
expect(root_child0.getComputedHeight()).toBe(50);
} finally {
if (typeof root !== "undefined") {
root.freeRecursive();
}
config.free();
}
});