Selector: Use jQuery :has if CSS.supports(selector(...)) buggy

jQuery has followed the following logic for selector handling for ages:
1. Modify the selector to adhere to scoping rules jQuery mandates.
2. Try `qSA` on the modified selector. If it succeeds, use the results.
3. If `qSA` threw an error, run the jQuery custom traversal instead.

It worked fine so far but now CSS has a concept of forgiving selector lists that
some selectors like `:is()` & `:has()` use. That means providing unrecognized
selectors as parameters to `:is()` & `:has()` no longer throws an error, it will
just return no results. That made browsers with native `:has()` support break
selectors using jQuery extensions inside, e.g. `:has(:contains("Item"))`.

Detecting support for selectors can also be done via:

```js
CSS.supports( "selector(SELECTOR_TO_BE_TESTED)" )
```
which returns a boolean. There was a recent spec change requiring this API to
always use non-forgiving parsing:
w3c/csswg-drafts#7280 (comment)
However, no browsers have implemented this change so far.

To solve this, two changes are being made:
1. In browsers supports the new spec change to `CSS.supports( "selector()" )`,
   use it before trying `qSA`.
2. Otherwise, add `:has` to the buggy selectors list.

Ref jquerygh-5098
Ref jquerygh-5107
Ref jquery/sizzle#486
Ref w3c/csswg-drafts#7676

src/selector.js

@@ -303,6 +303,27 @@ function find( selector, context, results, seed ) {
 				}
 
 				try {
+
+					// `qSA` may not throw for unrecognized parts using forgiving parsing:
+					// https://drafts.csswg.org/selectors/#forgiving-selector
+					// like the `:has()` pseudo-class:
+					// https://drafts.csswg.org/selectors/#relational
+					// `CSS.supports` is still expected to return `false` then:
+					// https://drafts.csswg.org/css-conditional-4/#typedef-supports-selector-fn
+					// https://drafts.csswg.org/css-conditional-4/#dfn-support-selector
+					if ( support.cssSupportsSelector &&
+
+						// eslint-disable-next-line no-undef
+						!CSS.supports( "selector(" + newSelector + ")" ) ) {
+
+						// Support: IE 9 - 11+
+						// Throw to get to the same code path as an error directly in qSA.
+						// Note: once we only support browser supporting
+						// `CSS.supports('selector(...)')`, we can most likely drop
+						// the `try-catch`. IE doesn't implement the API.
+						throw new Error();
+					}
+
 					push.apply( results,
 						newContext.querySelectorAll( newSelector )
 					);
@@ -549,6 +570,31 @@ function setDocument( node ) {
 		return document.querySelectorAll( ":scope" );
 	} );
 
+	// Support: Chrome 105+, Firefox 104+, Safari 15.4+
+	// Make sure forgiving mode is not used in `CSS.supports( "selector(...)" )`.
+	//
+	// `:is()` uses a forgiving selector list as an argument and is widely
+	// implemented, so it's a good one to test against.
+	support.cssSupportsSelector = assert( function() {
+		/* eslint-disable no-undef */
+
+		return CSS.supports( "selector(*)" ) &&
+
+			// Support: Firefox 78-81 only
+			// In old Firefox, `:is()` didn't use forgiving parsing. In that case,
+			// fail this test as there's no selector to test against that.
+			// `CSS.supports` uses unforgiving parsing
+			document.querySelectorAll( ":is(:jqfake)" ) &&
+
+			// `*` is needed as Safari & newer Chrome implemented something in between
+			// for `:has()` - it throws in `qSA` if it only contains an unsupported
+			// argument but multiple ones, one of which is supported, are fine.
+			// We want to play safe in case `:is()` gets the same treatment.
+			!CSS.supports( "selector(:is(*,:jqfake))" );
+
+		/* eslint-enable */
+	} );
+
 	// ID filter and find
 	if ( support.getById ) {
 		Expr.filter.ID = function( id ) {
@@ -697,6 +743,18 @@ function setDocument( node ) {
 		}
 	} );
 
+	if ( !support.cssSupportsSelector ) {
+
+		// Support: Chrome 105+, Safari 15.4+
+		// `:has()` uses a forgiving selector list as an argument so our regular
+		// `try-catch` mechanism fails to catch `:has()` with arguments not supported
+		// natively like `:has(:contains("Foo"))`. Where supported & spec-compliant,
+		// we now use `CSS.supports("selector(SELECTOR_TO_BE_TESTED)")` but outside
+		// that, let's mark `:has` as buggy to always use jQuery traversal for
+		// `:has()`.
+		rbuggyQSA.push( ":has" );
+	}
+
 	rbuggyQSA = rbuggyQSA.length && new RegExp( rbuggyQSA.join( "|" ) );
 
 	/* Sorting

test/unit/selector.js

@@ -948,13 +948,23 @@ QUnit.test( "pseudo - nth-last-of-type", function( assert ) {
 } );
 
 QUnit[ QUnit.jQuerySelectors ? "test" : "skip" ]( "pseudo - has", function( assert ) {
-	assert.expect( 3 );
+	assert.expect( 4 );
 
 	assert.t( "Basic test", "p:has(a)", [ "firstp", "ap", "en", "sap" ] );
 	assert.t( "Basic test (irrelevant whitespace)", "p:has( a )", [ "firstp", "ap", "en", "sap" ] );
 	assert.t( "Nested with overlapping candidates",
 		"#qunit-fixture div:has(div:has(div:not([id])))",
 		[ "moretests", "t2037", "fx-test-group", "fx-queue" ] );
+
+	// Support: Safari 15.4+, Chrome 105+
+	// `qSA` in Safari/Chrome throws for `:has()` with only unsupported arguments
+	// but if you add a supported arg to the list, it will run and just potentially
+	// return no results. Make sure this is accounted for. (gh-5098)
+	// Note: Chrome 105 has this behavior only in 105.0.5195.125 or newer;
+	// initially it shipped with a fully forgiving parsing in `:has()`.
+	assert.t( "Nested with list arguments",
+		"#qunit-fixture div:has(faketag, div:has(faketag, div:not([id])))",
+		[ "moretests", "t2037", "fx-test-group", "fx-queue" ] );
 } );
 
 QUnit[ QUnit.jQuerySelectors ? "test" : "skip" ]( "pseudo - contains", function( assert ) {

test/unit/support.js

@@ -64,6 +64,7 @@ testIframe(
 				checkClone: true,
 				checkOn: true,
 				clearCloneStyle: true,
+				cssSupportsSelector: false,
 				cors: true,
 				createHTMLDocument: true,
 				disconnectedMatch: true,
@@ -88,6 +89,7 @@ testIframe(
 				checkClone: true,
 				checkOn: true,
 				clearCloneStyle: false,
+				cssSupportsSelector: false,
 				cors: true,
 				createHTMLDocument: true,
 				disconnectedMatch: true,
@@ -112,6 +114,7 @@ testIframe(
 				checkClone: true,
 				checkOn: true,
 				clearCloneStyle: false,
+				cssSupportsSelector: false,
 				cors: false,
 				createHTMLDocument: true,
 				disconnectedMatch: false,
@@ -136,6 +139,7 @@ testIframe(
 				checkClone: true,
 				checkOn: true,
 				clearCloneStyle: true,
+				cssSupportsSelector: false,
 				cors: true,
 				createHTMLDocument: true,
 				disconnectedMatch: true,
@@ -160,6 +164,7 @@ testIframe(
 				checkClone: true,
 				checkOn: true,
 				clearCloneStyle: true,
+				cssSupportsSelector: false,
 				cors: true,
 				createHTMLDocument: true,
 				disconnectedMatch: true,
@@ -184,6 +189,7 @@ testIframe(
 				checkClone: true,
 				checkOn: true,
 				clearCloneStyle: true,
+				cssSupportsSelector: false,
 				cors: true,
 				createHTMLDocument: true,
 				disconnectedMatch: true,
@@ -208,6 +214,7 @@ testIframe(
 				checkClone: true,
 				checkOn: true,
 				clearCloneStyle: true,
+				cssSupportsSelector: false,
 				cors: true,
 				createHTMLDocument: true,
 				disconnectedMatch: true,
@@ -232,6 +239,7 @@ testIframe(
 				checkClone: true,
 				checkOn: true,
 				clearCloneStyle: true,
+				cssSupportsSelector: false,
 				cors: true,
 				createHTMLDocument: true,
 				disconnectedMatch: true,
@@ -256,6 +264,7 @@ testIframe(
 				checkClone: true,
 				checkOn: true,
 				clearCloneStyle: true,
+				cssSupportsSelector: false,
 				cors: true,
 				createHTMLDocument: true,
 				disconnectedMatch: true,
@@ -280,6 +289,7 @@ testIframe(
 				checkClone: true,
 				checkOn: true,
 				clearCloneStyle: true,
+				cssSupportsSelector: false,
 				cors: true,
 				createHTMLDocument: true,
 				disconnectedMatch: true,
@@ -304,6 +314,7 @@ testIframe(
 				checkClone: true,
 				checkOn: true,
 				clearCloneStyle: true,
+				cssSupportsSelector: false,
 				cors: true,
 				createHTMLDocument: false,
 				disconnectedMatch: true,
@@ -328,6 +339,7 @@ testIframe(
 				checkClone: true,
 				checkOn: true,
 				clearCloneStyle: true,
+				cssSupportsSelector: false,
 				cors: true,
 				createHTMLDocument: true,
 				disconnectedMatch: true,
@@ -352,6 +364,7 @@ testIframe(
 				checkClone: false,
 				checkOn: false,
 				clearCloneStyle: true,
+				cssSupportsSelector: false,
 				cors: true,
 				createHTMLDocument: true,
 				disconnectedMatch: true,