f65febb1af
Summary: Remove output properties from computed styles as they will be computed to their output values before we can read them. Only include them if they are explicitly set by the user. Reviewed By: IanChilds Differential Revision: D3770917 fbshipit-source-id: e55996cf8744073496debea19c36a188d2e5086c
400 lines
12 KiB
JavaScript
Executable File
400 lines
12 KiB
JavaScript
Executable File
/**
|
|
* 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(' *');
|
|
lines.push(rootNode.innerHTML.split('\n').map(function(line) {
|
|
return line.trim();
|
|
}).filter(function(line) {
|
|
return line.length > 0 && line !== '<div id="default"></div>';
|
|
}).map(function(line) {
|
|
return ' * ' + line;
|
|
}).reduce(function(curr, prev) {
|
|
return curr + '\n' + prev;
|
|
}));
|
|
lines.push(' *');
|
|
lines.push(' */');
|
|
lines.push('');
|
|
|
|
lines.push([
|
|
'#include <CSSLayout/CSSLayout-internal.h>',
|
|
'#include <CSSLayoutTestUtils/CSSLayoutTestUtils.h>',
|
|
'#include <gtest/gtest.h>',
|
|
'',
|
|
].reduce(function(curr, prev) {
|
|
return curr + '\n' + prev;
|
|
}));
|
|
|
|
for (var i = 0; i < layoutTree.length - 1; i++) {
|
|
lines.push('TEST(CSSLayoutTest, INSERT_NAME_HERE) {');
|
|
|
|
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('CSSNodeSetDirection(' + 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('CSSNodeSetFlexWrap(' + nodeName + ', ' + wrapValue(node.style[style]) + ');');
|
|
break;
|
|
case 'overflow':
|
|
lines.push('CSSNodeSetOverflow(' + 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) {
|
|
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({
|
|
left: child.offsetLeft,
|
|
top: child.offsetTop,
|
|
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;
|
|
}, {});
|
|
}
|