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 gh-5194
Closes gh-5207
Ref gh-5206
Ref gh-5098
Ref gh-5107
Ref w3c/csswg-drafts#7676

1 files changed, 57 insertions, 55 deletions

diff --git a/test/unit/support.js b/test/unit/support.js
index cd14c2e43..d4955936d 100644
--- a/test/unit/support.js
+++ b/test/unit/support.js
@@ -64,7 +64,7 @@ testIframe(
 				checkClone: true,
 				checkOn: true,
 				clearCloneStyle: true,
-				cssSupportsSelector: false,
+				cssHas: true,
 				cors: true,
 				createHTMLDocument: true,
 				disconnectedMatch: true,
@@ -83,20 +83,20 @@ testIframe(
 				sortDetached: true,
 				sortStable: true
 			},
-			ie_10_11: {
+			ie_9: {
 				ajax: true,
 				boxSizingReliable: false,
 				checkClone: true,
 				checkOn: true,
 				clearCloneStyle: false,
-				cssSupportsSelector: false,
-				cors: true,
+				cssHas: true,
+				cors: false,
 				createHTMLDocument: true,
-				disconnectedMatch: true,
+				disconnectedMatch: false,
 				focusin: true,
-				getById: true,
+				getById: false,
 				noCloneChecked: false,
-				option: true,
+				option: false,
 				optSelected: false,
 				pixelBoxStyles: true,
 				pixelPosition: true,
@@ -104,24 +104,24 @@ testIframe(
 				reliableMarginLeft: true,
 				reliableTrDimensions: false,
 				scope: false,
-				scrollboxSize: true,
+				scrollboxSize: false,
 				sortDetached: true,
 				sortStable: true
 			},
-			ie_9: {
+			ie_10_11: {
 				ajax: true,
 				boxSizingReliable: false,
 				checkClone: true,
 				checkOn: true,
 				clearCloneStyle: false,
-				cssSupportsSelector: false,
-				cors: false,
+				cssHas: true,
+				cors: true,
 				createHTMLDocument: true,
-				disconnectedMatch: false,
+				disconnectedMatch: true,
 				focusin: true,
-				getById: false,
+				getById: true,
 				noCloneChecked: false,
-				option: false,
+				option: true,
 				optSelected: false,
 				pixelBoxStyles: true,
 				pixelPosition: true,
@@ -129,7 +129,7 @@ testIframe(
 				reliableMarginLeft: true,
 				reliableTrDimensions: false,
 				scope: false,
-				scrollboxSize: false,
+				scrollboxSize: true,
 				sortDetached: true,
 				sortStable: true
 			},
@@ -139,7 +139,7 @@ testIframe(
 				checkClone: true,
 				checkOn: true,
 				clearCloneStyle: true,
-				cssSupportsSelector: false,
+				cssHas: false,
 				cors: true,
 				createHTMLDocument: true,
 				disconnectedMatch: true,
@@ -164,7 +164,7 @@ testIframe(
 				checkClone: true,
 				checkOn: true,
 				clearCloneStyle: true,
-				cssSupportsSelector: false,
+				cssHas: false,
 				cors: true,
 				createHTMLDocument: true,
 				disconnectedMatch: true,
@@ -189,7 +189,7 @@ testIframe(
 				checkClone: true,
 				checkOn: true,
 				clearCloneStyle: true,
-				cssSupportsSelector: true,
+				cssHas: true,
 				cors: true,
 				createHTMLDocument: true,
 				disconnectedMatch: true,
@@ -208,13 +208,13 @@ testIframe(
 				sortDetached: true,
 				sortStable: true
 			},
-			safari_9_10: {
+			firefox_60: {
 				ajax: true,
 				boxSizingReliable: true,
 				checkClone: true,
 				checkOn: true,
 				clearCloneStyle: true,
-				cssSupportsSelector: false,
+				cssHas: true,
 				cors: true,
 				createHTMLDocument: true,
 				disconnectedMatch: true,
@@ -223,23 +223,23 @@ testIframe(
 				noCloneChecked: true,
 				option: true,
 				optSelected: true,
-				pixelBoxStyles: false,
-				pixelPosition: false,
+				pixelBoxStyles: true,
+				pixelPosition: true,
 				radioValue: true,
-				reliableMarginLeft: true,
+				reliableMarginLeft: false,
 				reliableTrDimensions: true,
 				scope: true,
 				scrollboxSize: true,
 				sortDetached: true,
 				sortStable: true
 			},
-			firefox: {
+			firefox_102: {
 				ajax: true,
 				boxSizingReliable: true,
 				checkClone: true,
 				checkOn: true,
 				clearCloneStyle: true,
-				cssSupportsSelector: true,
+				cssHas: true,
 				cors: true,
 				createHTMLDocument: true,
 				disconnectedMatch: true,
@@ -258,13 +258,13 @@ testIframe(
 				sortDetached: true,
 				sortStable: true
 			},
-			firefox_102: {
+			firefox: {
 				ajax: true,
 				boxSizingReliable: true,
 				checkClone: true,
 				checkOn: true,
 				clearCloneStyle: true,
-				cssSupportsSelector: false,
+				cssHas: true,
 				cors: true,
 				createHTMLDocument: true,
 				disconnectedMatch: true,
@@ -283,13 +283,13 @@ testIframe(
 				sortDetached: true,
 				sortStable: true
 			},
-			firefox_60: {
+			ios_7: {
 				ajax: true,
 				boxSizingReliable: true,
 				checkClone: true,
 				checkOn: true,
 				clearCloneStyle: true,
-				cssSupportsSelector: false,
+				cssHas: true,
 				cors: true,
 				createHTMLDocument: true,
 				disconnectedMatch: true,
@@ -298,33 +298,33 @@ testIframe(
 				noCloneChecked: true,
 				option: true,
 				optSelected: true,
-				pixelBoxStyles: true,
-				pixelPosition: true,
+				pixelBoxStyles: false,
+				pixelPosition: false,
 				radioValue: true,
-				reliableMarginLeft: false,
+				reliableMarginLeft: true,
 				reliableTrDimensions: true,
 				scope: true,
 				scrollboxSize: true,
 				sortDetached: true,
 				sortStable: true
 			},
-			ios: {
+			ios_8: {
 				ajax: true,
 				boxSizingReliable: true,
 				checkClone: true,
 				checkOn: true,
 				clearCloneStyle: true,
-				cssSupportsSelector: false,
+				cssHas: true,
 				cors: true,
-				createHTMLDocument: true,
+				createHTMLDocument: false,
 				disconnectedMatch: true,
 				focusin: false,
 				getById: true,
 				noCloneChecked: true,
 				option: true,
 				optSelected: true,
-				pixelBoxStyles: true,
-				pixelPosition: true,
+				pixelBoxStyles: false,
+				pixelPosition: false,
 				radioValue: true,
 				reliableMarginLeft: true,
 				reliableTrDimensions: true,
@@ -339,7 +339,7 @@ testIframe(
 				checkClone: true,
 				checkOn: true,
 				clearCloneStyle: true,
-				cssSupportsSelector: false,
+				cssHas: true,
 				cors: true,
 				createHTMLDocument: true,
 				disconnectedMatch: true,
@@ -358,23 +358,23 @@ testIframe(
 				sortDetached: true,
 				sortStable: true
 			},
-			ios_8: {
+			ios_11_15_3: {
 				ajax: true,
 				boxSizingReliable: true,
 				checkClone: true,
 				checkOn: true,
 				clearCloneStyle: true,
-				cssSupportsSelector: false,
+				cssHas: true,
 				cors: true,
-				createHTMLDocument: false,
+				createHTMLDocument: true,
 				disconnectedMatch: true,
 				focusin: false,
 				getById: true,
 				noCloneChecked: true,
 				option: true,
 				optSelected: true,
-				pixelBoxStyles: false,
-				pixelPosition: false,
+				pixelBoxStyles: true,
+				pixelPosition: true,
 				radioValue: true,
 				reliableMarginLeft: true,
 				reliableTrDimensions: true,
@@ -383,13 +383,13 @@ testIframe(
 				sortDetached: true,
 				sortStable: true
 			},
-			ios_7: {
+			ios: {
 				ajax: true,
 				boxSizingReliable: true,
 				checkClone: true,
 				checkOn: true,
 				clearCloneStyle: true,
-				cssSupportsSelector: false,
+				cssHas: false,
 				cors: true,
 				createHTMLDocument: true,
 				disconnectedMatch: true,
@@ -398,8 +398,8 @@ testIframe(
 				noCloneChecked: true,
 				option: true,
 				optSelected: true,
-				pixelBoxStyles: false,
-				pixelPosition: false,
+				pixelBoxStyles: true,
+				pixelPosition: true,
 				radioValue: true,
 				reliableMarginLeft: true,
 				reliableTrDimensions: true,
@@ -414,7 +414,7 @@ testIframe(
 				checkClone: false,
 				checkOn: false,
 				clearCloneStyle: true,
-				cssSupportsSelector: false,
+				cssHas: true,
 				cors: true,
 				createHTMLDocument: true,
 				disconnectedMatch: true,
@@ -446,7 +446,7 @@ testIframe(
 	// Make the selector-native build pass tests.
 	for ( browserKey in expectedMap ) {
 		if ( !includesModule( "selector" ) ) {
-			delete expectedMap[ browserKey ].cssSupportsSelector;
+			delete expectedMap[ browserKey ].cssHas;
 			delete expectedMap[ browserKey ].disconnectedMatch;
 			delete expectedMap[ browserKey ].getById;
 			delete expectedMap[ browserKey ].scope;
@@ -457,10 +457,10 @@ testIframe(
 
 	if ( /edge\//i.test( userAgent ) ) {
 		expected = expectedMap.edge;
-	} else if ( /(msie 10\.0|trident\/7\.0)/i.test( userAgent ) ) {
-		expected = expectedMap.ie_10_11;
 	} else if ( /msie 9\.0/i.test( userAgent ) ) {
 		expected = expectedMap.ie_9;
+	} else if ( /(msie 10\.0|trident\/7\.0)/i.test( userAgent ) ) {
+		expected = expectedMap.ie_10_11;
 	} else if ( /chrome/i.test( userAgent ) ) {
 
 		// Catches Chrome on Android as well (i.e. the default
@@ -476,12 +476,14 @@ testIframe(
 		expected = expectedMap.firefox;
 	} else if ( /android 4\.[0-3]/i.test( userAgent ) ) {
 		expected = expectedMap.android;
-	} else if ( /iphone os (?:9|10)_/i.test( userAgent ) ) {
-		expected = expectedMap.ios_9_10;
-	} else if ( /iphone os 8_/i.test( userAgent ) ) {
-		expected = expectedMap.ios_8;
 	} else if ( /iphone os 7_/i.test( userAgent ) ) {
 		expected = expectedMap.ios_7;
+	} else if ( /iphone os 8_/i.test( userAgent ) ) {
+		expected = expectedMap.ios_8;
+	} else if ( /iphone os (?:9|10)_/i.test( userAgent ) ) {
+		expected = expectedMap.ios_9_10;
+	} else if ( /iphone os (?:1[1234]_|15_[0123])/i.test( userAgent ) ) {
+		expected = expectedMap.ios_11_15_3;
 	} else if ( /(?:iphone|ipad);.*(?:iphone)? os \d+_/i.test( userAgent ) ) {
 		expected = expectedMap.ios;
 	} else if ( typeof URLSearchParams !== "undefined" &&