Add m-esr52 at 52.6.0

1 files changed, 277 insertions, 0 deletions

diff --git a/devtools/client/shared/test/browser_mdn-docs-03.js b/devtools/client/shared/test/browser_mdn-docs-03.js
new file mode 100644
index 000000000..c686aa6a9
--- /dev/null
+++ b/devtools/client/shared/test/browser_mdn-docs-03.js
@@ -0,0 +1,277 @@
+/* vim: set ts=2 et sw=2 tw=80: */
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+/**
+ * This file tests the CSS syntax highlighter in the MdnDocsWidget object.
+ *
+ * The CSS syntax highlighter accepts:
+ * - a string containing CSS
+ * - a DOM node
+ *
+ * It parses the string and creates a collection of DOM nodes for different
+ * CSS token types. These DOM nodes have CSS classes applied to them,
+ * to apply the right style for that particular token type. The DOM nodes
+ * are returned as children of the node that was passed to the function.
+ *
+ * This test code defines a number of different strings containing valid and
+ * invalid CSS in various forms. For each string it defines the DOM nodes
+ * that it expects to get from the syntax highlighter.
+ *
+ * It then calls the syntax highlighter, and checks that the resulting
+ * collection of DOM nodes is what we expected.
+ */
+
+"use strict";
+
+const {appendSyntaxHighlightedCSS} = require("devtools/client/shared/widgets/MdnDocsWidget");
+
+/**
+ * An array containing the actual test cases.
+ *
+ * The test code tests every case in the array. If you want to add more
+ * test cases, just add more items to the array.
+ *
+ * Each test case consists of:
+ * - description: string describing the salient features of this test case
+ * - example: the string to test
+ * - expected: an array of objects, one for each DOM node we expect, that
+ * captures the information about the node that we expect to test.
+ */
+const TEST_DATA = [{
+  description: "Valid syntax, string value.",
+  example: "name: stringValue;",
+  expected: [{type: "property-name", text: "name"},
+             {type: "text", text: ":"},
+             {type: "text", text: " "},
+             {type: "property-value", text: "stringValue"},
+             {type: "text", text: ";"}
+  ]}, {
+    description: "Valid syntax, numeric value.",
+    example: "name: 1;",
+    expected: [{type: "property-name", text: "name"},
+             {type: "text", text: ":"},
+             {type: "text", text: " "},
+             {type: "property-value", text: "1"},
+             {type: "text", text: ";"}
+  ]}, {
+    description: "Valid syntax, url value.",
+    example: "name: url(./name);",
+    expected: [{type: "property-name", text: "name"},
+             {type: "text", text: ":"},
+             {type: "text", text: " "},
+             {type: "property-value", text: "url(./name)"},
+             {type: "text", text: ";"}
+  ]}, {
+    description: "Valid syntax, space before ':'.",
+    example: "name : stringValue;",
+    expected: [{type: "property-name", text: "name"},
+             {type: "text", text: " "},
+             {type: "text", text: ":"},
+             {type: "text", text: " "},
+             {type: "property-value", text: "stringValue"},
+             {type: "text", text: ";"}
+  ]}, {
+    description: "Valid syntax, space before ';'.",
+    example: "name: stringValue ;",
+    expected: [{type: "property-name", text: "name"},
+             {type: "text", text: ":"},
+             {type: "text", text: " "},
+             {type: "property-value", text: "stringValue"},
+             {type: "text", text: " "},
+             {type: "text", text: ";"}
+  ]}, {
+    description: "Valid syntax, trailing space.",
+    example: "name: stringValue; ",
+    expected: [{type: "property-name", text: "name"},
+             {type: "text", text: ":"},
+             {type: "text", text: " "},
+             {type: "property-value", text: "stringValue"},
+             {type: "text", text: ";"},
+             {type: "text", text: " "}
+  ]}, {
+    description: "Valid syntax, leading space.",
+    example: " name: stringValue;",
+    expected: [{type: "text", text: " "},
+             {type: "property-name", text: "name"},
+             {type: "text", text: ":"},
+             {type: "text", text: " "},
+             {type: "property-value", text: "stringValue"},
+             {type: "text", text: ";"}
+  ]}, {
+    description: "Valid syntax, two spaces.",
+    example: "name:  stringValue;",
+    expected: [{type: "property-name", text: "name"},
+             {type: "text", text: ":"},
+             {type: "text", text: "  "},
+             {type: "property-value", text: "stringValue"},
+             {type: "text", text: ";"}
+  ]}, {
+    description: "Valid syntax, no spaces.",
+    example: "name:stringValue;",
+    expected: [{type: "property-name", text: "name"},
+             {type: "text", text: ":"},
+             {type: "property-value", text: "stringValue"},
+             {type: "text", text: ";"}
+  ]}, {
+    description: "Valid syntax, two-part value.",
+    example: "name: stringValue 1;",
+    expected: [{type: "property-name", text: "name"},
+             {type: "text", text: ":"},
+             {type: "text", text: " "},
+             {type: "property-value", text: "stringValue"},
+             {type: "text", text: " "},
+             {type: "property-value", text: "1"},
+             {type: "text", text: ";"}
+  ]}, {
+    description: "Valid syntax, two declarations.",
+    example: "name: stringValue;\n" +
+           "name: 1;",
+    expected: [{type: "property-name", text: "name"},
+             {type: "text", text: ":"},
+             {type: "text", text: " "},
+             {type: "property-value", text: "stringValue"},
+             {type: "text", text: ";"},
+             {type: "text", text: "\n"},
+             {type: "property-name", text: "name"},
+             {type: "text", text: ":"},
+             {type: "text", text: " "},
+             {type: "property-value", text: "1"},
+             {type: "text", text: ";"}
+  ]}, {
+    description: "Valid syntax, commented, numeric value.",
+    example: "/* comment */\n" +
+           "name: 1;",
+    expected: [{type: "comment", text: "/* comment */"},
+             {type: "text", text: "\n"},
+             {type: "property-name", text: "name"},
+             {type: "text", text: ":"},
+             {type: "text", text: " "},
+             {type: "property-value", text: "1"},
+             {type: "text", text: ";"}
+  ]}, {
+    description: "Valid syntax, multiline commented, string value.",
+    example: "/* multiline \n" +
+           "comment */\n" +
+           "name: stringValue;",
+    expected: [{type: "comment", text: "/* multiline \ncomment */"},
+             {type: "text", text: "\n"},
+             {type: "property-name", text: "name"},
+             {type: "text", text: ":"},
+             {type: "text", text: " "},
+             {type: "property-value", text: "stringValue"},
+             {type: "text", text: ";"}
+  ]}, {
+    description: "Valid syntax, commented, two declarations.",
+    example: "/* comment 1 */\n" +
+           "name: 1;\n" +
+           "/* comment 2 */\n" +
+           "name: stringValue;",
+    expected: [{type: "comment", text: "/* comment 1 */"},
+             {type: "text", text: "\n"},
+             {type: "property-name", text: "name"},
+             {type: "text", text: ":"},
+             {type: "text", text: " "},
+             {type: "property-value", text: "1"},
+             {type: "text", text: ";"},
+             {type: "text", text: "\n"},
+             {type: "comment", text: "/* comment 2 */"},
+             {type: "text", text: "\n"},
+             {type: "property-name", text: "name"},
+             {type: "text", text: ":"},
+             {type: "text", text: " "},
+             {type: "property-value", text: "stringValue"},
+             {type: "text", text: ";"}
+  ]}, {
+    description: "Valid syntax, multiline.",
+    example: "name: \n" +
+           "stringValue;",
+    expected: [{type: "property-name", text: "name"},
+             {type: "text", text: ":"},
+             {type: "text", text: " \n"},
+             {type: "property-value", text: "stringValue"},
+             {type: "text", text: ";"}
+  ]}, {
+    description: "Valid syntax, multiline, two declarations.",
+    example: "name: \n" +
+           "stringValue \n" +
+           "stringValue2;",
+    expected: [{type: "property-name", text: "name"},
+             {type: "text", text: ":"},
+             {type: "text", text: " \n"},
+             {type: "property-value", text: "stringValue"},
+             {type: "text", text: " \n"},
+             {type: "property-value", text: "stringValue2"},
+             {type: "text", text: ";"}
+  ]}, {
+    description: "Invalid: not CSS at all.",
+    example: "not CSS at all",
+    expected: [{type: "property-name", text: "not"},
+             {type: "text", text: " "},
+             {type: "property-name", text: "CSS"},
+             {type: "text", text: " "},
+             {type: "property-name", text: "at"},
+             {type: "text", text: " "},
+             {type: "property-name", text: "all"}
+  ]}, {
+    description: "Invalid: switched ':' and ';'.",
+    example: "name; stringValue:",
+    expected: [{type: "property-name", text: "name"},
+             {type: "text", text: ";"},
+             {type: "text", text: " "},
+             {type: "property-name", text: "stringValue"},
+             {type: "text", text: ":"}
+  ]}, {
+    description: "Invalid: unterminated comment.",
+    example: "/* unterminated comment\n" +
+           "name: stringValue;",
+    expected: [{type: "comment", text: "/* unterminated comment\nname: stringValue;"}
+  ]}, {
+    description: "Invalid: bad comment syntax.",
+    example: "// invalid comment\n" +
+           "name: stringValue;",
+    expected: [{type: "text", text: "/"},
+             {type: "text", text: "/"},
+             {type: "text", text: " "},
+             {type: "property-name", text: "invalid"},
+             {type: "text", text: " "},
+             {type: "property-name", text: "comment"},
+             {type: "text", text: "\n"},
+             {type: "property-name", text: "name"},
+             {type: "text", text: ":"},
+             {type: "text", text: " "},
+             {type: "property-value", text: "stringValue"},
+             {type: "text", text: ";"}
+  ]}, {
+    description: "Invalid: no trailing ';'.",
+    example: "name: stringValue\n" +
+           "name: stringValue2",
+    expected: [{type: "property-name", text: "name"},
+             {type: "text", text: ":"},
+             {type: "text", text: " "},
+             {type: "property-value", text: "stringValue"},
+             {type: "text", text: "\n"},
+             {type: "property-value", text: "name"},
+             {type: "text", text: ":"},
+             {type: "text", text: " "},
+             {type: "property-value", text: "stringValue2"},
+  ]}
+];
+
+/**
+ * Iterate through every test case, calling the syntax highlighter,
+ * then calling a helper function to check the output.
+ */
+add_task(function* () {
+  let doc = gBrowser.selectedTab.ownerDocument;
+  let parent = doc.createElement("div");
+  info("Testing all CSS syntax highlighter test cases");
+  for (let {description, example, expected} of TEST_DATA) {
+    info("Testing: " + description);
+    appendSyntaxHighlightedCSS(example, parent);
+    checkCssSyntaxHighlighterOutput(expected, parent);
+    while (parent.firstChild) {
+      parent.firstChild.remove();
+    }
+  }
+});