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

Change gentest to only write position relative to parent

Browse Source 
Summary:
`child.offsetLeft/Top` calculates the offset from child to its nearest positioned ancestor, not its direct parent. These are often the same and have not mattered in the past since we have not supported position static. Since are are in the process of supporting that, we would like our tests to be usable so this adjusts the gentest methodology to only speak the same language as Yoga - that is left/top are always relative to direct parents.

It works by using `getBoundingClientRect().left/top` instead. Then we pass that down to children and subtract it from the childs `getBoundingClientRect()` to get the position relative to the parent. Note we have to round the final result as `child.offsetLeft/Top` is rounded.

Reviewed By: NickGerleman

Differential Revision: D51053629

fbshipit-source-id: 8809588d12953565228ae50fdf38197213c46182
This commit is contained in:
Joe Vilches
2023-11-07 09:57:04 -08:00
committed by Facebook GitHub Bot
parent 301ed20296
commit 484118c89b
4 changed files with 155 additions and 154 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
gentest/gentest.js
View File

@@ -61,9 +61,9 @@ function printTest(e, ext, LTRContainer, RTLContainer, genericContainer) {
]);
e.emitPrologue();
const LTRLayoutTree = calculateTree(LTRContainer);
const RTLLayoutTree = calculateTree(RTLContainer);
const genericLayoutTree = calculateTree(genericContainer);
const LTRLayoutTree = calculateTree(LTRContainer, 0, 0);
const RTLLayoutTree = calculateTree(RTLContainer, 0, 0);
const genericLayoutTree = calculateTree(genericContainer, 0, 0);
for (let i = 0; i < genericLayoutTree.length; i++) {
e.emitTestPrologue(
@@ -679,18 +679,19 @@ function getRoundedSize(node) {
};
}
function calculateTree(root) {
function calculateTree(root, parentOffsetLeft, parentOffsetTop) {
const rootLayout = [];
for (let i = 0; i < root.children.length; i++) {
const child = root.children[i];
const boundingRect = child.getBoundingClientRect();
const layout = {
name: child.id !== '' ? child.id : 'INSERT_NAME_HERE',
left: child.offsetLeft + child.parentNode.clientLeft,
top: child.offsetTop + child.parentNode.clientTop,
left: Math.round(boundingRect.left - parentOffsetLeft),
top: Math.round(boundingRect.top - parentOffsetTop),
width: child.offsetWidth,
height: child.offsetHeight,
children: calculateTree(child),
children: calculateTree(child, boundingRect.left, boundingRect.top),
style: getYogaStyle(child),
declaredStyle: child.style,
rawStyle: child.getAttribute('style'),