Selector: Leverage the :scope pseudo-class where possible

The `:scope` pseudo-class[1] has surprisingly good browser support: Chrome,
Firefox & Safari have supported if for a long time; only IE & Edge lack support.
This commit leverages this pseudo-class to get rid of the ID hack in most cases.
Adding a temporary ID may cause layout thrashing which was reported a few times
in [the past.

We can't completely eliminate the ID hack in modern browses as sibling selectors
require us to change context to the parent and then `:scope` stops applying to
what we'd like. But it'd still improve performance in the vast majority of
cases.

[1] https://developer.mozilla.org/en-US/docs/Web/CSS/:scope

Fixes gh-4453
Closes gh-4454
Ref gh-4332
Ref jquery/sizzle#405

2 files changed, 72 insertions, 7 deletions

diff --git a/test/unit/selector.js b/test/unit/selector.js
index d6bd62c73..2c17b8682 100644
--- a/test/unit/selector.js
+++ b/test/unit/selector.js
@@ -1631,6 +1631,41 @@ QUnit.test( "context", function( assert ) {
 	}
 } );
 
+// Support: IE 11+, Edge 12 - 18+
+// IE/Edge don't support the :scope pseudo-class so they will trigger MutationObservers.
+// The test is skipped there.
+QUnit[
+	( QUnit.isIE || /edge\//i.test( navigator.userAgent ) ) ?
+		"skip" :
+		"test"
+	]( "selectors maintaining context don't trigger mutation observers", function( assert ) {
+	assert.expect( 1 );
+
+	var timeout,
+		done = assert.async(),
+		container = jQuery( "<div/>" ),
+		child = jQuery( "<div/>" );
+
+	child.appendTo( container );
+	container.appendTo( "#qunit-fixture" );
+
+	var observer = new MutationObserver(  function() {
+		clearTimeout( timeout );
+		observer.disconnect();
+		assert.ok( false, "Mutation observer fired during selection" );
+		done();
+	} );
+	observer.observe( container[ 0 ], { attributes: true } );
+
+	container.find( "div div" );
+
+	timeout = setTimeout( function() {
+		observer.disconnect();
+		assert.ok( true, "Mutation observer didn't fire during selection" );
+		done();
+	} );
+} );
+
 QUnit.test( "caching does not introduce bugs", function( assert ) {
 	assert.expect( 3 );
 
diff --git a/test/unit/support.js b/test/unit/support.js
index 266b02dd8..8be82bbe9 100644
--- a/test/unit/support.js
+++ b/test/unit/support.js
@@ -58,12 +58,24 @@ testIframe(
 	var expected,
 		userAgent = window.navigator.userAgent,
 		expectedMap = {
-			edge: {},
-			ie_11: {},
-			chrome: {},
-			safari: {},
-			firefox: {},
-			ios: {}
+			edge: {
+				scope: undefined
+			},
+			ie_11: {
+				scope: undefined
+			},
+			chrome: {
+				scope: true
+			},
+			safari: {
+				scope: true
+			},
+			firefox: {
+				scope: true
+			},
+			ios: {
+				scope: true
+			}
 		};
 
 	if ( /edge\//i.test( userAgent ) ) {
@@ -95,6 +107,15 @@ testIframe(
 			j++;
 		}
 
+		// Add an assertion per undefined support prop as it may
+		// not even exist on computedSupport but we still want to run
+		// the check.
+		for ( prop in expected ) {
+			if ( expected[ prop ] === undefined ) {
+				j++;
+			}
+		}
+
 		assert.expect( j );
 
 		for ( i in expected ) {
@@ -116,6 +137,15 @@ testIframe(
 			i++;
 		}
 
+		// Add an assertion per undefined support prop as it may
+		// not even exist on computedSupport but we still want to run
+		// the check.
+		for ( prop in expected ) {
+			if ( expected[ prop ] === undefined ) {
+				i++;
+			}
+		}
+
 		assert.expect( i );
 
 		// Record all support props and the failing ones and ensure every test
@@ -123,7 +153,7 @@ testIframe(
 		for ( browserKey in expectedMap ) {
 			for ( supportTestName in expectedMap[ browserKey ] ) {
 				supportProps[ supportTestName ] = true;
-				if ( expectedMap[ browserKey ][ supportTestName ] !== true ) {
+				if ( !expectedMap[ browserKey ][ supportTestName ] ) {
 					failingSupportProps[ supportTestName ] = true;
 				}
 			}