Change gentest to only write position relative to parent

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

gentest/gentest.js

@@ -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'),