Support elements from other documents/scopes

docs/index.html

@@ -20,5 +20,5 @@
 
 ro.observe(someElement);
     </code>
-  </pre> <div resize=""></div> <h2>Pseudo Classes</h2> <p>The library supports user-actioned pseudo classes, like <code>:hover</code>, <code>:active</code>, <code>:focus</code></p> <div resize="" id="pseudo-example" class="interactive-example" tabindex="0">Hover, click or focus me.</div> <h2>Animations*</h2> <p>The library will detect changes which occur during animations.</p> <div resize="" id="animation-example" class="interactive-example">Tap me.</div> <h2>Transitions*</h2> <p>The library will detect changes which occur during transition.</p> <div resize="" id="transition-example" class="interactive-example">Tap me.</div> <p> <strong>NB:</strong> Slow-starting transitions may not be noticed, unless, other interactions occur in the application. Any missed calculations will be noticed at the end of the transition. </p> <h2>Performance Test</h2> <p>This animates 200 elements and counts the changes. To start/stop the animation, tap the cell area.</p> <p>Updates: <span id="performance-count">0</span></p> <div id="performance-example"></div> <hr> <p><strong style="float:left;margin-left:-1em">*</strong>Once the animation, or, transition has finished, the observer will sleep and wait for the next interaction. This keeps CPU idle, reducing battery consumption on portable devices.</p> </main> <script src="page.02dbdc8d.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.6/highlight.min.js"></script> <script>function a(){dataLayer.push(arguments)}window.dataLayer=window.dataLayer||[],a("js",new Date),a("config","UA-5301534-8"),hljs.initHighlightingOnLoad();</script>
+  </pre> <div resize=""></div> <h2>Pseudo Classes</h2> <p>The library supports user-actioned pseudo classes, like <code>:hover</code>, <code>:active</code>, <code>:focus</code></p> <div resize="" id="pseudo-example" class="interactive-example" tabindex="0">Hover, click or focus me.</div> <h2>Animations*</h2> <p>The library will detect changes which occur during animations.</p> <div resize="" id="animation-example" class="interactive-example">Tap me.</div> <h2>Transitions*</h2> <p>The library will detect changes which occur during transition.</p> <div resize="" id="transition-example" class="interactive-example">Tap me.</div> <p> <strong>NB:</strong> Slow-starting transitions may not be noticed, unless, other interactions occur in the application. Any missed calculations will be noticed at the end of the transition. </p> <h2>Performance Test</h2> <p>This animates 200 elements and counts the changes. To start/stop the animation, tap the cell area.</p> <p>Updates: <span id="performance-count">0</span></p> <div id="performance-example"></div> <hr> <p><strong style="float:left;margin-left:-1em">*</strong>Once the animation, or, transition has finished, the observer will sleep and wait for the next interaction. This keeps CPU idle, reducing battery consumption on portable devices.</p> </main> <script src="page.39d7254d.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.6/highlight.min.js"></script> <script>function a(){dataLayer.push(arguments)}window.dataLayer=window.dataLayer||[],a("js",new Date),a("config","UA-5301534-8"),hljs.initHighlightingOnLoad();</script>
 </body></html>

package.json

@@ -50,20 +50,20 @@
   },
   "homepage": "https://juggle.studio/resize-observer/",
   "devDependencies": {
-    "@types/jest": "^24.0.15",
-    "@typescript-eslint/eslint-plugin": "^1.11.0",
-    "@typescript-eslint/parser": "^1.11.0",
-    "core-js": "^3.1.4",
-    "coveralls": "^3.0.4",
+    "@types/jest": "^24.9.1",
+    "@typescript-eslint/eslint-plugin": "^1.13.0",
+    "@typescript-eslint/parser": "^1.13.0",
+    "core-js": "^3.6.4",
+    "coveralls": "^3.0.9",
     "cssnano": "^4.1.10",
-    "eslint": "^6.0.1",
-    "jest": "^24.8.0",
-    "jest-cli": "^24.8.0",
+    "eslint": "^6.8.0",
+    "jest": "^24.9.0",
+    "jest-cli": "^24.9.0",
     "jest-junit": "^6.4.0",
-    "jsdom": "^15.1.1",
+    "jsdom": "^15.2.1",
     "parcel-bundler": "^1.12.4",
-    "rollup": "^1.27.9",
-    "ts-jest": "^24.0.2",
-    "typescript": "^3.5.2"
+    "rollup": "^1.32.0",
+    "ts-jest": "^24.3.0",
+    "typescript": "^3.8.2"
   }
 }

src/ResizeObserver.ts

@@ -1,6 +1,7 @@
 import { ResizeObserverController } from './ResizeObserverController';
 import { ResizeObserverCallback } from './ResizeObserverCallback';
 import { ResizeObserverOptions } from './ResizeObserverOptions';
+import { isElement } from './utils/element';
 
 /**
  * https://drafts.csswg.org/resize-observer-1/#resize-observer-interface
@@ -21,7 +22,7 @@ class ResizeObserver {
     if (arguments.length === 0) {
       throw new TypeError(`Failed to execute 'observe' on 'ResizeObserver': 1 argument required, but only 0 present.`)
     }
-    if (target instanceof Element === false) {
+    if (!isElement(target)) {
       throw new TypeError(`Failed to execute 'observe' on 'ResizeObserver': parameter 1 is not of type 'Element`);
     }
     ResizeObserverController.observe(this, target, options);

src/utils/element.ts

@@ -11,6 +11,12 @@ const isHidden = (target: Element): boolean => {
   return !(offsetWidth || offsetHeight || target.getClientRects().length);
 }
 
+// Checks if an object is an Element
+const isElement = (obj: unknown): boolean => {
+  const scope = (obj as Element)?.ownerDocument?.defaultView;
+  return !!(scope && obj instanceof (scope as unknown as typeof globalThis).Element);
+};
+
 const isReplacedElement = (target: Element): boolean => {
   switch (target.tagName) {
     case 'INPUT':
@@ -32,5 +38,6 @@ const isReplacedElement = (target: Element): boolean => {
 export {
   isSVG,
   isHidden,
+  isElement,
   isReplacedElement
 };

test/dom-rect-read-only.test.ts

@@ -48,7 +48,7 @@ describe('DOMRectReadOnly', (): void => {
       height: 20
     });
   });
-  it('Should support toJSON()', () => {
+  it('Should support toJSON()', (): void => {
     const rect = new DOMRectReadOnly(5, 10, 15, 20);
     expect('toJSON' in rect).toBeTruthy;
     const rectJSON = rect.toJSON();

test/resize-observer-basic.test.ts

@@ -65,6 +65,15 @@ describe('Basics', (): void => {
     expect(fn).toThrowError(`Failed to execute 'observe' on 'ResizeObserver': parameter 1 is not of type 'Element`);
   })
 
+  test('Throw error when a null target is passed to observe()', (): void => {
+    const fn = (): void => {
+      ro = new ResizeObserver((): void => {});
+      // @ts-ignore
+      ro.observe(null);
+    };
+    expect(fn).toThrowError(`Failed to execute 'observe' on 'ResizeObserver': parameter 1 is not of type 'Element`);
+  })
+
   test('Throw error when no target is passed to unobserve()', (): void => {
     const fn = (): void => {
       ro = new ResizeObserver((): void => {});