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

overlapping left and right + workaround chrome bug

Browse Source
This commit is contained in:
Christopher Chedeau
2014-06-12 11:27:49 -07:00
parent 694e181b8e
commit 842d654b0f
3 changed files with 32 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
src/Layout-test-utils.js
View File

@@ -114,13 +114,22 @@ var layoutTestUtils = (function() {
var div = renderNode(body, node); var div = renderNode(body, node);
function isInt(n) {
return n === ~~n;
}
function buildLayout(absoluteRect, div) { function buildLayout(absoluteRect, div) {
var rect = div.getBoundingClientRect(); var rect = div.getBoundingClientRect();
// There's a bug with getBoundingClientRect() with position absolute
// and overlapping left and right.
// https://code.google.com/p/chromium/issues/detail?id=383936
// In order to workaround, we can check if offsetWidth is negative and
// return 0 in this case.
var result = { var result = {
width: rect.width, width: div.offsetWidth < 0 ? 0 : rect.width,
height: rect.height, height: div.offsetHeight < 0 ? 0 : rect.height,
top: rect.top - absoluteRect.top, top: div.offsetHeight < 0 ? div.offsetTop : rect.top - absoluteRect.top,
left: rect.left - absoluteRect.left left: div.offsetWidth < 0 ? div.offsetLeft : rect.left - absoluteRect.left
}; };
var children = []; var children = [];

10
src/Layout.js
View File

@@ -484,11 +484,12 @@ var computeLayout = (function() {
getPosition(child, trailing[mainAxis]); getPosition(child, trailing[mainAxis]);
} }
if (leadingPos && trailingPos) { if (leadingPos && trailingPos) {
child.layout[dim[mainAxis]] = child.layout[dim[mainAxis]] = fmaxf(0,
node.layout[dim[mainAxis]] - node.layout[dim[mainAxis]] -
child.layout[pos[mainAxis]] - child.layout[pos[mainAxis]] -
getMargin(child, trailing[mainAxis]) - getMargin(child, trailing[mainAxis]) -
getPosition(child, trailing[mainAxis]); getPosition(child, trailing[mainAxis])
);
} }
} }
} }
@@ -520,11 +521,12 @@ var computeLayout = (function() {
getPosition(child, trailing[crossAxis]); getPosition(child, trailing[crossAxis]);
} }
if (leadingPos && trailingPos) { if (leadingPos && trailingPos) {
child.layout[dim[crossAxis]] = child.layout[dim[crossAxis]] = fmaxf(0,
node.layout[dim[crossAxis]] - node.layout[dim[crossAxis]] -
child.layout[pos[crossAxis]] - child.layout[pos[crossAxis]] -
getMargin(child, trailing[crossAxis]) - getMargin(child, trailing[crossAxis]) -
getPosition(child, trailing[crossAxis]); getPosition(child, trailing[crossAxis])
);
} }
} else { } else {
var/*float*/ leadingCrossDim = getPaddingAndBorder(node, leading[crossAxis]); var/*float*/ leadingCrossDim = getPaddingAndBorder(node, leading[crossAxis]);

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

@@ -690,7 +690,7 @@ describe('Layout', function() {
) )
}); });
it('should layout node with borderWidth and position: absolute, top', function() { it('should layout node with borderWidth and position: absolute, top, main axis', function() {
testLayout( testLayout(
{style: {borderTopWidth: 1}, children: [ {style: {borderTopWidth: 1}, children: [
{style: {top: -1, position: 'absolute'}} {style: {top: -1, position: 'absolute'}}
@@ -701,7 +701,7 @@ describe('Layout', function() {
) )
}); });
it('should layout node with borderWidth and position: absolute, top. cross axis', function() { it('should layout node with borderWidth and position: absolute, top, cross axis', function() {
testLayout( testLayout(
{style: {borderWidth: 1}, children: [ {style: {borderWidth: 1}, children: [
{style: {left: 5, position: 'absolute'}} {style: {left: 5, position: 'absolute'}}
@@ -950,6 +950,17 @@ describe('Layout', function() {
); );
}); });
it('should layout with position absolute left and negative right', function() {
testLayout(
{style: {}, children: [
{style: {left: 5, right: -1, position: 'absolute'}}
]},
{width: 0, height: 0, top: 0, left: 0, children: [
{width: 0, height: 0, top: 0, left: 5}
]}
);
});
xit('should layout text with alignItems: stretch', function() { xit('should layout text with alignItems: stretch', function() {
testLayout( testLayout(
{style: {width: 80, padding: 7, alignItems: 'stretch', measure: text('loooooooooong with space')}}, {style: {width: 80, padding: 7, alignItems: 'stretch', measure: text('loooooooooong with space')}},