Fix flakiness in http/tests/devtools/bindings/inline-styles-binding.js

Prevents races with regards to location updates and stylesheet
updated.

Fixed: 1104333
Change-Id: I78e17444482f16f97503e8c89ea42208c01d21c8
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2299619Reviewed-by: Mathias Bynens <mathias@chromium.org>
Commit-Queue: Alex Rudenko <alexrudenko@chromium.org>
Cr-Commit-Position: refs/heads/master@{#788539}

third_party/blink/web_tests/TestExpectations

@@ -6851,7 +6851,6 @@ crbug.com/1102167 external/wpt/fetch/redirect-navigate/preserve-fragment.html [
 crbug.com/1104186 [ Win ] fast/forms/color-scheme/suggestion-picker/time-suggestion-picker-appearance.html [ Pass Failure ]
 
 crbug.com/1104195 inspector-protocol/css/css-set-effective-property-value.js [ Pass Failure Crash ]
-crbug.com/1104333 http/tests/devtools/bindings/inline-styles-binding.js [ Pass Failure Crash ]
 
 # Sheriff 2020-07-13
 

third_party/blink/web_tests/http/tests/devtools/bindings/inline-styles-binding-expected.txt

@@ -5,11 +5,11 @@ LiveLocation 'script1' was updated 17:48
 LiveLocation 'style0' was updated 7:11
 LiveLocation 'style1' was updated 17:11
 Adding rule0
-LiveLocation 'style0' was updated 9:1
-LiveLocation 'style1' was updated 19:11
 LiveLocation 'script0' was updated 15:12
 LiveLocation 'script1' was updated 19:48
+LiveLocation 'style0' was updated 9:1
+LiveLocation 'style1' was updated 19:11
 Adding rule1
-LiveLocation 'style1' was updated 21:1
 LiveLocation 'script1' was updated 21:38
+LiveLocation 'style1' was updated 21:1
 

third_party/blink/web_tests/http/tests/devtools/bindings/inline-styles-binding.js

@@ -7,43 +7,58 @@
   await TestRunner.loadModule('bindings_test_runner');
 
   await TestRunner.navigatePromise('./resources/inline-style.html');
-  var uiSourceCode = await TestRunner.waitForUISourceCode('inline-style.html', Workspace.projectTypes.Network);
+  const uiSourceCode = await TestRunner.waitForUISourceCode('inline-style.html', Workspace.projectTypes.Network);
 
   await uiSourceCode.requestContent(); // prefetch content to fix flakiness
-  var styleSheets = TestRunner.cssModel.styleSheetIdsForURL(uiSourceCode.url());
-  var scripts = TestRunner.debuggerModel.scriptsForSourceURL(uiSourceCode.url());
-  var locationPool = new Bindings.LiveLocationPool();
-  var i = 0;
-  for (var script of scripts) {
-    var rawLocation = TestRunner.debuggerModel.createRawLocation(script, script.lineOffset, script.columnOffset);
+  const headers = TestRunner.cssModel.headersForSourceURL(uiSourceCode.url());
+  // Sort headers in the order they appear in the file to avoid flakiness.
+  headers.sort((a, b) => a.startLine - b.startLine);
+  const styleSheets = headers.map(header => header.id);
+  const scripts = TestRunner.debuggerModel.scriptsForSourceURL(uiSourceCode.url());
+  const locationPool = new Bindings.LiveLocationPool();
+  let i = 0;
+  const locationUpdates = new Map();
+  for (const script of scripts) {
+    const rawLocation = TestRunner.debuggerModel.createRawLocation(script, script.lineOffset, script.columnOffset);
     await Bindings.debuggerWorkspaceBinding.createLiveLocation(
       rawLocation, updateDelegate.bind(null, 'script' + i), locationPool);
     i++;
   }
 
   i = 0;
-  for (var styleSheetId of styleSheets) {
-    var header = TestRunner.cssModel.styleSheetHeaderForId(styleSheetId);
-    var rawLocation = new SDK.CSSLocation(header, header.startLine, header.startColumn);
+  for (const styleSheetId of styleSheets) {
+    const header = TestRunner.cssModel.styleSheetHeaderForId(styleSheetId);
+    const rawLocation = new SDK.CSSLocation(header, header.startLine, header.startColumn);
     await Bindings.cssWorkspaceBinding.createLiveLocation(
       rawLocation, updateDelegate.bind(null, 'style' + i), locationPool);
     i++;
   }
 
+  await TestRunner.waitForPendingLiveLocationUpdates();
+  printLocationUpdates();
+
   i = 0;
-  for (var styleSheetId of styleSheets) {
+  for (const styleSheetId of styleSheets) {
     TestRunner.addResult('Adding rule' + i)
     await TestRunner.cssModel.addRule(styleSheetId, `.new-rule {
   --new: true;
 }`, TextUtils.TextRange.createFromLocation(0, 0));
     await TestRunner.waitForPendingLiveLocationUpdates();
+    printLocationUpdates();
     i++;
   }
 
-
   async function updateDelegate(name, location) {
-    var uiLocation = await location.uiLocation();
-    TestRunner.addResult(`LiveLocation '${name}' was updated ${uiLocation.lineNumber}:${uiLocation.columnNumber}`);
+    const uiLocation = await location.uiLocation();
+    locationUpdates.set(name, `LiveLocation '${name}' was updated ${uiLocation.lineNumber}:${uiLocation.columnNumber}`);
+  }
+
+  function printLocationUpdates() {
+    const keys = [...locationUpdates.keys()].sort();
+    for (const key of keys) {
+      TestRunner.addResult(locationUpdates.get(key));
+    }
+    locationUpdates.clear();
   }
 
   TestRunner.completeTest();