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

Address eslint errors:

Browse Source 
* modify .eslintrc w/ globals & rules
* use judgement in deciding bet proj style & eslint recommendation
* make
This commit is contained in:
daviskoh
2015-02-17 21:12:29 -05:00
parent 4dc175dda4
commit 3a6e50db99
9 changed files with 266 additions and 255 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
.eslintrc
View File

@@ -13,9 +13,15 @@
"require": true,
"global": true,
"__dirname": true,
"module": true
"module": true,
"console": true,
"setTimeout": true
},
"rules": {
"quotes": "single"
"quotes": "single",
"strict": 0,
"no-console": false,
"no-shadow": false,
"no-underscore-dangle": false
}
}

6
src/JavaTranspiler.js
View File

@@ -52,7 +52,7 @@ function __transpileSingleTestToJava(code) {
.replace( // layout.position[CSS_TOP] => layout.y
/layout\.position\[CSS_(TOP|LEFT)\]/g,
function (str, match1) {
return 'layout.' + (match1 == 'TOP' ? 'y' : 'x');
return 'layout.' + (match1 === 'TOP' ? 'y' : 'x');
})
.replace( // style.position[CSS_TOP] => style.positionTop
/style\.(position)\[CSS_(TOP|BOTTOM|LEFT|RIGHT)\]/g,
@@ -97,7 +97,7 @@ var JavaTranspiler = {
.replace(/var\/\*([^\/]+)\*\//g, '$1')
.replace(/ === /g, ' == ')
.replace(/ !== /g, ' != ')
.replace(/\n /g, '\n')
.replace(/\n {2}/g, '\n')
.replace(/\/[*]!([^*]+)[*]\//g, '$1')
.replace(/css_node_t\*/g, 'CSSNode'));
},
@@ -118,7 +118,7 @@ var JavaTranspiler = {
__transpileSingleTestToJava(allTestsInC[i]);
}
return allTestsInJava.join('\n\n');
},
}
};
if (typeof module !== 'undefined') {

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

@@ -44,16 +44,17 @@ var layoutTestUtils = (function() {
};
}
var _cachedIframe;
function renderIframe() {
var iframe = document.createElement('iframe');
document.body.appendChild(iframe);
return iframe;
}
var cachedIframe;
function getIframe() {
if (cachedIframe) {
return cachedIframe;
function getIframe(iframe) {
if (_cachedIframe) {
return _cachedIframe;
}
var doc = iframe.contentDocument;
@@ -87,7 +88,7 @@ var layoutTestUtils = (function() {
}
*/} + '').slice(15, -4);
doc.head.appendChild(style);
cachedIframe = iframe;
_cachedIframe = iframe;
return iframe;
} else {
setTimeout(getIframe, 0);
@@ -96,7 +97,7 @@ var layoutTestUtils = (function() {
if (typeof window !== 'undefined') {
var iframe = renderIframe();
getIframe();
getIframe(iframe);
}
if (typeof computeLayout === 'function') {
@@ -280,9 +281,12 @@ var layoutTestUtils = (function() {
var isModified = true;
function rec(node) {
var key;
var value;
// Style
for (var key in node.style) {
var value = node.style[key];
for (key in node.style) {
value = node.style[key];
delete node.style[key];
if (isWorking()) {
node.style[key] = value;
@@ -291,8 +295,8 @@ var layoutTestUtils = (function() {
}
}
// Round values
for (var key in node.style) {
var value = node.style[key];
for (key in node.style) {
value = node.style[key];
if (value > 100) {
node.style[key] = Math.round(value / 100) * 100;
} else if (value > 10) {
@@ -310,7 +314,7 @@ var layoutTestUtils = (function() {
}
// Children
for (var i = 0; node.children && i < node.children.length; ++i) {
var value = node.children[i];
value = node.children[i];
node.children.splice(i, 1);
if (isWorking()) {
if (!node.children) {
@@ -366,7 +370,7 @@ var layoutTestUtils = (function() {
var texts = {
small: 'small',
big: 'loooooooooong with space',
big: 'loooooooooong with space'
};
var preDefinedTextSizes = {
@@ -386,7 +390,7 @@ var layoutTestUtils = (function() {
smallHeight: measureTextSizes(texts.small, 0).height,
bigWidth: measureTextSizes(texts.big).width,
bigHeight: measureTextSizes(texts.big, 0).height,
bigMinWidth: measureTextSizes(texts.big, 0).width,
bigMinWidth: measureTextSizes(texts.big, 0).width
};
}
@@ -400,7 +404,7 @@ var layoutTestUtils = (function() {
testNamedLayout('expected-dom', expectedLayout, domLayout);
testNamedLayout('layout-dom', layout, domLayout);
},
testRandomLayout: function(node, i) {
testRandomLayout: function(node) {
expect({node: node, layout: computeCSSLayout(node)})
.toEqual({node: node, layout: computeDOMLayout(node)});
},

85
src/Layout.c
View File

@@ -374,25 +374,30 @@ static void layoutNodeImpl(css_node_t *node, float parentMaxWidth) {
// Let's not measure the text if we already know both dimensions
if (isRowUndefined || isColumnUndefined) {
css_dim_t measure_dim = node->measure(
css_dim_t measureDim = node->measure(
node->context,
width
);
if (isRowUndefined) {
node->layout.dimensions[CSS_WIDTH] = measure_dim.dimensions[CSS_WIDTH] +
node->layout.dimensions[CSS_WIDTH] = measureDim.dimensions[CSS_WIDTH] +
getPaddingAndBorderAxis(node, CSS_FLEX_DIRECTION_ROW);
}
if (isColumnUndefined) {
node->layout.dimensions[CSS_HEIGHT] = measure_dim.dimensions[CSS_HEIGHT] +
node->layout.dimensions[CSS_HEIGHT] = measureDim.dimensions[CSS_HEIGHT] +
getPaddingAndBorderAxis(node, CSS_FLEX_DIRECTION_COLUMN);
}
}
return;
}
int i;
int ii;
css_node_t* child;
css_flex_direction_t axis;
// Pre-fill some dimensions straight from the parent
for (int i = 0; i < node->children_count; ++i) {
css_node_t* child = node->get_child(node->context, i);
for (i = 0; i < node->children_count; ++i) {
child = node->get_child(node->context, i);
// Pre-fill cross axis dimensions when the child is using stretch before
// we call the recursive layout pass
if (getAlignItem(node, child) == CSS_ALIGN_STRETCH &&
@@ -409,8 +414,8 @@ static void layoutNodeImpl(css_node_t *node, float parentMaxWidth) {
} else if (getPositionType(child) == CSS_POSITION_ABSOLUTE) {
// Pre-fill dimensions when using absolute position and both offsets for the axis are defined (either both
// left and right or top and bottom).
for (int ii = 0; ii < 2; ii++) {
css_flex_direction_t axis = (ii != 0) ? CSS_FLEX_DIRECTION_ROW : CSS_FLEX_DIRECTION_COLUMN;
for (ii = 0; ii < 2; ii++) {
axis = (ii != 0) ? CSS_FLEX_DIRECTION_ROW : CSS_FLEX_DIRECTION_COLUMN;
if (!isUndefined(node->layout.dimensions[dim[axis]]) &&
!isDimDefined(child, axis) &&
isPosDefined(child, leading[axis]) &&
@@ -438,7 +443,7 @@ static void layoutNodeImpl(css_node_t *node, float parentMaxWidth) {
// We want to execute the next two loops one per line with flex-wrap
int startLine = 0;
int endLine = 0;
int nextOffset = 0;
// int nextOffset = 0;
int alreadyComputedNextLayout = 0;
// We aggregate the total dimensions of the container in those two variables
float linesCrossDim = 0;
@@ -457,8 +462,10 @@ static void layoutNodeImpl(css_node_t *node, float parentMaxWidth) {
int flexibleChildrenCount = 0;
float totalFlexible = 0;
int nonFlexibleChildrenCount = 0;
for (int i = startLine; i < node->children_count; ++i) {
css_node_t* child = node->get_child(node->context, i);
float maxWidth;
for (i = startLine; i < node->children_count; ++i) {
child = node->get_child(node->context, i);
float nextContentDim = 0;
// It only makes sense to consider a child flexible if we have a computed
@@ -474,16 +481,16 @@ static void layoutNodeImpl(css_node_t *node, float parentMaxWidth) {
getMarginAxis(child, mainAxis);
} else {
float maxWidth = CSS_UNDEFINED;
if (mainAxis == CSS_FLEX_DIRECTION_ROW) {
// do nothing
} else if (isDimDefined(node, CSS_FLEX_DIRECTION_ROW)) {
maxWidth = node->layout.dimensions[dim[CSS_FLEX_DIRECTION_ROW]] -
getPaddingAndBorderAxis(node, CSS_FLEX_DIRECTION_ROW);
} else {
maxWidth = CSS_UNDEFINED;
if (mainAxis != CSS_FLEX_DIRECTION_ROW) {
maxWidth = parentMaxWidth -
getMarginAxis(node, CSS_FLEX_DIRECTION_ROW) -
getPaddingAndBorderAxis(node, CSS_FLEX_DIRECTION_ROW);
if (isDimDefined(node, CSS_FLEX_DIRECTION_ROW)) {
maxWidth = node->layout.dimensions[dim[CSS_FLEX_DIRECTION_ROW]] -
getPaddingAndBorderAxis(node, CSS_FLEX_DIRECTION_ROW);
}
}
// This is the main recursive call. We layout non flexible children.
@@ -544,21 +551,19 @@ static void layoutNodeImpl(css_node_t *node, float parentMaxWidth) {
// We iterate over the full array and only apply the action on flexible
// children. This is faster than actually allocating a new array that
// contains only flexible children.
for (int i = startLine; i < endLine; ++i) {
css_node_t* child = node->get_child(node->context, i);
for (i = startLine; i < endLine; ++i) {
child = node->get_child(node->context, i);
if (isFlex(child)) {
// At this point we know the final size of the element in the main
// dimension
child->layout.dimensions[dim[mainAxis]] = flexibleMainDim * getFlex(child) +
getPaddingAndBorderAxis(child, mainAxis);
float maxWidth = CSS_UNDEFINED;
if (mainAxis == CSS_FLEX_DIRECTION_ROW) {
// do nothing
} else if (isDimDefined(node, CSS_FLEX_DIRECTION_ROW)) {
maxWidth = CSS_UNDEFINED;
if (isDimDefined(node, CSS_FLEX_DIRECTION_ROW)) {
maxWidth = node->layout.dimensions[dim[CSS_FLEX_DIRECTION_ROW]] -
getPaddingAndBorderAxis(node, CSS_FLEX_DIRECTION_ROW);
} else {
} else if (mainAxis != CSS_FLEX_DIRECTION_ROW) {
maxWidth = parentMaxWidth -
getMarginAxis(node, CSS_FLEX_DIRECTION_ROW) -
getPaddingAndBorderAxis(node, CSS_FLEX_DIRECTION_ROW);
@@ -573,9 +578,7 @@ static void layoutNodeImpl(css_node_t *node, float parentMaxWidth) {
// space available
} else {
css_justify_t justifyContent = getJustifyContent(node);
if (justifyContent == CSS_JUSTIFY_FLEX_START) {
// Do nothing
} else if (justifyContent == CSS_JUSTIFY_CENTER) {
if (justifyContent == CSS_JUSTIFY_CENTER) {
leadingMainDim = remainingMainDim / 2;
} else if (justifyContent == CSS_JUSTIFY_FLEX_END) {
leadingMainDim = remainingMainDim;
@@ -605,8 +608,8 @@ static void layoutNodeImpl(css_node_t *node, float parentMaxWidth) {
float mainDim = leadingMainDim +
getPaddingAndBorder(node, leading[mainAxis]);
for (int i = startLine; i < endLine; ++i) {
css_node_t* child = node->get_child(node->context, i);
for (i = startLine; i < endLine; ++i) {
child = node->get_child(node->context, i);
if (getPositionType(child) == CSS_POSITION_ABSOLUTE &&
isPosDefined(child, leading[mainAxis])) {
@@ -638,7 +641,7 @@ static void layoutNodeImpl(css_node_t *node, float parentMaxWidth) {
float containerMainAxis = node->layout.dimensions[dim[mainAxis]];
// If the user didn't specify a width or height, and it has not been set
// by the container, then we set it via the children.
if (isUndefined(node->layout.dimensions[dim[mainAxis]])) {
if (isUndefined(containerMainAxis)) {
containerMainAxis = fmaxf(
// We're missing the last padding at this point to get the final
// dimension
@@ -661,8 +664,8 @@ static void layoutNodeImpl(css_node_t *node, float parentMaxWidth) {
// <Loop D> Position elements in the cross axis
for (int i = startLine; i < endLine; ++i) {
css_node_t* child = node->get_child(node->context, i);
for (i = startLine; i < endLine; ++i) {
child = node->get_child(node->context, i);
if (getPositionType(child) == CSS_POSITION_ABSOLUTE &&
isPosDefined(child, leading[crossAxis])) {
@@ -680,9 +683,7 @@ static void layoutNodeImpl(css_node_t *node, float parentMaxWidth) {
// alignSelf (child) in order to determine the position in the cross axis
if (getPositionType(child) == CSS_POSITION_RELATIVE) {
css_align_t alignItem = getAlignItem(node, child);
if (alignItem == CSS_ALIGN_FLEX_START) {
// Do nothing
} else if (alignItem == CSS_ALIGN_STRETCH) {
if (alignItem == CSS_ALIGN_STRETCH) {
// You can only stretch if the dimension has not already been set
// previously.
if (!isDimDefined(child, crossAxis)) {
@@ -694,7 +695,7 @@ static void layoutNodeImpl(css_node_t *node, float parentMaxWidth) {
getPaddingAndBorderAxis(child, crossAxis)
);
}
} else {
} else if (alignItem != CSS_ALIGN_FLEX_START) {
// The remaining space between the parent dimensions+padding and child
// dimensions+margin.
float remainingCrossDim = containerCrossAxis -
@@ -743,13 +744,13 @@ static void layoutNodeImpl(css_node_t *node, float parentMaxWidth) {
// <Loop E> Calculate dimensions for absolutely positioned elements
for (int i = 0; i < node->children_count; ++i) {
css_node_t* child = node->get_child(node->context, i);
for (i = 0; i < node->children_count; ++i) {
child = node->get_child(node->context, i);
if (getPositionType(child) == CSS_POSITION_ABSOLUTE) {
// Pre-fill dimensions when using absolute position and both offsets for the axis are defined (either both
// left and right or top and bottom).
for (int ii = 0; ii < 2; ii++) {
css_flex_direction_t axis = (ii != 0) ? CSS_FLEX_DIRECTION_ROW : CSS_FLEX_DIRECTION_COLUMN;
for (ii = 0; ii < 2; ii++) {
axis = (ii != 0) ? CSS_FLEX_DIRECTION_ROW : CSS_FLEX_DIRECTION_COLUMN;
if (!isUndefined(node->layout.dimensions[dim[axis]]) &&
!isDimDefined(child, axis) &&
isPosDefined(child, leading[axis]) &&
@@ -765,8 +766,8 @@ static void layoutNodeImpl(css_node_t *node, float parentMaxWidth) {
);
}
}
for (int ii = 0; ii < 2; ii++) {
css_flex_direction_t axis = (ii != 0) ? CSS_FLEX_DIRECTION_ROW : CSS_FLEX_DIRECTION_COLUMN;
for (ii = 0; ii < 2; ii++) {
axis = (ii != 0) ? CSS_FLEX_DIRECTION_ROW : CSS_FLEX_DIRECTION_COLUMN;
if (isPosDefined(child, trailing[axis]) &&
!isPosDefined(child, leading[axis])) {
child->layout.position[leading[axis]] =

176
src/Layout.js
View File

@@ -9,6 +9,42 @@
var computeLayout = (function() {
var CSS_UNDEFINED;
var CSS_FLEX_DIRECTION_ROW = 'row';
var CSS_FLEX_DIRECTION_COLUMN = 'column';
// var CSS_JUSTIFY_FLEX_START = 'flex-start';
var CSS_JUSTIFY_CENTER = 'center';
var CSS_JUSTIFY_FLEX_END = 'flex-end';
var CSS_JUSTIFY_SPACE_BETWEEN = 'space-between';
var CSS_JUSTIFY_SPACE_AROUND = 'space-around';
var CSS_ALIGN_FLEX_START = 'flex-start';
var CSS_ALIGN_CENTER = 'center';
// var CSS_ALIGN_FLEX_END = 'flex-end';
var CSS_ALIGN_STRETCH = 'stretch';
var CSS_POSITION_RELATIVE = 'relative';
var CSS_POSITION_ABSOLUTE = 'absolute';
var leading = {
row: 'left',
column: 'top'
};
var trailing = {
row: 'right',
column: 'bottom'
};
var pos = {
row: 'left',
column: 'top'
};
var dim = {
row: 'width',
column: 'height'
};
function capitalizeFirst(str) {
return str.charAt(0).toUpperCase() + str.slice(1);
}
@@ -138,6 +174,13 @@ var computeLayout = (function() {
return 0;
}
function fmaxf(a, b) {
if (a > b) {
return a;
}
return b;
}
// When the user specifically sets a value for width or height
function setDimensionFromStyle(node, axis) {
// The parent already computed us a width or height. We just skip it
@@ -165,49 +208,6 @@ var computeLayout = (function() {
return -getPosition(node, trailing[axis]);
}
var leading = {
row: 'left',
column: 'top'
};
var trailing = {
row: 'right',
column: 'bottom'
};
var pos = {
row: 'left',
column: 'top'
};
var dim = {
row: 'width',
column: 'height'
};
function fmaxf(a, b) {
if (a > b) {
return a;
}
return b;
}
var CSS_UNDEFINED;
var CSS_FLEX_DIRECTION_ROW = 'row';
var CSS_FLEX_DIRECTION_COLUMN = 'column';
var CSS_JUSTIFY_FLEX_START = 'flex-start';
var CSS_JUSTIFY_CENTER = 'center';
var CSS_JUSTIFY_FLEX_END = 'flex-end';
var CSS_JUSTIFY_SPACE_BETWEEN = 'space-between';
var CSS_JUSTIFY_SPACE_AROUND = 'space-around';
var CSS_ALIGN_FLEX_START = 'flex-start';
var CSS_ALIGN_CENTER = 'center';
var CSS_ALIGN_FLEX_END = 'flex-end';
var CSS_ALIGN_STRETCH = 'stretch';
var CSS_POSITION_RELATIVE = 'relative';
var CSS_POSITION_ABSOLUTE = 'absolute';
return function layoutNode(node, parentMaxWidth) {
var/*css_flex_direction_t*/ mainAxis = getFlexDirection(node);
var/*css_flex_direction_t*/ crossAxis = mainAxis === CSS_FLEX_DIRECTION_ROW ?
@@ -247,25 +247,30 @@ var computeLayout = (function() {
// Let's not measure the text if we already know both dimensions
if (isRowUndefined || isColumnUndefined) {
var/*css_dim_t*/ measure_dim = node.style.measure(
var/*css_dim_t*/ measureDim = node.style.measure(
/*(c)!node->context,*/
width
);
if (isRowUndefined) {
node.layout.width = measure_dim.width +
node.layout.width = measureDim.width +
getPaddingAndBorderAxis(node, CSS_FLEX_DIRECTION_ROW);
}
if (isColumnUndefined) {
node.layout.height = measure_dim.height +
node.layout.height = measureDim.height +
getPaddingAndBorderAxis(node, CSS_FLEX_DIRECTION_COLUMN);
}
}
return;
}
var/*int*/ i;
var/*int*/ ii;
var/*css_node_t**/ child;
var/*css_flex_direction_t*/ axis;
// Pre-fill some dimensions straight from the parent
for (var/*int*/ i = 0; i < node.children.length; ++i) {
var/*css_node_t**/ child = node.children[i];
for (i = 0; i < node.children.length; ++i) {
child = node.children[i];
// Pre-fill cross axis dimensions when the child is using stretch before
// we call the recursive layout pass
if (getAlignItem(node, child) === CSS_ALIGN_STRETCH &&
@@ -279,11 +284,11 @@ var computeLayout = (function() {
// You never want to go smaller than padding
getPaddingAndBorderAxis(child, crossAxis)
);
} else if (getPositionType(child) == CSS_POSITION_ABSOLUTE) {
} else if (getPositionType(child) === CSS_POSITION_ABSOLUTE) {
// Pre-fill dimensions when using absolute position and both offsets for the axis are defined (either both
// left and right or top and bottom).
for (var/*int*/ ii = 0; ii < 2; ii++) {
var/*css_flex_direction_t*/ axis = (ii !== 0) ? CSS_FLEX_DIRECTION_ROW : CSS_FLEX_DIRECTION_COLUMN;
for (ii = 0; ii < 2; ii++) {
axis = (ii !== 0) ? CSS_FLEX_DIRECTION_ROW : CSS_FLEX_DIRECTION_COLUMN;
if (!isUndefined(node.layout[dim[axis]]) &&
!isDimDefined(child, axis) &&
isPosDefined(child, leading[axis]) &&
@@ -311,7 +316,7 @@ var computeLayout = (function() {
// We want to execute the next two loops one per line with flex-wrap
var/*int*/ startLine = 0;
var/*int*/ endLine = 0;
var/*int*/ nextOffset = 0;
// var/*int*/ nextOffset = 0;
var/*int*/ alreadyComputedNextLayout = 0;
// We aggregate the total dimensions of the container in those two variables
var/*float*/ linesCrossDim = 0;
@@ -330,8 +335,10 @@ var computeLayout = (function() {
var/*int*/ flexibleChildrenCount = 0;
var/*float*/ totalFlexible = 0;
var/*int*/ nonFlexibleChildrenCount = 0;
for (var/*int*/ i = startLine; i < node.children.length; ++i) {
var/*css_node_t**/ child = node.children[i];
var/*float*/ maxWidth;
for (i = startLine; i < node.children.length; ++i) {
child = node.children[i];
var/*float*/ nextContentDim = 0;
// It only makes sense to consider a child flexible if we have a computed
@@ -347,16 +354,16 @@ var computeLayout = (function() {
getMarginAxis(child, mainAxis);
} else {
var/*float*/ maxWidth = CSS_UNDEFINED;
if (mainAxis === CSS_FLEX_DIRECTION_ROW) {
// do nothing
} else if (isDimDefined(node, CSS_FLEX_DIRECTION_ROW)) {
maxWidth = node.layout[dim[CSS_FLEX_DIRECTION_ROW]] -
getPaddingAndBorderAxis(node, CSS_FLEX_DIRECTION_ROW);
} else {
maxWidth = CSS_UNDEFINED;
if (mainAxis !== CSS_FLEX_DIRECTION_ROW) {
maxWidth = parentMaxWidth -
getMarginAxis(node, CSS_FLEX_DIRECTION_ROW) -
getPaddingAndBorderAxis(node, CSS_FLEX_DIRECTION_ROW);
if (isDimDefined(node, CSS_FLEX_DIRECTION_ROW)) {
maxWidth = node.layout[dim[CSS_FLEX_DIRECTION_ROW]] -
getPaddingAndBorderAxis(node, CSS_FLEX_DIRECTION_ROW);
}
}
// This is the main recursive call. We layout non flexible children.
@@ -417,21 +424,19 @@ var computeLayout = (function() {
// We iterate over the full array and only apply the action on flexible
// children. This is faster than actually allocating a new array that
// contains only flexible children.
for (var/*int*/ i = startLine; i < endLine; ++i) {
var/*css_node_t**/ child = node.children[i];
for (i = startLine; i < endLine; ++i) {
child = node.children[i];
if (isFlex(child)) {
// At this point we know the final size of the element in the main
// dimension
child.layout[dim[mainAxis]] = flexibleMainDim * getFlex(child) +
getPaddingAndBorderAxis(child, mainAxis);
var/*float*/ maxWidth = CSS_UNDEFINED;
if (mainAxis === CSS_FLEX_DIRECTION_ROW) {
// do nothing
} else if (isDimDefined(node, CSS_FLEX_DIRECTION_ROW)) {
maxWidth = CSS_UNDEFINED;
if (isDimDefined(node, CSS_FLEX_DIRECTION_ROW)) {
maxWidth = node.layout[dim[CSS_FLEX_DIRECTION_ROW]] -
getPaddingAndBorderAxis(node, CSS_FLEX_DIRECTION_ROW);
} else {
} else if (mainAxis !== CSS_FLEX_DIRECTION_ROW) {
maxWidth = parentMaxWidth -
getMarginAxis(node, CSS_FLEX_DIRECTION_ROW) -
getPaddingAndBorderAxis(node, CSS_FLEX_DIRECTION_ROW);
@@ -446,9 +451,7 @@ var computeLayout = (function() {
// space available
} else {
var/*css_justify_t*/ justifyContent = getJustifyContent(node);
if (justifyContent === CSS_JUSTIFY_FLEX_START) {
// Do nothing
} else if (justifyContent === CSS_JUSTIFY_CENTER) {
if (justifyContent === CSS_JUSTIFY_CENTER) {
leadingMainDim = remainingMainDim / 2;
} else if (justifyContent === CSS_JUSTIFY_FLEX_END) {
leadingMainDim = remainingMainDim;
@@ -478,8 +481,8 @@ var computeLayout = (function() {
var/*float*/ mainDim = leadingMainDim +
getPaddingAndBorder(node, leading[mainAxis]);
for (var/*int*/ i = startLine; i < endLine; ++i) {
var/*css_node_t**/ child = node.children[i];
for (i = startLine; i < endLine; ++i) {
child = node.children[i];
if (getPositionType(child) === CSS_POSITION_ABSOLUTE &&
isPosDefined(child, leading[mainAxis])) {
@@ -511,7 +514,7 @@ var computeLayout = (function() {
var/*float*/ containerMainAxis = node.layout[dim[mainAxis]];
// If the user didn't specify a width or height, and it has not been set
// by the container, then we set it via the children.
if (isUndefined(node.layout[dim[mainAxis]])) {
if (isUndefined(containerMainAxis)) {
containerMainAxis = fmaxf(
// We're missing the last padding at this point to get the final
// dimension
@@ -534,8 +537,8 @@ var computeLayout = (function() {
// <Loop D> Position elements in the cross axis
for (var/*int*/ i = startLine; i < endLine; ++i) {
var/*css_node_t**/ child = node.children[i];
for (i = startLine; i < endLine; ++i) {
child = node.children[i];
if (getPositionType(child) === CSS_POSITION_ABSOLUTE &&
isPosDefined(child, leading[crossAxis])) {
@@ -553,9 +556,7 @@ var computeLayout = (function() {
// alignSelf (child) in order to determine the position in the cross axis
if (getPositionType(child) === CSS_POSITION_RELATIVE) {
var/*css_align_t*/ alignItem = getAlignItem(node, child);
if (alignItem === CSS_ALIGN_FLEX_START) {
// Do nothing
} else if (alignItem === CSS_ALIGN_STRETCH) {
if (alignItem === CSS_ALIGN_STRETCH) {
// You can only stretch if the dimension has not already been set
// previously.
if (!isDimDefined(child, crossAxis)) {
@@ -567,7 +568,7 @@ var computeLayout = (function() {
getPaddingAndBorderAxis(child, crossAxis)
);
}
} else {
} else if (alignItem !== CSS_ALIGN_FLEX_START) {
// The remaining space between the parent dimensions+padding and child
// dimensions+margin.
var/*float*/ remainingCrossDim = containerCrossAxis -
@@ -616,13 +617,13 @@ var computeLayout = (function() {
// <Loop E> Calculate dimensions for absolutely positioned elements
for (var/*int*/ i = 0; i < node.children.length; ++i) {
var/*css_node_t**/ child = node.children[i];
if (getPositionType(child) == CSS_POSITION_ABSOLUTE) {
for (i = 0; i < node.children.length; ++i) {
child = node.children[i];
if (getPositionType(child) === CSS_POSITION_ABSOLUTE) {
// Pre-fill dimensions when using absolute position and both offsets for the axis are defined (either both
// left and right or top and bottom).
for (var/*int*/ ii = 0; ii < 2; ii++) {
var/*css_flex_direction_t*/ axis = (ii !== 0) ? CSS_FLEX_DIRECTION_ROW : CSS_FLEX_DIRECTION_COLUMN;
for (ii = 0; ii < 2; ii++) {
axis = (ii !== 0) ? CSS_FLEX_DIRECTION_ROW : CSS_FLEX_DIRECTION_COLUMN;
if (!isUndefined(node.layout[dim[axis]]) &&
!isDimDefined(child, axis) &&
isPosDefined(child, leading[axis]) &&
@@ -638,8 +639,8 @@ var computeLayout = (function() {
);
}
}
for (var/*int*/ ii = 0; ii < 2; ii++) {
var/*css_flex_direction_t*/ axis = (ii !== 0) ? CSS_FLEX_DIRECTION_ROW : CSS_FLEX_DIRECTION_COLUMN;
for (ii = 0; ii < 2; ii++) {
axis = (ii !== 0) ? CSS_FLEX_DIRECTION_ROW : CSS_FLEX_DIRECTION_COLUMN;
if (isPosDefined(child, trailing[axis]) &&
!isPosDefined(child, leading[axis])) {
child.layout[leading[axis]] =
@@ -656,4 +657,3 @@ var computeLayout = (function() {
if (typeof module === 'object') {
module.exports = computeLayout;
}

38
src/__tests__/Layout-random-test.js
View File

@@ -11,8 +11,6 @@ var testRandomLayout = layoutTestUtils.testRandomLayout;
var computeLayout = layoutTestUtils.computeLayout;
var computeDOMLayout = layoutTestUtils.computeDOMLayout;
var reduceTest = layoutTestUtils.reduceTest;
var text = layoutTestUtils.text;
var texts = layoutTestUtils.texts;
describe('Random layout', function() {
@@ -39,14 +37,7 @@ describe('Random layout', function() {
node.style[attribute] = enumValues[Math.floor(rng.nextFloat() * enumValues.length)];
}
}
function randChildren(node, chance) {
while (rng.nextFloat() < chance) {
if (!node.children) {
node.children = [];
}
node.children.push(generateRandomNode());
}
}
function randSpacing(node, chance, type, suffix, min, max) {
randMinMax(node, chance, type + suffix, min, max);
randMinMax(node, chance, type + 'Left' + suffix, min, max);
@@ -88,10 +79,29 @@ describe('Random layout', function() {
delete node.style.position;
}
function randChildren(node, chance) {
while (rng.nextFloat() < chance) {
if (!node.children) {
node.children = [];
}
node.children.push(generateRandomNode());
}
}
randChildren(node, 0.4);
return node;
}
function checkRandomLayout(i, node) {
it('should layout randomly #' + i + '.', function(node) {
if (JSON.stringify(computeLayout(node)) !== JSON.stringify(computeDOMLayout(node))) {
node = reduceTest(node);
}
testRandomLayout(node, i);
}.bind(this, node));
}
for (var i = 0; i < 100; ++i) {
var node = generateRandomNode();
// The iframe's body has a natural width of 300 that it doesn't really make
@@ -101,13 +111,7 @@ describe('Random layout', function() {
delete node.style.flex;
delete node.style.position;
it('should layout randomly #' + i +'.', function(node) {
if (JSON.stringify(computeLayout(node)) !== JSON.stringify(computeDOMLayout(node))) {
node = reduceTest(node);
}
testRandomLayout(node, i);
}.bind(this, node));
checkRandomLayout.call(this, i, node);
}
});

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

@@ -50,7 +50,7 @@ describe('Layout', function() {
{width: 500, height: 500, top: 0, left: 0},
{width: 500, height: 500, top: 500, left: 0, children: [
{width: 250, height: 250, top: 0, left: 0},
{width: 250, height: 250, top: 250, left: 0},
{width: 250, height: 250, top: 250, left: 0}
]}
]}
);
@@ -217,7 +217,7 @@ describe('Layout', function() {
it('should layout node with flex override height', function() {
testLayout(
{style: {width: 1000, height: 1000}, children: [
{style: {width: 100, height: 100, flex: 1}},
{style: {width: 100, height: 100, flex: 1}}
]},
{width: 1000, height: 1000, top: 0, left: 0, children: [
{width: 100, height: 1000, top: 0, left: 0}
@@ -233,7 +233,7 @@ describe('Layout', function() {
]},
{width: 1000, height: 1000, top: 0, left: 0, children: [
{width: 200, height: 100, top: 0, left: 0},
{width: 100, height: 100, top: 100, left: 0},
{width: 100, height: 100, top: 100, left: 0}
]}
);
});
@@ -246,7 +246,7 @@ describe('Layout', function() {
]},
{width: 1000, height: 1000, top: 0, left: 0, children: [
{width: 200, height: 100, top: 0, left: 400},
{width: 100, height: 100, top: 100, left: 450},
{width: 100, height: 100, top: 100, left: 450}
]}
);
});
@@ -259,7 +259,7 @@ describe('Layout', function() {
]},
{width: 1000, height: 1000, top: 0, left: 0, children: [
{width: 200, height: 100, top: 0, left: 800},
{width: 100, height: 100, top: 100, left: 900},
{width: 100, height: 100, top: 100, left: 900}
]}
);
});
@@ -272,7 +272,7 @@ describe('Layout', function() {
]},
{width: 1000, height: 1000, top: 0, left: 0, children: [
{width: 200, height: 100, top: 0, left: 800},
{width: 100, height: 100, top: 100, left: 450},
{width: 100, height: 100, top: 100, left: 450}
]}
);
});
@@ -314,7 +314,7 @@ describe('Layout', function() {
testLayout(
{style: {height: 100}, children: [
{style: {height: 100}},
{style: {height: 200}},
{style: {height: 200}}
]},
{width: 0, height: 100, top: 0, left: 0, children: [
{width: 0, height: 100, top: 0, left: 0},
@@ -361,7 +361,7 @@ describe('Layout', function() {
it('should layout flex inside of an empty element', function() {
testLayout(
{style: {}, children: [
{style: {flex: 1}},
{style: {flex: 1}}
]},
{width: 0, height: 0, top: 0, left: 0, children: [
{width: 0, height: 0, top: 0, left: 0}
@@ -483,7 +483,7 @@ describe('Layout', function() {
{style: {width: 500, flexDirection: 'row'}, children: [
{style: {flex: 1}},
{style: {position: 'absolute', width: 50}},
{style: {flex: 1}},
{style: {flex: 1}}
]},
{width: 500, height: 0, top: 0, left: 0, children: [
{width: 250, height: 0, top: 0, left: 0},
@@ -685,7 +685,7 @@ describe('Layout', function() {
]},
{width: 0, height: 500, top: 0, left: 0, children: [
{width: 0, height: 500, top: 0, left: 0},
{width: 0, height: 0, top: 500, left: 0},
{width: 0, height: 0, top: 500, left: 0}
]}
);
});
@@ -932,7 +932,7 @@ describe('Layout', function() {
]},
{width: 100, height: 100, top: 0, left: 0, children: [
{width: 0, height: 25, top: 0, left: 0},
{width: 0, height: 75, top: 25, left: 0},
{width: 0, height: 75, top: 25, left: 0}
]}
);
});
@@ -945,7 +945,7 @@ describe('Layout', function() {
]},
{width: 100, height: 100, top: 0, left: 0, children: [
{width: 0, height: 0, top: 0, left: 0},
{width: 0, height: 0, top: 0, left: 0},
{width: 0, height: 0, top: 0, left: 0}
]}
);
});
@@ -958,7 +958,7 @@ describe('Layout', function() {
]},
{width: 50, height: 100, top: 0, left: 0, children: [
{width: 50, height: 100, top: 0, left: 0},
{width: 50, height: 0, top: 100, left: 0},
{width: 50, height: 0, top: 100, left: 0}
]}
);
});
@@ -1150,7 +1150,7 @@ describe('Layout', function() {
{style: {flexWrap: 'wrap', flexDirection: 'row', width: 100}, children: [
{style: {width: 40, height: 10}},
{style: {width: 40, height: 10}},
{style: {width: 40, height: 10}},
{style: {width: 40, height: 10}}
]},
{width: 100, height: 20, top: 0, left: 0, children: [
{width: 40, height: 10, top: 0, left: 0},
@@ -1164,7 +1164,7 @@ describe('Layout', function() {
testLayout(
{style: {height: 100, flexWrap: 'wrap'}, children: [
{style: {height: 100}},
{style: {height: 200}},
{style: {height: 200}}
]},
{width: 0, height: 100, top: 0, left: 0, children: [
{width: 0, height: 100, top: 0, left: 0},
@@ -1209,4 +1209,3 @@ describe('Layout', function() {
});
});

85
src/java/src/com/facebook/csslayout/LayoutEngine.java
View File

@@ -321,24 +321,29 @@ public class LayoutEngine {
// Let's not measure the text if we already know both dimensions
if (isRowUndefined || isColumnUndefined) {
MeasureOutput measure_dim = node.measure(
MeasureOutput measureDim = node.measure(
width
);
if (isRowUndefined) {
node.layout.width = measure_dim.width +
node.layout.width = measureDim.width +
getPaddingAndBorderAxis(node, CSSFlexDirection.ROW);
}
if (isColumnUndefined) {
node.layout.height = measure_dim.height +
node.layout.height = measureDim.height +
getPaddingAndBorderAxis(node, CSSFlexDirection.COLUMN);
}
}
return;
}
int i;
int ii;
CSSNode child;
CSSFlexDirection axis;
// Pre-fill some dimensions straight from the parent
for (int i = 0; i < node.getChildCount(); ++i) {
CSSNode child = node.getChildAt(i);
for (i = 0; i < node.getChildCount(); ++i) {
child = node.getChildAt(i);
// Pre-fill cross axis dimensions when the child is using stretch before
// we call the recursive layout pass
if (getAlignItem(node, child) == CSSAlign.STRETCH &&
@@ -355,8 +360,8 @@ public class LayoutEngine {
} else if (getPositionType(child) == CSSPositionType.ABSOLUTE) {
// Pre-fill dimensions when using absolute position and both offsets for the axis are defined (either both
// left and right or top and bottom).
for (int ii = 0; ii < 2; ii++) {
CSSFlexDirection axis = (ii != 0) ? CSSFlexDirection.ROW : CSSFlexDirection.COLUMN;
for (ii = 0; ii < 2; ii++) {
axis = (ii != 0) ? CSSFlexDirection.ROW : CSSFlexDirection.COLUMN;
if (!CSSConstants.isUndefined(getLayoutDimension(node, getDim(axis))) &&
!isDimDefined(child, axis) &&
isPosDefined(child, getLeading(axis)) &&
@@ -384,7 +389,7 @@ public class LayoutEngine {
// We want to execute the next two loops one per line with flex-wrap
int startLine = 0;
int endLine = 0;
int nextOffset = 0;
// int nextOffset = 0;
int alreadyComputedNextLayout = 0;
// We aggregate the total dimensions of the container in those two variables
float linesCrossDim = 0;
@@ -403,8 +408,10 @@ public class LayoutEngine {
int flexibleChildrenCount = 0;
float totalFlexible = 0;
int nonFlexibleChildrenCount = 0;
for (int i = startLine; i < node.getChildCount(); ++i) {
CSSNode child = node.getChildAt(i);
float maxWidth;
for (i = startLine; i < node.getChildCount(); ++i) {
child = node.getChildAt(i);
float nextContentDim = 0;
// It only makes sense to consider a child flexible if we have a computed
@@ -420,16 +427,16 @@ public class LayoutEngine {
getMarginAxis(child, mainAxis);
} else {
float maxWidth = CSSConstants.UNDEFINED;
if (mainAxis == CSSFlexDirection.ROW) {
// do nothing
} else if (isDimDefined(node, CSSFlexDirection.ROW)) {
maxWidth = getLayoutDimension(node, getDim(CSSFlexDirection.ROW)) -
getPaddingAndBorderAxis(node, CSSFlexDirection.ROW);
} else {
maxWidth = CSSConstants.UNDEFINED;
if (mainAxis != CSSFlexDirection.ROW) {
maxWidth = parentMaxWidth -
getMarginAxis(node, CSSFlexDirection.ROW) -
getPaddingAndBorderAxis(node, CSSFlexDirection.ROW);
if (isDimDefined(node, CSSFlexDirection.ROW)) {
maxWidth = getLayoutDimension(node, getDim(CSSFlexDirection.ROW)) -
getPaddingAndBorderAxis(node, CSSFlexDirection.ROW);
}
}
// This is the main recursive call. We layout non flexible children.
@@ -490,21 +497,19 @@ public class LayoutEngine {
// We iterate over the full array and only apply the action on flexible
// children. This is faster than actually allocating a new array that
// contains only flexible children.
for (int i = startLine; i < endLine; ++i) {
CSSNode child = node.getChildAt(i);
for (i = startLine; i < endLine; ++i) {
child = node.getChildAt(i);
if (isFlex(child)) {
// At this point we know the final size of the element in the main
// dimension
setLayoutDimension(child, getDim(mainAxis), flexibleMainDim * getFlex(child) +
getPaddingAndBorderAxis(child, mainAxis));
float maxWidth = CSSConstants.UNDEFINED;
if (mainAxis == CSSFlexDirection.ROW) {
// do nothing
} else if (isDimDefined(node, CSSFlexDirection.ROW)) {
maxWidth = CSSConstants.UNDEFINED;
if (isDimDefined(node, CSSFlexDirection.ROW)) {
maxWidth = getLayoutDimension(node, getDim(CSSFlexDirection.ROW)) -
getPaddingAndBorderAxis(node, CSSFlexDirection.ROW);
} else {
} else if (mainAxis != CSSFlexDirection.ROW) {
maxWidth = parentMaxWidth -
getMarginAxis(node, CSSFlexDirection.ROW) -
getPaddingAndBorderAxis(node, CSSFlexDirection.ROW);
@@ -519,9 +524,7 @@ public class LayoutEngine {
// space available
} else {
CSSJustify justifyContent = getJustifyContent(node);
if (justifyContent == CSSJustify.FLEX_START) {
// Do nothing
} else if (justifyContent == CSSJustify.CENTER) {
if (justifyContent == CSSJustify.CENTER) {
leadingMainDim = remainingMainDim / 2;
} else if (justifyContent == CSSJustify.FLEX_END) {
leadingMainDim = remainingMainDim;
@@ -551,8 +554,8 @@ public class LayoutEngine {
float mainDim = leadingMainDim +
getPaddingAndBorder(node, getLeading(mainAxis));
for (int i = startLine; i < endLine; ++i) {
CSSNode child = node.getChildAt(i);
for (i = startLine; i < endLine; ++i) {
child = node.getChildAt(i);
if (getPositionType(child) == CSSPositionType.ABSOLUTE &&
isPosDefined(child, getLeading(mainAxis))) {
@@ -584,7 +587,7 @@ public class LayoutEngine {
float containerMainAxis = getLayoutDimension(node, getDim(mainAxis));
// If the user didn't specify a width or height, and it has not been set
// by the container, then we set it via the children.
if (CSSConstants.isUndefined(getLayoutDimension(node, getDim(mainAxis)))) {
if (CSSConstants.isUndefined(containerMainAxis)) {
containerMainAxis = Math.max(
// We're missing the last padding at this point to get the final
// dimension
@@ -607,8 +610,8 @@ public class LayoutEngine {
// <Loop D> Position elements in the cross axis
for (int i = startLine; i < endLine; ++i) {
CSSNode child = node.getChildAt(i);
for (i = startLine; i < endLine; ++i) {
child = node.getChildAt(i);
if (getPositionType(child) == CSSPositionType.ABSOLUTE &&
isPosDefined(child, getLeading(crossAxis))) {
@@ -626,9 +629,7 @@ public class LayoutEngine {
// alignSelf (child) in order to determine the position in the cross axis
if (getPositionType(child) == CSSPositionType.RELATIVE) {
CSSAlign alignItem = getAlignItem(node, child);
if (alignItem == CSSAlign.FLEX_START) {
// Do nothing
} else if (alignItem == CSSAlign.STRETCH) {
if (alignItem == CSSAlign.STRETCH) {
// You can only stretch if the dimension has not already been set
// previously.
if (!isDimDefined(child, crossAxis)) {
@@ -640,7 +641,7 @@ public class LayoutEngine {
getPaddingAndBorderAxis(child, crossAxis)
));
}
} else {
} else if (alignItem != CSSAlign.FLEX_START) {
// The remaining space between the parent dimensions+padding and child
// dimensions+margin.
float remainingCrossDim = containerCrossAxis -
@@ -689,13 +690,13 @@ public class LayoutEngine {
// <Loop E> Calculate dimensions for absolutely positioned elements
for (int i = 0; i < node.getChildCount(); ++i) {
CSSNode child = node.getChildAt(i);
for (i = 0; i < node.getChildCount(); ++i) {
child = node.getChildAt(i);
if (getPositionType(child) == CSSPositionType.ABSOLUTE) {
// Pre-fill dimensions when using absolute position and both offsets for the axis are defined (either both
// left and right or top and bottom).
for (int ii = 0; ii < 2; ii++) {
CSSFlexDirection axis = (ii != 0) ? CSSFlexDirection.ROW : CSSFlexDirection.COLUMN;
for (ii = 0; ii < 2; ii++) {
axis = (ii != 0) ? CSSFlexDirection.ROW : CSSFlexDirection.COLUMN;
if (!CSSConstants.isUndefined(getLayoutDimension(node, getDim(axis))) &&
!isDimDefined(child, axis) &&
isPosDefined(child, getLeading(axis)) &&
@@ -711,8 +712,8 @@ public class LayoutEngine {
));
}
}
for (int ii = 0; ii < 2; ii++) {
CSSFlexDirection axis = (ii != 0) ? CSSFlexDirection.ROW : CSSFlexDirection.COLUMN;
for (ii = 0; ii < 2; ii++) {
axis = (ii != 0) ? CSSFlexDirection.ROW : CSSFlexDirection.COLUMN;
if (isPosDefined(child, getTrailing(axis)) &&
!isPosDefined(child, getLeading(axis))) {
setLayoutPosition(child, getLeading(axis), getLayoutDimension(node, getDim(axis)) -

52
src/transpile.js
View File

@@ -41,6 +41,14 @@ function printLayout(test) {
var level = 1;
var res = [];
function indent(level) {
var result = '';
for (var i = 0; i < level; ++i) {
result += ' ';
}
return result;
}
function add(str) {
if (str.length > 0) {
str = indent(level) + str;
@@ -49,18 +57,7 @@ function printLayout(test) {
}
function isEmpty(obj) {
for (var key in obj) {
return false;
}
return true;
}
function indent(level) {
var result = '';
for (var i = 0; i < level; ++i) {
result += ' ';
}
return result;
return !Object.keys(obj).length;
}
add('{');
@@ -73,24 +70,22 @@ function printLayout(test) {
if (!isEmpty(test.node.style) || test.node.children && test.node.children.length) {
add('css_node_t *node_0 = root_node;');
}
function rec_style(node) {
function recStyle(node) {
function addStyle(str) {
add('node_' + (level - 3) + '->style.' + str);
}
function addEnum(node, js_key, c_key, dict) {
if (js_key in node.style) {
addStyle(c_key + ' = ' + dict[node.style[js_key]] + ';');
function addEnum(node, jsKey, cKey, dict) {
if (jsKey in node.style) {
addStyle(cKey + ' = ' + dict[node.style[jsKey]] + ';');
}
}
function addFloat(positive, node, js_key, c_key) {
if (js_key in node.style) {
if (positive === 'positive' && node.style[js_key] < 0) {
// do nothing
} else {
addStyle(c_key + ' = ' + node.style[js_key] + ';');
function addFloat(positive, node, jsKey, cKey) {
if (jsKey in node.style) {
if (positive !== 'positive' || node.style[jsKey] >= 0) {
addStyle(cKey + ' = ' + node.style[jsKey] + ';');
}
}
}
@@ -165,14 +160,14 @@ function printLayout(test) {
for (var i = 0; i < node.children.length; ++i) {
add('node_' + (level - 3) + ' = node_' + (level - 4) + '->get_child(node_' + (level - 4) + '->context, ' + i + ');');
rec_style(node.children[i]);
recStyle(node.children[i]);
}
level--;
add('}');
}
}
rec_style(test.node);
recStyle(test.node);
level--;
add('}');
add('');
@@ -183,7 +178,7 @@ function printLayout(test) {
level++;
add('css_node_t *node_0 = root_layout;');
function rec_layout(node) {
function recLayout(node) {
function addLayout(str) {
add('node_' + (level - 3) + '->layout.' + str);
}
@@ -201,14 +196,14 @@ function printLayout(test) {
for (var i = 0; i < node.children.length; ++i) {
add('node_' + (level - 3) + ' = node_' + (level - 4) + '->get_child(node_' + (level - 4) + '->context, ' + i + ');');
rec_layout(node.children[i]);
recLayout(node.children[i]);
}
level--;
add('}');
}
}
rec_layout(test.expectedLayout);
recLayout(test.expectedLayout);
level--;
add('}');
add('');
@@ -237,13 +232,14 @@ function transpileAnnotatedJStoC(jsCode) {
.replace(/var\/\*([^\/]+)\*\//g, '$1')
.replace(/ === /g, ' == ')
.replace(/ !== /g, ' != ')
.replace(/\n /g, '\n')
.replace(/\n {2}/g, '\n')
.replace(/\/\*\(c\)!([^*]+)\*\//g, '$1')
.replace(/\/[*]!([^*]+)[*]\//g, '$1')
.split('\n').slice(1, -1).join('\n');
}
function makeConstDefs() {
/* eslint no-multi-spaces: 3 */
var lines = [
'#define SMALL_WIDTH ' + layoutTestUtils.textSizes.smallWidth,
'#define SMALL_HEIGHT ' + layoutTestUtils.textSizes.smallHeight,