Bug 1078374 - Add mochitest for markup view with template tag;r=bgrins

MozReview-Commit-ID: 4knVStt5QzY

--HG--
extra : rebase_source : 3f37819f8305e6c373d957f93da2ff7d63c38ce5

devtools/client/inspector/markup/test/browser.ini

@@ -189,6 +189,7 @@ skip-if = e10s # Bug 1036409 - The last selected node isn't reselected
 [browser_markup_tag_edit_13-other.js]
 [browser_markup_tag_edit_avoid_refocus.js]
 [browser_markup_tag_edit_long-classname.js]
+[browser_markup_template.js]
 [browser_markup_textcontent_display.js]
 [browser_markup_textcontent_edit_01.js]
 [browser_markup_textcontent_edit_02.js]

devtools/client/inspector/markup/test/browser_markup_template.js

@@ -0,0 +1,50 @@
+/* vim: set ts=2 et sw=2 tw=80: */
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test the markup view displaying the content of a <template> tag.
+
+add_task(async function() {
+  const TEST_URL = `data:text/html;charset=utf-8,` + encodeURIComponent(`
+    <div id="root">
+      <template>
+        <p>template content</p>
+      </template>
+
+      <div id="template-container" style="border: 1px solid black"></div>
+    </div>
+    <script>
+      "use strict";
+
+      const template = document.querySelector("template");
+      const clone = document.importNode(template.content, true);
+      document.querySelector("#template-container").appendChild(clone);
+    </script>`);
+
+  const EXPECTED_TREE = `
+    root
+      template
+        #document-fragment
+          p
+      template-container
+        p`;
+
+  const {inspector} = await openInspectorForURL(TEST_URL);
+  const {markup} = inspector;
+
+  await assertMarkupViewAsTree(EXPECTED_TREE, "#root", inspector);
+
+  info("Select the p element under the template .");
+  const templateFront = await getNodeFront("template", inspector);
+  const templateContainer = markup.getContainer(templateFront);
+  const documentFragmentContainer = templateContainer.getChildContainers()[0];
+  const pContainer = documentFragmentContainer.getChildContainers()[0];
+
+  await selectNode(pContainer.node, inspector, "no-reason", false);
+
+  const ruleView = inspector.getPanel("ruleview").view;
+  is(ruleView.element.querySelectorAll("#ruleview-no-results").length, 1,
+    "No rules are displayed for this p element");
+});