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

Gentest and initial tests for intrinsic sizing (#1723)

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

Adds gentest support for intrinsic sizing keywords and creates an initial batch of somewhat interesting tests for these keywords on `width`, `height`, `min-width`, `min-height`, `max-width`, `max-height`, and `flex-basis`

Reviewed By: NickGerleman

Differential Revision: D64145117

fbshipit-source-id: 1e3e7214fab062ab6f260cfe7bdfaf3c0aca3bf7
This commit is contained in:
Joe Vilches
2024-11-04 16:02:37 -08:00
committed by Facebook GitHub Bot
parent 488288e291
commit 867bfae3a3
8 changed files with 6240 additions and 73 deletions
Download Patch File Download Diff File Expand all files Collapse all files

248
gentest/fixtures/YGIntrinsicSizeTest.html
View File

@@ -219,3 +219,251 @@
Sed at consectetur ipsum. Sed at consectetur ipsum.
</div> </div>
</div> </div>
<div id="max_content_width" style="flex-direction: row; width:max-content; flex-wrap: wrap;">
<div style="width: 50px; height: 50px;">
</div>
<div style="width: 100px; height: 50px;">
</div>
<div style="width: 25px; height: 50px;">
</div>
</div>
<div data-disabled="true" id="fit_content_width" style="width: 90px; position: relative;">
<div style="flex-direction: row; width: fit-content; flex-wrap: wrap;">
<div style="width: 50px; height: 50px;">
</div>
<div style="width: 100px; height: 50px;">
</div>
<div style="width: 25px; height: 50px;">
</div>
</div>
</div>
<div data-disabled="true" id="stretch_width" style="width: 500px; position: relative;">
<div style="flex-direction: row; width: -webkit-fill-available; flex-wrap: wrap;">
<div style="width: 50px; height: 50px;">
</div>
<div style="width: 100px; height: 50px;">
</div>
<div style="width: 25px; height: 50px;">
</div>
</div>
</div>
<div id="max_content_height" style="height:max-content; flex-wrap: wrap;">
<div style="width: 50px; height: 50px;">
</div>
<div style="width: 50px; height: 100px;">
</div>
<div style="width: 50px; height: 25px;">
</div>
</div>
<div data-disabled="true" id="fit_content_height" style="height: 90px; position: relative;">
<div style="height: fit-content; flex-wrap: wrap;">
<div style="width: 50px; height: 50px;">
</div>
<div style="width: 50px; height: 100px;">
</div>
<div style="width: 50px; height: 25px;">
</div>
</div>
</div>
<div data-disabled="true" id="stretch_height" style="height: 500px; position: relative;">
<div style="height: -webkit-fill-available; flex-wrap: wrap;">
<div style="width: 50px; height: 50px;">
</div>
<div style="width: 50px; height: 100px;">
</div>
<div style="width: 50px; height: 25px;">
</div>
</div>
</div>
<div id="max_content_flex_basis_column" style="flex-basis: max-content; flex-wrap: wrap;">
<div style="width: 50px; height: 50px;">
</div>
<div style="width: 50px; height: 100px;">
</div>
<div style="width: 50px; height: 25px;">
</div>
</div>
<div data-disabled="true" id="fit_content_flex_basis_column" style="height: 90px; position: relative;">
<div style="flex-basis: fit-content; flex-wrap: wrap;">
<div style="width: 50px; height: 50px;">
</div>
<div style="width: 50px; height: 100px;">
</div>
<div style="width: 50px; height: 25px;">
</div>
</div>
</div>
<div data-disabled="true" id="stretch_flex_basis_column" style="height: 500px; position: relative;">
<div style="flex-basis: -webkit-fill-available; flex-wrap: wrap;">
<div style="width: 50px; height: 50px;">
</div>
<div style="width: 50px; height: 100px;">
</div>
<div style="width: 50px; height: 25px;">
</div>
</div>
</div>
<div id="max_content_flex_basis_row" style="flex-direction: row; flex-basis: max-content; flex-wrap: wrap;">
<div style="width: 50px; height: 50px;">
</div>
<div style="width: 100px; height: 500px;">
</div>
<div style="width: 25px; height: 50px;">
</div>
</div>
<div data-disabled="true" id="fit_content_flex_basis_row" style="width: 90px; position: relative;">
<div style="flex-direction: row; flex-basis: fit-content; flex-wrap: wrap;">
<div style="width: 50px; height: 50px;">
</div>
<div style="width: 100px; height: 50px;">
</div>
<div style="width: 25px; height: 50px;">
</div>
</div>
</div>
<div data-disabled="true" id="stretch_flex_basis_row" style="width: 500px; position: relative;">
<div style="flex-direction: row; flex-basis: -webkit-fill-available; flex-wrap: wrap;">
<div style="width: 50px; height: 50px;">
</div>
<div style="width: 100px; height: 50px;">
</div>
<div style="width: 25px; height: 50px;">
</div>
</div>
</div>
<div data-disabled="true" id="max_content_max_width" style="flex-direction: row; max-width:max-content; width: 200px; flex-wrap: wrap;">
<div style="width: 50px; height: 50px;">
</div>
<div style="width: 100px; height: 50px;">
</div>
<div style="width: 25px; height: 50px;">
</div>
</div>
<div data-disabled="true" id="fit_content_max_width" style="width: 90px; position: relative;">
<div style="flex-direction: row; max-width: fit-content; width: 110px; flex-wrap: wrap;">
<div style="width: 50px; height: 50px;">
</div>
<div style="width: 100px; height: 50px;">
</div>
<div style="width: 25px; height: 50px;">
</div>
</div>
</div>
<div data-disabled="true" id="stretch_max_width" style="width: 500px; position: relative;">
<div style="flex-direction: row; max-width: -webkit-fill-available; width: 600px; flex-wrap: wrap;">
<div style="width: 50px; height: 50px;">
</div>
<div style="width: 100px; height: 50px;">
</div>
<div style="width: 25px; height: 50px;">
</div>
</div>
</div>
<div data-disabled="true" id="max_content_min_width" style="flex-direction: row; min-width:max-content; width: 100px; flex-wrap: wrap;">
<div style="width: 50px; height: 50px;">
</div>
<div style="width: 100px; height: 50px;">
</div>
<div style="width: 25px; height: 50px;">
</div>
</div>
<div data-disabled="true" id="fit_content_min_width" style="width: 90px; position: relative;">
<div style="flex-direction: row; min-width: fit-content; width: 90px; flex-wrap: wrap;">
<div style="width: 50px; height: 50px;">
</div>
<div style="width: 100px; height: 50px;">
</div>
<div style="width: 25px; height: 50px;">
</div>
</div>
</div>
<div data-disabled="true" id="stretch_min_width" style="width: 500px; position: relative;">
<div style="flex-direction: row; min-width: -webkit-fill-available; width: 400px; flex-wrap: wrap;">
<div style="width: 50px; height: 50px;">
</div>
<div style="width: 100px; height: 50px;">
</div>
<div style="width: 25px; height: 50px;">
</div>
</div>
</div>
<div data-disabled="true" id="max_content_max_height" style="max-height:max-content; height: 200px; flex-wrap: wrap;">
<div style="width: 50px; height: 50px;">
</div>
<div style="width: 50px; height: 100px;">
</div>
<div style="width: 50px; height: 25px;">
</div>
</div>
<div data-disabled="true" id="fit_content_max_height" style="height: 90px; position: relative;">
<div style="max-height: fit-content; height: 110px; flex-wrap: wrap;">
<div style="width: 50px; height: 50px;">
</div>
<div style="width: 50px; height: 100px;">
</div>
<div style="width: 50px; height: 25px;">
</div>
</div>
</div>
<div data-disabled="true" id="stretch_max_height" style="height: 500px; position: relative;">
<div style="max-height: -webkit-fill-available; flex-wrap: wrap; height: 600px;">
<div style="width: 50px; height: 50px;">
</div>
<div style="width: 50px; height: 100px;">
</div>
<div style="width: 50px; height: 25px;">
</div>
</div>
</div>
<div data-disabled="true" id="max_content_min_height" style="min-height:max-content; height: 100px; flex-wrap: wrap;">
<div style="width: 50px; height: 50px;">
</div>
<div style="width: 50px; height: 100px;">
</div>
<div style="width: 50px; height: 25px;">
</div>
</div>
<div data-disabled="true" id="fit_content_min_height" style="height: 90px; position: relative;">
<div style="min-height: fit-content; height: 90px; flex-wrap: wrap;">
<div style="width: 50px; height: 50px;">
</div>
<div style="width: 50px; height: 100px;">
</div>
<div style="width: 50px; height: 25px;">
</div>
</div>
</div>
<div data-disabled="true" id="stretch_min_height" style="height: 500px; position: relative;">
<div style="min-height: -webkit-fill-available; flex-wrap: wrap; height: 400px;">
<div style="width: 50px; height: 50px;">
</div>
<div style="width: 50px; height: 100px;">
</div>
<div style="width: 50px; height: 25px;">
</div>
</div>
</div>

58
gentest/gentest-cpp.js
View File

@@ -17,13 +17,25 @@ function toFunctionNameCpp(value) {
return 'Percent'; return 'Percent';
} else if (value.indexOf('Auto') >= 0) { } else if (value.indexOf('Auto') >= 0) {
return 'Auto'; return 'Auto';
} else if (value.indexOf('MaxContent') >= 0) {
return 'MaxContent';
} else if (value.indexOf('FitContent') >= 0) {
return 'FitContent';
} else if (value.indexOf('Stretch') >= 0) {
return 'Stretch';
} }
return ''; return '';
} }
function keywordFunctionCpp(functionPrefix, nodeName, value) { function keywordFunctionCpp(functionPrefix, nodeName, value) {
const functionSuffix = toFunctionNameCpp(value); const functionSuffix = toFunctionNameCpp(value);
if (functionSuffix == 'Auto') { if (
functionSuffix == 'Auto' ||
functionSuffix == 'MaxContent' ||
functionSuffix == 'FitContent' ||
functionSuffix == 'Stretch'
) {
return functionPrefix + functionSuffix + '(' + nodeName + ');'; return functionPrefix + functionSuffix + '(' + nodeName + ');';
} else { } else {
return ( return (
@@ -163,6 +175,10 @@ CPPEmitter.prototype = Object.create(Emitter.prototype, {
YGDisplayContents: {value: 'YGDisplayContents'}, YGDisplayContents: {value: 'YGDisplayContents'},
YGAuto: {value: 'YGAuto'}, YGAuto: {value: 'YGAuto'},
YGMaxContent: {value: 'MaxContent'},
YGFitContent: {value: 'FitContent'},
YGStretch: {value: 'Stretch'},
YGNodeCalculateLayout: { YGNodeCalculateLayout: {
value: function (node, dir, _experiments) { value: function (node, dir, _experiments) {
this.push( this.push(
@@ -382,57 +398,25 @@ CPPEmitter.prototype = Object.create(Emitter.prototype, {
YGNodeStyleSetMaxHeight: { YGNodeStyleSetMaxHeight: {
value: function (nodeName, value) { value: function (nodeName, value) {
this.push( this.push(keywordFunctionCpp('YGNodeStyleSetMaxHeight', nodeName, value));
'YGNodeStyleSetMaxHeight' +
toFunctionNameCpp(value) +
'(' +
nodeName +
', ' +
toValueCpp(value) +
');',
);
}, },
}, },
YGNodeStyleSetMaxWidth: { YGNodeStyleSetMaxWidth: {
value: function (nodeName, value) { value: function (nodeName, value) {
this.push( this.push(keywordFunctionCpp('YGNodeStyleSetMaxWidth', nodeName, value));
'YGNodeStyleSetMaxWidth' +
toFunctionNameCpp(value) +
'(' +
nodeName +
', ' +
toValueCpp(value) +
');',
);
}, },
}, },
YGNodeStyleSetMinHeight: { YGNodeStyleSetMinHeight: {
value: function (nodeName, value) { value: function (nodeName, value) {
this.push( this.push(keywordFunctionCpp('YGNodeStyleSetMinHeight', nodeName, value));
'YGNodeStyleSetMinHeight' +
toFunctionNameCpp(value) +
'(' +
nodeName +
', ' +
toValueCpp(value) +
');',
);
}, },
}, },
YGNodeStyleSetMinWidth: { YGNodeStyleSetMinWidth: {
value: function (nodeName, value) { value: function (nodeName, value) {
this.push( this.push(keywordFunctionCpp('YGNodeStyleSetMinWidth', nodeName, value));
'YGNodeStyleSetMinWidth' +
toFunctionNameCpp(value) +
'(' +
nodeName +
', ' +
toValueCpp(value) +
');',
);
}, },
}, },

53
gentest/gentest-java.js
View File

@@ -17,13 +17,24 @@ function toMethodName(value) {
return 'Percent'; return 'Percent';
} else if (value.indexOf('AUTO') >= 0) { } else if (value.indexOf('AUTO') >= 0) {
return 'Auto'; return 'Auto';
} else if (value.indexOf('MAX_CONTENT') >= 0) {
return 'MaxContent';
} else if (value.indexOf('FIT_CONTENT') >= 0) {
return 'FitContent';
} else if (value.indexOf('STRETCH') >= 0) {
return 'Stretch';
} }
return ''; return '';
} }
function keywordMethod(methodPrefix, nodeName, value) { function keywordMethod(methodPrefix, nodeName, value) {
const methodSuffix = toMethodName(value); const methodSuffix = toMethodName(value);
if (methodSuffix == 'Auto') { if (
methodSuffix == 'Auto' ||
methodSuffix == 'MaxContent' ||
methodSuffix == 'FitContent' ||
methodSuffix == 'Stretch'
) {
return nodeName + '.' + methodPrefix + methodSuffix + '();'; return nodeName + '.' + methodPrefix + methodSuffix + '();';
} else { } else {
return ( return (
@@ -205,6 +216,10 @@ JavaEmitter.prototype = Object.create(Emitter.prototype, {
YGBoxSizingBorderBox: {value: 'YogaBoxSizing.BORDER_BOX'}, YGBoxSizingBorderBox: {value: 'YogaBoxSizing.BORDER_BOX'},
YGBoxSizingContentBox: {value: 'YogaBoxSizing.CONTENT_BOX'}, YGBoxSizingContentBox: {value: 'YogaBoxSizing.CONTENT_BOX'},
YGMaxContent: {value: 'MAX_CONTENT'},
YGFitContent: {value: 'FIT_CONTENT'},
YGStretch: {value: 'STRETCH'},
YGNodeCalculateLayout: { YGNodeCalculateLayout: {
value: function (node, dir, _experiments) { value: function (node, dir, _experiments) {
this.push(node + '.setDirection(' + dir + ');'); this.push(node + '.setDirection(' + dir + ');');
@@ -360,53 +375,25 @@ JavaEmitter.prototype = Object.create(Emitter.prototype, {
YGNodeStyleSetMaxHeight: { YGNodeStyleSetMaxHeight: {
value: function (nodeName, value) { value: function (nodeName, value) {
this.push( this.push(keywordMethod('setMaxHeight', nodeName, value));
nodeName +
'.setMaxHeight' +
toMethodName(value) +
'(' +
toValueJava(value) +
'f);',
);
}, },
}, },
YGNodeStyleSetMaxWidth: { YGNodeStyleSetMaxWidth: {
value: function (nodeName, value) { value: function (nodeName, value) {
this.push( this.push(keywordMethod('setMaxWidth', nodeName, value));
nodeName +
'.setMaxWidth' +
toMethodName(value) +
'(' +
toValueJava(value) +
'f);',
);
}, },
}, },
YGNodeStyleSetMinHeight: { YGNodeStyleSetMinHeight: {
value: function (nodeName, value) { value: function (nodeName, value) {
this.push( this.push(keywordMethod('setMinHeight', nodeName, value));
nodeName +
'.setMinHeight' +
toMethodName(value) +
'(' +
toValueJava(value) +
'f);',
);
}, },
}, },
YGNodeStyleSetMinWidth: { YGNodeStyleSetMinWidth: {
value: function (nodeName, value) { value: function (nodeName, value) {
this.push( this.push(keywordMethod('setMinWidth', nodeName, value));
nodeName +
'.setMinWidth' +
toMethodName(value) +
'(' +
toValueJava(value) +
'f);',
);
}, },
}, },

7
gentest/gentest-javascript.js
View File

@@ -15,6 +15,9 @@ function toValueJavascript(value) {
if (value.match(/^[0-9.e+-]+px$/i)) return parseFloat(value); if (value.match(/^[0-9.e+-]+px$/i)) return parseFloat(value);
if (value.match(/^[0-9.e+-]+%/i)) return JSON.stringify(value); if (value.match(/^[0-9.e+-]+%/i)) return JSON.stringify(value);
if (value == 'Yoga.AUTO') return '"auto"'; if (value == 'Yoga.AUTO') return '"auto"';
if (value == 'max-content') return '"max-content"';
if (value == 'fit-content') return '"fit-content"';
if (value == 'stretch') return '"stretch"';
return value; return value;
} }
@@ -176,6 +179,10 @@ JavascriptEmitter.prototype = Object.create(Emitter.prototype, {
YGBoxSizingBorderBox: {value: 'BoxSizing.BorderBox'}, YGBoxSizingBorderBox: {value: 'BoxSizing.BorderBox'},
YGBoxSizingContentBox: {value: 'BoxSizing.ContentBox'}, YGBoxSizingContentBox: {value: 'BoxSizing.ContentBox'},
YGMaxContent: {value: 'max-content'},
YGFitContent: {value: 'fit-content'},
YGStretch: {value: 'stretch'},
YGNodeCalculateLayout: { YGNodeCalculateLayout: {
value: function (node, dir, _experiments) { value: function (node, dir, _experiments) {
this.push(node + '.calculateLayout(undefined, undefined, ' + dir + ');'); this.push(node + '.calculateLayout(undefined, undefined, ' + dir + ');');

7
gentest/gentest.js
View File

@@ -654,6 +654,13 @@ function pointValue(e, value) {
return e.YGAuto; return e.YGAuto;
case 'undefined': case 'undefined':
return e.YGUndefined; return e.YGUndefined;
case 'max-content':
return e.YGMaxContent;
case 'fit-content':
return e.YGFitContent;
case 'stretch':
case '-webkit-fill-available':
return e.YGStretch;
default: default:
return value; return value;
} }

1932
java/tests/generated/com/facebook/yoga/YGIntrinsicSizeTest.java
View File

File diff suppressed because it is too large Load Diff

2032
javascript/tests/generated/YGIntrinsicSizeTest.test.ts
View File

File diff suppressed because it is too large Load Diff

1976
tests/generated/YGIntrinsicSizeTest.cpp
View File

File diff suppressed because it is too large Load Diff