summaryrefslogtreecommitdiffstats
path: root/toolkit/components/pictureinpicture/tests/browser_nimbusFirstTimeStyleVariant.js
diff options
context:
space:
mode:
Diffstat (limited to 'toolkit/components/pictureinpicture/tests/browser_nimbusFirstTimeStyleVariant.js')
-rw-r--r--toolkit/components/pictureinpicture/tests/browser_nimbusFirstTimeStyleVariant.js118
1 files changed, 118 insertions, 0 deletions
diff --git a/toolkit/components/pictureinpicture/tests/browser_nimbusFirstTimeStyleVariant.js b/toolkit/components/pictureinpicture/tests/browser_nimbusFirstTimeStyleVariant.js
new file mode 100644
index 0000000000..492dc6851d
--- /dev/null
+++ b/toolkit/components/pictureinpicture/tests/browser_nimbusFirstTimeStyleVariant.js
@@ -0,0 +1,118 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+const { ExperimentFakes } = ChromeUtils.importESModule(
+ "resource://testing-common/NimbusTestUtils.sys.mjs"
+);
+
+const EXPERIMENT_CLASS_NAME = "experiment";
+
+/**
+ * This tests that the original PiP toggle design is shown.
+ */
+add_task(async function test_experiment_control_toggle_style() {
+ await BrowserTestUtils.withNewTab(
+ {
+ gBrowser,
+ url: TEST_PAGE,
+ },
+ async browser => {
+ await SimpleTest.promiseFocus(browser);
+ await ensureVideosReady(browser);
+
+ const PIP_PREF =
+ "media.videocontrols.picture-in-picture.video-toggle.has-used";
+ await SpecialPowers.pushPrefEnv({
+ set: [[PIP_PREF, false]],
+ });
+
+ let videoID = "with-controls";
+ await hoverToggle(browser, videoID);
+
+ await SpecialPowers.spawn(
+ browser,
+ [EXPERIMENT_CLASS_NAME],
+ async EXPERIMENT_CLASS_NAME => {
+ let video = content.document.getElementById("with-controls");
+ let shadowRoot = video.openOrClosedShadowRoot;
+
+ let controlsContainer =
+ shadowRoot.querySelector(".controlsContainer");
+ let pipWrapper = shadowRoot.querySelector(".pip-wrapper");
+ let pipExplainer = shadowRoot.querySelector(".pip-explainer");
+
+ Assert.ok(
+ !controlsContainer.classList.contains(EXPERIMENT_CLASS_NAME)
+ );
+ Assert.ok(!pipWrapper.classList.contains(EXPERIMENT_CLASS_NAME));
+ Assert.ok(
+ ContentTaskUtils.isVisible(pipExplainer),
+ "The PiP message should be visible on the toggle"
+ );
+ }
+ );
+ }
+ );
+});
+
+/**
+ * This tests that the variant PiP toggle design is shown if Nimbus
+ * variable `oldToggle` is false.
+ */
+add_task(async function test_experiment_toggle_style() {
+ let doExperimentCleanup = await ExperimentFakes.enrollWithFeatureConfig({
+ featureId: "pictureinpicture",
+ value: {
+ oldToggle: false,
+ },
+ });
+
+ registerCleanupFunction(async function () {
+ await doExperimentCleanup();
+ });
+
+ await BrowserTestUtils.withNewTab(
+ {
+ gBrowser,
+ url: TEST_PAGE,
+ },
+ async browser => {
+ await SimpleTest.promiseFocus(browser);
+ await ensureVideosReady(browser);
+
+ const PIP_PREF =
+ "media.videocontrols.picture-in-picture.video-toggle.has-used";
+ await SpecialPowers.pushPrefEnv({
+ set: [[PIP_PREF, false]],
+ });
+
+ let videoID = "with-controls";
+ await hoverToggle(browser, videoID);
+
+ await SpecialPowers.spawn(
+ browser,
+ [EXPERIMENT_CLASS_NAME],
+ async EXPERIMENT_CLASS_NAME => {
+ let video = content.document.getElementById("with-controls");
+ let shadowRoot = video.openOrClosedShadowRoot;
+
+ let controlsContainer =
+ shadowRoot.querySelector(".controlsContainer");
+ let pipWrapper = shadowRoot.querySelector(".pip-wrapper");
+ let pipExplainer = shadowRoot.querySelector(".pip-explainer");
+
+ Assert.ok(
+ controlsContainer.classList.contains(EXPERIMENT_CLASS_NAME)
+ );
+ Assert.ok(pipWrapper.classList.contains(EXPERIMENT_CLASS_NAME));
+ Assert.ok(
+ ContentTaskUtils.isHidden(pipExplainer),
+ "The PiP message should not be visible on the toggle"
+ );
+ }
+ );
+ }
+ );
+});