Style fixes ;
This commit is contained in:
@@ -240,23 +240,23 @@ var layoutTestUtils = (function() {
|
|||||||
return layout;
|
return layout;
|
||||||
}
|
}
|
||||||
|
|
||||||
function inplaceRoundNumbersInObject(aObj) {
|
function inplaceRoundNumbersInObject(obj) {
|
||||||
if (!testMeasurePrecision) // undefined/0, disables rounding
|
if (!testMeasurePrecision) {
|
||||||
|
// undefined/0, disables rounding
|
||||||
return;
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
for (var key in aObj) {
|
for (var key in obj) {
|
||||||
if (!aObj.hasOwnProperty(key))
|
if (!obj.hasOwnProperty(key)) {
|
||||||
continue;
|
continue;
|
||||||
var val = aObj[key];
|
|
||||||
switch (typeof(val)) {
|
|
||||||
case 'number': {
|
|
||||||
aObj[key] = Math.floor((val*testMeasurePrecision)+0.5)/testMeasurePrecision;
|
|
||||||
break;
|
|
||||||
}
|
}
|
||||||
case 'object': {
|
|
||||||
|
var val = obj[key];
|
||||||
|
if (typeof val === 'number') {
|
||||||
|
obj[key] = Math.floor((val * testMeasurePrecision) + 0.5) /testMeasurePrecision;
|
||||||
|
}
|
||||||
|
else if (typeof val === 'object') {
|
||||||
inplaceRoundNumbersInObject(val);
|
inplaceRoundNumbersInObject(val);
|
||||||
break;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
57
src/Layout.c
57
src/Layout.c
@@ -781,10 +781,10 @@ static void layoutNodeImpl(css_node_t *node, float parentMaxWidth) {
|
|||||||
startLine = endLine;
|
startLine = endLine;
|
||||||
}
|
}
|
||||||
|
|
||||||
// <Loop DD>
|
// <Loop E>
|
||||||
//
|
//
|
||||||
// PIERRE: More than one line, we need to layout the crossAxis according to
|
// Note(prenaux): More than one line, we need to layout the crossAxis
|
||||||
// alignContent.
|
// according to alignContent.
|
||||||
//
|
//
|
||||||
// Note that we could probably remove <Loop D> and handle the one line case
|
// Note that we could probably remove <Loop D> and handle the one line case
|
||||||
// here too, but for the moment this is safer since it won't interfere with
|
// here too, but for the moment this is safer since it won't interfere with
|
||||||
@@ -795,25 +795,22 @@ static void layoutNodeImpl(css_node_t *node, float parentMaxWidth) {
|
|||||||
// section 9.4
|
// section 9.4
|
||||||
//
|
//
|
||||||
if (linesCount > 1 &&
|
if (linesCount > 1 &&
|
||||||
(!isUndefined(node->layout.dimensions[dim[crossAxis]])))
|
!isUndefined(node->layout.dimensions[dim[crossAxis]])) {
|
||||||
{
|
|
||||||
float nodeCrossAxisInnerSize = node->layout.dimensions[dim[crossAxis]] -
|
float nodeCrossAxisInnerSize = node->layout.dimensions[dim[crossAxis]] -
|
||||||
getPaddingAndBorderAxis(node, crossAxis);
|
getPaddingAndBorderAxis(node, crossAxis);
|
||||||
float remainingCrossDim = nodeCrossAxisInnerSize - linesCrossDim;
|
float remainingCrossDim = nodeCrossAxisInnerSize - linesCrossDim;
|
||||||
|
|
||||||
float crossDimAdd = 0;
|
float crossDimLead = 0;
|
||||||
float currentLead = getPaddingAndBorder(node, leading[crossAxis]);
|
float currentLead = getPaddingAndBorder(node, leading[crossAxis]);
|
||||||
|
|
||||||
css_align_t alignContent = getAlignContent(node);
|
css_align_t alignContent = getAlignContent(node);
|
||||||
if (alignContent == CSS_ALIGN_FLEX_END) {
|
if (alignContent == CSS_ALIGN_FLEX_END) {
|
||||||
currentLead += remainingCrossDim;
|
currentLead += remainingCrossDim;
|
||||||
}
|
} else if (alignContent == CSS_ALIGN_CENTER) {
|
||||||
else if (alignContent == CSS_ALIGN_CENTER) {
|
|
||||||
currentLead += remainingCrossDim / 2;
|
currentLead += remainingCrossDim / 2;
|
||||||
}
|
} else if (alignContent == CSS_ALIGN_STRETCH) {
|
||||||
else if (alignContent == CSS_ALIGN_STRETCH) {
|
|
||||||
if (nodeCrossAxisInnerSize > linesCrossDim) {
|
if (nodeCrossAxisInnerSize > linesCrossDim) {
|
||||||
crossDimAdd = (remainingCrossDim / linesCount);
|
crossDimLead = (remainingCrossDim / linesCount);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -823,14 +820,12 @@ static void layoutNodeImpl(css_node_t *node, float parentMaxWidth) {
|
|||||||
int lineIndex = -1;
|
int lineIndex = -1;
|
||||||
|
|
||||||
// get the first child on the current line
|
// get the first child on the current line
|
||||||
{
|
|
||||||
child = node->get_child(node->context, i);
|
child = node->get_child(node->context, i);
|
||||||
if (getPositionType(child) != CSS_POSITION_RELATIVE) {
|
if (getPositionType(child) != CSS_POSITION_RELATIVE) {
|
||||||
++i;
|
++i;
|
||||||
continue;
|
continue;
|
||||||
}
|
}
|
||||||
lineIndex = child->line_index;
|
lineIndex = child->line_index;
|
||||||
}
|
|
||||||
|
|
||||||
// compute the line's height and find the endIndex
|
// compute the line's height and find the endIndex
|
||||||
float lineHeight = 0;
|
float lineHeight = 0;
|
||||||
@@ -843,12 +838,14 @@ static void layoutNodeImpl(css_node_t *node, float parentMaxWidth) {
|
|||||||
break;
|
break;
|
||||||
}
|
}
|
||||||
if (!isUndefined(child->layout.dimensions[dim[crossAxis]])) {
|
if (!isUndefined(child->layout.dimensions[dim[crossAxis]])) {
|
||||||
lineHeight = fmaxf(lineHeight,child->layout.dimensions[dim[crossAxis]] +
|
lineHeight = fmaxf(
|
||||||
getMarginAxis(child,crossAxis));
|
lineHeight,
|
||||||
|
child->layout.dimensions[dim[crossAxis]] + getMarginAxis(child, crossAxis)
|
||||||
|
);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
int endIndex = ii;
|
int endIndex = ii;
|
||||||
lineHeight += crossDimAdd;
|
lineHeight += crossDimLead;
|
||||||
|
|
||||||
for (ii = startIndex; ii < endIndex; ++ii) {
|
for (ii = startIndex; ii < endIndex; ++ii) {
|
||||||
child = node->get_child(node->context, ii);
|
child = node->get_child(node->context, ii);
|
||||||
@@ -857,25 +854,18 @@ static void layoutNodeImpl(css_node_t *node, float parentMaxWidth) {
|
|||||||
}
|
}
|
||||||
|
|
||||||
css_align_t alignItem = getAlignItem(node, child);
|
css_align_t alignItem = getAlignItem(node, child);
|
||||||
float crossPosition = child->layout.position[pos[crossAxis]]; // preserve current position if someting goes wrong with alignItem?
|
|
||||||
if (alignItem == CSS_ALIGN_FLEX_START) {
|
if (alignItem == CSS_ALIGN_FLEX_START) {
|
||||||
crossPosition = currentLead + getMargin(child,leading[crossAxis]);
|
child->layout.position[pos[crossAxis]] = currentLead + getMargin(child, leading[crossAxis]);
|
||||||
}
|
} else if (alignItem == CSS_ALIGN_FLEX_END) {
|
||||||
else if (alignItem == CSS_ALIGN_FLEX_END) {
|
child->layout.position[pos[crossAxis]] = currentLead + lineHeight - getMargin(child,trailing[crossAxis]) - child->layout.dimensions[dim[crossAxis]];
|
||||||
crossPosition = currentLead + lineHeight -
|
} else if (alignItem == CSS_ALIGN_CENTER) {
|
||||||
getMargin(child,trailing[crossAxis]) -
|
|
||||||
child->layout.dimensions[dim[crossAxis]];
|
|
||||||
}
|
|
||||||
else if (alignItem == CSS_ALIGN_CENTER) {
|
|
||||||
float childHeight = child->layout.dimensions[dim[crossAxis]];
|
float childHeight = child->layout.dimensions[dim[crossAxis]];
|
||||||
crossPosition = currentLead + ((lineHeight - childHeight)/2);
|
child->layout.position[pos[crossAxis]] = currentLead + (lineHeight - childHeight) / 2;
|
||||||
|
} else if (alignItem == CSS_ALIGN_STRETCH) {
|
||||||
|
child->layout.position[pos[crossAxis]] = currentLead + getMargin(child, leading[crossAxis]);
|
||||||
|
// TODO(prenaux): Correctly set the height of items with undefined
|
||||||
|
// (auto) crossAxis dimension.
|
||||||
}
|
}
|
||||||
else if (alignItem == CSS_ALIGN_STRETCH) {
|
|
||||||
crossPosition = currentLead + getMargin(child,leading[crossAxis]);
|
|
||||||
// TODO: Correctly set the height of items with undefined (auto)
|
|
||||||
// crossAxis dimension.
|
|
||||||
}
|
|
||||||
child->layout.position[pos[crossAxis]] = crossPosition;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
currentLead += lineHeight;
|
currentLead += lineHeight;
|
||||||
@@ -905,8 +895,7 @@ static void layoutNodeImpl(css_node_t *node, float parentMaxWidth) {
|
|||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
// <Loop E> Calculate dimensions for absolutely positioned elements
|
// <Loop F> Calculate dimensions for absolutely positioned elements
|
||||||
|
|
||||||
for (i = 0; i < node->children_count; ++i) {
|
for (i = 0; i < node->children_count; ++i) {
|
||||||
child = node->get_child(node->context, i);
|
child = node->get_child(node->context, i);
|
||||||
if (getPositionType(child) == CSS_POSITION_ABSOLUTE) {
|
if (getPositionType(child) == CSS_POSITION_ABSOLUTE) {
|
||||||
|
@@ -667,10 +667,10 @@ var computeLayout = (function() {
|
|||||||
startLine = endLine;
|
startLine = endLine;
|
||||||
}
|
}
|
||||||
|
|
||||||
// <Loop DD>
|
// <Loop E>
|
||||||
//
|
//
|
||||||
// PIERRE: More than one line, we need to layout the crossAxis according to
|
// Note(prenaux): More than one line, we need to layout the crossAxis
|
||||||
// alignContent.
|
// according to alignContent.
|
||||||
//
|
//
|
||||||
// Note that we could probably remove <Loop D> and handle the one line case
|
// Note that we could probably remove <Loop D> and handle the one line case
|
||||||
// here too, but for the moment this is safer since it won't interfere with
|
// here too, but for the moment this is safer since it won't interfere with
|
||||||
@@ -681,25 +681,22 @@ var computeLayout = (function() {
|
|||||||
// section 9.4
|
// section 9.4
|
||||||
//
|
//
|
||||||
if (linesCount > 1 &&
|
if (linesCount > 1 &&
|
||||||
(!isUndefined(node.layout[dim[crossAxis]])))
|
!isUndefined(node.layout[dim[crossAxis]])) {
|
||||||
{
|
|
||||||
var/*float*/ nodeCrossAxisInnerSize = node.layout[dim[crossAxis]] -
|
var/*float*/ nodeCrossAxisInnerSize = node.layout[dim[crossAxis]] -
|
||||||
getPaddingAndBorderAxis(node, crossAxis);
|
getPaddingAndBorderAxis(node, crossAxis);
|
||||||
var/*float*/ remainingCrossDim = nodeCrossAxisInnerSize - linesCrossDim;
|
var/*float*/ remainingCrossDim = nodeCrossAxisInnerSize - linesCrossDim;
|
||||||
|
|
||||||
var/*float*/ crossDimAdd = 0;
|
var/*float*/ crossDimLead = 0;
|
||||||
var/*float*/ currentLead = getPaddingAndBorder(node, leading[crossAxis]);
|
var/*float*/ currentLead = getPaddingAndBorder(node, leading[crossAxis]);
|
||||||
|
|
||||||
var/*css_align_t*/ alignContent = getAlignContent(node);
|
var/*css_align_t*/ alignContent = getAlignContent(node);
|
||||||
if (alignContent == CSS_ALIGN_FLEX_END) {
|
if (alignContent === CSS_ALIGN_FLEX_END) {
|
||||||
currentLead += remainingCrossDim;
|
currentLead += remainingCrossDim;
|
||||||
}
|
} else if (alignContent === CSS_ALIGN_CENTER) {
|
||||||
else if (alignContent == CSS_ALIGN_CENTER) {
|
|
||||||
currentLead += remainingCrossDim / 2;
|
currentLead += remainingCrossDim / 2;
|
||||||
}
|
} else if (alignContent === CSS_ALIGN_STRETCH) {
|
||||||
else if (alignContent == CSS_ALIGN_STRETCH) {
|
|
||||||
if (nodeCrossAxisInnerSize > linesCrossDim) {
|
if (nodeCrossAxisInnerSize > linesCrossDim) {
|
||||||
crossDimAdd = (remainingCrossDim / linesCount);
|
crossDimLead = (remainingCrossDim / linesCount);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -709,59 +706,52 @@ var computeLayout = (function() {
|
|||||||
var/*int*/ lineIndex = -1;
|
var/*int*/ lineIndex = -1;
|
||||||
|
|
||||||
// get the first child on the current line
|
// get the first child on the current line
|
||||||
{
|
|
||||||
child = node.children[i];
|
child = node.children[i];
|
||||||
if (getPositionType(child) != CSS_POSITION_RELATIVE) {
|
if (getPositionType(child) !== CSS_POSITION_RELATIVE) {
|
||||||
++i;
|
++i;
|
||||||
continue;
|
continue;
|
||||||
}
|
}
|
||||||
lineIndex = child.lineIndex;
|
lineIndex = child.lineIndex;
|
||||||
}
|
|
||||||
|
|
||||||
// compute the line's height and find the endIndex
|
// compute the line's height and find the endIndex
|
||||||
var/*float*/ lineHeight = 0;
|
var/*float*/ lineHeight = 0;
|
||||||
for (ii = startIndex; ii < node.children.length; ++ii) {
|
for (ii = startIndex; ii < node.children.length; ++ii) {
|
||||||
child = node.children[ii];
|
child = node.children[ii];
|
||||||
if (getPositionType(child) != CSS_POSITION_RELATIVE) {
|
if (getPositionType(child) !== CSS_POSITION_RELATIVE) {
|
||||||
continue;
|
continue;
|
||||||
}
|
}
|
||||||
if (child.lineIndex != lineIndex) {
|
if (child.lineIndex !== lineIndex) {
|
||||||
break;
|
break;
|
||||||
}
|
}
|
||||||
if (!isUndefined(child.layout[dim[crossAxis]])) {
|
if (!isUndefined(child.layout[dim[crossAxis]])) {
|
||||||
lineHeight = fmaxf(lineHeight,child.layout[dim[crossAxis]] +
|
lineHeight = fmaxf(
|
||||||
getMarginAxis(child,crossAxis));
|
lineHeight,
|
||||||
|
child.layout[dim[crossAxis]] + getMarginAxis(child, crossAxis)
|
||||||
|
);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
var/*int*/ endIndex = ii;
|
var/*int*/ endIndex = ii;
|
||||||
lineHeight += crossDimAdd;
|
lineHeight += crossDimLead;
|
||||||
|
|
||||||
for (ii = startIndex; ii < endIndex; ++ii) {
|
for (ii = startIndex; ii < endIndex; ++ii) {
|
||||||
child = node.children[ii];
|
child = node.children[ii];
|
||||||
if (getPositionType(child) != CSS_POSITION_RELATIVE) {
|
if (getPositionType(child) !== CSS_POSITION_RELATIVE) {
|
||||||
continue;
|
continue;
|
||||||
}
|
}
|
||||||
|
|
||||||
var/*css_align_t*/ alignItem = getAlignItem(node, child);
|
var/*css_align_t*/ alignItem = getAlignItem(node, child);
|
||||||
var/*float*/ crossPosition = child.layout[pos[crossAxis]]; // preserve current position if someting goes wrong with alignItem?
|
if (alignItem === CSS_ALIGN_FLEX_START) {
|
||||||
if (alignItem == CSS_ALIGN_FLEX_START) {
|
child.layout[pos[crossAxis]] = currentLead + getMargin(child, leading[crossAxis]);
|
||||||
crossPosition = currentLead + getMargin(child,leading[crossAxis]);
|
} else if (alignItem === CSS_ALIGN_FLEX_END) {
|
||||||
}
|
child.layout[pos[crossAxis]] = currentLead + lineHeight - getMargin(child,trailing[crossAxis]) - child.layout[dim[crossAxis]];
|
||||||
else if (alignItem == CSS_ALIGN_FLEX_END) {
|
} else if (alignItem === CSS_ALIGN_CENTER) {
|
||||||
crossPosition = currentLead + lineHeight -
|
|
||||||
getMargin(child,trailing[crossAxis]) -
|
|
||||||
child.layout[dim[crossAxis]];
|
|
||||||
}
|
|
||||||
else if (alignItem == CSS_ALIGN_CENTER) {
|
|
||||||
var/*float*/ childHeight = child.layout[dim[crossAxis]];
|
var/*float*/ childHeight = child.layout[dim[crossAxis]];
|
||||||
crossPosition = currentLead + ((lineHeight - childHeight)/2);
|
child.layout[pos[crossAxis]] = currentLead + (lineHeight - childHeight) / 2;
|
||||||
|
} else if (alignItem === CSS_ALIGN_STRETCH) {
|
||||||
|
child.layout[pos[crossAxis]] = currentLead + getMargin(child, leading[crossAxis]);
|
||||||
|
// TODO(prenaux): Correctly set the height of items with undefined
|
||||||
|
// (auto) crossAxis dimension.
|
||||||
}
|
}
|
||||||
else if (alignItem == CSS_ALIGN_STRETCH) {
|
|
||||||
crossPosition = currentLead + getMargin(child,leading[crossAxis]);
|
|
||||||
// TODO: Correctly set the height of items with undefined (auto)
|
|
||||||
// crossAxis dimension.
|
|
||||||
}
|
|
||||||
child.layout[pos[crossAxis]] = crossPosition;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
currentLead += lineHeight;
|
currentLead += lineHeight;
|
||||||
@@ -791,8 +781,7 @@ var computeLayout = (function() {
|
|||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
// <Loop E> Calculate dimensions for absolutely positioned elements
|
// <Loop F> Calculate dimensions for absolutely positioned elements
|
||||||
|
|
||||||
for (i = 0; i < node.children.length; ++i) {
|
for (i = 0; i < node.children.length; ++i) {
|
||||||
child = node.children[i];
|
child = node.children[i];
|
||||||
if (getPositionType(child) === CSS_POSITION_ABSOLUTE) {
|
if (getPositionType(child) === CSS_POSITION_ABSOLUTE) {
|
||||||
|
@@ -1594,49 +1594,49 @@ describe('Layout alignContent', function() {
|
|||||||
var alignContentData = {
|
var alignContentData = {
|
||||||
style: {width: 300, height: 380, flexDirection: 'row', flexWrap: 'wrap'},
|
style: {width: 300, height: 380, flexDirection: 'row', flexWrap: 'wrap'},
|
||||||
children: [
|
children: [
|
||||||
/* 0 */ { style: {width: 50, height: 50, margin: 10} },
|
/* 0 */ {style: {width: 50, height: 50, margin: 10}},
|
||||||
/* 1 */ { style: {width: 50, height: 50, margin: 10} },
|
/* 1 */ {style: {width: 50, height: 50, margin: 10}},
|
||||||
/* 2 */ { style: {width: 50, height: 50, margin: 10} },
|
/* 2 */ {style: {width: 50, height: 50, margin: 10}},
|
||||||
/* 3 */ { style: {width: 50, height: 50, margin: 10} },
|
/* 3 */ {style: {width: 50, height: 50, margin: 10}},
|
||||||
/* 4 */ { style: {width: 50, height: 100, margin: 10} },
|
/* 4 */ {style: {width: 50, height: 100, margin: 10}},
|
||||||
/* 5 */ { style: {width: 50, height: 50, margin: 10, alignSelf: 'flex-start'} },
|
/* 5 */ {style: {width: 50, height: 50, margin: 10, alignSelf: 'flex-start'}},
|
||||||
/* 6 */ { style: {width: 50, height: 50, margin: 10} },
|
/* 6 */ {style: {width: 50, height: 50, margin: 10}},
|
||||||
/* 7 */ { style: {width: 50, height: 100, margin: 10} },
|
/* 7 */ {style: {width: 50, height: 100, margin: 10}},
|
||||||
/* 8 */ { style: {width: 50, height: 50, margin: 10} },
|
/* 8 */ {style: {width: 50, height: 50, margin: 10}},
|
||||||
/* 9 */ { style: {width: 50, height: 50, margin: 10} },
|
/* 9 */ {style: {width: 50, height: 50, margin: 10}},
|
||||||
/* 10 */ { style: {width: 50, height: 50, margin: 10, alignSelf: 'flex-start' } },
|
/* 10 */ {style: {width: 50, height: 50, margin: 10, alignSelf: 'flex-start' }},
|
||||||
/* 11 */ { style: {width: 50, height: 50, margin: 10} },
|
/* 11 */ {style: {width: 50, height: 50, margin: 10}},
|
||||||
/* 12 */ { style: {width: 50, height: 50, margin: 10} },
|
/* 12 */ {style: {width: 50, height: 50, margin: 10}},
|
||||||
/* 13 */ { style: {width: 50, height: 50, margin: 10, alignSelf: 'flex-start'} },
|
/* 13 */ {style: {width: 50, height: 50, margin: 10, alignSelf: 'flex-start'}},
|
||||||
/* 14 */ { style: {width: 50, height: 50, margin: 10} },
|
/* 14 */ {style: {width: 50, height: 50, margin: 10}},
|
||||||
],
|
],
|
||||||
};
|
};
|
||||||
|
|
||||||
it('should layout with alignContent: stretch, and alignItems: flex-start', function() {
|
it('should layout with alignContent: stretch, and alignItems: flex-start', function() {
|
||||||
testLayout(
|
testLayout(
|
||||||
alignContentData,
|
alignContentData,
|
||||||
{ width:300,height:380,top:0,left:0, children:[
|
{width: 300, height: 380, top: 0, left: 0, children: [
|
||||||
{width:50,height:50,top:10,left:10},
|
{width: 50, height: 50, top: 10, left: 10},
|
||||||
{width:50,height:50,top:10,left:80},
|
{width: 50, height: 50, top: 10, left: 80},
|
||||||
{width:50,height:50,top:10,left:150},
|
{width: 50, height: 50, top: 10, left: 150},
|
||||||
{width:50,height:50,top:10,left:220},
|
{width: 50, height: 50, top: 10, left: 220},
|
||||||
{width:50,height:100,top:92.5,left:10},
|
{width: 50, height: 100, top: 92.5, left: 10},
|
||||||
{width:50,height:50,top:92.5,left:80},
|
{width: 50, height: 50, top: 92.5, left: 80},
|
||||||
{width:50,height:50,top:92.5,left:150},
|
{width: 50, height: 50, top: 92.5, left: 150},
|
||||||
{width:50,height:100,top:92.5,left:220},
|
{width: 50, height: 100, top: 92.5, left: 220},
|
||||||
{width:50,height:50,top:225,left:10},
|
{width: 50, height: 50, top: 225, left: 10},
|
||||||
{width:50,height:50,top:225,left:80},
|
{width: 50, height: 50, top: 225, left: 80},
|
||||||
{width:50,height:50,top:225,left:150},
|
{width: 50, height: 50, top: 225, left: 150},
|
||||||
{width:50,height:50,top:225,left:220},
|
{width: 50, height: 50, top: 225, left: 220},
|
||||||
{width:50,height:50,top:307.5,left:10},
|
{width: 50, height: 50, top: 307.5, left: 10},
|
||||||
{width:50,height:50,top:307.5,left:80},
|
{width: 50, height: 50, top: 307.5, left: 80},
|
||||||
{width:50,height:50,top:307.5,left:150}
|
{width: 50, height: 50, top: 307.5, left: 150}
|
||||||
]}
|
]}
|
||||||
);
|
);
|
||||||
});
|
});
|
||||||
|
|
||||||
function testAlignContent(aAlignContent, aAlignItems) {
|
function testAlignContent(alignContent, alignItems) {
|
||||||
it('should layout with alignContent: '+aAlignContent+', and alignItems: '+aAlignItems, function() {
|
it('should layout with alignContent: ' + alignContent + ', and alignItems: ' + alignItems, function() {
|
||||||
testLayoutAgainstDomOnly(alignContentData);
|
testLayoutAgainstDomOnly(alignContentData);
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
@@ -718,10 +718,10 @@ public class LayoutEngine {
|
|||||||
startLine = endLine;
|
startLine = endLine;
|
||||||
}
|
}
|
||||||
|
|
||||||
// <Loop DD>
|
// <Loop E>
|
||||||
//
|
//
|
||||||
// PIERRE: More than one line, we need to layout the crossAxis according to
|
// Note(prenaux): More than one line, we need to layout the crossAxis
|
||||||
// alignContent.
|
// according to alignContent.
|
||||||
//
|
//
|
||||||
// Note that we could probably remove <Loop D> and handle the one line case
|
// Note that we could probably remove <Loop D> and handle the one line case
|
||||||
// here too, but for the moment this is safer since it won't interfere with
|
// here too, but for the moment this is safer since it won't interfere with
|
||||||
@@ -732,25 +732,22 @@ public class LayoutEngine {
|
|||||||
// section 9.4
|
// section 9.4
|
||||||
//
|
//
|
||||||
if (linesCount > 1 &&
|
if (linesCount > 1 &&
|
||||||
(!CSSConstants.isUndefined(getLayoutDimension(node, getDim(crossAxis)))))
|
!CSSConstants.isUndefined(getLayoutDimension(node, getDim(crossAxis)))) {
|
||||||
{
|
|
||||||
float nodeCrossAxisInnerSize = getLayoutDimension(node, getDim(crossAxis)) -
|
float nodeCrossAxisInnerSize = getLayoutDimension(node, getDim(crossAxis)) -
|
||||||
getPaddingAndBorderAxis(node, crossAxis);
|
getPaddingAndBorderAxis(node, crossAxis);
|
||||||
float remainingCrossDim = nodeCrossAxisInnerSize - linesCrossDim;
|
float remainingCrossDim = nodeCrossAxisInnerSize - linesCrossDim;
|
||||||
|
|
||||||
float crossDimAdd = 0;
|
float crossDimLead = 0;
|
||||||
float currentLead = getPaddingAndBorder(node, getLeading(crossAxis));
|
float currentLead = getPaddingAndBorder(node, getLeading(crossAxis));
|
||||||
|
|
||||||
CSSAlign alignContent = getAlignContent(node);
|
CSSAlign alignContent = getAlignContent(node);
|
||||||
if (alignContent == CSSAlign.FLEX_END) {
|
if (alignContent == CSSAlign.FLEX_END) {
|
||||||
currentLead = currentLead + remainingCrossDim;
|
currentLead = currentLead + remainingCrossDim;
|
||||||
}
|
} else if (alignContent == CSSAlign.CENTER) {
|
||||||
else if (alignContent == CSSAlign.CENTER) {
|
|
||||||
currentLead = currentLead + remainingCrossDim / 2;
|
currentLead = currentLead + remainingCrossDim / 2;
|
||||||
}
|
} else if (alignContent == CSSAlign.STRETCH) {
|
||||||
else if (alignContent == CSSAlign.STRETCH) {
|
|
||||||
if (nodeCrossAxisInnerSize > linesCrossDim) {
|
if (nodeCrossAxisInnerSize > linesCrossDim) {
|
||||||
crossDimAdd = (remainingCrossDim / linesCount);
|
crossDimLead = (remainingCrossDim / linesCount);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -760,14 +757,12 @@ public class LayoutEngine {
|
|||||||
int lineIndex = -1;
|
int lineIndex = -1;
|
||||||
|
|
||||||
// get the first child on the current line
|
// get the first child on the current line
|
||||||
{
|
|
||||||
child = node.getChildAt(i);
|
child = node.getChildAt(i);
|
||||||
if (getPositionType(child) != CSSPositionType.RELATIVE) {
|
if (getPositionType(child) != CSSPositionType.RELATIVE) {
|
||||||
++i;
|
++i;
|
||||||
continue;
|
continue;
|
||||||
}
|
}
|
||||||
lineIndex = child.lineIndex;
|
lineIndex = child.lineIndex;
|
||||||
}
|
|
||||||
|
|
||||||
// compute the line's height and find the endIndex
|
// compute the line's height and find the endIndex
|
||||||
float lineHeight = 0;
|
float lineHeight = 0;
|
||||||
@@ -780,12 +775,14 @@ public class LayoutEngine {
|
|||||||
break;
|
break;
|
||||||
}
|
}
|
||||||
if (!CSSConstants.isUndefined(getLayoutDimension(child, getDim(crossAxis)))) {
|
if (!CSSConstants.isUndefined(getLayoutDimension(child, getDim(crossAxis)))) {
|
||||||
lineHeight = Math.max(lineHeight,getLayoutDimension(child, getDim(crossAxis)) +
|
lineHeight = Math.max(
|
||||||
getMarginAxis(child,crossAxis));
|
lineHeight,
|
||||||
|
getLayoutDimension(child, getDim(crossAxis)) + getMarginAxis(child, crossAxis)
|
||||||
|
);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
int endIndex = ii;
|
int endIndex = ii;
|
||||||
lineHeight = lineHeight + crossDimAdd;
|
lineHeight = lineHeight + crossDimLead;
|
||||||
|
|
||||||
for (ii = startIndex; ii < endIndex; ++ii) {
|
for (ii = startIndex; ii < endIndex; ++ii) {
|
||||||
child = node.getChildAt(ii);
|
child = node.getChildAt(ii);
|
||||||
@@ -794,25 +791,18 @@ public class LayoutEngine {
|
|||||||
}
|
}
|
||||||
|
|
||||||
CSSAlign alignItem = getAlignItem(node, child);
|
CSSAlign alignItem = getAlignItem(node, child);
|
||||||
float crossPosition = getLayoutPosition(child, getPos(crossAxis)); // preserve current position if someting goes wrong with alignItem?
|
|
||||||
if (alignItem == CSSAlign.FLEX_START) {
|
if (alignItem == CSSAlign.FLEX_START) {
|
||||||
crossPosition = currentLead + getMargin(child,getLeading(crossAxis));
|
setLayoutPosition(child, getPos(crossAxis), currentLead + getMargin(child, getLeading(crossAxis)));
|
||||||
}
|
} else if (alignItem == CSSAlign.FLEX_END) {
|
||||||
else if (alignItem == CSSAlign.FLEX_END) {
|
setLayoutPosition(child, getPos(crossAxis), currentLead + lineHeight - getMargin(child,getTrailing(crossAxis)) - getLayoutDimension(child, getDim(crossAxis)));
|
||||||
crossPosition = currentLead + lineHeight -
|
} else if (alignItem == CSSAlign.CENTER) {
|
||||||
getMargin(child,getTrailing(crossAxis)) -
|
|
||||||
getLayoutDimension(child, getDim(crossAxis));
|
|
||||||
}
|
|
||||||
else if (alignItem == CSSAlign.CENTER) {
|
|
||||||
float childHeight = getLayoutDimension(child, getDim(crossAxis));
|
float childHeight = getLayoutDimension(child, getDim(crossAxis));
|
||||||
crossPosition = currentLead + ((lineHeight - childHeight)/2);
|
setLayoutPosition(child, getPos(crossAxis), currentLead + (lineHeight - childHeight) / 2);
|
||||||
|
} else if (alignItem == CSSAlign.STRETCH) {
|
||||||
|
setLayoutPosition(child, getPos(crossAxis), currentLead + getMargin(child, getLeading(crossAxis)));
|
||||||
|
// TODO(prenaux): Correctly set the height of items with undefined
|
||||||
|
// (auto) crossAxis dimension.
|
||||||
}
|
}
|
||||||
else if (alignItem == CSSAlign.STRETCH) {
|
|
||||||
crossPosition = currentLead + getMargin(child,getLeading(crossAxis));
|
|
||||||
// TODO: Correctly set the height of items with undefined (auto)
|
|
||||||
// crossAxis dimension.
|
|
||||||
}
|
|
||||||
setLayoutPosition(child, getPos(crossAxis), crossPosition);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
currentLead = currentLead + lineHeight;
|
currentLead = currentLead + lineHeight;
|
||||||
@@ -842,8 +832,7 @@ public class LayoutEngine {
|
|||||||
));
|
));
|
||||||
}
|
}
|
||||||
|
|
||||||
// <Loop E> Calculate dimensions for absolutely positioned elements
|
// <Loop F> Calculate dimensions for absolutely positioned elements
|
||||||
|
|
||||||
for (i = 0; i < node.getChildCount(); ++i) {
|
for (i = 0; i < node.getChildCount(); ++i) {
|
||||||
child = node.getChildAt(i);
|
child = node.getChildAt(i);
|
||||||
if (getPositionType(child) == CSSPositionType.ABSOLUTE) {
|
if (getPositionType(child) == CSSPositionType.ABSOLUTE) {
|
||||||
|
Reference in New Issue
Block a user