fix: getOuterSizes returning NaN for virtual elements

[RatoX]

When the element is not attach at the DOM the getComputedStyle returns
a empty string making the convertion to float parseFloat(styles.marginTop)
return NaN.

• Add tests to cover the bug
• yarn test

[FezVrasta]

Thanks for the PR!
May you please explain me what's the advantage of this approach? Do we care to return some number value in cases like this?

[RatoX]

There is no advantage to using this approach, we just need to return a valid number without it we end up with translate positions like that: translate3d(NaNpx, NaNpx, 0)

[RatoX]

Let me show you what's going on:

export default function getOuterSizes(element) {
  const window = element.ownerDocument.defaultView;

  // When the element is no attach to the DOM, the getComputedStyle returns empty for all properties 
  const styles = window.getComputedStyle(element); 

 // parseFloat do not convert empty strings in zero it will return a NaN 
  const x = parseFloat(styles.marginTop) + parseFloat(styles.marginBottom);
  const y = parseFloat(styles.marginLeft) + parseFloat(styles.marginRight);

// Any operation with NaN always return NaN
  const result = {
    width: element.offsetWidth + y,
    height: element.offsetHeight + x,
   };

// So this function will return a object like that:
// {
//    width: NaN,
//    height: NaN
// }
   return result;
 }

This is making the rest of the lib broke on non-attached elements. :/

Some references about this bug:

• https://bugs.chromium.org/p/chromium/issues/detail?id=558165
• https://stackoverflow.com/questions/35360711/getcomputedstyle-returns-a-cssstyledeclaration-but-all-properties-are-empty-on-a
• Run it on Chrome 70.0.3538.77 and Firefox 63.0.1 (64-bit) http://jsfiddle.net/3wz4xdgq/3/

By the way, nice lib!!! I was using this lib a long time ago, and I'm glad to be able to contribute to something.

[FezVrasta]

Thanks for the reply.

I'd like to understand if, returning 0 rather than NaN, do you expect the library to work properly? I guess you are just going to have a popper with a wrong position, am I correct?

[RatoX]

returning 0 rather than NaN, do you expect the library to work properly?

Yes, I do. I already check it, since the element is not on the DOM yet there is no margin to calc the outerSize, so this function will calc only with the offsetWidth and offsetHeight.

[RatoX]

<3