Adding upstream version 124.0.1.upstream/124.0.1

Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>

1 files changed, 82 insertions, 0 deletions

diff --git a/devtools/client/inspector/markup/test/browser_markup_grid_display_badge_03.js b/devtools/client/inspector/markup/test/browser_markup_grid_display_badge_03.js
new file mode 100644
index 0000000000..6c4cb06b45
--- /dev/null
+++ b/devtools/client/inspector/markup/test/browser_markup_grid_display_badge_03.js
@@ -0,0 +1,82 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Check that toggling a flex highlighter does not change a grid highlighter badge.
+// Bug 1592604
+
+const TEST_URI = `
+  <style type='text/css'>
+    .grid {
+      display: grid;
+    }
+    .flex {
+      display: flex;
+    }
+  </style>
+  <div class="grid">
+  </div>
+  <div class="flex">
+  </div>
+`;
+
+add_task(async function () {
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  const { inspector } = await openLayoutView();
+
+  const gridBadge = await enableHighlighterByBadge("grid", ".grid", inspector);
+  const flexBadge = await enableHighlighterByBadge("flex", ".flex", inspector);
+
+  info("Check that both display badges are active");
+  ok(flexBadge.classList.contains("active"), `flex display badge is active.`);
+  ok(gridBadge.classList.contains("active"), `grid display badge is active.`);
+});
+
+/**
+ * Enable the flex or grid highlighter by clicking on the corresponding badge
+ * next to a node in the markup view. Returns the badge element.
+ *
+ * @param  {String} type
+ *         Either "flex" or "grid"
+ * @param  {String} selector
+ *         Selector matching the flex or grid container element.
+ * @param  {Inspector} inspector
+ *         Instance of Inspector panel
+ * @return {Element} The DOM element of the display badge that shows next to the element
+ *         mathched by the selector in the markup view.
+ */
+async function enableHighlighterByBadge(type, selector, inspector) {
+  const { waitForHighlighterTypeShown } = getHighlighterTestHelpers(inspector);
+
+  info(`Check the ${type} display badge is shown and not active.`);
+  const container = await getContainerForSelector(selector, inspector);
+  const badge = container.elt.querySelector(
+    ".inspector-badge.interactive[data-display]"
+  );
+  ok(!badge.classList.contains("active"), `${type} badge is not active.`);
+  ok(badge.classList.contains("interactive"), `${type} badge is interactive.`);
+
+  info(`Toggling ON the ${type} highlighter from the ${type} display badge.`);
+  let onHighlighterShown;
+  switch (type) {
+    case "grid":
+      onHighlighterShown = waitForHighlighterTypeShown(
+        inspector.highlighters.TYPES.GRID
+      );
+      break;
+    case "flex":
+      onHighlighterShown = waitForHighlighterTypeShown(
+        inspector.highlighters.TYPES.FLEXBOX
+      );
+      break;
+  }
+
+  badge.click();
+  await onHighlighterShown;
+
+  ok(badge.classList.contains("active"), `${type} badge is active.`);
+  ok(badge.classList.contains("interactive"), `${type} badge is interactive.`);
+
+  return badge;
+}