#450@trivial: Continue on Range implementation.

packages/happy-dom/src/nodes/element/DOMRectListFactory.ts

@@ -0,0 +1,33 @@
+import DOMRect from './DOMRect';
+import IDOMRectList from './IDOMRectList';
+
+/**
+ * DOM rect list factory.
+ *
+ * @see https://developer.mozilla.org/en-US/docs/Web/API/Element/getClientRects
+ */
+export default class DOMRectListFactory {
+	/**
+	 * Creates an HTMLCollection.
+	 *
+	 * @param list Nodes.
+	 * @returns HTMLCollection.
+	 */
+	public static create(list?: DOMRect[]): IDOMRectList<DOMRect> {
+		list = list ? list.slice() : [];
+		Object.defineProperty(list, 'item', {
+			value: this.getItem.bind(null, list)
+		});
+		return <IDOMRectList<DOMRect>>list;
+	}
+
+	/**
+	 * Returns node by index.
+	 *
+	 * @param list
+	 * @param index Index.
+	 */
+	private static getItem(list: DOMRect[], index: number): DOMRect {
+		return list[index] || null;
+	}
+}

packages/happy-dom/src/nodes/element/Element.ts

@@ -25,6 +25,8 @@ import INodeList from '../node/INodeList';
 import HTMLCollectionFactory from './HTMLCollectionFactory';
 import { TInsertAdjacentPositions } from './IElement';
 import IText from '../text/IText';
+import IDOMRectList from './IDOMRectList';
+import DOMRectListFactory from './DOMRectListFactory';
 
 /**
  * Element.
@@ -680,16 +682,19 @@ export default class Element extends Node implements IElement {
 	 * @returns DOM rect.
 	 */
 	public getBoundingClientRect(): DOMRect {
+		// TODO: Not full implementation
 		return new DOMRect();
 	}
 
 	/**
-	 * Returns a range.
+	 * Returns a collection of DOMRect objects that indicate the bounding rectangles for each CSS border box in a client.
 	 *
-	 * @returns Range.
+	 * @see https://developer.mozilla.org/en-US/docs/Web/API/Element/getClientRects
+	 * @returns DOM rect list.
 	 */
-	public createTextRange(): Range {
-		return new Range();
+	public getClientRects(): IDOMRectList<DOMRect> {
+		// TODO: Not full implementation
+		return DOMRectListFactory.create([this.getBoundingClientRect()]);
 	}
 
 	/**

packages/happy-dom/src/nodes/element/IDOMRectList.ts

@@ -0,0 +1,11 @@
+/**
+ * HTMLCollection.
+ */
+export default interface IDOMRectList<T> extends Array<T> {
+	/**
+	 * Returns item by index.
+	 *
+	 * @param index Index.
+	 */
+	item(index: number): T;
+}

packages/happy-dom/src/nodes/element/IElement.ts

@@ -1,12 +1,12 @@
 import IShadowRoot from '../shadow-root/IShadowRoot';
 import Attr from '../../attribute/Attr';
 import DOMRect from './DOMRect';
-import Range from './Range';
 import IDOMTokenList from '../../dom-token-list/IDOMTokenList';
 import INode from './../node/INode';
 import IChildNode from '../child-node/IChildNode';
 import IParentNode from '../parent-node/IParentNode';
 import INonDocumentTypeChildNode from '../child-node/INonDocumentTypeChildNode';
+import IDOMRectList from './IDOMRectList';
 
 export type TInsertAdjacentPositions = 'beforebegin' | 'afterbegin' | 'beforeend' | 'afterend';
 
@@ -161,11 +161,12 @@ export default interface IElement extends IChildNode, INonDocumentTypeChildNode,
 	getBoundingClientRect(): DOMRect;
 
 	/**
-	 * Returns a range.
+	 * Returns a collection of DOMRect objects that indicate the bounding rectangles for each CSS border box in a client.
 	 *
-	 * @returns Range.
+	 * @see https://developer.mozilla.org/en-US/docs/Web/API/Element/getClientRects
+	 * @returns DOM rect list.
 	 */
-	createTextRange(): Range;
+	getClientRects(): IDOMRectList<DOMRect>;
 
 	/**
 	 * The matches() method checks to see if the Element would be selected by the provided selectorString.

packages/happy-dom/src/nodes/node/Node.ts

@@ -1,7 +1,7 @@
 import EventTarget from '../../event/EventTarget';
 import MutationRecord from '../../mutation-observer/MutationRecord';
 import MutationTypeEnum from '../../mutation-observer/MutationTypeEnum';
-import MutationObserverListener from '../../mutation-observer/MutationListener';
+import MutationListener from '../../mutation-observer/MutationListener';
 import Event from '../../event/Event';
 import INode from './INode';
 import DOMException from '../../exception/DOMException';
@@ -37,10 +37,10 @@ export default class Node extends EventTarget implements INode {
 	public readonly nodeType: number;
 	public readonly childNodes: INodeList<INode> = NodeListFactory.create();
 	public readonly isConnected: boolean = false;
-	public _rootNode: INode = null;
 
 	// Custom Properties (not part of HTML standard)
-	protected _observers: MutationObserverListener[] = [];
+	public _rootNode: INode = null;
+	public _observers: MutationListener[] = [];
 
 	/**
 	 * Constructor.
@@ -460,7 +460,7 @@ export default class Node extends EventTarget implements INode {
 	 *
 	 * @param listener Listener.
 	 */
-	public _observe(listener: MutationObserverListener): void {
+	public _observe(listener: MutationListener): void {
 		this._observers.push(listener);
 		if (listener.options.subtree) {
 			for (const node of this.childNodes) {
@@ -475,7 +475,7 @@ export default class Node extends EventTarget implements INode {
 	 *
 	 * @param listener Listener.
 	 */
-	public _unobserve(listener: MutationObserverListener): void {
+	public _unobserve(listener: MutationListener): void {
 		const index = this._observers.indexOf(listener);
 		if (index !== -1) {
 			this._observers.splice(index, 1);

packages/happy-dom/src/nodes/node/NodeUtility.ts

@@ -93,7 +93,7 @@ export default class NodeUtility {
 	 * @param [root] Root.
 	 * @returns Following node.
 	 */
-	private static following(node: INode, root?: INode): INode {
+	public static following(node: INode, root?: INode): INode {
 		const firstChild = node.firstChild;
 
 		if (firstChild) {
@@ -118,4 +118,22 @@ export default class NodeUtility {
 
 		return null;
 	}
+
+	/**
+	 * Returns the next sibling or parents sibling.
+	 *
+	 * @param node Node.
+	 * @returns Next decentant node.
+	 */
+	public static nextDecendantNode(node: INode): INode {
+		while (node && !node.nextSibling) {
+			node = node.parentNode;
+		}
+
+		if (!node) {
+			return null;
+		}
+
+		return node.nextSibling;
+	}
 }