From 74de5e6893f886e98d84e6a8e50afc1e47da986c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Micha=C5=82=20Go=C5=82=C4=99biowski-Owczarek?= Date: Wed, 21 Sep 2022 14:51:36 +0200 Subject: [PATCH] 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: 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. Ref gh-5098 Ref gh-5107 Ref jquery/sizzle#486 Ref w3c/csswg-drafts#7676 --- src/selector.js | 58 +++++++++++++++++++++++++++++++++++++++++++ test/unit/selector.js | 12 ++++++++- test/unit/support.js | 13 ++++++++++ 3 files changed, 82 insertions(+), 1 deletion(-) diff --git a/src/selector.js b/src/selector.js index 929017da3f..bb53ad073e 100644 --- a/src/selector.js +++ b/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 diff --git a/test/unit/selector.js b/test/unit/selector.js index 3a866f8229..b8fc5118b5 100644 --- a/test/unit/selector.js +++ b/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 ) { diff --git a/test/unit/support.js b/test/unit/support.js index 2de0266acb..1b0904d83e 100644 --- a/test/unit/support.js +++ b/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,