feat: :checked pseudo-class support for <option>

Per spec, :checked matches a selected <option> in addition to a checked
checkbox/radio <input>, but SelectorItem's 'checked' case only ever
checked the INPUT tag.

Attribute-driven selection (the "selected" content attribute) invalidates
the query selector cache, so "option:checked" queries stay fresh. Selection changed
programmatically (option.selected / select.value / select.selectedIndex)
does not yet invalidate the cache - a pre-existing gap that also affects
select.selectedOptions (#1594), fixed separately.

Author: marciomazza

packages/happy-dom/src/query-selector/SelectorItem.ts

@@ -1,6 +1,7 @@
 import * as PropertySymbol from '../PropertySymbol.js';
 import type Element from '../nodes/element/Element.js';
 import type HTMLInputElement from '../nodes/html-input-element/HTMLInputElement.js';
+import type HTMLOptionElement from '../nodes/html-option-element/HTMLOptionElement.js';
 import SelectorCombinatorEnum from './SelectorCombinatorEnum.js';
 import type ISelectorAttribute from './ISelectorAttribute.js';
 import type ISelectorMatch from './ISelectorMatch.js';
@@ -270,9 +271,13 @@ export default class SelectorItem {
 				}
 				return isFound ? { priorityWeight: 10 } : null;
 			case 'checked':
-				return element[PropertySymbol.tagName] === 'INPUT' && (<HTMLInputElement>element).checked
-					? { priorityWeight: 10 }
-					: null;
+				if (element[PropertySymbol.tagName] === 'INPUT') {
+					return (<HTMLInputElement>element).checked ? { priorityWeight: 10 } : null;
+				}
+				if (element[PropertySymbol.tagName] === 'OPTION') {
+					return (<HTMLOptionElement>element).selected ? { priorityWeight: 10 } : null;
+				}
+				return null;
 			case 'disabled':
 				return 'disabled' in element && element.hasAttribute('disabled')
 					? { priorityWeight: 10 }

packages/happy-dom/test/query-selector/QuerySelector.test.ts

@@ -4,6 +4,7 @@ import type Document from '../../src/nodes/document/Document.js';
 import QuerySelectorHTML from './data/QuerySelectorHTML.js';
 import QuerySelectorNthChildHTML from './data/QuerySelectorNthChildHTML.js';
 import type HTMLInputElement from '../../src/nodes/html-input-element/HTMLInputElement.js';
+import type HTMLOptionElement from '../../src/nodes/html-option-element/HTMLOptionElement.js';
 import { beforeEach, describe, it, expect } from 'vitest';
 import QuerySelector from '../../src/query-selector/QuerySelector.js';
 
@@ -970,6 +971,30 @@ describe('QuerySelector', () => {
 			expect((<HTMLInputElement>elements[0]).value).toBe('two');
 		});
 
+		it('Returns all option elements matching "option:checked".', () => {
+			const container = document.createElement('div');
+			container.innerHTML = `
+			<select id="s">
+				<option value="a">a</option>
+				<option value="b">b</option>
+			</select>
+			`;
+			document.body.appendChild(container);
+
+			const optionB = <HTMLOptionElement>container.querySelectorAll('option')[1];
+
+			// Warms the cache for this exact selector string while nothing is selected.
+			expect(container.querySelectorAll("option[value='b']:checked").length).toBe(0);
+
+			optionB.setAttribute('selected', '');
+
+			// Same selector string as above - must reflect the new selection, not a stale cached result.
+			const elements = container.querySelectorAll("option[value='b']:checked");
+
+			expect(elements.length).toBe(1);
+			expect((<HTMLOptionElement>elements[0]).value).toBe('b');
+		});
+
 		it('Returns all elements matching ":disabled".', () => {
 			const container = document.createElement('div');
 			container.innerHTML = `