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

initial support for borderWidth

Browse Source
This commit is contained in:
Christopher Chedeau
2014-04-22 11:31:42 -07:00
parent 5922c88f84
commit 3d280fe3f1
3 changed files with 53 additions and 45 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -9,6 +9,7 @@ var layoutTestUtils = (function() {
style.innerText = (function() {/*
body, div {
box-sizing: border-box;
border: 0 solid black;
position: relative;
display: flex;
@@ -35,12 +36,12 @@ var layoutTestUtils = (function() {
}
}
function transferSpacing(div, node, type) {
transfer(div, node, type, 'px');
transfer(div, node, type + 'Left', 'px');
transfer(div, node, type + 'Top', 'px');
transfer(div, node, type + 'Bottom', 'px');
transfer(div, node, type + 'Right', 'px');
function transferSpacing(div, node, type, suffix) {
transfer(div, node, type + suffix, 'px');
transfer(div, node, type + 'Left' + suffix, 'px');
transfer(div, node, type + 'Top' + suffix, 'px');
transfer(div, node, type + 'Bottom' + suffix, 'px');
transfer(div, node, type + 'Right' + suffix, 'px');
}
function renderNode(parent, node) {
@@ -51,8 +52,9 @@ var layoutTestUtils = (function() {
transfer(div, node, 'left', 'px');
transfer(div, node, 'right', 'px');
transfer(div, node, 'bottom', 'px');
transferSpacing(div, node, 'margin');
transferSpacing(div, node, 'padding');
transferSpacing(div, node, 'margin', '');
transferSpacing(div, node, 'padding', '');
transferSpacing(div, node, 'border', 'Width');
transfer(div, node, 'flexDirection');
transfer(div, node, 'flex');
transfer(div, node, 'justifyContent');

53
src/Layout.js
View File

@@ -32,14 +32,15 @@ var computeLayout = (function() {
return str.charAt(0).toUpperCase() + str.slice(1);
}
function getSpacing(node, type, location) {
var key = type + capitalizeFirst(location);
function getSpacing(node, type, suffix, location) {
var key = type + capitalizeFirst(location) + suffix;
if (key in node.style) {
return node.style[key];
}
if (type in node.style) {
return node.style[type];
key = type + suffix;
if (key in node.style) {
return node.style[key];
}
return 0;
@@ -50,11 +51,20 @@ var computeLayout = (function() {
}
function getMargin(node, location) {
return getSpacing(node, 'margin', location);
return getSpacing(node, 'margin', '', location);
}
function getPadding(node, location) {
return getSpacing(node, 'padding', location);
return getSpacing(node, 'padding', '', location) +
getSpacing(node, 'border', 'Width', location);
}
function getMarginAxis(node, axis) {
return getMargin(node, leading[axis]) + getMargin(node, trailing[axis]);
}
function getPaddingAxis(node, axis) {
return getPadding(node, leading[axis]) + getPadding(node, trailing[axis]);
}
function getJustifyContent(node) {
@@ -93,9 +103,7 @@ var computeLayout = (function() {
}
function getDimWithMargin(node, axis) {
return node.layout[dim[axis]] +
getMargin(node, leading[axis]) +
getMargin(node, trailing[axis]);
return node.layout[dim[axis]] + getMarginAxis(node, axis);
}
function isDimDefined(node, axis) {
@@ -164,8 +172,7 @@ var computeLayout = (function() {
if (isUndefined(node.layout[dim[mainAxis]]) && mainDimInStyle) {
node.layout[dim[mainAxis]] = Math.max(
node.style[dim[mainAxis]],
getPadding(node, leading[mainAxis]) +
getPadding(node, trailing[mainAxis])
getPaddingAxis(node, mainAxis)
);
}
@@ -173,8 +180,7 @@ var computeLayout = (function() {
if (isUndefined(node.layout[dim[crossAxis]]) && crossDimInStyle) {
node.layout[dim[crossAxis]] = Math.max(
node.style[dim[crossAxis]],
getPadding(node, leading[crossAxis]) +
getPadding(node, trailing[crossAxis])
getPaddingAxis(node, crossAxis)
);
}
@@ -194,10 +200,7 @@ var computeLayout = (function() {
}
} else {
flexibleChildrenCount++;
mainContentDim += getPadding(child, leading[mainAxis]) +
getPadding(child, trailing[mainAxis]) +
getMargin(child, leading[mainAxis]) +
getMargin(child, trailing[mainAxis]);
mainContentDim += getPaddingAxis(child, mainAxis) + getMarginAxis(child, mainAxis);
}
}
@@ -205,8 +208,7 @@ var computeLayout = (function() {
var/*float*/ betweenMainDim = 0;
if (!isUndefined(node.layout[dim[mainAxis]])) {
var/*float*/ remainingMainDim = node.layout[dim[mainAxis]] -
getPadding(node, leading[mainAxis]) -
getPadding(node, trailing[mainAxis]) -
getPaddingAxis(node, mainAxis) -
mainContentDim;
if (flexibleChildrenCount) {
@@ -217,9 +219,7 @@ var computeLayout = (function() {
for (var/*int*/ i = 0; i < node.children.length; ++i) {
var/*css_node_t**/ child = node.children[i];
if (getPositionType(child) === 'relative' && getFlex(child)) {
child.layout[dim[mainAxis]] = flexibleMainDim +
getPadding(child, leading[mainAxis]) +
getPadding(child, trailing[mainAxis]);
child.layout[dim[mainAxis]] = flexibleMainDim + getPaddingAxis(child, mainAxis);
layoutNode(child);
}
}
@@ -279,8 +279,7 @@ var computeLayout = (function() {
var/*css_align_t*/ alignItem = getAlignItem(node, child);
var/*float*/ remainingCrossDim = node.layout[dim[crossAxis]] -
getDimWithMargin(child, crossAxis) -
getPadding(node, leading[crossAxis]) -
getPadding(node, trailing[crossAxis]);
getPaddingAxis(node, crossAxis);
var/*float*/ leadingCrossDim = getPadding(node, leading[crossAxis]);
if (alignItem == CSS_ALIGN_FLEX_START) {
@@ -292,10 +291,8 @@ var computeLayout = (function() {
} else if (alignItem == CSS_ALIGN_STRETCH) {
if (!isDimDefined(child, crossAxis)) {
child.layout[dim[crossAxis]] = node.layout[dim[crossAxis]] -
getPadding(node, leading[crossAxis]) -
getPadding(node, trailing[crossAxis]) -
getMargin(child, leading[crossAxis]) -
getMargin(child, trailing[crossAxis]);
getPaddingAxis(node, crossAxis) -
getMarginAxis(child, crossAxis);
}
}
child.layout[pos[crossAxis]] += leadingCrossDim;

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

@@ -682,6 +682,14 @@ describe('Layout', function() {
)
});
it('should layout node with borderWidth', function() {
testLayout(
{style: {borderWidth: 5}},
{width: 10, height: 10, top: 0, left: 0}
)
});
it('should layout randomly', function() {
function RNG(seed) {
@@ -715,12 +723,12 @@ describe('Layout', function() {
node.children.push(generateRandomNode());
}
}
function randSpacing(node, chance, type, min, max) {
randMinMax(node, chance, type, min, max);
randMinMax(node, chance, type + 'Left', min, max);
randMinMax(node, chance, type + 'Top', min, max);
randMinMax(node, chance, type + 'Right', min, max);
randMinMax(node, chance, type + 'Bottom', min, max);
function randSpacing(node, chance, type, suffix, min, max) {
randMinMax(node, chance, type + suffix, min, max);
randMinMax(node, chance, type + 'Left' + suffix, min, max);
randMinMax(node, chance, type + 'Top' + suffix, min, max);
randMinMax(node, chance, type + 'Right' + suffix, min, max);
randMinMax(node, chance, type + 'Bottom' + suffix, min, max);
}
function generateRandomNode() {
var node = {style: {}};
@@ -730,8 +738,9 @@ describe('Layout', function() {
randMinMax(node, 0.5, 'left', -10, 10);
randMinMax(node, 0.5, 'right', -10, 10);
randMinMax(node, 0.5, 'bottom', -10, 10);
randSpacing(node, 0.5, 'margin', 0, 20);
randSpacing(node, 0.5, 'padding', 0, 20);
randSpacing(node, 0.5, 'margin', '', 0, 20);
randSpacing(node, 0.5, 'padding', '', 0, 20);
randSpacing(node, 0.5, 'border', 'Width', 0, 4);
randEnum(node, 0.5, 'flexDirection', ['column', 'row']);
randEnum(node, 0.5, 'justifyContent', ['flex-start', 'center', 'flex-end', 'space-between', 'space-around']);
randEnum(node, 0.5, 'alignItems', ['flex-start', 'center', 'flex-end', 'stretch']);
@@ -742,7 +751,7 @@ describe('Layout', function() {
return node;
}
for (var i = 0; i < 1000; ++i) {
for (var i = 0; i < 100; ++i) {
var node = generateRandomNode();
if (JSON.stringify(computeLayout(node)) !== JSON.stringify(computeDOMLayout)) {