/** * Copyright (c) 2014-present, Facebook, Inc. * All rights reserved. * * This source code is licensed under the BSD-style license found in the * LICENSE file in the root directory of this source tree. An additional grant * of patent rights can be found in the PATENTS file in the same directory. */ window.onload = function() { printTest(document.body.children[0], calculateTree(document.body.children[0])); } function printTest(rootNode, layoutTree) { var lines = [ '/**', ' * Copyright (c) 2014-present, Facebook, Inc.', ' * All rights reserved.', ' *', ' * This source code is licensed under the BSD-style license found in the', ' * LICENSE file in the root directory of this source tree. An additional grant', ' * of patent rights can be found in the PATENTS file in the same directory.', ' */', '', ]; lines.push('/**'); lines.push(' * @Generated by gentest/gentest.sh with the following input'); lines.push(' *'); var indentation = 0; lines.push(rootNode.innerHTML.split('\n').map(function(line) { return line.trim(); }).filter(function(line) { return line.length > 0 && line !== '
'; }).map(function(line) { var result; if (line.indexOf('', '#include ', '', ].reduce(function(curr, prev) { return curr + '\n' + prev; })); for (var i = 0; i < layoutTree.length - 1; i++) { lines.push('TEST(CSSLayoutTest, ' + layoutTree[i].name + ') {'); lines.push(' ' + setupTestTree(layoutTree[i], 'root', null).reduce(function(curr, prev) { return curr + '\n ' + prev; })); lines.push(' CSSNodeCalculateLayout(root, CSSUndefined, CSSUndefined, CSSDirectionLTR);'); lines.push(''); lines.push(' ' + assertTestTree(layoutTree[i], 'root', null).reduce(function(curr, prev) { return curr + '\n ' + prev; })); lines.push('}'); lines.push(''); } printLines(lines); } function assertTestTree(node, nodeName, parentName) { var lines = [ 'ASSERT_EQ(' + node.left + ', CSSNodeLayoutGetLeft(' + nodeName + '));', 'ASSERT_EQ(' + node.top + ', CSSNodeLayoutGetTop(' + nodeName + '));', 'ASSERT_EQ(' + node.width + ', CSSNodeLayoutGetWidth(' + nodeName + '));', 'ASSERT_EQ(' + node.height + ', CSSNodeLayoutGetHeight(' + nodeName + '));', ]; for (var i = 0; i < node.children.length; i++) { lines.push(''); var childName = nodeName + '_child' + i; lines = lines.concat(assertTestTree(node.children[i], childName, nodeName)); } return lines; } function setupTestTree(node, nodeName, parentName, index) { var lines = [ 'const CSSNodeRef ' + nodeName + ' = CSSNodeNew();', ]; for (var style in node.style) { // Skip position info for root as it messes up tests if (node.declaredStyle[style] === "" && (style == 'position' || style == 'left' || style == 'top' || style == 'right' || style == 'bottom' || style == 'width' || style == 'height')) { continue; } if (node.style[style] !== getDefaultStyleValue(style)) { switch (style) { case 'direction': lines.push('CSSNodeStyleSetDirection(' + nodeName + ', ' + directionValue(node.style[style]) + ');'); break; case 'flex-direction': lines.push('CSSNodeStyleSetFlexDirection(' + nodeName + ', ' + flexDirectionValue(node.style[style]) + ');'); break; case 'justify-content': lines.push('CSSNodeStyleSetJustifyContent(' + nodeName + ', ' + justifyValue(node.style[style]) + ');'); break; case 'align-content': lines.push('CSSNodeStyleSetAlignContent(' + nodeName + ', ' + alignValue(node.style[style]) + ');'); break; case 'align-items': lines.push('CSSNodeStyleSetAlignItems(' + nodeName + ', ' + alignValue(node.style[style]) + ');'); break; case 'align-self': lines.push('CSSNodeStyleSetAlignSelf(' + nodeName + ', ' + alignValue(node.style[style]) + ');'); break; case 'position': lines.push('CSSNodeStyleSetPositionType(' + nodeName + ', ' + positionValue(node.style[style]) + ');'); break; case 'flex-wrap': lines.push('CSSNodeStyleSetFlexWrap(' + nodeName + ', ' + wrapValue(node.style[style]) + ');'); break; case 'overflow': lines.push('CSSNodeStyleSetOverflow(' + nodeName + ', ' + overflowValue(node.style[style]) + ');'); break; case 'flex-grow': lines.push('CSSNodeStyleSetFlexGrow(' + nodeName + ', ' + node.style[style] + ');'); break; case 'flex-shrink': lines.push('CSSNodeStyleSetFlexShrink(' + nodeName + ', ' + node.style[style] + ');'); break; case 'flex-basis': lines.push('CSSNodeStyleSetFlexBasis(' + nodeName + ', ' + pixelValue(node.style[style]) + ');'); break; case 'left': lines.push('CSSNodeStyleSetPosition(' + nodeName + ', CSSEdgeLeft, ' + pixelValue(node.style[style]) + ');'); break; case 'top': lines.push('CSSNodeStyleSetPosition(' + nodeName + ', CSSEdgeTop, ' + pixelValue(node.style[style]) + ');'); break; case 'right': lines.push('CSSNodeStyleSetPosition(' + nodeName + ', CSSEdgeRight, ' + pixelValue(node.style[style]) + ');'); break; case 'bottom': lines.push('CSSNodeStyleSetPosition(' + nodeName + ', CSSEdgeBottom, ' + pixelValue(node.style[style]) + ');'); break; case 'margin-left': lines.push('CSSNodeStyleSetMargin(' + nodeName + ', CSSEdgeLeft, ' + pixelValue(node.style[style]) + ');'); break; case 'margin-top': lines.push('CSSNodeStyleSetMargin(' + nodeName + ', CSSEdgeTop, ' + pixelValue(node.style[style]) + ');'); break; case 'margin-right': lines.push('CSSNodeStyleSetMargin(' + nodeName + ', CSSEdgeRight, ' + pixelValue(node.style[style]) + ');'); break; case 'margin-bottom': lines.push('CSSNodeStyleSetMargin(' + nodeName + ', CSSEdgeBottom, ' + pixelValue(node.style[style]) + ');'); break; case 'padding-left': lines.push('CSSNodeStyleSetPadding(' + nodeName + ', CSSEdgeLeft, ' + pixelValue(node.style[style]) + ');'); break; case 'padding-top': lines.push('CSSNodeStyleSetPadding(' + nodeName + ', CSSEdgeTop, ' + pixelValue(node.style[style]) + ');'); break; case 'padding-right': lines.push('CSSNodeStyleSetPadding(' + nodeName + ', CSSEdgeRight, ' + pixelValue(node.style[style]) + ');'); break; case 'padding-bottom': lines.push('CSSNodeStyleSetPadding(' + nodeName + ', CSSEdgeBottom, ' + pixelValue(node.style[style]) + ');'); break; case 'border-left-width': lines.push('CSSNodeStyleSetBorder(' + nodeName + ', CSSEdgeLeft, ' + pixelValue(node.style[style]) + ');'); break; case 'border-top-width': lines.push('CSSNodeStyleSetBorder(' + nodeName + ', CSSEdgeTop, ' + pixelValue(node.style[style]) + ');'); break; case 'border-right-width': lines.push('CSSNodeStyleSetBorder(' + nodeName + ', CSSEdgeRight, ' + pixelValue(node.style[style]) + ');'); break; case 'border-bottom-width': lines.push('CSSNodeStyleSetBorder(' + nodeName + ', CSSEdgeBottom, ' + pixelValue(node.style[style]) + ');'); break; case 'width': lines.push('CSSNodeStyleSetWidth(' + nodeName + ', ' + pixelValue(node.style[style]) + ');'); break; case 'min-width': lines.push('CSSNodeStyleSetMinWidth(' + nodeName + ', ' + pixelValue(node.style[style]) + ');'); break; case 'max-width': lines.push('CSSNodeStyleSetMaxWidth(' + nodeName + ', ' + pixelValue(node.style[style]) + ');'); break; case 'height': lines.push('CSSNodeStyleSetHeight(' + nodeName + ', ' + pixelValue(node.style[style]) + ');'); break; case 'min-height': lines.push('CSSNodeStyleSetMinHeight(' + nodeName + ', ' + pixelValue(node.style[style]) + ');'); break; case 'max-height': lines.push('CSSNodeStyleSetMaxHeight(' + nodeName + ', ' + pixelValue(node.style[style]) + ');'); break; } } } if (parentName) { lines.push('CSSNodeInsertChild(' + parentName + ', ' + nodeName + ', ' + index + ');'); } for (var i = 0; i < node.children.length; i++) { lines.push(''); var childName = nodeName + '_child' + i; lines = lines.concat(setupTestTree(node.children[i], childName, nodeName, i)); } return lines; } function overflowValue(value) { switch (value) { case 'visible': return 'CSSOverflowVisible'; case 'hidden': return 'CSSOverflowHidden'; } } function wrapValue(value) { switch (value) { case 'wrap': return 'CSSWrapTypeWrap'; case 'nowrap': return 'CSSWrapTypeNoWrap'; } } function flexDirectionValue(value) { switch (value) { case 'row': return 'CSSFlexDirectionRow'; case 'row-reverse': return 'CSSFlexDirectionRowReverse'; case 'column': return 'CSSFlexDirectionColumn'; case 'column-reverse': return 'CSSFlexDirectionColumnReverse'; } } function justifyValue(value) { switch (value) { case 'center': return 'CSSJustifyCenter'; case 'space-around': return 'CSSJustifySpaceAround'; case 'space-between': return 'CSSJustifySpaceBetween'; case 'flex-start': return 'CSSJustifyFlexStart'; case 'flex-end': return 'CSSJustifyFlexEnd'; } } function positionValue(value) { switch (value) { case 'absolute': return 'CSSPositionTypeAbsolute'; default: return 'CSSPositionTypeRelative' } } function directionValue(value) { switch (value) { case 'ltr': return 'CSSDirectionLTR'; case 'rtl': return 'CSSDirectionRTL'; case 'inherit': return 'CSSDirectionInherit'; } } function alignValue(value) { switch (value) { case 'auto': return 'CSSAlignAuto'; case 'center': return 'CSSAlignCenter'; case 'stretch': return 'CSSAlignStretch'; case 'flex-start': return 'CSSAlignFlexStart'; case 'flex-end': return 'CSSAlignFlexEnd'; } } function pixelValue(value) { switch (value) { case 'auto': return 'CSSUndefined'; case 'undefined': return 'CSSUndefined'; default: return value.replace('px', ''); } } function getDefaultStyleValue(style) { if (style == 'position') { return 'relative'; } var node = document.getElementById('default'); return getComputedStyle(node, null).getPropertyValue(style); } function printLines(lines) { console.log(lines.map(function(value) { return value + '\n'; }).reduce(function(prev, curr) { return prev + curr; }, '')); } function calculateTree(root) { var rootLayout = []; for (var i = 0; i < root.children.length; i++) { var child = root.children[i]; rootLayout.push({ name: child.id !== '' ? child.id : 'INSERT_NAME_HERE', left: child.offsetLeft + child.parentNode.clientLeft, top: child.offsetTop + child.parentNode.clientTop, width: child.offsetWidth, height: child.offsetHeight, children: calculateTree(child), style: getCSSLayoutStyle(child), declaredStyle: child.style, }); } return rootLayout; } function getCSSLayoutStyle(node) { return [ 'direction', 'flex-direction', 'justify-content', 'align-content', 'align-items', 'align-self', 'position', 'flex-wrap', 'overflow', 'flex-grow', 'flex-shrink', 'flex-basis', 'left', 'top', 'right', 'bottom', 'margin-left', 'margin-top', 'margin-right', 'margin-bottom', 'padding-left', 'padding-top', 'padding-right', 'padding-bottom', 'border-left-width', 'border-top-width', 'border-right-width', 'border-bottom-width', 'width', 'min-width', 'max-width', 'height', 'min-height', 'max-height', ].reduce(function(prev, curr) { prev[curr] = getComputedStyle(node, null).getPropertyValue(curr); return prev; }, {}); }