Skip to content

Commit 74de5e6

Browse files
mgolmgol
committed
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
1 parent 6914c9c commit 74de5e6

File tree

3 files changed

+82
-1
lines changed

3 files changed

+82
-1
lines changed

‎src/selector.js

+58
Original file line numberDiff line numberDiff line change
@@ -303,6 +303,27 @@ function find( selector, context, results, seed ) {
303303
}
304304

305305
try {
306+
307+
// `qSA` may not throw for unrecognized parts using forgiving parsing:
308+
// https://drafts.csswg.org/selectors/#forgiving-selector
309+
// like the `:has()` pseudo-class:
310+
// https://drafts.csswg.org/selectors/#relational
311+
// `CSS.supports` is still expected to return `false` then:
312+
// https://drafts.csswg.org/css-conditional-4/#typedef-supports-selector-fn
313+
// https://drafts.csswg.org/css-conditional-4/#dfn-support-selector
314+
if ( support.cssSupportsSelector &&
315+
316+
// eslint-disable-next-line no-undef
317+
!CSS.supports( "selector(" + newSelector + ")" ) ) {
318+
319+
// Support: IE 9 - 11+
320+
// Throw to get to the same code path as an error directly in qSA.
321+
// Note: once we only support browser supporting
322+
// `CSS.supports('selector(...)')`, we can most likely drop
323+
// the `try-catch`. IE doesn't implement the API.
324+
throw new Error();
325+
}
326+
306327
push.apply( results,
307328
newContext.querySelectorAll( newSelector )
308329
);
@@ -549,6 +570,31 @@ function setDocument( node ) {
549570
return document.querySelectorAll( ":scope" );
550571
} );
551572

573+
// Support: Chrome 105+, Firefox 104+, Safari 15.4+
574+
// Make sure forgiving mode is not used in `CSS.supports( "selector(...)" )`.
575+
//
576+
// `:is()` uses a forgiving selector list as an argument and is widely
577+
// implemented, so it's a good one to test against.
578+
support.cssSupportsSelector = assert( function() {
579+
/* eslint-disable no-undef */
580+
581+
return CSS.supports( "selector(*)" ) &&
582+
583+
// Support: Firefox 78-81 only
584+
// In old Firefox, `:is()` didn't use forgiving parsing. In that case,
585+
// fail this test as there's no selector to test against that.
586+
// `CSS.supports` uses unforgiving parsing
587+
document.querySelectorAll( ":is(:jqfake)" ) &&
588+
589+
// `*` is needed as Safari & newer Chrome implemented something in between
590+
// for `:has()` - it throws in `qSA` if it only contains an unsupported
591+
// argument but multiple ones, one of which is supported, are fine.
592+
// We want to play safe in case `:is()` gets the same treatment.
593+
!CSS.supports( "selector(:is(*,:jqfake))" );
594+
595+
/* eslint-enable */
596+
} );
597+
552598
// ID filter and find
553599
if ( support.getById ) {
554600
Expr.filter.ID = function( id ) {
@@ -697,6 +743,18 @@ function setDocument( node ) {
697743
}
698744
} );
699745

746+
if ( !support.cssSupportsSelector ) {
747+
748+
// Support: Chrome 105+, Safari 15.4+
749+
// `:has()` uses a forgiving selector list as an argument so our regular
750+
// `try-catch` mechanism fails to catch `:has()` with arguments not supported
751+
// 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()`.
755+
rbuggyQSA.push( ":has" );
756+
}
757+
700758
rbuggyQSA = rbuggyQSA.length && new RegExp( rbuggyQSA.join( "|" ) );
701759

702760
/* Sorting

‎test/unit/selector.js

+11-1
Original file line numberDiff line numberDiff line change
@@ -948,13 +948,23 @@ QUnit.test( "pseudo - nth-last-of-type", function( assert ) {
948948
} );
949949

950950
QUnit[ QUnit.jQuerySelectors ? "test" : "skip" ]( "pseudo - has", function( assert ) {
951-
assert.expect( 3 );
951+
assert.expect( 4 );
952952

953953
assert.t( "Basic test", "p:has(a)", [ "firstp", "ap", "en", "sap" ] );
954954
assert.t( "Basic test (irrelevant whitespace)", "p:has( a )", [ "firstp", "ap", "en", "sap" ] );
955955
assert.t( "Nested with overlapping candidates",
956956
"#qunit-fixture div:has(div:has(div:not([id])))",
957957
[ "moretests", "t2037", "fx-test-group", "fx-queue" ] );
958+
959+
// Support: Safari 15.4+, Chrome 105+
960+
// `qSA` in Safari/Chrome throws for `:has()` with only unsupported arguments
961+
// but if you add a supported arg to the list, it will run and just potentially
962+
// return no results. Make sure this is accounted for. (gh-5098)
963+
// Note: Chrome 105 has this behavior only in 105.0.5195.125 or newer;
964+
// initially it shipped with a fully forgiving parsing in `:has()`.
965+
assert.t( "Nested with list arguments",
966+
"#qunit-fixture div:has(faketag, div:has(faketag, div:not([id])))",
967+
[ "moretests", "t2037", "fx-test-group", "fx-queue" ] );
958968
} );
959969

960970
QUnit[ QUnit.jQuerySelectors ? "test" : "skip" ]( "pseudo - contains", function( assert ) {

‎test/unit/support.js

+13
Original file line numberDiff line numberDiff line change
@@ -64,6 +64,7 @@ testIframe(
6464
checkClone: true,
6565
checkOn: true,
6666
clearCloneStyle: true,
67+
cssSupportsSelector: false,
6768
cors: true,
6869
createHTMLDocument: true,
6970
disconnectedMatch: true,
@@ -88,6 +89,7 @@ testIframe(
8889
checkClone: true,
8990
checkOn: true,
9091
clearCloneStyle: false,
92+
cssSupportsSelector: false,
9193
cors: true,
9294
createHTMLDocument: true,
9395
disconnectedMatch: true,
@@ -112,6 +114,7 @@ testIframe(
112114
checkClone: true,
113115
checkOn: true,
114116
clearCloneStyle: false,
117+
cssSupportsSelector: false,
115118
cors: false,
116119
createHTMLDocument: true,
117120
disconnectedMatch: false,
@@ -136,6 +139,7 @@ testIframe(
136139
checkClone: true,
137140
checkOn: true,
138141
clearCloneStyle: true,
142+
cssSupportsSelector: false,
139143
cors: true,
140144
createHTMLDocument: true,
141145
disconnectedMatch: true,
@@ -160,6 +164,7 @@ testIframe(
160164
checkClone: true,
161165
checkOn: true,
162166
clearCloneStyle: true,
167+
cssSupportsSelector: false,
163168
cors: true,
164169
createHTMLDocument: true,
165170
disconnectedMatch: true,
@@ -184,6 +189,7 @@ testIframe(
184189
checkClone: true,
185190
checkOn: true,
186191
clearCloneStyle: true,
192+
cssSupportsSelector: false,
187193
cors: true,
188194
createHTMLDocument: true,
189195
disconnectedMatch: true,
@@ -208,6 +214,7 @@ testIframe(
208214
checkClone: true,
209215
checkOn: true,
210216
clearCloneStyle: true,
217+
cssSupportsSelector: false,
211218
cors: true,
212219
createHTMLDocument: true,
213220
disconnectedMatch: true,
@@ -232,6 +239,7 @@ testIframe(
232239
checkClone: true,
233240
checkOn: true,
234241
clearCloneStyle: true,
242+
cssSupportsSelector: false,
235243
cors: true,
236244
createHTMLDocument: true,
237245
disconnectedMatch: true,
@@ -256,6 +264,7 @@ testIframe(
256264
checkClone: true,
257265
checkOn: true,
258266
clearCloneStyle: true,
267+
cssSupportsSelector: false,
259268
cors: true,
260269
createHTMLDocument: true,
261270
disconnectedMatch: true,
@@ -280,6 +289,7 @@ testIframe(
280289
checkClone: true,
281290
checkOn: true,
282291
clearCloneStyle: true,
292+
cssSupportsSelector: false,
283293
cors: true,
284294
createHTMLDocument: true,
285295
disconnectedMatch: true,
@@ -304,6 +314,7 @@ testIframe(
304314
checkClone: true,
305315
checkOn: true,
306316
clearCloneStyle: true,
317+
cssSupportsSelector: false,
307318
cors: true,
308319
createHTMLDocument: false,
309320
disconnectedMatch: true,
@@ -328,6 +339,7 @@ testIframe(
328339
checkClone: true,
329340
checkOn: true,
330341
clearCloneStyle: true,
342+
cssSupportsSelector: false,
331343
cors: true,
332344
createHTMLDocument: true,
333345
disconnectedMatch: true,
@@ -352,6 +364,7 @@ testIframe(
352364
checkClone: false,
353365
checkOn: false,
354366
clearCloneStyle: true,
367+
cssSupportsSelector: false,
355368
cors: true,
356369
createHTMLDocument: true,
357370
disconnectedMatch: true,

0 commit comments

Comments
 (0)