fix: [#1850] Selection API focusNode and focusOffset returning incorrect values

packages/happy-dom/src/selection/Selection.ts

@@ -127,7 +127,12 @@ export default class Selection {
 	 * @returns Node.
 	 */
 	public get focusNode(): Node | null {
-		return this.anchorNode;
+		if (!this.#range) {
+			return null;
+		}
+		return this.#direction === SelectionDirectionEnum.forwards
+			? this.#range.endContainer
+			: this.#range.startContainer;
 	}
 
 	/**
@@ -137,7 +142,12 @@ export default class Selection {
 	 * @returns Node.
 	 */
 	public get focusOffset(): number {
-		return this.anchorOffset;
+		if (!this.#range) {
+			return 0;
+		}
+		return this.#direction === SelectionDirectionEnum.forwards
+			? this.#range.endOffset
+			: this.#range.startOffset;
 	}
 
 	/**

packages/happy-dom/test/selection/Selection.test.ts

@@ -68,7 +68,7 @@ describe('Selection', () => {
 		});
 	});
 
-	for (const property of ['anchorNode', 'baseNode', 'focusNode', 'extentNode']) {
+	for (const property of ['anchorNode', 'baseNode']) {
 		describe(`get ${property}()`, () => {
 			it('Returns null if no Range has been added.', () => {
 				expect(selection[property]).toBe(null);
@@ -91,7 +91,7 @@ describe('Selection', () => {
 				expect(range.endContainer === end).toBe(true);
 			});
 
-			it(`Returns end container of Range if direction is not "${SelectionDirectionEnum.forwards}".`, () => {
+			it(`Returns end container of Range if direction is "${SelectionDirectionEnum.backwards}".`, () => {
 				const range = document.createRange();
 				const extend = document.createElement('div');
 				const start = document.createElement('div');
@@ -113,7 +113,52 @@ describe('Selection', () => {
 		});
 	}
 
-	for (const property of ['anchorOffset', 'baseOffset', 'focusOffset', 'extentOffset']) {
+	for (const property of ['focusNode', 'extentNode']) {
+		describe(`get ${property}()`, () => {
+			it('Returns null if no Range has been added.', () => {
+				expect(selection[property]).toBe(null);
+			});
+
+			it(`Returns end container of Range if direction is "${SelectionDirectionEnum.forwards}".`, () => {
+				const range = document.createRange();
+				const start = document.createElement('div');
+				const end = document.createElement('div');
+
+				document.body.appendChild(start);
+				document.body.appendChild(end);
+
+				range.setStart(start, 0);
+				range.setEnd(end, 0);
+
+				selection.addRange(range);
+
+				expect(selection[property] === end).toBe(true);
+				expect(range.startContainer === start).toBe(true);
+			});
+
+			it(`Returns start container of Range if direction is "${SelectionDirectionEnum.backwards}".`, () => {
+				const range = document.createRange();
+				const extend = document.createElement('div');
+				const start = document.createElement('div');
+				const end = document.createElement('div');
+
+				document.body.appendChild(extend);
+				document.body.appendChild(start);
+				document.body.appendChild(end);
+
+				range.setStart(start, 0);
+				range.setEnd(end, 0);
+
+				selection.addRange(range);
+
+				selection.extend(extend, 0);
+
+				expect(selection[property] === selection.getRangeAt(0).startContainer).toBe(true);
+			});
+		});
+	}
+
+	for (const property of ['anchorOffset', 'baseOffset']) {
 		describe(`get ${property}()`, () => {
 			it('Returns 0 if no Range has been added.', () => {
 				expect(selection[property]).toBe(0);
@@ -136,7 +181,7 @@ describe('Selection', () => {
 				expect(range.endOffset === 2).toBe(true);
 			});
 
-			it(`Returns end offset of Range if direction is not "${SelectionDirectionEnum.forwards}".`, () => {
+			it(`Returns end offset of Range if direction is "${SelectionDirectionEnum.backwards}".`, () => {
 				const range = document.createRange();
 				const extend = document.createTextNode('extend');
 				const start = document.createTextNode('start');
@@ -158,6 +203,51 @@ describe('Selection', () => {
 		});
 	}
 
+	for (const property of ['focusOffset', 'extentOffset']) {
+		describe(`get ${property}()`, () => {
+			it('Returns 0 if no Range has been added.', () => {
+				expect(selection[property]).toBe(0);
+			});
+
+			it(`Returns end offset of Range if direction is "${SelectionDirectionEnum.forwards}".`, () => {
+				const range = document.createRange();
+				const start = document.createTextNode('start');
+				const end = document.createTextNode('end');
+
+				document.body.appendChild(start);
+				document.body.appendChild(end);
+
+				range.setStart(start, 1);
+				range.setEnd(end, 2);
+
+				selection.addRange(range);
+
+				expect(selection[property] === 2).toBe(true);
+				expect(range.startOffset === 1).toBe(true);
+			});
+
+			it(`Returns start offset of Range if direction is "${SelectionDirectionEnum.backwards}".`, () => {
+				const range = document.createRange();
+				const extend = document.createTextNode('extend');
+				const start = document.createTextNode('start');
+				const end = document.createTextNode('end');
+
+				document.body.appendChild(extend);
+				document.body.appendChild(start);
+				document.body.appendChild(end);
+
+				range.setStart(start, 1);
+				range.setEnd(end, 2);
+
+				selection.addRange(range);
+
+				selection.extend(extend, 3);
+
+				expect(selection[property] === selection.getRangeAt(0).startOffset).toBe(true);
+			});
+		});
+	}
+
 	describe('addRange()', () => {
 		it('Adds a Range.', () => {
 			const range = document.createRange();