Merge pull request #1235 from Schleuse/task/1221-add-support-for-targ…

…et-and-target-within #1221@minor: Add support for `:target` pseudo selector.
capricorn86 · Feb 26, 2024 · efb48f0 · efb48f0
2 parents 4ef032f + f53a847
commit efb48f0
Show file tree

Hide file tree

Showing 2 changed files with 31 additions and 0 deletions.
diff --git a/packages/happy-dom/src/query-selector/SelectorItem.ts b/packages/happy-dom/src/query-selector/SelectorItem.ts
@@ -222,6 +222,12 @@ export default class SelectorItem {
 						.reverse()
 						.indexOf(element);
 					return nthLastOfTypeIndex !== -1 && psuedo.nthFunction(nthLastOfTypeIndex + 1);
+				case 'target':
+					const hash = element[PropertySymbol.ownerDocument].location.hash;
+					if (!hash) {
+						return false;
+					}
+					return element.isConnected && element.id === hash.slice(1);
 			}
 		}
 

diff --git a/packages/happy-dom/test/query-selector/QuerySelector.test.ts b/packages/happy-dom/test/query-selector/QuerySelector.test.ts
@@ -1115,6 +1115,31 @@ describe('QuerySelector', () => {
 			expect(div.querySelector('#id') === div2).toBe(true);
 		});
 
+		it('Returns an element matching :target', () => {
+			const section = document.createElement('section');
+			const headline = document.createElement('h2');
+			headline.id = 'id';
+			section.appendChild(headline);
+			document.appendChild(section);
+
+			window.location.hash = '#id';
+			expect(section.querySelector(':target')).toBe(headline);
+			expect(section.querySelector('h2:target')).toBe(headline);
+			expect(section.querySelector('h3:target')).toBeNull();
+
+			window.location.hash = '#something-else';
+			expect(section.querySelector(':target')).toBeNull();
+			expect(section.querySelector('h2:target')).toBeNull();
+			expect(section.querySelector('h3:target')).toBeNull();
+
+			// Detached Elements should not match
+			window.location.hash = '#id';
+			section.remove();
+			expect(section.querySelector(':target')).toBeNull();
+			expect(section.querySelector('h2:target')).toBeNull();
+			expect(section.querySelector('h3:target')).toBeNull();
+		});
+
 		it('Returns an element by id matching "#:id:".', () => {
 			const div = document.createElement('div');
 			const div2 = document.createElement('div');