🌐 AI搜索 & 代理 主页
Skip to content

Commit 2d2c2ef

Browse files
mgolmgol
committed
Selector: Stop relying on CSS.supports( "selector(...)" )
`CSS.supports( "selector(...)" )` has different semantics than selectors passed to `querySelectorAll`. Apart from the fact that the former returns `false` for unrecognized selectors and the latter throws, `qSA` is more forgiving and accepts some invalid selectors, auto-correcting them where needed - for example, mismatched brackers are auto-closed. This behavior difference is breaking for many users. To add to that, a recent CSSWG resolution made `:is()` & `:where()` the only pseudos with forgiving parsing; browsers are in the process of making `:has()` parsing unforgiving. Taking all that into account, we go back to our previous try-catch approach without relying on `CSS.supports( "selector(...)" )`. The only difference is we detect forgiving parsing in `:has()` and mark the selector as buggy. The PR also updates `playwright-webkit` so that we test against a version of WebKit that already has non-forgiving `:has()`. Fixes jquerygh-5194 Ref jquerygh-5098 Ref jquerygh-5107 Ref w3c/csswg-drafts#7676
1 parent ac1c59a commit 2d2c2ef

File tree

3 files changed

+53
-89
lines changed

3 files changed

+53
-89
lines changed

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -55,7 +55,7 @@
5555
"karma-webkit-launcher": "2.1.0",
5656
"load-grunt-tasks": "5.1.0",
5757
"native-promise-only": "0.8.1",
58-
"playwright-webkit": "1.29.2",
58+
"playwright-webkit": "1.30.0",
5959
"promises-aplus-tests": "2.1.2",
6060
"q": "1.5.1",
6161
"qunit": "2.9.2",

‎src/selector.js‎

Lines changed: 21 additions & 59 deletions
Original file line numberDiff line numberDiff line change
@@ -303,32 +303,6 @@ 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 `:is()` pseudo-class:
310-
// https://drafts.csswg.org/selectors/#matches
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-
// `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.
321-
// eslint-disable-next-line no-undef
322-
!CSS.supports( "selector(:is(" + newSelector + "))" ) ) {
323-
324-
// Support: IE 9 - 11+
325-
// Throw to get to the same code path as an error directly in qSA.
326-
// Note: once we only support browser supporting
327-
// `CSS.supports('selector(...)')`, we can most likely drop
328-
// the `try-catch`. IE doesn't implement the API.
329-
throw new Error();
330-
}
331-
332306
push.apply( results,
333307
newContext.querySelectorAll( newSelector )
334308
);
@@ -575,33 +549,22 @@ function setDocument( node ) {
575549
return document.querySelectorAll( ":scope" );
576550
} );
577551

578-
// Support: IE 9 - 11+
579-
// IE doesn't support `CSS.supports( "selector(...)" )`; it will throw
580-
// in this support test.
552+
// Support: Chrome 105 - 110+, Safari 15.4 - 16.3+
553+
// Make sure forgiving mode is not used in `:has()`.
554+
// `*` is needed as Safari & newer Chrome implemented something in between
555+
// for `:has()` - it throws in `qSA` if it only contains an unsupported
556+
// argument but multiple ones, one of which is supported, are fine.
557+
// We want to play safe in case `:is()` gets the same treatment.
581558
//
582-
// Support: Chrome 105+, Firefox <106, Safari 15.4+
583-
// Make sure forgiving mode is not used in `CSS.supports( "selector(...)" )`.
584-
//
585-
// `:is()` uses a forgiving selector list as an argument and is widely
586-
// implemented, so it's a good one to test against.
587-
support.cssSupportsSelector = assert( function() {
588-
/* eslint-disable no-undef */
589-
590-
return CSS.supports( "selector(*)" ) &&
591-
592-
// Support: Firefox 78-81 only
593-
// In old Firefox, `:is()` didn't use forgiving parsing. In that case,
594-
// fail this test as there's no selector to test against that.
595-
// `CSS.supports` uses unforgiving parsing
596-
document.querySelectorAll( ":is(:jqfake)" ) &&
597-
598-
// `*` is needed as Safari & newer Chrome implemented something in between
599-
// for `:has()` - it throws in `qSA` if it only contains an unsupported
600-
// argument but multiple ones, one of which is supported, are fine.
601-
// We want to play safe in case `:is()` gets the same treatment.
602-
!CSS.supports( "selector(:is(*,:jqfake))" );
603-
604-
/* eslint-enable */
559+
// Note that we don't need to detect the complete lack of support for `:has()`
560+
// as then the `qSA` path will throw and fall back to jQuery traversal anyway.
561+
support.cssHas = assert( function() {
562+
try {
563+
document.querySelector( ":has(*,:jqfake)" );
564+
return false;
565+
} catch ( e ) {
566+
return true;
567+
}
605568
} );
606569

607570
// ID filter and find
@@ -752,14 +715,13 @@ function setDocument( node ) {
752715
}
753716
} );
754717

755-
if ( !support.cssSupportsSelector ) {
718+
if ( !support.cssHas ) {
756719

757-
// Support: Chrome 105+, Safari 15.4+
758-
// `:has()` uses a forgiving selector list as an argument so our regular
759-
// `try-catch` mechanism fails to catch `:has()` with arguments not supported
760-
// natively like `:has(:contains("Foo"))`. Where supported & spec-compliant,
761-
// we now use `CSS.supports("selector(:is(SELECTOR_TO_BE_TESTED))")`, but
762-
// outside that we mark `:has` as buggy.
720+
// Support: Chrome 105 - 110+, Safari 15.4 - 16.3+
721+
// In some browsers, `:has()` uses a forgiving selector list as an argument,
722+
// so our regular `try-catch` mechanism fails to catch `:has()` with arguments
723+
// not supported natively, like `:has(:contains("Foo"))`. The spec now requires
724+
// `:has()` parsing to be non-forgiving but browsers have not adjusted yet.
763725
rbuggyQSA.push( ":has" );
764726
}
765727

‎test/unit/support.js‎

Lines changed: 31 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -64,7 +64,7 @@ testIframe(
6464
checkClone: true,
6565
checkOn: true,
6666
clearCloneStyle: true,
67-
cssSupportsSelector: false,
67+
cssHas: true,
6868
cors: true,
6969
createHTMLDocument: true,
7070
disconnectedMatch: true,
@@ -89,7 +89,7 @@ testIframe(
8989
checkClone: true,
9090
checkOn: true,
9191
clearCloneStyle: false,
92-
cssSupportsSelector: false,
92+
cssHas: true,
9393
cors: true,
9494
createHTMLDocument: true,
9595
disconnectedMatch: true,
@@ -114,7 +114,7 @@ testIframe(
114114
checkClone: true,
115115
checkOn: true,
116116
clearCloneStyle: false,
117-
cssSupportsSelector: false,
117+
cssHas: true,
118118
cors: false,
119119
createHTMLDocument: true,
120120
disconnectedMatch: false,
@@ -139,7 +139,7 @@ testIframe(
139139
checkClone: true,
140140
checkOn: true,
141141
clearCloneStyle: true,
142-
cssSupportsSelector: false,
142+
cssHas: false,
143143
cors: true,
144144
createHTMLDocument: true,
145145
disconnectedMatch: true,
@@ -158,13 +158,13 @@ testIframe(
158158
sortDetached: true,
159159
sortStable: true
160160
},
161-
safari: {
161+
webkit: {
162162
ajax: true,
163163
boxSizingReliable: true,
164164
checkClone: true,
165165
checkOn: true,
166166
clearCloneStyle: true,
167-
cssSupportsSelector: false,
167+
cssHas: true,
168168
cors: true,
169169
createHTMLDocument: true,
170170
disconnectedMatch: true,
@@ -183,13 +183,13 @@ testIframe(
183183
sortDetached: true,
184184
sortStable: true
185185
},
186-
webkit: {
186+
safari: {
187187
ajax: true,
188188
boxSizingReliable: true,
189189
checkClone: true,
190190
checkOn: true,
191191
clearCloneStyle: true,
192-
cssSupportsSelector: true,
192+
cssHas: false,
193193
cors: true,
194194
createHTMLDocument: true,
195195
disconnectedMatch: true,
@@ -208,13 +208,13 @@ testIframe(
208208
sortDetached: true,
209209
sortStable: true
210210
},
211-
safari_9_10: {
211+
firefox: {
212212
ajax: true,
213213
boxSizingReliable: true,
214214
checkClone: true,
215215
checkOn: true,
216216
clearCloneStyle: true,
217-
cssSupportsSelector: false,
217+
cssHas: true,
218218
cors: true,
219219
createHTMLDocument: true,
220220
disconnectedMatch: true,
@@ -223,23 +223,23 @@ testIframe(
223223
noCloneChecked: true,
224224
option: true,
225225
optSelected: true,
226-
pixelBoxStyles: false,
227-
pixelPosition: false,
226+
pixelBoxStyles: true,
227+
pixelPosition: true,
228228
radioValue: true,
229229
reliableMarginLeft: true,
230-
reliableTrDimensions: true,
230+
reliableTrDimensions: false,
231231
scope: true,
232232
scrollboxSize: true,
233233
sortDetached: true,
234234
sortStable: true
235235
},
236-
firefox: {
236+
firefox_102: {
237237
ajax: true,
238238
boxSizingReliable: true,
239239
checkClone: true,
240240
checkOn: true,
241241
clearCloneStyle: true,
242-
cssSupportsSelector: true,
242+
cssHas: true,
243243
cors: true,
244244
createHTMLDocument: true,
245245
disconnectedMatch: true,
@@ -258,13 +258,13 @@ testIframe(
258258
sortDetached: true,
259259
sortStable: true
260260
},
261-
firefox_102: {
261+
firefox_60: {
262262
ajax: true,
263263
boxSizingReliable: true,
264264
checkClone: true,
265265
checkOn: true,
266266
clearCloneStyle: true,
267-
cssSupportsSelector: false,
267+
cssHas: true,
268268
cors: true,
269269
createHTMLDocument: true,
270270
disconnectedMatch: true,
@@ -276,20 +276,20 @@ testIframe(
276276
pixelBoxStyles: true,
277277
pixelPosition: true,
278278
radioValue: true,
279-
reliableMarginLeft: true,
280-
reliableTrDimensions: false,
279+
reliableMarginLeft: false,
280+
reliableTrDimensions: true,
281281
scope: true,
282282
scrollboxSize: true,
283283
sortDetached: true,
284284
sortStable: true
285285
},
286-
firefox_60: {
286+
ios: {
287287
ajax: true,
288288
boxSizingReliable: true,
289289
checkClone: true,
290290
checkOn: true,
291291
clearCloneStyle: true,
292-
cssSupportsSelector: false,
292+
cssHas: false,
293293
cors: true,
294294
createHTMLDocument: true,
295295
disconnectedMatch: true,
@@ -301,20 +301,20 @@ testIframe(
301301
pixelBoxStyles: true,
302302
pixelPosition: true,
303303
radioValue: true,
304-
reliableMarginLeft: false,
304+
reliableMarginLeft: true,
305305
reliableTrDimensions: true,
306306
scope: true,
307307
scrollboxSize: true,
308308
sortDetached: true,
309309
sortStable: true
310310
},
311-
ios: {
311+
ios_11_14: {
312312
ajax: true,
313313
boxSizingReliable: true,
314314
checkClone: true,
315315
checkOn: true,
316316
clearCloneStyle: true,
317-
cssSupportsSelector: false,
317+
cssHas: true,
318318
cors: true,
319319
createHTMLDocument: true,
320320
disconnectedMatch: true,
@@ -339,7 +339,7 @@ testIframe(
339339
checkClone: true,
340340
checkOn: true,
341341
clearCloneStyle: true,
342-
cssSupportsSelector: false,
342+
cssHas: true,
343343
cors: true,
344344
createHTMLDocument: true,
345345
disconnectedMatch: true,
@@ -364,7 +364,7 @@ testIframe(
364364
checkClone: true,
365365
checkOn: true,
366366
clearCloneStyle: true,
367-
cssSupportsSelector: false,
367+
cssHas: true,
368368
cors: true,
369369
createHTMLDocument: false,
370370
disconnectedMatch: true,
@@ -389,7 +389,7 @@ testIframe(
389389
checkClone: true,
390390
checkOn: true,
391391
clearCloneStyle: true,
392-
cssSupportsSelector: false,
392+
cssHas: true,
393393
cors: true,
394394
createHTMLDocument: true,
395395
disconnectedMatch: true,
@@ -414,7 +414,7 @@ testIframe(
414414
checkClone: false,
415415
checkOn: false,
416416
clearCloneStyle: true,
417-
cssSupportsSelector: false,
417+
cssHas: true,
418418
cors: true,
419419
createHTMLDocument: true,
420420
disconnectedMatch: true,
@@ -446,7 +446,7 @@ testIframe(
446446
// Make the selector-native build pass tests.
447447
for ( browserKey in expectedMap ) {
448448
if ( !includesModule( "selector" ) ) {
449-
delete expectedMap[ browserKey ].cssSupportsSelector;
449+
delete expectedMap[ browserKey ].cssHas;
450450
delete expectedMap[ browserKey ].disconnectedMatch;
451451
delete expectedMap[ browserKey ].getById;
452452
delete expectedMap[ browserKey ].scope;
@@ -476,6 +476,8 @@ testIframe(
476476
expected = expectedMap.firefox;
477477
} else if ( /android 4\.[0-3]/i.test( userAgent ) ) {
478478
expected = expectedMap.android;
479+
} else if ( /iphone os (?:1[1234])_/i.test( userAgent ) ) {
480+
expected = expectedMap.ios_11_14;
479481
} else if ( /iphone os (?:9|10)_/i.test( userAgent ) ) {
480482
expected = expectedMap.ios_9_10;
481483
} else if ( /iphone os 8_/i.test( userAgent ) ) {

0 commit comments

Comments
 (0)