diff options
Diffstat (limited to 'toolkit/components/extensions/test/xpcshell/test_ext_scripting_contentScripts_css.js')
-rw-r--r-- | toolkit/components/extensions/test/xpcshell/test_ext_scripting_contentScripts_css.js | 331 |
1 files changed, 331 insertions, 0 deletions
diff --git a/toolkit/components/extensions/test/xpcshell/test_ext_scripting_contentScripts_css.js b/toolkit/components/extensions/test/xpcshell/test_ext_scripting_contentScripts_css.js new file mode 100644 index 0000000000..21190d2d59 --- /dev/null +++ b/toolkit/components/extensions/test/xpcshell/test_ext_scripting_contentScripts_css.js @@ -0,0 +1,331 @@ +"use strict"; + +const server = createHttpServer(); +server.registerDirectory("/data/", do_get_file("data")); + +const BASE_URL = `http://localhost:${server.identity.primaryPort}/data`; + +// ExtensionContent.jsm needs to know when it's running from xpcshell, to use +// the right timeout for content scripts executed at document_idle. +ExtensionTestUtils.mockAppInfo(); + +Services.prefs.setBoolPref("extensions.manifestV3.enabled", true); + +const makeExtension = ({ manifest: manifestProps, ...otherProps }) => { + return ExtensionTestUtils.loadExtension({ + manifest: { + manifest_version: 3, + permissions: ["scripting"], + host_permissions: ["http://localhost/*"], + granted_host_permissions: true, + ...manifestProps, + }, + allowInsecureRequests: true, + temporarilyInstalled: true, + ...otherProps, + }); +}; + +add_task(async function test_registerContentScripts_css() { + let extension = makeExtension({ + async background() { + // This script is injected in all frames after the styles so that we can + // verify the registered styles. + const checkAppliedStyleScript = { + id: "check-applied-styles", + allFrames: true, + matches: ["http://*/*/*.html"], + runAt: "document_idle", + persistAcrossSessions: false, + js: ["check-applied-styles.js"], + }; + + // Listen to the `load-test-case` message and unregister/register new + // content scripts. + browser.test.onMessage.addListener(async (msg, data) => { + switch (msg) { + case "load-test-case": + const { title, params, skipCheckScriptRegistration } = data; + const expectedScripts = []; + + await browser.scripting.unregisterContentScripts(); + + if (!skipCheckScriptRegistration) { + await browser.scripting.registerContentScripts([ + checkAppliedStyleScript, + ]); + + expectedScripts.push(checkAppliedStyleScript); + } + + expectedScripts.push(...params); + + const res = await browser.scripting.registerContentScripts(params); + browser.test.assertEq( + res, + undefined, + `${title} - expected no result` + ); + const scripts = + await browser.scripting.getRegisteredContentScripts(); + browser.test.assertEq( + expectedScripts.length, + scripts.length, + `${title} - expected ${expectedScripts.length} registered scripts` + ); + browser.test.assertEq( + JSON.stringify(expectedScripts), + JSON.stringify(scripts), + `${title} - got expected registered scripts` + ); + + browser.test.sendMessage(`${msg}-done`); + break; + default: + browser.test.fail(`received unexpected message: ${msg}`); + } + }); + + browser.test.sendMessage("background-ready"); + }, + files: { + "check-applied-styles.js": () => { + browser.test.sendMessage( + `background-color-${location.pathname.split("/").pop()}`, + getComputedStyle(document.querySelector("#test")).backgroundColor + ); + }, + "style-1.css": "#test { background-color: rgb(255, 0, 0); }", + "style-2.css": "#test { background-color: rgb(0, 0, 255); }", + "style-3.css": "html { background-color: rgb(0, 255, 0); }", + "script-document-start.js": async () => { + const testElement = document.querySelector("html"); + + browser.test.assertEq( + "rgb(0, 255, 0)", + getComputedStyle(testElement).backgroundColor, + "got expected style in script-document-start.js" + ); + + testElement.style.backgroundColor = "rgb(4, 4, 4)"; + }, + "check-applied-styles-document-start.js": () => { + browser.test.sendMessage( + `background-color-${location.pathname.split("/").pop()}`, + getComputedStyle(document.querySelector("html")).backgroundColor + ); + }, + "script-document-end-and-idle.js": () => { + const testElement = document.querySelector("#test"); + + browser.test.assertEq( + "rgb(255, 0, 0)", + getComputedStyle(testElement).backgroundColor, + "got expected style in script-document-end-and-idle.js" + ); + + testElement.style.backgroundColor = "rgb(5, 5, 5)"; + }, + }, + }); + + const TEST_CASES = [ + { + title: "a css file", + params: [ + { + id: "style-1", + allFrames: false, + matches: ["http://*/*/*.html"], + // TODO: Bug 1759117 - runAt should not affect css injection + runAt: "document_start", + persistAcrossSessions: false, + css: ["style-1.css"], + }, + ], + expected: ["rgb(255, 0, 0)", "rgba(0, 0, 0, 0)"], + }, + { + title: "css and allFrames: true", + params: [ + { + id: "style-1", + allFrames: true, + matches: ["http://*/*/*.html"], + // TODO: Bug 1759117 - runAt should not affect css injection + runAt: "document_start", + persistAcrossSessions: false, + css: ["style-1.css"], + }, + ], + expected: ["rgb(255, 0, 0)", "rgb(255, 0, 0)"], + }, + { + title: "css and allFrames: true but matches restricted to top frame", + params: [ + { + id: "style-1", + allFrames: true, + matches: ["http://*/*/file_with_iframe.html"], + // TODO: Bug 1759117 - runAt should not affect css injection + runAt: "document_start", + persistAcrossSessions: false, + css: ["style-1.css"], + }, + ], + expected: ["rgb(255, 0, 0)", "rgba(0, 0, 0, 0)"], + }, + { + title: "css and excludeMatches set", + params: [ + { + id: "style-1", + allFrames: true, + matches: ["http://*/*/*.html"], + // TODO: Bug 1759117 - runAt should not affect css injection + runAt: "document_start", + persistAcrossSessions: false, + css: ["style-1.css"], + excludeMatches: ["http://*/*/file_with_iframe.html"], + }, + ], + expected: ["rgba(0, 0, 0, 0)", "rgb(255, 0, 0)"], + }, + { + title: "two css files", + params: [ + { + id: "style-1-and-2", + allFrames: false, + matches: ["http://*/*/*.html"], + // TODO: Bug 1759117 - runAt should not affect css injection + runAt: "document_start", + persistAcrossSessions: false, + css: ["style-1.css", "style-2.css"], + }, + ], + expected: ["rgb(0, 0, 255)", "rgba(0, 0, 0, 0)"], + }, + { + title: "two scripts with css", + params: [ + { + id: "style-1", + allFrames: false, + matches: ["http://*/*/*.html"], + runAt: "document_end", + persistAcrossSessions: false, + css: ["style-1.css"], + }, + { + id: "style-2", + allFrames: false, + matches: ["http://*/*/*.html"], + runAt: "document_start", + persistAcrossSessions: false, + css: ["style-2.css"], + }, + ], + // TODO: Bug 1759117 - The expected value should be `rgb(0, 0, 255)` + // because runAt should not affect css injection and therefore the two + // styles should be applied one after the other. + expected: ["rgb(255, 0, 0)", "rgba(0, 0, 0, 0)"], + }, + { + title: "js and css with runAt: document_start", + params: [ + { + id: "js-and-style-start", + allFrames: true, + matches: ["http://*/*/*.html"], + runAt: "document_start", + persistAcrossSessions: false, + css: ["style-3.css"], + // Inject the check script last to be able to send a message back to + // the test case. This works with `skipCheckScriptRegistration: true` + // below. + js: [ + "script-document-start.js", + "check-applied-styles-document-start.js", + ], + }, + ], + expected: ["rgb(4, 4, 4)", "rgb(4, 4, 4)"], + skipCheckScriptRegistration: true, + }, + { + title: "js and css with runAt: document_end", + params: [ + { + id: "js-and-style-end", + allFrames: true, + matches: ["http://*/*/*.html"], + runAt: "document_end", + persistAcrossSessions: false, + css: ["style-1.css"], + // Inject the check script last to be able to send a message back to + // the test case. This works with `skipCheckScriptRegistration: true` + // below. + js: ["script-document-end-and-idle.js", "check-applied-styles.js"], + }, + ], + expected: ["rgb(5, 5, 5)", "rgb(5, 5, 5)"], + skipCheckScriptRegistration: true, + }, + { + title: "js and css with runAt: document_idle", + params: [ + { + id: "js-and-style-idle", + allFrames: true, + matches: ["http://*/*/*.html"], + runAt: "document_idle", + persistAcrossSessions: false, + css: ["style-1.css"], + // Inject the check script last to be able to send a message back to + // the test case. This works with `skipCheckScriptRegistration: true` + // below. + js: ["script-document-end-and-idle.js", "check-applied-styles.js"], + }, + ], + expected: ["rgb(5, 5, 5)", "rgb(5, 5, 5)"], + skipCheckScriptRegistration: true, + }, + ]; + + await extension.startup(); + await extension.awaitMessage("background-ready"); + + for (const { + title, + params, + expected, + skipCheckScriptRegistration, + } of TEST_CASES) { + extension.sendMessage("load-test-case", { + title, + params, + skipCheckScriptRegistration, + }); + await extension.awaitMessage("load-test-case-done"); + + let contentPage = await ExtensionTestUtils.loadContentPage( + `${BASE_URL}/file_with_iframe.html` + ); + + const backgroundColors = [ + await extension.awaitMessage("background-color-file_with_iframe.html"), + await extension.awaitMessage("background-color-file_sample.html"), + ]; + + Assert.deepEqual( + expected, + backgroundColors, + `${title} - got expected colors` + ); + + await contentPage.close(); + } + + await extension.unload(); +}); |