Selector: Use jQuery `:has` if `CSS.supports(selector(...))` non-compliant

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:
https://github.com/w3c/csswg-drafts/issues/7280#issuecomment-1143852187
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.

Fixes gh-5098
Closes gh-5107
Ref w3c/csswg-drafts#7676

diff --git a/src/selector.js b/src/selector.js
index bc60e61e4176f6dd2cb66950dc2ad4456c745e11..871cf8682250ea528fc517ef199493ecec6abe78 100644 (file)
--- a/src/selector.js
+++ b/src/selector.js
@@ -9,6 +9,7 @@ import whitespace from "./var/whitespace.js";
 import rbuggyQSA from "./selector/rbuggyQSA.js";
 import rtrim from "./var/rtrim.js";
 import isIE from "./var/isIE.js";
+import support from "./selector/support.js";
 
 // The following utils are attached directly to the jQuery object.
 import "./selector/contains.js";
@@ -252,6 +253,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 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 )
                                        );

diff --git a/src/selector/rbuggyQSA.js b/src/selector/rbuggyQSA.js
index bae05398fd8dcc528741c9b8c578bd0513572c31..e8bfd0bf7be4318412490e4562c8204cec94a15c 100644 (file)
--- a/src/selector/rbuggyQSA.js
+++ b/src/selector/rbuggyQSA.js
@@ -1,19 +1,38 @@
 import isIE from "../var/isIE.js";
 import whitespace from "../var/whitespace.js";
+import support from "./support.js";
 
-var rbuggyQSA = isIE && new RegExp(
+var rbuggyQSA = [];
 
-       // Support: IE 9 - 11+
-       // IE's :disabled selector does not pick up the children of disabled fieldsets
-       ":enabled|:disabled|" +
+if ( isIE ) {
+       rbuggyQSA.push(
 
-       // Support: IE 11+
-       // IE 11 doesn't find elements on a `[name='']` query in some cases.
-       // Adding a temporary attribute to the document before the selection works
-       // around the issue.
-       "\\[" + whitespace + "*name" + whitespace + "*=" +
-               whitespace + "*(?:''|\"\")"
+               // Support: IE 9 - 11+
+               // IE's :disabled selector does not pick up the children of disabled fieldsets
+               ":enabled",
+               ":disabled",
 
-);
+               // Support: IE 11+
+               // IE 11 doesn't find elements on a `[name='']` query in some cases.
+               // Adding a temporary attribute to the document before the selection works
+               // around the issue.
+               "\\[" + whitespace + "*name" + whitespace + "*=" +
+                       whitespace + "*(?:''|\"\")"
+       );
+}
+
+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( "|" ) );
 
 export default rbuggyQSA;

diff --git a/src/selector/support.js b/src/selector/support.js
new file mode 100644 (file)
index 0000000..9763b00
--- /dev/null
+++ b/src/selector/support.js
@@ -0,0 +1,24 @@
+import support from "../var/support.js";
+
+try {
+       /* eslint-disable no-undef */
+
+       // 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 = CSS.supports( "selector(*)" ) &&
+
+               // `*` 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 */
+} catch ( e ) {
+       support.cssSupportsSelector = false;
+}
+
+export default support;

diff --git a/test/unit/selector.js b/test/unit/selector.js
index 2b0c251cf64943adff2825fc9699512af5b7c083..b1529175b50855c85eb03c9caf78563d9c941fbf 100644 (file)
--- a/test/unit/selector.js
+++ b/test/unit/selector.js
@@ -931,13 +931,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 ) {

diff --git a/test/unit/support.js b/test/unit/support.js
index 2892e06d74a8ebec716ba52ba42755efc0c21502..e3a7778c4b59c11fed28ba7cefa855a8d7ec8d0c 100644 (file)
--- a/test/unit/support.js
+++ b/test/unit/support.js
@@ -59,19 +59,24 @@ testIframe(
                userAgent = window.navigator.userAgent,
                expectedMap = {
                        ie_11: {
-                               "reliableTrDimensions": false
+                               cssSupportsSelector: false,
+                               reliableTrDimensions: false
                        },
                        chrome: {
-                               "reliableTrDimensions": true
+                               cssSupportsSelector: false,
+                               reliableTrDimensions: true
                        },
                        safari: {
-                               "reliableTrDimensions": true
+                               cssSupportsSelector: false,
+                               reliableTrDimensions: true
                        },
                        firefox: {
-                               "reliableTrDimensions": false
+                               cssSupportsSelector: false,
+                               reliableTrDimensions: false
                        },
                        ios: {
-                               "reliableTrDimensions": true
+                               cssSupportsSelector: false,
+                               reliableTrDimensions: true
                        }
                };