Skip to content

Commit 848de62

Browse files
mgolmgol
committed
Selector: Make selector lists work with qSA again
jQuery 3.6.2 started using `CSS.supports( "selector(SELECTOR)" )` before using `querySelectorAll` on the selector. This was to solve gh-5098 - some selectors, like `:has()`, now had their parameters parsed in a forgiving way, meaning that `:has(:fakepseudo)` no longer throws but just returns 0 results, breaking that jQuery mechanism. A recent spec change made `CSS.supports( "selector(SELECTOR)" )` always use non-forgiving parsing, allowing us to use this API for what we've used `try-catch` before. To solve the issue on the spec side for older jQuery versions, `:has()` parameters are no longer using forgiving parsing in the latest spec update but our new mechanism is more future-proof anyway. However, the jQuery implementation has a bug - in `CSS.supports( "selector(SELECTOR)" )`, `SELECTOR` needs to be a `<complex-selector>` and not a `<complex-selector-list>`. Which means that selector lists now skip `qSA` and go to the jQuery custom traversal: ```js CSS.supports("selector(div:valid, span)"); // false CSS.supports("selector(div:valid)"); // true CSS.supports("selector(span)"); // true ``` To solve this, this commit wraps the selector list passed to `CSS.supports( "selector(:is(SELECTOR))" )` with `:is`, making it a single selector again. See: * https://w3c.github.io/csswg-drafts/css-conditional-4/#at-supports-ext * https://w3c.github.io/csswg-drafts/selectors-4/#typedef-complex-selector * https://w3c.github.io/csswg-drafts/selectors-4/#typedef-complex-selector-list Fixes gh-5177 Closes gh-5178 Ref w3c/csswg-drafts#7280 (cherry picked from commit 09d988b)
1 parent 0acbe64 commit 848de62

File tree

2 files changed

+35
-7
lines changed

2 files changed

+35
-7
lines changed

‎src/selector.js

+14-6
Original file line numberDiff line numberDiff line change
@@ -306,15 +306,20 @@ function find( selector, context, results, seed ) {
306306

307307
// `qSA` may not throw for unrecognized parts using forgiving parsing:
308308
// https://drafts.csswg.org/selectors/#forgiving-selector
309-
// like the `:has()` pseudo-class:
310-
// https://drafts.csswg.org/selectors/#relational
309+
// like the `:is()` pseudo-class:
310+
// https://drafts.csswg.org/selectors/#matches
311311
// `CSS.supports` is still expected to return `false` then:
312312
// https://drafts.csswg.org/css-conditional-4/#typedef-supports-selector-fn
313313
// https://drafts.csswg.org/css-conditional-4/#dfn-support-selector
314314
if ( support.cssSupportsSelector &&
315315

316+
// `CSS.supports( "selector(...)" )` requires the argument to the
317+
// `selector` function to be a `<complex-selector>`, not
318+
// a `<complex-selector-list>` which our selector may be. Wrapping with
319+
// `:is` works around the issue and is supported by all browsers
320+
// we support except for IE which will fail the support test anyway.
316321
// eslint-disable-next-line no-undef
317-
!CSS.supports( "selector(" + newSelector + ")" ) ) {
322+
!CSS.supports( "selector(:is(" + newSelector + "))" ) ) {
318323

319324
// Support: IE 9 - 11+
320325
// Throw to get to the same code path as an error directly in qSA.
@@ -570,6 +575,10 @@ function setDocument( node ) {
570575
return document.querySelectorAll( ":scope" );
571576
} );
572577

578+
// Support: IE 9 - 11+
579+
// IE doesn't support `CSS.supports( "selector(...)" )`; it will throw
580+
// in this support test.
581+
//
573582
// Support: Chrome 105+, Firefox <106, Safari 15.4+
574583
// Make sure forgiving mode is not used in `CSS.supports( "selector(...)" )`.
575584
//
@@ -749,9 +758,8 @@ function setDocument( node ) {
749758
// `:has()` uses a forgiving selector list as an argument so our regular
750759
// `try-catch` mechanism fails to catch `:has()` with arguments not supported
751760
// natively like `:has(:contains("Foo"))`. Where supported & spec-compliant,
752-
// we now use `CSS.supports("selector(SELECTOR_TO_BE_TESTED)")` but outside
753-
// that, let's mark `:has` as buggy to always use jQuery traversal for
754-
// `:has()`.
761+
// we now use `CSS.supports("selector(:is(SELECTOR_TO_BE_TESTED))")`, but
762+
// outside that we mark `:has` as buggy.
755763
rbuggyQSA.push( ":has" );
756764
}
757765

‎test/unit/selector.js

+21-1
Original file line numberDiff line numberDiff line change
@@ -415,14 +415,34 @@ QUnit.test( "name", function( assert ) {
415415
} );
416416

417417
QUnit.test( "comma-separated", function( assert ) {
418-
assert.expect( 4 );
418+
assert.expect( 10 );
419419

420420
var fixture = jQuery( "<div><h2><span></span></h2><div><p><span></span></p><p></p></div></div>" );
421421

422422
assert.equal( fixture.find( "h2, div p" ).filter( "p" ).length, 2, "has to find two <p>" );
423423
assert.equal( fixture.find( "h2, div p" ).filter( "h2" ).length, 1, "has to find one <h2>" );
424424
assert.equal( fixture.find( "h2 , div p" ).filter( "p" ).length, 2, "has to find two <p>" );
425425
assert.equal( fixture.find( "h2 , div p" ).filter( "h2" ).length, 1, "has to find one <h2>" );
426+
assert.equal( fixture.find( "h2 ,div p" ).filter( "p" ).length, 2, "has to find two <p>" );
427+
assert.equal( fixture.find( "h2 ,div p" ).filter( "h2" ).length, 1, "has to find one <h2>" );
428+
assert.equal( fixture.find( "h2,div p" ).filter( "p" ).length, 2, "has to find two <p>" );
429+
assert.equal( fixture.find( "h2,div p" ).filter( "h2" ).length, 1, "has to find one <h2>" );
430+
assert.equal( fixture.find( "h2\t,\rdiv p" ).filter( "p" ).length, 2, "has to find two <p>" );
431+
assert.equal( fixture.find( "h2\t,\rdiv p" ).filter( "h2" ).length, 1, "has to find one <h2>" );
432+
} );
433+
434+
QUnit.test( "comma-separated, only supported natively (gh-5177)", function( assert ) {
435+
assert.expect( 5 );
436+
437+
var fixture = jQuery( "<div><input/><span></span></div>" );
438+
439+
fixture.appendTo( "#qunit-fixture" );
440+
441+
assert.equal( fixture.find( "input:valid, span" ).length, 2, "has to find two elements" );
442+
assert.equal( fixture.find( "input:valid , span" ).length, 2, "has to find two elements" );
443+
assert.equal( fixture.find( "input:valid ,span" ).length, 2, "has to find two elements" );
444+
assert.equal( fixture.find( "input:valid,span" ).length, 2, "has to find two elements" );
445+
assert.equal( fixture.find( "input:valid\t,\rspan" ).length, 2, "has to find two elements" );
426446
} );
427447

428448
QUnit.test( "child and adjacent", function( assert ) {

0 commit comments

Comments
 (0)