diff options
Diffstat (limited to 'toolkit/components/extensions/test/browser/browser_ext_themes_multiple_backgrounds.js')
-rw-r--r-- | toolkit/components/extensions/test/browser/browser_ext_themes_multiple_backgrounds.js | 287 |
1 files changed, 287 insertions, 0 deletions
diff --git a/toolkit/components/extensions/test/browser/browser_ext_themes_multiple_backgrounds.js b/toolkit/components/extensions/test/browser/browser_ext_themes_multiple_backgrounds.js new file mode 100644 index 0000000000..58088ce6a0 --- /dev/null +++ b/toolkit/components/extensions/test/browser/browser_ext_themes_multiple_backgrounds.js @@ -0,0 +1,287 @@ +"use strict"; + +add_task(async function test_support_backgrounds_position() { + let extension = ExtensionTestUtils.loadExtension({ + manifest: { + theme: { + images: { + theme_frame: "face1.png", + additional_backgrounds: ["face2.png", "face2.png", "face2.png"], + }, + colors: { + frame: `rgb(${FRAME_COLOR.join(",")})`, + tab_background_text: `rgb(${TAB_BACKGROUND_TEXT_COLOR.join(",")})`, + }, + properties: { + additional_backgrounds_alignment: [ + "left top", + "center top", + "right bottom", + ], + }, + }, + }, + files: { + "face1.png": imageBufferFromDataURI(ENCODED_IMAGE_DATA), + "face2.png": imageBufferFromDataURI(ENCODED_IMAGE_DATA), + }, + }); + + await extension.startup(); + + let docEl = window.document.documentElement; + let toolbox = document.querySelector("#navigator-toolbox"); + + Assert.ok(docEl.hasAttribute("lwtheme"), "LWT attribute should be set"); + Assert.equal( + docEl.getAttribute("lwtheme-brighttext"), + "true", + "LWT text color attribute should be set" + ); + + let toolboxCS = window.getComputedStyle(toolbox); + let toolboxBgImage = toolboxCS.backgroundImage.split(",")[0].trim(); + if (backgroundColorSetOnRoot()) { + let rootCS = window.getComputedStyle(docEl); + let rootBgImage = rootCS.backgroundImage.split(",")[0].trim(); + Assert.ok( + rootBgImage.includes("face1.png"), + `The backgroundImage should use face1.png. Actual value is: ${rootBgImage}` + ); + Assert.equal( + toolboxCS.backgroundImage, + Array(3).fill(toolboxBgImage).join(", "), + "The backgroundImage should use face2.png three times." + ); + Assert.equal( + toolboxCS.backgroundPosition, + "0% 0%, 50% 0%, 100% 100%", + "The backgroundPosition should use the three values provided." + ); + } else { + Assert.equal( + toolboxCS.backgroundImage, + [1, 2, 2, 2] + .map(num => toolboxBgImage.replace(/face[\d]*/, `face${num}`)) + .join(", "), + "The backgroundImage should use face1.png once and face2.png three times." + ); + Assert.equal( + toolboxCS.backgroundPosition, + "100% 0%, 0% 0%, 50% 0%, 100% 100%", + "The backgroundPosition should use the three values provided, preceded by the default for theme_frame." + ); + /** + * We expect duplicate background-repeat values because we apply `no-repeat` + * once for theme_frame, and again as the default value of + * --lwt-background-tiling. + */ + Assert.equal( + toolboxCS.backgroundRepeat, + "no-repeat, no-repeat", + "The backgroundPosition should use the default value." + ); + } + + await extension.unload(); + + Assert.ok(!docEl.hasAttribute("lwtheme"), "LWT attribute should not be set"); + toolboxCS = window.getComputedStyle(toolbox); + + // Styles should've reverted to their initial values. + if (backgroundColorSetOnRoot()) { + let rootCS = window.getComputedStyle(docEl); + Assert.equal(rootCS.backgroundImage, "none"); + Assert.equal(rootCS.backgroundPosition, "0% 0%"); + Assert.equal(rootCS.backgroundRepeat, "repeat"); + } + Assert.equal(toolboxCS.backgroundImage, "none"); + Assert.equal(toolboxCS.backgroundPosition, "0% 0%"); + Assert.equal(toolboxCS.backgroundRepeat, "repeat"); +}); + +add_task(async function test_support_backgrounds_repeat() { + let extension = ExtensionTestUtils.loadExtension({ + manifest: { + theme: { + images: { + theme_frame: "face0.png", + additional_backgrounds: ["face1.png", "face2.png", "face3.png"], + }, + colors: { + frame: FRAME_COLOR, + tab_background_text: TAB_BACKGROUND_TEXT_COLOR, + }, + properties: { + additional_backgrounds_tiling: ["repeat-x", "repeat-y", "repeat"], + }, + }, + }, + files: { + "face0.png": imageBufferFromDataURI(ENCODED_IMAGE_DATA), + "face1.png": imageBufferFromDataURI(ENCODED_IMAGE_DATA), + "face2.png": imageBufferFromDataURI(ENCODED_IMAGE_DATA), + "face3.png": imageBufferFromDataURI(ENCODED_IMAGE_DATA), + }, + }); + + await extension.startup(); + + let docEl = window.document.documentElement; + let toolbox = document.querySelector("#navigator-toolbox"); + + Assert.ok(docEl.hasAttribute("lwtheme"), "LWT attribute should be set"); + Assert.equal( + docEl.getAttribute("lwtheme-brighttext"), + "true", + "LWT text color attribute should be set" + ); + + let toolboxCS = window.getComputedStyle(toolbox); + if (backgroundColorSetOnRoot()) { + let rootCS = window.getComputedStyle(docEl); + let rootImage = rootCS.backgroundImage.split(",")[0].trim(); + Assert.ok( + rootImage.includes("face0.png"), + `The backgroundImage should use face.png. Actual value is: ${rootImage}` + ); + Assert.equal( + [1, 2, 3] + .map(num => rootImage.replace(/face[\d]*/, `face${num}`)) + .join(", "), + toolboxCS.backgroundImage, + "The backgroundImage should use face.png three times." + ); + Assert.equal( + rootCS.backgroundPosition, + "100% 0%, 100% 0%", + "The backgroundPosition should use the default value for root." + ); + Assert.equal( + toolboxCS.backgroundPosition, + "100% 0%", + "The backgroundPosition should use the default value for navigator-toolbox." + ); + Assert.equal( + rootCS.backgroundRepeat, + "no-repeat, repeat-x, repeat-y, repeat", + "The backgroundRepeat should use the default values for root." + ); + Assert.equal( + toolboxCS.backgroundRepeat, + "repeat-x, repeat-y, repeat", + "The backgroundRepeat should use the three values provided for navigator-toolbox." + ); + } else { + let toolboxImage = toolboxCS.backgroundImage.split(",")[0].trim(); + Assert.equal( + [0, 1, 2, 3] + .map(num => toolboxImage.replace(/face[\d]*/, `face${num}`)) + .join(", "), + toolboxCS.backgroundImage, + "The backgroundImage should use face.png four times." + ); + /** + * We expect duplicate background-position values because we apply `right top` + * once for theme_frame, and again as the default value of + * --lwt-background-alignment. + */ + Assert.equal( + toolboxCS.backgroundPosition, + "100% 0%, 100% 0%", + "The backgroundPosition should use the default value for navigator-toolbox." + ); + Assert.equal( + toolboxCS.backgroundRepeat, + "no-repeat, repeat-x, repeat-y, repeat", + "The backgroundRepeat should use the three values provided for --lwt-background-tiling, preceeded by the default for theme_frame." + ); + } + + await extension.unload(); + + Assert.ok(!docEl.hasAttribute("lwtheme"), "LWT attribute should not be set"); +}); + +add_task(async function test_additional_images_check() { + let extension = ExtensionTestUtils.loadExtension({ + manifest: { + theme: { + images: { + theme_frame: "face.png", + }, + colors: { + frame: FRAME_COLOR, + tab_background_text: TAB_BACKGROUND_TEXT_COLOR, + }, + properties: { + additional_backgrounds_tiling: ["repeat-x", "repeat-y", "repeat"], + }, + }, + }, + files: { + "face.png": imageBufferFromDataURI(ENCODED_IMAGE_DATA), + }, + }); + + await extension.startup(); + + let docEl = window.document.documentElement; + let toolbox = document.querySelector("#navigator-toolbox"); + + Assert.ok(docEl.hasAttribute("lwtheme"), "LWT attribute should be set"); + Assert.equal( + docEl.getAttribute("lwtheme-brighttext"), + "true", + "LWT text color attribute should be set" + ); + + let toolboxCS = window.getComputedStyle(toolbox); + if (backgroundColorSetOnRoot()) { + let rootCS = window.getComputedStyle(docEl); + let bgImage = rootCS.backgroundImage.split(",")[0].trim(); + Assert.ok( + bgImage.includes("face.png"), + `The backgroundImage should use face.png. Actual value is: ${bgImage}` + ); + Assert.equal( + "none", + toolboxCS.backgroundImage, + "The backgroundImage should not use face.png." + ); + Assert.equal( + rootCS.backgroundPosition, + "100% 0%, 100% 0%", + "The backgroundPosition should use the default value." + ); + Assert.equal( + rootCS.backgroundRepeat, + "no-repeat, no-repeat", + "The backgroundPosition should use only one (default) value for the header and the default additional images." + ); + } else { + let bgImage = toolboxCS.backgroundImage.split(",")[0].trim(); + Assert.ok( + bgImage.includes("face.png"), + `The backgroundImage should use face.png. Actual value is: ${bgImage}` + ); + Assert.ok( + bgImage.includes("face.png"), + `The backgroundImage should use face.png. Actual value is: ${bgImage}` + ); + Assert.equal( + toolboxCS.backgroundPosition, + "100% 0%, 100% 0%", + "The backgroundPosition should use the default value." + ); + Assert.equal( + toolboxCS.backgroundRepeat, + "no-repeat, no-repeat", + "The backgroundRepeat should use the default value." + ); + } + + await extension.unload(); + + Assert.ok(!docEl.hasAttribute("lwtheme"), "LWT attribute should not be set"); +}); |