1 files changed, 146 insertions, 0 deletions
diff --git a/devtools/client/inspector/rules/test/browser_rules_gridline-names-are-shown-correctly.js b/devtools/client/inspector/rules/test/browser_rules_gridline-names-are-shown-correctly.js
new file mode 100644
index 0000000000..ec7f4a358f
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_gridline-names-are-shown-correctly.js
@@ -0,0 +1,146 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Tests that the text editor correctly calculates the grid line names shown in the
+// autocomplete popup. We generally want to show all the grid line names for a grid
+// container, except for implicit line names created by an implicitly named area.
+
+const TEST_URL = URL_ROOT + "doc_grid_area_gridline_names.html";
+
+add_task(async function () {
+  await addTab(TEST_URL);
+  const { inspector, view } = await openRuleView();
+
+  info(
+    "Test that implicit grid line names from explicit grid areas are shown."
+  );
+  await testExplicitNamedAreas(inspector, view);
+
+  info(
+    "Test that explicit grid line names creating implicit grid areas are shown."
+  );
+  await testImplicitNamedAreasWithExplicitGridLineNames(inspector, view);
+
+  info(
+    "Test that implicit grid line names creating implicit grid areas are not shown."
+  );
+  await testImplicitAreasWithImplicitGridLineNames(inspector, view);
+  await testImplicitNamedAreasWithReversedGridLineNames(inspector, view);
+});
+
+async function testExplicitNamedAreas(inspector, view) {
+  await selectNode(".header", inspector);
+
+  const gridColLines = ["header-start", "header-end", "main-start", "main-end"];
+
+  const propertyName = view.styleDocument.querySelectorAll(
+    ".ruleview-propertyvalue"
+  )[0];
+  const gridLineNamesUpdated = inspector.once("grid-line-names-updated");
+  const editor = await focusEditableField(view, propertyName);
+  const onPopupShown = once(editor.popup, "popup-opened");
+  await gridLineNamesUpdated;
+
+  EventUtils.synthesizeKey("VK_DOWN", { shiftKey: true }, view.styleWindow);
+
+  await onPopupShown;
+
+  info(
+    "Check that the expected grid line column names are shown in the editor popup."
+  );
+  for (const lineName of gridColLines) {
+    ok(
+      editor.gridLineNames.cols.indexOf(lineName) > -1,
+      `${lineName} is a suggested implicit grid line`
+    );
+  }
+}
+
+async function testImplicitNamedAreasWithExplicitGridLineNames(
+  inspector,
+  view
+) {
+  await selectNode(".contentArea", inspector);
+
+  const gridRowLines = [
+    "main-start",
+    "main-end",
+    "content-start",
+    "content-end",
+  ];
+
+  const propertyName = view.styleDocument.querySelectorAll(
+    ".ruleview-propertyvalue"
+  )[1];
+  const gridLineNamesUpdated = inspector.once("grid-line-names-updated");
+  const editor = await focusEditableField(view, propertyName);
+  const onPopupShown = once(editor.popup, "popup-opened");
+  await gridLineNamesUpdated;
+
+  EventUtils.synthesizeKey("VK_DOWN", { shiftKey: true }, view.styleWindow);
+
+  await onPopupShown;
+
+  info(
+    "Check that the expected grid line row names are shown in the editor popup."
+  );
+  for (const lineName of gridRowLines) {
+    ok(
+      editor.gridLineNames.rows.indexOf(lineName) > -1,
+      `${lineName} is a suggested explicit grid line`
+    );
+  }
+}
+
+async function testImplicitAreasWithImplicitGridLineNames(inspector, view) {
+  await selectNode(".a", inspector);
+
+  const propertyName = view.styleDocument.querySelectorAll(
+    ".ruleview-propertyvalue"
+  )[0];
+  const gridLineNamesUpdated = inspector.once("grid-line-names-updated");
+  const editor = await focusEditableField(view, propertyName);
+  const onPopupShown = once(editor.popup, "popup-opened");
+  await gridLineNamesUpdated;
+
+  EventUtils.synthesizeKey("VK_DOWN", { shiftKey: true }, view.styleWindow);
+
+  await onPopupShown;
+
+  info(
+    "Check that the implicit grid lines created by implicit areas are not shown."
+  );
+  ok(
+    !(editor.gridLineNames.cols.indexOf("a-end") > -1),
+    "a-end is not shown because it is created by an implicit named area."
+  );
+}
+
+async function testImplicitNamedAreasWithReversedGridLineNames(
+  inspector,
+  view
+) {
+  await selectNode(".b", inspector);
+
+  const propertyName = view.styleDocument.querySelectorAll(
+    ".ruleview-propertyvalue"
+  )[0];
+  const gridLineNamesUpdated = inspector.once("grid-line-names-updated");
+  const editor = await focusEditableField(view, propertyName);
+  const onPopupShown = once(editor.popup, "popup-opened");
+  await gridLineNamesUpdated;
+
+  EventUtils.synthesizeKey("VK_DOWN", { shiftKey: true }, view.styleWindow);
+
+  await onPopupShown;
+
+  info(
+    "Test that reversed implicit grid line names from implicit areas are not shown"
+  );
+  ok(
+    !(editor.gridLineNames.cols.indexOf("b-start") > -1),
+    "b-start is not shown because it is created by an implicit named area."
+  );
+}