Selector: Stop relying on CSS.supports( "selector(...)" )

mgol · mgol · commit c4e033c7369d · 2023-02-09T18:01:31.000+01:00
`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 gh-5194 Ref gh-5098 Ref gh-5107 Ref w3c/csswg-drafts#7676
diff --git a/package.json b/package.json
@@ -57,7 +57,7 @@
     "load-grunt-tasks": "5.1.0",
     "multiparty": "4.2.3",
     "native-promise-only": "0.8.1",
-    "playwright-webkit": "1.29.2",
+    "playwright-webkit": "1.30.0",
     "promises-aplus-tests": "2.1.2",
     "q": "1.5.1",
     "qunit": "2.10.1",
diff --git a/src/selector.js b/src/selector.js
@@ -9,7 +9,6 @@ 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/escapeSelector.js";
@@ -252,32 +251,6 @@ 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 `:is()` pseudo-class:
-					// https://drafts.csswg.org/selectors/#matches
-					// `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 &&
-
-						// `CSS.supports( "selector(...)" )` requires the argument to the
-						// `selector` function to be a `<complex-selector>`, not
-						// a `<complex-selector-list>` which our selector may be. Wrapping with
-						// `:is` works around the issue and is supported by all browsers
-						// we support except for IE which will fail the support test anyway.
-						// eslint-disable-next-line no-undef
-						!CSS.supports( "selector(:is(" + 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
@@ -21,14 +21,13 @@ if ( isIE ) {
 	);
 }
 
-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(:is(SELECTOR_TO_BE_TESTED))")`, but
-	// outside that we mark `:has` as buggy.
+if ( !support.cssHas ) {
+
+	// Support: Chrome 105 - 110+, Safari 15.4 - 16.3+
+	// In some browsers, `: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"))`. The spec now requires
+	// `:has()` parsing to be non-forgiving but browsers have not adjusted yet.
 	rbuggyQSA.push( ":has" );
 }
 
diff --git a/src/selector/support.js b/src/selector/support.js
@@ -1,27 +1,20 @@
+import document from "../var/document.js";
 import support from "../var/support.js";
 
-// Support: IE 11+
-// IE doesn't support `CSS.supports( "selector(...)" )`; it will throw
-// in this support test.
+// Support: Chrome 105 - 110+, Safari 15.4 - 16.3+
+// Make sure forgiving mode is not used in `:has()`.
+// `*` 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.
+//
+// Note that we don't need to detect the complete lack of support for `:has()`
+// as then the `qSA` path will throw and fall back to jQuery traversal anyway.
 try {
-	/* eslint-disable no-undef */
-
-	// Support: Chrome 105+, Firefox <106, 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 */
+	document.querySelector( ":has(*,:jqfake)" );
+	support.cssHas = false;
 } catch ( e ) {
-	support.cssSupportsSelector = false;
+	support.cssHas = true;
 }
 
 export default support;
diff --git a/test/unit/support.js b/test/unit/support.js
@@ -59,39 +59,39 @@ testIframe(
 		userAgent = window.navigator.userAgent,
 		expectedMap = {
 			ie_11: {
-				cssSupportsSelector: false,
+				cssHas: true,
 				reliableTrDimensions: false
 			},
 			chrome: {
-				cssSupportsSelector: false,
+				cssHas: false,
 				reliableTrDimensions: true
 			},
 			safari: {
-				cssSupportsSelector: false,
+				cssHas: false,
 				reliableTrDimensions: true
 			},
 			webkit: {
-				cssSupportsSelector: true,
+				cssHas: true,
 				reliableTrDimensions: true
 			},
 			firefox_102: {
-				cssSupportsSelector: false,
+				cssHas: true,
 				reliableTrDimensions: false
 			},
 			firefox: {
-				cssSupportsSelector: true,
+				cssHas: true,
 				reliableTrDimensions: false
 			},
 			ios: {
-				cssSupportsSelector: false,
+				cssHas: false,
 				reliableTrDimensions: true
 			}
 		};
 
 	// Make the selector-native build pass tests.
 	for ( browserKey in expectedMap ) {
 		if ( !includesModule( "selector" ) ) {
-			delete expectedMap[ browserKey ].cssSupportsSelector;
+			delete expectedMap[ browserKey ].cssHas;
 		}
 	}
 
