WKWebExtensionAPIScripting.InsertAndRemoveCSSWithFrameIds is flaky.

https://webkit.org/b/268387 rdar://problem/121934255 Reviewed by Brian Weinstein. Wait for the tabs to load before tryign ti insert CSS and evaluate script. * Tools/TestWebKitAPI/Tests/WebKitCocoa/WKWebExtensionAPIScripting.mm: (TEST(WKWebExtensionAPIScripting, InsertAndRemoveCSS)): Move work inside browser.tabs.onUpdate. (TEST(WKWebExtensionAPIScripting, InsertAndRemoveCSSWithFrameIds)): Ditto. * Tools/TestWebKitAPI/Tests/WebKitCocoa/WKWebExtensionAPITabs.mm: (TEST(WKWebExtensionAPITabs, InsertAndRemoveCSSInMainFrame)): Move work inside browser.tabs.onUpdate. (TEST(WKWebExtensionAPITabs, InsertAndRemoveCSSInAllFrames)): Ditto. Canonical link: https://commits.webkit.org/274983@main
WebKit · Feb 19, 2024 · b891aa9 · b891aa9
1 parent 0bdcca7
commit b891aa9
Show file tree

Hide file tree

Showing 2 changed files with 154 additions and 118 deletions.
diff --git a/Tools/TestWebKitAPI/Tests/WebKitCocoa/WKWebExtensionAPIScripting.mm b/Tools/TestWebKitAPI/Tests/WebKitCocoa/WKWebExtensionAPIScripting.mm
@@ -323,65 +323,69 @@
         @"const blueValue = 'rgb(0, 0, 255)'",
         @"const transparentValue = 'rgba(0, 0, 0, 0)'",
 
-        @"const tabs = await browser.tabs.query({ active: true, currentWindow: true })",
-        @"const tabId = tabs[0].id",
+        @"browser.tabs.onUpdated.addListener(async (tabId, changeInfo, tab) => {",
+        @"  if (tab.status !== 'complete')",
+        @"    return",
 
-        @"function getBackgroundColor() { return window.getComputedStyle(document.body).getPropertyValue('background-color') }",
-        @"function getFontSize() { return window.getComputedStyle(document.body).getPropertyValue('font-size') }",
+        @"  function getBackgroundColor() { return window.getComputedStyle(document.body).getPropertyValue('background-color') }",
+        @"  function getFontSize() { return window.getComputedStyle(document.body).getPropertyValue('font-size') }",
 
-        @"await browser.scripting.insertCSS( { target: { tabId: tabId, allFrames: false }, files: [ 'backgroundColor.css' ] })",
-        @"let results = await browser.scripting.executeScript( { target: { tabId: tabId, allFrames: true }, func: getBackgroundColor })",
-        @"browser.test.assertEq(results[0].result, pinkValue)",
-        @"browser.test.assertEq(results[1].result, blueValue)",
-
-        @"await browser.scripting.removeCSS( { target: { tabId: tabId, allFrames: false }, files: [ 'backgroundColor.css' ] })",
-        @"results = await browser.scripting.executeScript( { target: { tabId: tabId, allFrames: true }, func: getBackgroundColor })",
-        @"browser.test.assertEq(results[0].result, transparentValue)",
-        @"browser.test.assertEq(results[1].result, blueValue)",
-
-        @"await browser.scripting.insertCSS( { target: { tabId: tabId, allFrames: false }, css: 'body { background-color: pink !important }' })",
-        @"results = await browser.scripting.executeScript( { target: { tabId: tabId, allFrames: true }, func: getBackgroundColor })",
-        @"browser.test.assertEq(results[0].result, pinkValue)",
-        @"browser.test.assertEq(results[1].result, blueValue)",
-
-        @"await browser.scripting.removeCSS( { target: { tabId: tabId, allFrames: false }, css: 'body { background-color: pink !important }' })",
-        @"results = await browser.scripting.executeScript( { target: { tabId: tabId, allFrames: true }, func: getBackgroundColor })",
-        @"browser.test.assertEq(results[0].result, transparentValue)",
-        @"browser.test.assertEq(results[1].result, blueValue)",
-
-        @"await browser.scripting.insertCSS( { target: { tabId: tabId, allFrames: true }, files: [ 'backgroundColor.css' ] })",
-        @"results = await browser.scripting.executeScript( { target: { tabId: tabId, allFrames: true }, func: getBackgroundColor })",
-        @"browser.test.assertEq(results[0].result, pinkValue)",
-        @"browser.test.assertEq(results[1].result, pinkValue)",
-
-        @"await browser.scripting.removeCSS( { target: { tabId: tabId, allFrames: true }, files: [ 'backgroundColor.css' ] })",
-        @"results = await browser.scripting.executeScript( { target: { tabId: tabId, allFrames: true }, func: getBackgroundColor })",
-        @"browser.test.assertEq(results[0].result, transparentValue)",
-        @"browser.test.assertEq(results[1].result, blueValue)",
-
-        // Storing original font size.
-        @"results = await browser.scripting.executeScript( { target: { tabId: tabId, allFrames: false }, func: getFontSize })",
-        @"let originalFontSize = results[0].result",
-
-        @"await browser.scripting.insertCSS( { target: { tabId: tabId, allFrames: true }, files: [ 'backgroundColor.css', 'fontSize.css' ] })",
-        @"results = await browser.scripting.executeScript( { target: { tabId: tabId, allFrames: true }, func: getBackgroundColor })",
-        @"browser.test.assertEq(results[0].result, pinkValue)",
-        @"browser.test.assertEq(results[1].result, pinkValue)",
-
-        @"results = await browser.scripting.executeScript( { target: { tabId: tabId, allFrames: true }, func: getFontSize })",
-        @"browser.test.assertEq(results[0].result, '104px')",
-        @"browser.test.assertEq(results[1].result, '104px')",
-
-        @"await browser.scripting.removeCSS( { target: { tabId: tabId, allFrames: true }, files: [ 'backgroundColor.css', 'fontSize.css' ] })",
-        @"results = await browser.scripting.executeScript( { target: { tabId: tabId, allFrames: true }, func: getBackgroundColor })",
-        @"browser.test.assertEq(results[0].result, transparentValue)",
-        @"browser.test.assertEq(results[1].result, blueValue)",
-
-        @"results = await browser.scripting.executeScript( { target: { tabId: tabId, allFrames: true }, func: getFontSize })",
-        @"browser.test.assertEq(results[0].result, originalFontSize)",
-        @"browser.test.assertEq(results[1].result, originalFontSize)",
+        @"  await browser.scripting.insertCSS( { target: { tabId: tabId, allFrames: false }, files: [ 'backgroundColor.css' ] })",
+        @"  let results = await browser.scripting.executeScript( { target: { tabId: tabId, allFrames: true }, func: getBackgroundColor })",
+        @"  browser.test.assertEq(results[0].result, pinkValue)",
+        @"  browser.test.assertEq(results[1].result, blueValue)",
 
-        @"browser.test.notifyPass()"
+        @"  await browser.scripting.removeCSS( { target: { tabId: tabId, allFrames: false }, files: [ 'backgroundColor.css' ] })",
+        @"  results = await browser.scripting.executeScript( { target: { tabId: tabId, allFrames: true }, func: getBackgroundColor })",
+        @"  browser.test.assertEq(results[0].result, transparentValue)",
+        @"  browser.test.assertEq(results[1].result, blueValue)",
+
+        @"  await browser.scripting.insertCSS( { target: { tabId: tabId, allFrames: false }, css: 'body { background-color: pink !important }' })",
+        @"  results = await browser.scripting.executeScript( { target: { tabId: tabId, allFrames: true }, func: getBackgroundColor })",
+        @"  browser.test.assertEq(results[0].result, pinkValue)",
+        @"  browser.test.assertEq(results[1].result, blueValue)",
+
+        @"  await browser.scripting.removeCSS( { target: { tabId: tabId, allFrames: false }, css: 'body { background-color: pink !important }' })",
+        @"  results = await browser.scripting.executeScript( { target: { tabId: tabId, allFrames: true }, func: getBackgroundColor })",
+        @"  browser.test.assertEq(results[0].result, transparentValue)",
+        @"  browser.test.assertEq(results[1].result, blueValue)",
+
+        @"  await browser.scripting.insertCSS( { target: { tabId: tabId, allFrames: true }, files: [ 'backgroundColor.css' ] })",
+        @"  results = await browser.scripting.executeScript( { target: { tabId: tabId, allFrames: true }, func: getBackgroundColor })",
+        @"  browser.test.assertEq(results[0].result, pinkValue)",
+        @"  browser.test.assertEq(results[1].result, pinkValue)",
+
+        @"  await browser.scripting.removeCSS( { target: { tabId: tabId, allFrames: true }, files: [ 'backgroundColor.css' ] })",
+        @"  results = await browser.scripting.executeScript( { target: { tabId: tabId, allFrames: true }, func: getBackgroundColor })",
+        @"  browser.test.assertEq(results[0].result, transparentValue)",
+        @"  browser.test.assertEq(results[1].result, blueValue)",
+
+        //   Storing original font size.
+        @"  results = await browser.scripting.executeScript( { target: { tabId: tabId, allFrames: false }, func: getFontSize })",
+        @"  let originalFontSize = results[0].result",
+
+        @"  await browser.scripting.insertCSS( { target: { tabId: tabId, allFrames: true }, files: [ 'backgroundColor.css', 'fontSize.css' ] })",
+        @"  results = await browser.scripting.executeScript( { target: { tabId: tabId, allFrames: true }, func: getBackgroundColor })",
+        @"  browser.test.assertEq(results[0].result, pinkValue)",
+        @"  browser.test.assertEq(results[1].result, pinkValue)",
+
+        @"  results = await browser.scripting.executeScript( { target: { tabId: tabId, allFrames: true }, func: getFontSize })",
+        @"  browser.test.assertEq(results[0].result, '104px')",
+        @"  browser.test.assertEq(results[1].result, '104px')",
+
+        @"  await browser.scripting.removeCSS( { target: { tabId: tabId, allFrames: true }, files: [ 'backgroundColor.css', 'fontSize.css' ] })",
+        @"  results = await browser.scripting.executeScript( { target: { tabId: tabId, allFrames: true }, func: getBackgroundColor })",
+        @"  browser.test.assertEq(results[0].result, transparentValue)",
+        @"  browser.test.assertEq(results[1].result, blueValue)",
+
+        @"  results = await browser.scripting.executeScript( { target: { tabId: tabId, allFrames: true }, func: getFontSize })",
+        @"  browser.test.assertEq(results[0].result, originalFontSize)",
+        @"  browser.test.assertEq(results[1].result, originalFontSize)",
+
+        @"  browser.test.notifyPass()",
+        @"})",
+
+        @"browser.test.yield('Load Tab')",
     ]);
 
     static auto *backgroundColor = @"body { background-color: pink !important }";
@@ -401,9 +405,14 @@
 
     auto *matchPattern = [_WKWebExtensionMatchPattern matchPatternWithScheme:url.scheme host:url.host path:@"/*"];
     [manager.get().context setPermissionStatus:_WKWebExtensionContextPermissionStatusGrantedExplicitly forMatchPattern:matchPattern];
-    [manager.get().defaultTab.mainWebView loadRequest:urlRequest];
 
     [manager loadAndRun];
+
+    EXPECT_NS_EQUAL(manager.get().yieldMessage, @"Load Tab");
+
+    [manager.get().defaultTab.mainWebView loadRequest:urlRequest];
+
+    [manager run];
 }
 
 TEST(WKWebExtensionAPIScripting, InsertAndRemoveCSSWithFrameIds)
@@ -418,37 +427,41 @@
         @"const blueValue = 'rgb(0, 0, 255)'",
         @"const transparentValue = 'rgba(0, 0, 0, 0)'",
 
-        @"const tabs = await browser.tabs.query({ active: true, currentWindow: true })",
-        @"const tabId = tabs[0].id",
+        @"browser.tabs.onUpdated.addListener(async (tabId, changeInfo, tab) => {",
+        @"  if (tab.status !== 'complete')",
+        @"    return",
 
-        @"function getBackgroundColor() { return window.getComputedStyle(document.body).getPropertyValue('background-color') }",
-        @"function getFontSize() { return window.getComputedStyle(document.body).getPropertyValue('font-size') }",
+        @"  function getBackgroundColor() { return window.getComputedStyle(document.body).getPropertyValue('background-color') }",
+        @"  function getFontSize() { return window.getComputedStyle(document.body).getPropertyValue('font-size') }",
 
-        @"function logMessage() { console.log('Logging message') }",
+        @"  function logMessage() { console.log('Logging message') }",
 
-        @"await browser.scripting.insertCSS( { target: { tabId: tabId, frameIds: [ 0 ] }, files: [ 'backgroundColor.css' ] })",
-        @"let results = await browser.scripting.executeScript( { target: { tabId: tabId, allFrames: true }, func: getBackgroundColor })",
-        @"browser.test.assertEq(results[0].result, pinkValue)",
-        @"browser.test.assertEq(results[1].result, blueValue)",
+        @"  await browser.scripting.insertCSS( { target: { tabId: tabId, frameIds: [ 0 ] }, files: [ 'backgroundColor.css' ] })",
+        @"  let results = await browser.scripting.executeScript( { target: { tabId: tabId, allFrames: true }, func: getBackgroundColor })",
+        @"  browser.test.assertEq(results[0].result, pinkValue)",
+        @"  browser.test.assertEq(results[1].result, blueValue)",
 
-        @"await browser.scripting.removeCSS( { target: { tabId: tabId, frameIds: [ 0 ] }, files: [ 'backgroundColor.css' ] })",
-        @"results = await browser.scripting.executeScript( { target: { tabId: tabId, allFrames: true }, func: getBackgroundColor })",
-        @"browser.test.assertEq(results[0].result, transparentValue)",
-        @"browser.test.assertEq(results[1].result, blueValue)",
+        @"  await browser.scripting.removeCSS( { target: { tabId: tabId, frameIds: [ 0 ] }, files: [ 'backgroundColor.css' ] })",
+        @"  results = await browser.scripting.executeScript( { target: { tabId: tabId, allFrames: true }, func: getBackgroundColor })",
+        @"  browser.test.assertEq(results[0].result, transparentValue)",
+        @"  browser.test.assertEq(results[1].result, blueValue)",
 
-        @"await browser.scripting.insertCSS( { target: { tabId: tabId, frameIds: [ 0 ] }, css: 'body { background-color: pink !important }' })",
-        @"results = await browser.scripting.executeScript( { target: { tabId: tabId, allFrames: true }, func: getBackgroundColor })",
-        @"browser.test.assertEq(results[0].result, pinkValue)",
-        @"browser.test.assertEq(results[1].result, blueValue)",
+        @"  await browser.scripting.insertCSS( { target: { tabId: tabId, frameIds: [ 0 ] }, css: 'body { background-color: pink !important }' })",
+        @"  results = await browser.scripting.executeScript( { target: { tabId: tabId, allFrames: true }, func: getBackgroundColor })",
+        @"  browser.test.assertEq(results[0].result, pinkValue)",
+        @"  browser.test.assertEq(results[1].result, blueValue)",
 
-        @"await browser.scripting.removeCSS( { target: { tabId: tabId, frameIds: [ 0 ] }, css: 'body { background-color: pink !important }' })",
-        @"results = await browser.scripting.executeScript( { target: { tabId: tabId, allFrames: true }, func: getBackgroundColor })",
-        @"browser.test.assertEq(results[0].result, transparentValue)",
-        @"browser.test.assertEq(results[1].result, blueValue)",
+        @"  await browser.scripting.removeCSS( { target: { tabId: tabId, frameIds: [ 0 ] }, css: 'body { background-color: pink !important }' })",
+        @"  results = await browser.scripting.executeScript( { target: { tabId: tabId, allFrames: true }, func: getBackgroundColor })",
+        @"  browser.test.assertEq(results[0].result, transparentValue)",
+        @"  browser.test.assertEq(results[1].result, blueValue)",
 
         // FIXME: <https://webkit.org/b/262491> Test with subframe once there's support for style injections for specific frame Ids.
 
-        @"browser.test.notifyPass()"
+        @"  browser.test.notifyPass()",
+        @"})",
+
+        @"browser.test.yield('Load Tab')",
     ]);
 
     static auto *backgroundColor = @"body { background-color: pink !important }";
@@ -468,9 +481,14 @@
 
     auto *matchPattern = [_WKWebExtensionMatchPattern matchPatternWithScheme:url.scheme host:url.host path:@"/*"];
     [manager.get().context setPermissionStatus:_WKWebExtensionContextPermissionStatusGrantedExplicitly forMatchPattern:matchPattern];
-    [manager.get().defaultTab.mainWebView loadRequest:urlRequest];
 
     [manager loadAndRun];
+
+    EXPECT_NS_EQUAL(manager.get().yieldMessage, @"Load Tab");
+
+    [manager.get().defaultTab.mainWebView loadRequest:urlRequest];
+
+    [manager run];
 }
 
 TEST(WKWebExtensionAPIScripting, World)