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

Baseline support

Browse Source 
Summary:
Added baseline support (see #132)

You have the ability for a custom baseline function (```float(*YGBaselineFunc)(YGNodeRef node);```) to return whatever baseline you want.
Closes https://github.com/facebook/yoga/pull/317

Reviewed By: splhack

Differential Revision: D4385061

Pulled By: emilsjolander

fbshipit-source-id: cb8a59a09237c840fa3e21753ab68239997dab0c
This commit is contained in:
Lukas Woehrl
2017-01-06 06:51:56 -08:00
committed by Facebook Github Bot
parent 6d48307c8d
commit c169a98be6
21 changed files with 4628 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

132
gentest/fixtures/YGAlignItemsTest.html
View File

@@ -13,3 +13,135 @@
<div id="align_items_flex_end" style="width: 100px; height: 100px; align-items: flex-end;">
<div style="height: 10px; width: 10px;"></div>
</div>
<div id="align_baseline" style="width: 100px; height: 100px; flex-direction:row; align-items: baseline;">
<div style="width: 50px; height: 50px;"></div>
<div style="width: 50px; height: 20px;"></div>
</div>
<div id="align_baseline_child" style="width: 100px; height: 100px; flex-direction:row; align-items: baseline;">
<div style="width: 50px; height: 50px;"></div>
<div style="width: 50px; height: 20px;">
<div style="width: 50px; height: 10px;"></div>
</div>
</div>
<div id="align_baseline_child_multiline" style="width: 100px; height: 100px; flex-direction:row; align-items: baseline;">
<div style="width: 50px; height: 60px;"></div>
<div style="width: 50px; height: 25px;flex-wrap:wrap;flex-direction:row;">
<div style="width: 25px; height: 20px;"></div>
<div style="width: 25px; height: 10px;"></div>
<div style="width: 25px; height: 20px;"></div>
<div style="width: 25px; height: 10px;"></div>
</div>
</div>
<div id="align_baseline_child_multiline_override" style="width: 100px; height: 100px; flex-direction:row; align-items: baseline;">
<div style="width: 50px; height: 60px;"></div>
<div style="width: 50px; height: 25px;flex-wrap:wrap;flex-direction:row;">
<div style="width: 25px; height: 20px;"></div>
<div style="width: 25px; height: 10px;align-self:baseline;"></div>
<div style="width: 25px; height: 20px;"></div>
<div style="width: 25px; height: 10px;align-self:baseline;"></div>
</div>
</div>
<div id="align_baseline_child_multiline_no_override_on_secondline" style="width: 100px; height: 100px; flex-direction:row; align-items: baseline;">
<div style="width: 50px; height: 60px;"></div>
<div style="width: 50px; height: 25px;flex-wrap:wrap;flex-direction:row;">
<div style="width: 25px; height: 20px;"></div>
<div style="width: 25px; height: 10px;"></div>
<div style="width: 25px; height: 20px;"></div>
<div style="width: 25px; height: 10px;align-self:baseline;"></div>
</div>
</div>
<div id="align_baseline_child_top" style="width: 100px; height: 100px; flex-direction:row; align-items: baseline;">
<div style="width: 50px; height: 50px;top:10px;"></div>
<div style="width: 50px; height: 20px;">
<div style="width: 50px; height: 10px;"></div>
</div>
</div>
<div id="align_baseline_child_top2" style="width: 100px; height: 100px; flex-direction:row; align-items: baseline;">
<div style="width: 50px; height: 50px;"></div>
<div style="width: 50px; height: 20px;top:5px">
<div style="width: 50px; height: 10px;"></div>
</div>
</div>
<div id="align_baseline_double_nested_child" style="width: 100px; height: 100px; flex-direction:row; align-items: baseline;">
<div style="width: 50px; height: 50px;">
<div style="width: 50px; height: 20px;"></div>
</div>
<div style="width: 50px; height: 20px;">
<div style="width: 50px; height: 15px;"></div>
</div>
</div>
<div id="align_baseline_column" style="width: 100px; height: 100px; flex-direction:column; align-items: baseline;">
<div style="width: 50px; height: 50px;"></div>
<div style="width: 50px; height: 20px;"></div>
</div>
<div id="align_baseline_child_margin" style="width: 100px; height: 100px; flex-direction:row; align-items: baseline;">
<div style="width: 50px; height: 50px;margin: 5px;"></div>
<div style="width: 50px; height: 20px;">
<div style="width: 50px; height: 10px;margin: 1px;"></div>
</div>
</div>
<div id="align_baseline_child_padding" style="width: 100px; height: 100px; padding:5px; flex-direction:row; align-items: baseline;">
<div style="width: 50px; height: 50px;"></div>
<div style="width: 50px; height: 20px;padding:5px;">
<div style="width: 50px; height: 10px;"></div>
</div>
</div>
<div id="align_baseline_multiline" style="width: 100px; height: 100px; flex-direction:row; align-items: baseline;flex-wrap:wrap;">
<div style="width: 50px; height: 50px;"></div>
<div style="width: 50px; height: 20px;">
<div style="width: 50px; height: 10px;"></div>
</div>
<div style="width: 50px; height: 20px;">
<div style="width: 50px; height: 10px;"></div>
</div>
<div style="width: 50px; height: 50px;"></div>
</div>
<div id="align_baseline_multiline_column" style="width: 100px; height: 100px; flex-direction:column; align-items: baseline;flex-wrap:wrap;">
<div style="width: 50px; height: 50px;"></div>
<div style="width: 30px; height: 50px;">
<div style="width: 20px; height: 20px;"></div>
</div>
<div style="width: 40px; height: 70px;">
<div style="width: 10px; height: 10px;"></div>
</div>
<div style="width: 50px; height: 20px;"></div>
</div>
<div id="align_baseline_multiline_column2" style="width: 100px; height: 100px; flex-direction:column; align-items: baseline;flex-wrap:wrap;">
<div style="width: 50px; height: 50px;flex-direction:column;"></div>
<div style="width: 30px; height: 50px;flex-direction:column;">
<div style="width: 20px; height: 20px;flex-direction:column;"></div>
</div>
<div style="width: 40px; height: 70px;flex-direction:column;">
<div style="width: 10px; height: 10px;flex-direction:column;"></div>
</div>
<div style="width: 50px; height: 20px;flex-direction:column;"></div>
</div>
<div id="align_baseline_multiline_row_and_column" style="width: 100px; height: 100px; flex-direction:row; align-items: baseline;flex-wrap:wrap;">
<div style="width: 50px; height: 50px;"></div>
<div style="width: 50px; height: 50px;flex-direction:column;">
<div style="width: 50px; height: 10px;"></div>
</div>
<div style="width: 50px; height: 20px;flex-direction:column;">
<div style="width: 50px; height: 10px;"></div>
</div>
<div style="width: 50px; height: 20px;"></div>
</div>

8
gentest/fixtures/YGAlignSelfTest.html
View File

@@ -13,3 +13,11 @@
<div id="align_self_flex_end_override_flex_start" style="width:100px; height: 100px; align-items: flex-start;">
<div style="height: 10px; width: 10px; align-self: flex-end;"></div>
</div>
<div id="align_self_baseline" style="width: 100px; height: 100px; flex-direction:row;">
<div style="width: 50px; height: 50px;align-self: baseline;"></div>
<div style="width: 50px; height: 20px;align-self: baseline;">
<div style="width: 50px; height: 10px;"></div>
</div>
</div>

2
gentest/gentest-cpp.js
View File

@@ -83,6 +83,8 @@ CPPEmitter.prototype = Object.create(Emitter.prototype, {
YGAlignFlexStart:{value:'YGAlignFlexStart'},
YGAlignStretch:{value:'YGAlignStretch'},
YGAlignBaseline:{value:'YGAlignBaseline'},
YGDirectionInherit:{value:'YGDirectionInherit'},
YGDirectionLTR:{value:'YGDirectionLTR'},
YGDirectionRTL:{value:'YGDirectionRTL'},

1
gentest/gentest-cs.js
View File

@@ -96,6 +96,7 @@ CSEmitter.prototype = Object.create(Emitter.prototype, {
YGAlignFlexEnd:{value:'YogaAlign.FlexEnd'},
YGAlignFlexStart:{value:'YogaAlign.FlexStart'},
YGAlignStretch:{value:'YogaAlign.Stretch'},
YGAlignBaseline:{value:'YogaAlign.Baseline'},
YGDirectionInherit:{value:'YogaDirection.Inherit'},
YGDirectionLTR:{value:'YogaDirection.LTR'},

1
gentest/gentest-java.js
View File

@@ -100,6 +100,7 @@ JavaEmitter.prototype = Object.create(Emitter.prototype, {
YGAlignFlexEnd:{value:'YogaAlign.FLEX_END'},
YGAlignFlexStart:{value:'YogaAlign.FLEX_START'},
YGAlignStretch:{value:'YogaAlign.STRETCH'},
YGAlignBaseline:{value:'YogaAlign.BASELINE'},
YGDirectionInherit:{value:'YogaDirection.INHERIT'},
YGDirectionLTR:{value:'YogaDirection.LTR'},

1
gentest/gentest-javascript.js
View File

@@ -90,6 +90,7 @@ JavascriptEmitter.prototype = Object.create(Emitter.prototype, {
YGAlignFlexEnd:{value:'Yoga.ALIGN_FLEX_END'},
YGAlignFlexStart:{value:'Yoga.ALIGN_FLEX_START'},
YGAlignStretch:{value:'Yoga.ALIGN_STRETCH'},
YGAlignBaseline:{value:'Yoga.ALIGN_BASELINE'},
YGDirectionInherit:{value:'Yoga.DIRECTION_INHERIT'},
YGDirectionLTR:{value:'Yoga.DIRECTION_LTR'},

1
gentest/gentest.js
View File

@@ -377,6 +377,7 @@ function alignValue(e, value) {
case 'stretch': return e.YGAlignStretch;
case 'flex-start': return e.YGAlignFlexStart;
case 'flex-end': return e.YGAlignFlexEnd;
case 'baseline': return e.YGAlignBaseline;
}
}