Merge pull request #919 from capricorn86/914-selector-attribute-modif…

…iers-doesnt-match-valid-elements

#914@patch: Fixes issue where attribute query selectors using "~" or …

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

@@ -212,10 +212,13 @@ export default class SelectorParser {
 		switch (attribute.operator) {
 			// [attribute~="value"] - Contains a specified word.
 			case '~':
-				return new RegExp(`[- ]${attribute.value}|${attribute.value}[- ]`, modifier);
+				return new RegExp(
+					`[- ]${attribute.value}|${attribute.value}[- ]|^${attribute.value}$`,
+					modifier
+				);
 			// [attribute|="value"] - Starts with the specified word.
 			case '|':
-				return new RegExp(`^${attribute.value}[- ]`, modifier);
+				return new RegExp(`^${attribute.value}[- ]|^${attribute.value}$`, modifier);
 			// [attribute^="value"] - Begins with a specified value.
 			case '^':
 				return new RegExp(`^${attribute.value}`, modifier);

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

@@ -427,6 +427,16 @@ describe('QuerySelector', () => {
 			expect(elements[4] === container.children[0].children[1].children[2]).toBe(true);
 		});
 
+		it('Returns all elements with an attribute value containing a specified word using "[attr1~="value1"]" (which doesn\'t include spaces).', () => {
+			const container = document.createElement('div');
+			container.innerHTML = QuerySelectorHTML;
+			const elements = container.querySelectorAll('[attr1~="value1"]');
+
+			expect(elements.length).toBe(2);
+			expect(elements[0] === container.children[0].children[1].children[0]).toBe(true);
+			expect(elements[1] === container.children[0].children[1].children[1]).toBe(true);
+		});
+
 		it('Returns all elements with an attribute value starting with the specified word using "[class|="class1"]".', () => {
 			const container = document.createElement('div');
 			container.innerHTML = QuerySelectorHTML;
@@ -440,6 +450,16 @@ describe('QuerySelector', () => {
 			expect(elements[4] === container.children[0].children[1].children[2]).toBe(true);
 		});
 
+		it('Returns all elements with an attribute value containing a specified word using "[attr1|="value1"]" (which doesn\'t include spaces).', () => {
+			const container = document.createElement('div');
+			container.innerHTML = QuerySelectorHTML;
+			const elements = container.querySelectorAll('[attr1|="value1"]');
+
+			expect(elements.length).toBe(2);
+			expect(elements[0] === container.children[0].children[1].children[0]).toBe(true);
+			expect(elements[1] === container.children[0].children[1].children[1]).toBe(true);
+		});
+
 		it('Returns all elements with an attribute value that begins with a specified value using "[class^="cl"]".', () => {
 			const container = document.createElement('div');
 			container.innerHTML = QuerySelectorHTML;