new file mode 100644
--- /dev/null
+++ b/toolkit/components/extensions/test/browser/browser_ext_themes_additional_backgrounds_alignment.js
@@ -0,0 +1,105 @@
+"use strict";
+
+/* globals InspectorUtils */
+
+// Case 1 - When there is a headerURL image and additional_backgrounds_alignment is not specified.
+// So background-position should default to "left top"
+add_task(async function test_default_additional_backgrounds_alignment() {
+ const LEFT_TOP = "0% 0%";
+ const RIGHT_TOP = "100% 0%";
+
+ let extension = ExtensionTestUtils.loadExtension({
+ manifest: {
+ "theme": {
+ "images": {
+ "headerURL": "image1.png",
+ "additional_backgrounds": ["image1.png", "image1.png"],
+ },
+ "colors": {
+ "accentcolor": ACCENT_COLOR,
+ "textcolor": TEXT_COLOR,
+ },
+ },
+ },
+ files: {
+ "image1.png": BACKGROUND,
+ },
+
+ });
+
+ await extension.startup();
+
+ let docEl = document.documentElement;
+ let rootCS = window.getComputedStyle(docEl);
+
+ Assert.equal(
+ rootCS.getPropertyValue("background-position"),
+ RIGHT_TOP,
+ "root only contains headerURL alignment property"
+ );
+
+
+ let toolbox = document.querySelector("#navigator-toolbox");
+ let toolboxCS = window.getComputedStyle(toolbox);
+
+ Assert.equal(
+ toolboxCS.getPropertyValue("background-position"),
+ LEFT_TOP,
+ toolbox.id + " only contains default additional backgrounds alignment property"
+ );
+
+ await extension.unload();
+});
+
+
+// Case 2 - When there is a headerURL 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": {
+ "headerURL": "image1.png",
+ "additional_backgrounds": ["image1.png", "image1.png", "image1.png"],
+ },
+ "colors": {
+ "accentcolor": ACCENT_COLOR,
+ "textcolor": TEXT_COLOR,
+ },
+ "properties": {
+ additional_backgrounds_alignment: ["left bottom", "center center", "right top"],
+ },
+ },
+ },
+ files: {
+ "image1.png": BACKGROUND,
+ },
+
+ });
+
+ await extension.startup();
+
+ let docEl = document.documentElement;
+ let rootCS = window.getComputedStyle(docEl);
+
+ Assert.equal(
+ rootCS.getPropertyValue("background-position"),
+ RIGHT_TOP,
+ "root only contains headerURL alignment property"
+ );
+
+
+ let toolbox = document.querySelector("#navigator-toolbox");
+ let toolboxCS = window.getComputedStyle(toolbox);
+
+ Assert.equal(
+ toolboxCS.getPropertyValue("background-position"),
+ LEFT_BOTTOM + ", " + CENTER_CENTER + ", " + RIGHT_TOP,
+ toolbox.id + " contains additional backgrounds alignment properties"
+ );
+
+ await extension.unload();
+});
--- a/toolkit/components/extensions/test/browser/browser_ext_themes_multiple_backgrounds.js
+++ b/toolkit/components/extensions/test/browser/browser_ext_themes_multiple_backgrounds.js
@@ -6,60 +6,68 @@ add_task(async function setup() {
});
});
add_task(async function test_support_backgrounds_position() {
let extension = ExtensionTestUtils.loadExtension({
manifest: {
"theme": {
"images": {
- "headerURL": "face.png",
- "additional_backgrounds": ["face.png", "face.png", "face.png"],
+ "headerURL": "face1.png",
+ "additional_backgrounds": ["face2.png", "face2.png", "face2.png"],
},
"colors": {
"accentcolor": `rgb(${FRAME_COLOR.join(",")})`,
"textcolor": `rgb(${TAB_BACKGROUND_TEXT_COLOR.join(",")})`,
},
"properties": {
"additional_backgrounds_alignment": ["left top", "center top", "right bottom"],
},
},
},
files: {
- "face.png": imageBufferFromDataURI(ENCODED_IMAGE_DATA),
+ "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("lwthemetextcolor"), "bright",
"LWT text color attribute should be set");
- let style = window.getComputedStyle(docEl);
- let bgImage = style.backgroundImage.split(",")[0].trim();
- Assert.ok(bgImage.includes("face.png"),
- `The backgroundImage should use face.png. Actual value is: ${bgImage}`);
- Assert.equal(Array(4).fill(bgImage).join(", "), style.backgroundImage,
- "The backgroundImage should use face.png four times.");
- Assert.equal(style.backgroundPosition, "100% 0%, 0% 0%, 50% 0%, 100% 100%",
- "The backgroundPosition should use the four values provided.");
- Assert.equal(style.backgroundRepeat, "no-repeat",
+ let toolboxCS = window.getComputedStyle(toolbox);
+ let rootCS = window.getComputedStyle(docEl);
+ let rootBgImage = rootCS.backgroundImage.split(",")[0].trim();
+ let bgImage = toolboxCS.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(bgImage).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.");
+ Assert.equal(toolboxCS.backgroundRepeat, "no-repeat",
"The backgroundPosition should use the default value.");
await extension.unload();
Assert.ok(!docEl.hasAttribute("lwtheme"), "LWT attribute should not be set");
- style = window.getComputedStyle(docEl);
+ toolboxCS = window.getComputedStyle(toolbox);
+
// Styles should've reverted to their initial values.
- Assert.equal(style.backgroundImage, "none");
- Assert.equal(style.backgroundPosition, "0% 0%");
- Assert.equal(style.backgroundRepeat, "repeat");
+ 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",
@@ -80,31 +88,37 @@ add_task(async function test_support_bac
"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("lwthemetextcolor"), "bright",
"LWT text color attribute should be set");
- let style = window.getComputedStyle(docEl);
- let bgImage = style.backgroundImage.split(",")[0].trim();
+ let rootCS = window.getComputedStyle(docEl);
+ let toolboxCS = window.getComputedStyle(toolbox);
+ let bgImage = rootCS.backgroundImage.split(",")[0].trim();
Assert.ok(bgImage.includes("face0.png"),
`The backgroundImage should use face.png. Actual value is: ${bgImage}`);
- Assert.equal([0, 1, 2, 3].map(num => bgImage.replace(/face[\d]*/, `face${num}`)).join(", "),
- style.backgroundImage, "The backgroundImage should use face.png four times.");
- Assert.equal(style.backgroundPosition, "100% 0%",
- "The backgroundPosition should use the default value.");
- Assert.equal(style.backgroundRepeat, "no-repeat, repeat-x, repeat-y, repeat",
- "The backgroundPosition should use the four values provided.");
+ Assert.equal([1, 2, 3].map(num => bgImage.replace(/face[\d]*/, `face${num}`)).join(", "),
+ toolboxCS.backgroundImage, "The backgroundImage should use face.png three times.");
+ Assert.equal(rootCS.backgroundPosition, "100% 0%",
+ "The backgroundPosition should use the default value for root.");
+ Assert.equal(toolboxCS.backgroundPosition, "0% 0%",
+ "The backgroundPosition should use the default value for navigator-toolbox.");
+ Assert.equal(rootCS.backgroundRepeat, "no-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.");
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({
@@ -125,28 +139,30 @@ add_task(async function test_additional_
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("lwthemetextcolor"), "bright",
"LWT text color attribute should be set");
- let style = window.getComputedStyle(docEl);
- let bgImage = style.backgroundImage.split(",")[0];
+ let rootCS = window.getComputedStyle(docEl);
+ let toolboxCS = window.getComputedStyle(toolbox);
+ let bgImage = rootCS.backgroundImage.split(",")[0];
Assert.ok(bgImage.includes("face.png"),
`The backgroundImage should use face.png. Actual value is: ${bgImage}`);
- Assert.equal(bgImage + ", none", style.backgroundImage,
- "The backgroundImage should use face.png only once.");
- Assert.equal(style.backgroundPosition, "100% 0%",
+ Assert.equal("none", toolboxCS.backgroundImage,
+ "The backgroundImage should not use face.png.");
+ Assert.equal(rootCS.backgroundPosition, "100% 0%",
"The backgroundPosition should use the default value.");
- Assert.equal(style.backgroundRepeat, "no-repeat",
+ Assert.equal(rootCS.backgroundRepeat, "no-repeat",
"The backgroundPosition should use only one (default) value.");
await extension.unload();
Assert.ok(!docEl.hasAttribute("lwtheme"), "LWT attribute should not be set");
});