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

Fix issue in gentest where border-<edge> would add a border to test (#1496)

Browse Source 
Summary:
Pull Request resolved: https://github.com/facebook/yoga/pull/1496

Gentest code has a problem where we try to apply a border in our test when the web browser is not actually adding one. This happens when we do something like `border-top: 10px`. This will actually set the style of the border to `initial` which is just `none`, so nothing renders. This is causing at least 1 test to pass when it actually fails.

I changed it so we ignore setting this value if the style is one of these values. I then re-ran the gentest code and excluded the now failing test (which gets fixed in my static stack).

Reviewed By: NickGerleman

Differential Revision: D51831754

fbshipit-source-id: a325e4a42b2d7cd6f19efc6cd5a2445574467fb7
This commit is contained in:
Joe Vilches
2023-12-05 13:30:03 -08:00
committed by Facebook GitHub Bot
parent 7b3b66d288
commit c93734f579
6 changed files with 81 additions and 52 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
gentest/fixtures/YGAbsolutePositionTest.html
View File

@@ -93,7 +93,7 @@
<div style="width:20%; height:20%; left:20%; top:20%; position: absolute;"></div> <div style="width:20%; height:20%; left:20%; top:20%; position: absolute;"></div>
</div> </div>
<div id="absolute_layout_percentage_height_based_on_padded_parent" style="flex-direction:column; width:100px; height:100px; padding-top: 10px; border-top: 10px;"> <div id="absolute_layout_percentage_height_based_on_padded_parent" data-disabled="true" style="flex-direction:column; width:100px; height:100px; padding-top: 10px; border-top: 10px solid black;">
<div style="width:100px; height:50%; position: absolute;"></div> <div style="width:100px; height:50%; position: absolute;"></div>
</div> </div>

12
gentest/fixtures/YGFlexDirectionTest.html
View File

@@ -307,7 +307,7 @@
<div id="flex_direction_row_reverse_inner_border_left" style="height: 100px; width: 100px;"> <div id="flex_direction_row_reverse_inner_border_left" style="height: 100px; width: 100px;">
<div style="height: 100px; width: 100px; flex-direction: row-reverse; "> <div style="height: 100px; width: 100px; flex-direction: row-reverse; ">
<div style="width: 10px; height: 10px; position: absolute; border-left: 10px"></div> <div style="width: 10px; height: 10px; position: absolute; border-left: 10px solid black"></div>
<div style="width: 10px;"></div> <div style="width: 10px;"></div>
<div style="width: 10px;"></div> <div style="width: 10px;"></div>
</div> </div>
@@ -315,7 +315,7 @@
<div id="flex_direction_row_reverse_inner_border_right" style="height: 100px; width: 100px;"> <div id="flex_direction_row_reverse_inner_border_right" style="height: 100px; width: 100px;">
<div style="height: 100px; width: 100px; flex-direction: row-reverse; "> <div style="height: 100px; width: 100px; flex-direction: row-reverse; ">
<div style="width: 10px; height: 10px; position: absolute; border-right: 10px"></div> <div style="width: 10px; height: 10px; position: absolute; border-right: 10px solid black"></div>
<div style="width: 10px;"></div> <div style="width: 10px;"></div>
<div style="width: 10px;"></div> <div style="width: 10px;"></div>
</div> </div>
@@ -323,7 +323,7 @@
<div id="flex_direction_col_reverse_inner_border_top" style="height: 100px; width: 100px;"> <div id="flex_direction_col_reverse_inner_border_top" style="height: 100px; width: 100px;">
<div style="height: 100px; width: 100px; flex-direction: column-reverse; "> <div style="height: 100px; width: 100px; flex-direction: column-reverse; ">
<div style="width: 10px; height: 10px; position: absolute; border-top: 10px"></div> <div style="width: 10px; height: 10px; position: absolute; border-top: 10px solid black"></div>
<div style="width: 10px;"></div> <div style="width: 10px;"></div>
<div style="width: 10px;"></div> <div style="width: 10px;"></div>
</div> </div>
@@ -331,7 +331,7 @@
<div id="flex_direction_col_reverse_inner_border_bottom" style="height: 100px; width: 100px;"> <div id="flex_direction_col_reverse_inner_border_bottom" style="height: 100px; width: 100px;">
<div style="height: 100px; width: 100px; flex-direction: column-reverse; "> <div style="height: 100px; width: 100px; flex-direction: column-reverse; ">
<div style="width: 10px; height: 10px; position: absolute; border-bottom: 10px"></div> <div style="width: 10px; height: 10px; position: absolute; border-bottom: 10px solid black"></div>
<div style="width: 10px;"></div> <div style="width: 10px;"></div>
<div style="width: 10px;"></div> <div style="width: 10px;"></div>
</div> </div>
@@ -339,7 +339,7 @@
<div id="flex_direction_row_reverse_inner_border_start" style="height: 100px; width: 100px;"> <div id="flex_direction_row_reverse_inner_border_start" style="height: 100px; width: 100px;">
<div style="height: 100px; width: 100px; flex-direction: row-reverse; "> <div style="height: 100px; width: 100px; flex-direction: row-reverse; ">
<div style="width: 10px; height: 10px; position: absolute; border-start: 10px"></div> <div style="width: 10px; height: 10px; position: absolute; border-start: 10px solid black"></div>
<div style="width: 10px;"></div> <div style="width: 10px;"></div>
<div style="width: 10px;"></div> <div style="width: 10px;"></div>
</div> </div>
@@ -347,7 +347,7 @@
<div id="flex_direction_row_reverse_inner_border_end" style="height: 100px; width: 100px;"> <div id="flex_direction_row_reverse_inner_border_end" style="height: 100px; width: 100px;">
<div style="height: 100px; width: 100px; flex-direction: row-reverse; "> <div style="height: 100px; width: 100px; flex-direction: row-reverse; ">
<div style="width: 10px; height: 10px; position: absolute; border-end: 10px"></div> <div style="width: 10px; height: 10px; position: absolute; border-end: 10px solid black"></div>
<div style="width: 10px;"></div> <div style="width: 10px;"></div>
<div style="width: 10px;"></div> <div style="width: 10px;"></div>
</div> </div>

26
gentest/gentest.js
View File

@@ -10,6 +10,8 @@
const DEFAULT_EXPERIMENTS = ['AbsolutePercentageAgainstPaddingEdge']; const DEFAULT_EXPERIMENTS = ['AbsolutePercentageAgainstPaddingEdge'];
const INVISIBLE_BORDER_STYLES = ['none', 'initial'];
window.onload = function () { window.onload = function () {
checkDefaultValues(); checkDefaultValues();
@@ -432,6 +434,11 @@ function setupTestTree(
); );
break; break;
case 'border-left-width': case 'border-left-width':
if (
!INVISIBLE_BORDER_STYLES.includes(
node.declaredStyle['border-left-style'],
)
) {
if (genericNode.rawStyle.indexOf('border-start-width:') >= 0) { if (genericNode.rawStyle.indexOf('border-start-width:') >= 0) {
e.YGNodeStyleSetBorder( e.YGNodeStyleSetBorder(
nodeName, nodeName,
@@ -445,15 +452,27 @@ function setupTestTree(
pointValue(e, node.style[style]), pointValue(e, node.style[style]),
); );
} }
}
break; break;
case 'border-top-width': case 'border-top-width':
if (
!INVISIBLE_BORDER_STYLES.includes(
node.declaredStyle['border-top-style'],
)
) {
e.YGNodeStyleSetBorder( e.YGNodeStyleSetBorder(
nodeName, nodeName,
e.YGEdgeTop, e.YGEdgeTop,
pointValue(e, node.style[style]), pointValue(e, node.style[style]),
); );
}
break; break;
case 'border-right-width': case 'border-right-width':
if (
!INVISIBLE_BORDER_STYLES.includes(
node.declaredStyle['border-right-style'],
)
) {
if (genericNode.rawStyle.indexOf('border-end-width:') >= 0) { if (genericNode.rawStyle.indexOf('border-end-width:') >= 0) {
e.YGNodeStyleSetBorder( e.YGNodeStyleSetBorder(
nodeName, nodeName,
@@ -467,13 +486,20 @@ function setupTestTree(
pointValue(e, node.style[style]), pointValue(e, node.style[style]),
); );
} }
}
break; break;
case 'border-bottom-width': case 'border-bottom-width':
if (
!INVISIBLE_BORDER_STYLES.includes(
node.declaredStyle['border-bottom-style'],
)
) {
e.YGNodeStyleSetBorder( e.YGNodeStyleSetBorder(
nodeName, nodeName,
e.YGEdgeBottom, e.YGEdgeBottom,
pointValue(e, node.style[style]), pointValue(e, node.style[style]),
); );
}
break; break;
case 'width': case 'width':
e.YGNodeStyleSetWidth(nodeName, pointValue(e, node.style[style])); e.YGNodeStyleSetWidth(nodeName, pointValue(e, node.style[style]));

9
java/tests/com/facebook/yoga/YGAbsolutePositionTest.java
View File

@@ -1124,6 +1124,7 @@ public class YGAbsolutePositionTest {
} }
@Test @Test
@Ignore
public void test_absolute_layout_percentage_height_based_on_padded_parent() { public void test_absolute_layout_percentage_height_based_on_padded_parent() {
YogaConfig config = YogaConfigFactory.create(); YogaConfig config = YogaConfigFactory.create();
config.setExperimentalFeatureEnabled(YogaExperimentalFeature.ABSOLUTE_PERCENTAGE_AGAINST_PADDING_EDGE, true); config.setExperimentalFeatureEnabled(YogaExperimentalFeature.ABSOLUTE_PERCENTAGE_AGAINST_PADDING_EDGE, true);
@@ -1149,9 +1150,9 @@ public class YGAbsolutePositionTest {
assertEquals(100f, root.getLayoutHeight(), 0.0f); assertEquals(100f, root.getLayoutHeight(), 0.0f);
assertEquals(0f, root_child0.getLayoutX(), 0.0f); assertEquals(0f, root_child0.getLayoutX(), 0.0f);
assertEquals(10f, root_child0.getLayoutY(), 0.0f); assertEquals(20f, root_child0.getLayoutY(), 0.0f);
assertEquals(100f, root_child0.getLayoutWidth(), 0.0f); assertEquals(100f, root_child0.getLayoutWidth(), 0.0f);
assertEquals(50f, root_child0.getLayoutHeight(), 0.0f); assertEquals(45f, root_child0.getLayoutHeight(), 0.0f);
root.setDirection(YogaDirection.RTL); root.setDirection(YogaDirection.RTL);
root.calculateLayout(YogaConstants.UNDEFINED, YogaConstants.UNDEFINED); root.calculateLayout(YogaConstants.UNDEFINED, YogaConstants.UNDEFINED);
@@ -1162,9 +1163,9 @@ public class YGAbsolutePositionTest {
assertEquals(100f, root.getLayoutHeight(), 0.0f); assertEquals(100f, root.getLayoutHeight(), 0.0f);
assertEquals(0f, root_child0.getLayoutX(), 0.0f); assertEquals(0f, root_child0.getLayoutX(), 0.0f);
assertEquals(10f, root_child0.getLayoutY(), 0.0f); assertEquals(20f, root_child0.getLayoutY(), 0.0f);
assertEquals(100f, root_child0.getLayoutWidth(), 0.0f); assertEquals(100f, root_child0.getLayoutWidth(), 0.0f);
assertEquals(50f, root_child0.getLayoutHeight(), 0.0f); assertEquals(45f, root_child0.getLayoutHeight(), 0.0f);
} }
@Test @Test

10
javascript/tests/generated/YGAbsolutePositionTest.test.ts
View File

@@ -1255,7 +1255,7 @@ test('percent_absolute_position_infinite_height', () => {
config.free(); config.free();
} }
}); });
test('absolute_layout_percentage_height_based_on_padded_parent', () => { test.skip('absolute_layout_percentage_height_based_on_padded_parent', () => {
const config = Yoga.Config.create(); const config = Yoga.Config.create();
let root; let root;
@@ -1282,9 +1282,9 @@ test('absolute_layout_percentage_height_based_on_padded_parent', () => {
expect(root.getComputedHeight()).toBe(100); expect(root.getComputedHeight()).toBe(100);
expect(root_child0.getComputedLeft()).toBe(0); expect(root_child0.getComputedLeft()).toBe(0);
expect(root_child0.getComputedTop()).toBe(10); expect(root_child0.getComputedTop()).toBe(20);
expect(root_child0.getComputedWidth()).toBe(100); expect(root_child0.getComputedWidth()).toBe(100);
expect(root_child0.getComputedHeight()).toBe(50); expect(root_child0.getComputedHeight()).toBe(45);
root.calculateLayout(undefined, undefined, Direction.RTL); root.calculateLayout(undefined, undefined, Direction.RTL);
@@ -1294,9 +1294,9 @@ test('absolute_layout_percentage_height_based_on_padded_parent', () => {
expect(root.getComputedHeight()).toBe(100); expect(root.getComputedHeight()).toBe(100);
expect(root_child0.getComputedLeft()).toBe(0); expect(root_child0.getComputedLeft()).toBe(0);
expect(root_child0.getComputedTop()).toBe(10); expect(root_child0.getComputedTop()).toBe(20);
expect(root_child0.getComputedWidth()).toBe(100); expect(root_child0.getComputedWidth()).toBe(100);
expect(root_child0.getComputedHeight()).toBe(50); expect(root_child0.getComputedHeight()).toBe(45);
} finally { } finally {
if (typeof root !== 'undefined') { if (typeof root !== 'undefined') {
root.freeRecursive(); root.freeRecursive();

10
tests/generated/YGAbsolutePositionTest.cpp
View File

@@ -1132,6 +1132,8 @@ TEST(YogaTest, percent_absolute_position_infinite_height) {
} }
TEST(YogaTest, absolute_layout_percentage_height_based_on_padded_parent) { TEST(YogaTest, absolute_layout_percentage_height_based_on_padded_parent) {
GTEST_SKIP();
const YGConfigRef config = YGConfigNew(); const YGConfigRef config = YGConfigNew();
YGConfigSetExperimentalFeatureEnabled(config, YGExperimentalFeatureAbsolutePercentageAgainstPaddingEdge, true); YGConfigSetExperimentalFeatureEnabled(config, YGExperimentalFeatureAbsolutePercentageAgainstPaddingEdge, true);
@@ -1155,9 +1157,9 @@ TEST(YogaTest, absolute_layout_percentage_height_based_on_padded_parent) {
ASSERT_FLOAT_EQ(100, YGNodeLayoutGetHeight(root)); ASSERT_FLOAT_EQ(100, YGNodeLayoutGetHeight(root));
ASSERT_FLOAT_EQ(0, YGNodeLayoutGetLeft(root_child0)); ASSERT_FLOAT_EQ(0, YGNodeLayoutGetLeft(root_child0));
ASSERT_FLOAT_EQ(10, YGNodeLayoutGetTop(root_child0)); ASSERT_FLOAT_EQ(20, YGNodeLayoutGetTop(root_child0));
ASSERT_FLOAT_EQ(100, YGNodeLayoutGetWidth(root_child0)); ASSERT_FLOAT_EQ(100, YGNodeLayoutGetWidth(root_child0));
ASSERT_FLOAT_EQ(50, YGNodeLayoutGetHeight(root_child0)); ASSERT_FLOAT_EQ(45, YGNodeLayoutGetHeight(root_child0));
YGNodeCalculateLayout(root, YGUndefined, YGUndefined, YGDirectionRTL); YGNodeCalculateLayout(root, YGUndefined, YGUndefined, YGDirectionRTL);
@@ -1167,9 +1169,9 @@ TEST(YogaTest, absolute_layout_percentage_height_based_on_padded_parent) {
ASSERT_FLOAT_EQ(100, YGNodeLayoutGetHeight(root)); ASSERT_FLOAT_EQ(100, YGNodeLayoutGetHeight(root));
ASSERT_FLOAT_EQ(0, YGNodeLayoutGetLeft(root_child0)); ASSERT_FLOAT_EQ(0, YGNodeLayoutGetLeft(root_child0));
ASSERT_FLOAT_EQ(10, YGNodeLayoutGetTop(root_child0)); ASSERT_FLOAT_EQ(20, YGNodeLayoutGetTop(root_child0));
ASSERT_FLOAT_EQ(100, YGNodeLayoutGetWidth(root_child0)); ASSERT_FLOAT_EQ(100, YGNodeLayoutGetWidth(root_child0));
ASSERT_FLOAT_EQ(50, YGNodeLayoutGetHeight(root_child0)); ASSERT_FLOAT_EQ(45, YGNodeLayoutGetHeight(root_child0));
YGNodeFreeRecursive(root); YGNodeFreeRecursive(root);