Back out "Back out "[yoga][gentest][intrinsic sizing] Gentest and initial tests for intrinsic sizing"" (#1758)

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

Original commit changeset: 52d6cc754cb9

Original Phabricator Diff: D66332308

Reviewed By: NickGerleman

Differential Revision: D66662663

fbshipit-source-id: fb3a0d10ec0f0149aeee510148f26ada8eff7e47
This commit is contained in:
Joe Vilches
2024-12-02 17:29:49 -08:00
committed by Facebook GitHub Bot
parent f99e657acd
commit 76ffdbc25d
8 changed files with 6240 additions and 73 deletions

View File

@@ -219,3 +219,251 @@
Sed at consectetur ipsum.
</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>

View File

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

View File

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

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+-]+%/i)) return JSON.stringify(value);
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;
}
@@ -176,6 +179,10 @@ JavascriptEmitter.prototype = Object.create(Emitter.prototype, {
YGBoxSizingBorderBox: {value: 'BoxSizing.BorderBox'},
YGBoxSizingContentBox: {value: 'BoxSizing.ContentBox'},
YGMaxContent: {value: 'max-content'},
YGFitContent: {value: 'fit-content'},
YGStretch: {value: 'stretch'},
YGNodeCalculateLayout: {
value: function (node, dir, _experiments) {
this.push(node + '.calculateLayout(undefined, undefined, ' + dir + ');');

View File

@@ -654,6 +654,13 @@ function pointValue(e, value) {
return e.YGAuto;
case 'undefined':
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:
return value;
}

File diff suppressed because it is too large Load Diff

File diff suppressed because it is too large Load Diff

File diff suppressed because it is too large Load Diff