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

split the absolute loop to make main axis work

Browse Source
This commit is contained in:
Christopher Chedeau
2014-06-12 10:22:57 -07:00
parent 1c9749f93e
commit 694e181b8e
2 changed files with 54 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

45
src/Layout.js
View File

@@ -412,14 +412,12 @@ var computeLayout = (function() {
for (var/*int*/ i = 0; i < node.children.length; ++i) {
var/*css_node_t**/ child = node.children[i];
var/*bool*/ leadingPos = isPosDefined(child, leading[mainAxis]);
var/*bool*/ trailingPos = isPosDefined(child, trailing[mainAxis]);
if (getPositionType(child) === CSS_POSITION_ABSOLUTE &&
isPosDefined(child, leading[mainAxis])) {
// In case the child is position absolute and has left/top being
// defined, we override the position to whatever the user said
// (and margin/border).
child.layout[pos[mainAxis]] = getPosition(child, leading[mainAxis]) +
getBorder(node, leading[mainAxis]) +
getMargin(child, leading[mainAxis]);
(leadingPos || trailingPos)) {
// see the loop afterwards
} else {
// If the child is position absolute (without top/left) or relative,
// we put it at the current accumulated offset.
@@ -461,6 +459,39 @@ var computeLayout = (function() {
);
}
for (var/*int*/ i = 0; i < node.children.length; ++i) {
var/*css_node_t**/ child = node.children[i];
var/*bool*/ leadingPos = isPosDefined(child, leading[mainAxis]);
var/*bool*/ trailingPos = isPosDefined(child, trailing[mainAxis]);
if (getPositionType(child) === CSS_POSITION_ABSOLUTE &&
(leadingPos || trailingPos)) {
// In case the child is absolutely positionned and has a
// top/left/bottom/right being set, we override all the previously
// computed positions to set it correctly.
if (leadingPos) {
child.layout[pos[mainAxis]] =
getPosition(child, leading[mainAxis]) +
getBorder(node, leading[mainAxis]) +
getMargin(child, leading[mainAxis]);
}
if (!leadingPos && trailingPos) {
child.layout[pos[mainAxis]] =
node.layout[dim[mainAxis]] -
child.layout[dim[mainAxis]] -
getMargin(child, trailing[mainAxis]) -
getPosition(child, trailing[mainAxis]);
}
if (leadingPos && trailingPos) {
child.layout[dim[mainAxis]] =
node.layout[dim[mainAxis]] -
child.layout[pos[mainAxis]] -
getMargin(child, trailing[mainAxis]) -
getPosition(child, trailing[mainAxis]);
}
}
}
// <Loop D> Position elements in the cross axis

21
src/__tests__/Layout-test.js
View File

@@ -939,6 +939,17 @@ describe('Layout', function() {
);
});
it('should layout with position absolute bottom', function() {
testLayout(
{style: {}, children: [
{style: {bottom: 5, paddingTop: 5, position: 'absolute'}}
]},
{width: 0, height: 0, top: 0, left: 0, children: [
{width: 0, height: 5, top: -10, left: 0}
]}
);
});
xit('should layout text with alignItems: stretch', function() {
testLayout(
{style: {width: 80, padding: 7, alignItems: 'stretch', measure: text('loooooooooong with space')}},
@@ -997,10 +1008,10 @@ describe('Layout', function() {
var node = {style: {}};
randMinMax(node, 0.5, 'width', -100, 1000);
randMinMax(node, 0.5, 'height', -100, 1000);
randMinMax(node, 0.5, 'top', -10, 10);
randMinMax(node, 0.5, 'left', -10, 10);
randMinMax(node, 0.5, 'right', -10, 10);
randMinMax(node, 0.5, 'bottom', -10, 10);
randMinMax(node, 0.9, 'top', -10, 10);
randMinMax(node, 0.9, 'left', -10, 10);
randMinMax(node, 0.9, 'right', -10, 10);
randMinMax(node, 0.9, 'bottom', -10, 10);
randSpacing(node, 0.5, 'margin', '', -10, 20);
randSpacing(node, 0.5, 'padding', '', -10, 20);
randSpacing(node, 0.5, 'border', 'Width', -4, 4);
@@ -1010,7 +1021,7 @@ describe('Layout', function() {
randEnum(node, 0.5, 'alignSelf', ['flex-start', 'center', 'flex-end', 'stretch']);
randEnum(node, 0.5, 'flex', ['none', 1]);
randEnum(node, 0.5, 'position', ['relative', 'absolute']);
randEnum(node, 0.5, 'measure', [text('small'), text('loooooooooong with space')]);
// randEnum(node, 0.5, 'measure', [text('small'), text('loooooooooong with space')]);
if (node.style.measure) {
// align-items: stretch on a text node makes it wrap in a different way.