Selector attribute modifiers ~ and | doesn't match valid elements

[romansp]

Describe the bug
Modifiers ~ and | doesn't match valid elements when attribute doesn't have whitespace or dash.

To Reproduce
The following test will currently fail because none of elements will be matched.

it('Returns all elements matching "*[role~="menu"]".', () => {
  const container = document.createElement('div');
  container.innerHTML = '<div role="menu">Menu</div>';
  const elements = container.querySelectorAll('*[role~="menu"]');
  
  expect(elements.length).toBe(1);
});

Expected behavior
Selector *[role~="menu"] should match element with "role=menu"

Device:

• Version 9.17.0

Additional context
Introduced by changes in #913.

Interesting that this regression wasn't caught by [class~="class2"] test because elements in QuerySelectorHTML have space, e.g. class="class1 class2"

[capricorn86]

Thank you for reporting @romansp! 🙂

I have made a fix and also added some unit tests that should cover it now 😅

You can read more about the release here:
https://github.com/capricorn86/happy-dom/releases/tag/v9.18.1