mw.loader: Fix regression that caused CSS load after scripts.

Follows-up 705d50c which introduced cssText buffer (yielding
one tick of the event queue to reduce the number of forced
repaints).

However since that made CSS loading asynchronoous (be it only for
a split second) it caused some nasty side-effects.

This was also reflected in the unit tests that had to resort
to doing setTimeout from within the mw.loader implemented script
to assert the styles. This is now sane again: Scripts execute
after styles are inserted.

Bug: 46401
Change-Id: Ib54a3e78710b7f798c6730d3f540d3284001e2de

1 files changed, 18 insertions, 24 deletions

diff --git a/tests/qunit/suites/resources/mediawiki/mediawiki.test.js b/tests/qunit/suites/resources/mediawiki/mediawiki.test.js
index 7ae9826646df..3dda7c7882ee 100644
--- a/tests/qunit/suites/resources/mediawiki/mediawiki.test.js
+++ b/tests/qunit/suites/resources/mediawiki/mediawiki.test.js
@@ -269,7 +269,7 @@
 	function assertStyleAsync( assert, $element, prop, val, fn ) {
 		var styleTestStart,
 			el = $element.get( 0 ),
-			styleTestTimeout = ( QUnit.config.testTimeout - 200 ) || 5000;
+			styleTestTimeout = ( QUnit.config.testTimeout || 5000 ) - 200;
 
 		function isCssImportApplied() {
 			// Trigger reflow, repaint, redraw, whatever (cross-browser)
@@ -340,7 +340,7 @@
 		} );
 	} );
 
-	QUnit.test( 'mw.loader.implement( styles={ "css": [text, ..] } )', 2, function ( assert ) {
+	QUnit.asyncTest( 'mw.loader.implement( styles={ "css": [text, ..] } )', 2, function ( assert ) {
 		var $element = $( '<div class="mw-test-implement-a"></div>' ).appendTo( '#qunit-fixture' );
 
 		assert.notEqual(
@@ -352,15 +352,12 @@
 		mw.loader.implement(
 			'test.implement.a',
 			function () {
-				QUnit.stop();
-				setTimeout(function () {
-					assert.equal(
-						$element.css( 'float' ),
-						'right',
-						'style is applied'
-					);
-					QUnit.start();
-				});
+				assert.equal(
+					$element.css( 'float' ),
+					'right',
+					'style is applied'
+				);
+				QUnit.start();
 			},
 			{
 				'all': '.mw-test-implement-a { float: right; }'
@@ -436,8 +433,8 @@
 		] );
 	} );
 
-// Backwards compatibility
-	QUnit.test( 'mw.loader.implement( styles={ <media>: text } ) (back-compat)', 2, function ( assert ) {
+	// Backwards compatibility
+	QUnit.asyncTest( 'mw.loader.implement( styles={ <media>: text } ) (back-compat)', 2, function ( assert ) {
 		var $element = $( '<div class="mw-test-implement-c"></div>' ).appendTo( '#qunit-fixture' );
 
 		assert.notEqual(
@@ -449,15 +446,12 @@
 		mw.loader.implement(
 			'test.implement.c',
 			function () {
-				QUnit.stop();
-				setTimeout(function () {
-					assert.equal(
-						$element.css( 'float' ),
-						'right',
-						'style is applied'
-					);
-					QUnit.start();
-				});
+				assert.equal(
+					$element.css( 'float' ),
+					'right',
+					'style is applied'
+				);
+				QUnit.start();
 			},
 			{
 				'all': '.mw-test-implement-c { float: right; }'
@@ -470,7 +464,7 @@
 		] );
 	} );
 
-// Backwards compatibility
+	// Backwards compatibility
 	QUnit.asyncTest( 'mw.loader.implement( styles={ <media>: [url, ..] } ) (back-compat)', 4, function ( assert ) {
 		var $element = $( '<div class="mw-test-implement-d"></div>' ).appendTo( '#qunit-fixture' ),
 			$element2 = $( '<div class="mw-test-implement-d2"></div>' ).appendTo( '#qunit-fixture' );
@@ -508,7 +502,7 @@
 		] );
 	} );
 
-// @import (bug 31676)
+	// @import (bug 31676)
 	QUnit.asyncTest( 'mw.loader.implement( styles has @import)', 5, function ( assert ) {
 		var isJsExecuted, $element;