diff options
Diffstat (limited to 'toolkit/components/extensions/test/browser/browser_ext_themes_additional_backgrounds_alignment.js')
-rw-r--r-- | toolkit/components/extensions/test/browser/browser_ext_themes_additional_backgrounds_alignment.js | 119 |
1 files changed, 119 insertions, 0 deletions
diff --git a/toolkit/components/extensions/test/browser/browser_ext_themes_additional_backgrounds_alignment.js b/toolkit/components/extensions/test/browser/browser_ext_themes_additional_backgrounds_alignment.js new file mode 100644 index 0000000000..cc814b4ae8 --- /dev/null +++ b/toolkit/components/extensions/test/browser/browser_ext_themes_additional_backgrounds_alignment.js @@ -0,0 +1,119 @@ +"use strict"; + +// Case 1 - When there is a theme_frame image and additional_backgrounds_alignment is not specified. +// So background-position should default to "right top" +add_task(async function test_default_additional_backgrounds_alignment() { + const RIGHT_TOP = "100% 0%"; + + let extension = ExtensionTestUtils.loadExtension({ + manifest: { + theme: { + images: { + theme_frame: "image1.png", + additional_backgrounds: ["image1.png", "image1.png"], + }, + colors: { + frame: ACCENT_COLOR, + tab_background_text: TEXT_COLOR, + }, + }, + }, + files: { + "image1.png": BACKGROUND, + }, + }); + + await extension.startup(); + + let toolbox = document.querySelector("#navigator-toolbox"); + let toolboxCS = window.getComputedStyle(toolbox); + if (backgroundColorSetOnRoot()) { + let docEl = document.documentElement; + let rootCS = window.getComputedStyle(docEl); + + Assert.equal( + rootCS.getPropertyValue("background-position"), + `${RIGHT_TOP}, ${RIGHT_TOP}`, + "root contains theme_frame and lwt-background-alignment properties" + ); + Assert.equal( + toolboxCS.getPropertyValue("background-position"), + RIGHT_TOP, + toolbox.id + " contains lwt-background-alignment properties" + ); + } else { + /** + * 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.getPropertyValue("background-position"), + `${RIGHT_TOP}, ${RIGHT_TOP}`, + toolbox.id + + " contains theme_frame and default lwt-background-alignment properties" + ); + } + + await extension.unload(); +}); + +// Case 2 - When there is a theme_frame image and additional_backgrounds_alignment is specified. +add_task(async function test_additional_backgrounds_alignment() { + const LEFT_BOTTOM = "0% 100%"; + const CENTER_CENTER = "50% 50%"; + const RIGHT_TOP = "100% 0%"; + + let extension = ExtensionTestUtils.loadExtension({ + manifest: { + theme: { + images: { + theme_frame: "image1.png", + additional_backgrounds: ["image1.png", "image1.png", "image1.png"], + }, + colors: { + frame: ACCENT_COLOR, + tab_background_text: TEXT_COLOR, + }, + properties: { + additional_backgrounds_alignment: [ + "left bottom", + "center center", + "right top", + ], + }, + }, + }, + files: { + "image1.png": BACKGROUND, + }, + }); + + await extension.startup(); + + let toolbox = document.querySelector("#navigator-toolbox"); + let toolboxCS = window.getComputedStyle(toolbox); + if (backgroundColorSetOnRoot()) { + let docEl = document.documentElement; + let rootCS = window.getComputedStyle(docEl); + Assert.equal( + rootCS.getPropertyValue("background-position"), + `${RIGHT_TOP}, ${LEFT_BOTTOM}, ${CENTER_CENTER}, ${RIGHT_TOP}`, + "root contains theme_frame and additional_backgrounds alignment properties" + ); + Assert.equal( + toolboxCS.getPropertyValue("background-position"), + LEFT_BOTTOM + ", " + CENTER_CENTER + ", " + RIGHT_TOP, + toolbox.id + " contains additional_backgrounds alignment properties" + ); + } else { + Assert.equal( + toolboxCS.getPropertyValue("background-position"), + RIGHT_TOP + ", " + LEFT_BOTTOM + ", " + CENTER_CENTER + ", " + RIGHT_TOP, + toolbox.id + + " contains theme_frame and additional_backgrounds alignment properties" + ); + } + + await extension.unload(); +}); |