From 3d280fe3f18951609cab667541dc624f56c0ac3a Mon Sep 17 00:00:00 2001 From: Christopher Chedeau Date: Tue, 22 Apr 2014 11:31:42 -0700 Subject: [PATCH] initial support for borderWidth --- src/Layout-test-utils.js | 18 ++++++------ src/Layout.js | 53 +++++++++++++++++------------------- src/__tests__/Layout-test.js | 27 ++++++++++++------ 3 files changed, 53 insertions(+), 45 deletions(-) diff --git a/src/Layout-test-utils.js b/src/Layout-test-utils.js index 7a7686d1..100d5b57 100644 --- a/src/Layout-test-utils.js +++ b/src/Layout-test-utils.js @@ -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'); diff --git a/src/Layout.js b/src/Layout.js index ee108020..43da6d13 100755 --- a/src/Layout.js +++ b/src/Layout.js @@ -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; diff --git a/src/__tests__/Layout-test.js b/src/__tests__/Layout-test.js index 10905af5..c7a3e903 100755 --- a/src/__tests__/Layout-test.js +++ b/src/__tests__/Layout-test.js @@ -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)) {