1 files changed, 178 insertions, 0 deletions
diff --git a/devtools/client/inspector/rules/test/browser_rules_grid-template-areas.js b/devtools/client/inspector/rules/test/browser_rules_grid-template-areas.js
new file mode 100644
index 0000000000..0decb7f7db
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_grid-template-areas.js
@@ -0,0 +1,178 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Tests that the text editor correctly display the grid-template-areas value.
+// The CSS Grid spec allows to create grid-template-areas in an ascii-art style matrix.
+// It should show each string on its own line, when displaying rules for grid-template-areas.
+
+const TEST_URI = `
+<style type='text/css'>
+  #testid {
+    display: grid;
+    grid-template-areas: "a   a   bb"
+                         'a   a   bb'
+                         "ccc ccc bb";
+  }
+
+  #testid-quotes {
+    quotes: "«" "»" "‹" "›";
+  }
+
+  #testid-invalid-strings {
+    grid-template-areas: "a   a   b"
+                      "a   a";
+  }
+
+  #testid-valid-quotefree-value {
+    grid-template-areas: inherit;
+  }
+
+  .a {
+		grid-area: a;
+	}
+
+	.b {
+		grid-area: bb;
+	}
+
+	.c {
+		grid-area: ccc;
+	}
+</style>
+<div id="testid">
+  <div class="a">cell a</div>
+  <div class="b">cell b</div>
+  <div class="c">cell c</div>
+</div>
+<q id="testid-quotes">
+  Show us the wonder-working <q>Brothers,</q> let them come out publicly—and we will believe in them!
+</q>
+<div id="testid-invalid-strings">
+  <div class="a">cell a</div>
+  <div class="b">cell b</div>
+</div>
+<div id="testid-valid-quotefree-value">
+  <div class="a">cell a</div>
+  <div class="b">cell b</div>
+</div>
+`;
+
+const multiLinesInnerText = '\n"a   a   bb" \n\'a   a   bb\' \n"ccc ccc bb"';
+const typedAndCopiedMultiLinesString = '"a a bb ccc" "a a bb ccc"';
+const typedAndCopiedMultiLinesInnerText = '\n"a a bb ccc" \n"a a bb ccc"';
+
+add_task(async function () {
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  const { inspector, view } = await openRuleView();
+
+  info("Selecting the test node");
+  await selectNode("#testid", inspector);
+
+  info(
+    "Tests display of grid-template-areas value in an ascii-art style," +
+      "displaying each string on its own line"
+  );
+
+  const gridRuleProperty = await getRuleViewProperty(
+    view,
+    "#testid",
+    "grid-template-areas"
+  ).valueSpan;
+  is(
+    gridRuleProperty.innerText,
+    multiLinesInnerText,
+    "the grid-area is displayed with each string in its own line, and sufficient spacing for areas to align vertically"
+  );
+
+  // copy/paste the current value inside, to also make sure of the value copied is useful as text
+
+  // Calculate offsets to click in the value line which is below the property name line .
+  const rect = gridRuleProperty.getBoundingClientRect();
+  const previousProperty = await getRuleViewProperty(
+    view,
+    "#testid",
+    "display"
+  ).nameSpan.getBoundingClientRect();
+
+  const x = rect.width / 2;
+  const y = rect.y - previousProperty.y + 1;
+
+  info("Focusing the css property editable value");
+  await focusEditableField(view, gridRuleProperty, x, y);
+  info("typing a new value");
+  [...typedAndCopiedMultiLinesString].map(char =>
+    EventUtils.synthesizeKey(char, {}, view.styleWindow)
+  );
+  EventUtils.synthesizeKey("VK_RETURN", {}, view.styleWindow);
+  is(
+    gridRuleProperty.innerText,
+    typedAndCopiedMultiLinesInnerText,
+    "the typed value is correct, and a single quote is displayed on its own line"
+  );
+  info("copy-paste the 'grid-template-areas' property value to duplicate it");
+  const onDone = view.once("ruleview-changed");
+  await focusEditableField(view, gridRuleProperty, x, y);
+  EventUtils.synthesizeKey("C", { accelKey: true }, view.styleWindow);
+  EventUtils.synthesizeKey("KEY_ArrowRight", {}, view.styleWindow);
+  EventUtils.synthesizeKey("V", { accelKey: true }, view.styleWindow);
+  EventUtils.synthesizeKey("VK_RETURN", {}, view.styleWindow);
+
+  await onDone;
+
+  info("Check copy-pasting the property value is not breaking it");
+
+  is(
+    gridRuleProperty.innerText,
+    typedAndCopiedMultiLinesInnerText + " " + typedAndCopiedMultiLinesInnerText,
+    "copy-pasting the current value duplicate the correct value, with each string of the multi strings grid-template-areas value is displayed on a new line"
+  );
+
+  // test that when "non grid-template-area", like quotes for example, its multi-string value is not displayed over multiple lines
+  await selectNode("#testid-quotes", inspector);
+
+  info(
+    "Tests display of content string value is NOT in an ascii-art style," +
+      "displaying each string on a single line"
+  );
+
+  const contentRuleProperty = await getRuleViewProperty(
+    view,
+    "#testid-quotes",
+    "quotes"
+  ).valueSpan;
+  is(
+    contentRuleProperty.innerText,
+    '"«" "»" "‹" "›"',
+    "the quotes strings values are all displayed on the same single line"
+  );
+
+  // test that when invalid strings values do not get formatted
+  info("testing it does not try to format invalid values");
+  await selectNode("#testid-invalid-strings", inspector);
+  const invalidGridRuleProperty = await getRuleViewProperty(
+    view,
+    "#testid-invalid-strings",
+    "grid-template-areas"
+  ).valueSpan;
+  is(
+    invalidGridRuleProperty.innerText,
+    '"a a b" "a a"',
+    "the invalid strings values do not get formatted"
+  );
+
+  // test that when a valid value without quotes such as `inherit` it does not get formatted
+  info("testing it does not try to format valid non-quote values");
+  await selectNode("#testid-valid-quotefree-value", inspector);
+  const validGridRuleNoQuoteProperty = await getRuleViewProperty(
+    view,
+    "#testid-valid-quotefree-value",
+    "grid-template-areas"
+  ).valueSpan;
+  is(
+    validGridRuleNoQuoteProperty.innerText,
+    "inherit",
+    "the valid quote-free values do not get formatted"
+  );
+});