Bug 921102 - 2 - Markup-view tests for attribute links; r=miker

--HG--
extra : rebase_source : 79226c5f6ef41713afaaff2621f6c817acca7cc3
extra : histedit_source : 3dc761cd2a6c29ad90305e8d0063c16666eea078

browser/devtools/markupview/test/browser.ini

@@ -10,6 +10,7 @@ support-files =
   doc_markup_events_jquery.html
   doc_markup_events-overflow.html
   doc_markup_flashing.html
+  doc_markup_links.html
   doc_markup_mutation.html
   doc_markup_navigation.html
   doc_markup_not_displayed.html
@@ -68,6 +69,9 @@ skip-if = e10s # Bug 1040751 - CodeMirror editor.destroy() isn't e10s compatible
 skip-if = e10s # Bug 1040751 - CodeMirror editor.destroy() isn't e10s compatible
 [browser_markupview_events_jquery_2.1.1.js]
 skip-if = e10s # Bug 1040751 - CodeMirror editor.destroy() isn't e10s compatible
+[browser_markupview_links_01.js]
+[browser_markupview_links_02.js]
+[browser_markupview_links_03.js]
 [browser_markupview_load_01.js]
 [browser_markupview_html_edit_01.js]
 [browser_markupview_html_edit_02.js]

browser/devtools/markupview/test/browser_markupview_links_01.js

@@ -0,0 +1,121 @@
+/* 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";
+
+// Tests that links are shown in attributes when the values (or part of the
+// values) are URIs or pointers to IDs.
+
+const TEST_URL = TEST_URL_ROOT + "doc_markup_links.html";
+
+const TEST_DATA = [{
+  selector: "link",
+  attributes: [{
+    attributeName: "href",
+    links: [{type: "resource", value: "style.css"}]
+  }]
+}, {
+  selector: "link[rel=icon]",
+  attributes: [{
+    attributeName: "href",
+    links: [{type: "uri", value: "/media/img/firefox/favicon-196.223e1bcaf067.png"}]
+  }]
+}, {
+  selector: "form",
+  attributes: [{
+    attributeName: "action",
+    links: [{type: "uri", value: "/post_message"}]
+  }]
+}, {
+  selector: "label[for=name]",
+  attributes: [{
+    attributeName: "for",
+    links: [{type: "idref", value: "name"}]
+  }]
+}, {
+  selector: "label[for=message]",
+  attributes: [{
+    attributeName: "for",
+    links: [{type: "idref", value: "message"}]
+  }]
+}, {
+  selector: "output",
+  attributes: [{
+    attributeName: "form",
+    links: [{type: "idref", value: "message-form"}]
+  }, {
+    attributeName: "for",
+    links: [
+      {type: "idref", value: "name"},
+      {type: "idref", value: "message"}
+    ]
+  }]
+}, {
+  selector: "a",
+  attributes: [{
+    attributeName: "href",
+    links: [{type: "uri", value: "/go/somewhere/else"}]
+  }, {
+    attributeName: "ping",
+    links: [
+      {type: "uri", value: "/analytics?page=pageA"},
+      {type: "uri", value: "/analytics?user=test"}
+    ]
+  }]
+}, {
+  selector: "li[contextmenu=menu1]",
+  attributes: [{
+    attributeName: "contextmenu",
+    links: [{type: "idref", value: "menu1"}]
+  }]
+}, {
+  selector: "li[contextmenu=menu2]",
+  attributes: [{
+    attributeName: "contextmenu",
+    links: [{type: "idref", value: "menu2"}]
+  }]
+}, {
+  selector: "li[contextmenu=menu3]",
+  attributes: [{
+    attributeName: "contextmenu",
+    links: [{type: "idref", value: "menu3"}]
+  }]
+}, {
+  selector: "video",
+  attributes: [{
+    attributeName: "poster",
+    links: [{type: "uri", value: "doc_markup_tooltip.png"}]
+  }, {
+    attributeName: "src",
+    links: [{type: "uri", value: "code-rush.mp4"}]
+  }]
+}, {
+  selector: "script",
+  attributes: [{
+    attributeName: "src",
+    links: [{type: "resource", value: "lib_jquery_1.0.js"}]
+  }]
+}];
+
+add_task(function*() {
+  let {inspector} = yield addTab(TEST_URL).then(openInspector);
+
+  for (let {selector, attributes} of TEST_DATA) {
+    info("Testing attributes on node " + selector);
+    yield selectNode(selector, inspector);
+    let {editor} = yield getContainerForSelector(selector, inspector);
+
+    for (let {attributeName, links} of attributes) {
+      info("Testing attribute " + attributeName);
+      let linkEls = editor.attrElements.get(attributeName).querySelectorAll(".link");
+
+      is(linkEls.length, links.length, "The right number of links were found");
+
+      for (let i = 0; i < links.length; i ++) {
+        is(linkEls[i].dataset.type, links[i].type, "Link " + i + " has the right type");
+        is(linkEls[i].textContent, links[i].value, "Link " + i + " has the right value");
+      }
+    }
+  }
+});

browser/devtools/markupview/test/browser_markupview_links_02.js

@@ -0,0 +1,37 @@
+/* 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";
+
+// Tests that attributes are linkified correctly when attributes are updated
+// and created.
+
+const TEST_URL = TEST_URL_ROOT + "doc_markup_links.html";
+
+add_task(function*() {
+  let {inspector} = yield addTab(TEST_URL).then(openInspector);
+
+  info("Adding a contextmenu attribute to the body node");
+  yield addNewAttributes("body", "contextmenu=\"menu1\"", inspector);
+
+  info("Checking for links in the new attribute");
+  let {editor} = yield getContainerForSelector("body", inspector);
+  let linkEls = editor.attrElements.get("contextmenu").querySelectorAll(".link");
+  is(linkEls.length, 1, "There is one link in the contextmenu attribute");
+  is(linkEls[0].dataset.type, "idref", "The link has the right type");
+  is(linkEls[0].textContent, "menu1", "The link has the right value");
+
+  info("Editing the contextmenu attribute on the body node");
+  let nodeMutated = inspector.once("markupmutation");
+  let attr = editor.attrElements.get("contextmenu").querySelector(".editable");
+  setEditableFieldValue(attr, "contextmenu=\"menu2\"", inspector);
+  yield nodeMutated;
+
+  info("Checking for links in the updated attribute");
+  ({editor}) = yield getContainerForSelector("body", inspector);
+  linkEls = editor.attrElements.get("contextmenu").querySelectorAll(".link");
+  is(linkEls.length, 1, "There is one link in the contextmenu attribute");
+  is(linkEls[0].dataset.type, "idref", "The link has the right type");
+  is(linkEls[0].textContent, "menu2", "The link has the right value");
+});

browser/devtools/markupview/test/browser_markupview_links_03.js

@@ -0,0 +1,37 @@
+/* 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";
+
+// Tests that links appear correctly in attributes created in content.
+
+const TEST_URL = TEST_URL_ROOT + "doc_markup_links.html";
+
+add_task(function*() {
+  let {inspector} = yield addTab(TEST_URL).then(openInspector);
+
+  info("Adding a contextmenu attribute to the body node via the content");
+  let onMutated = inspector.once("markupmutation");
+  yield setNodeAttribute("body", "contextmenu", "menu1");
+  yield onMutated;
+
+  info("Checking for links in the new attribute");
+  let {editor} = yield getContainerForSelector("body", inspector);
+  let linkEls = editor.attrElements.get("contextmenu").querySelectorAll(".link");
+  is(linkEls.length, 1, "There is one link in the contextmenu attribute");
+  is(linkEls[0].dataset.type, "idref", "The link has the right type");
+  is(linkEls[0].textContent, "menu1", "The link has the right value");
+
+  info("Editing the contextmenu attribute on the body node");
+  onMutated = inspector.once("markupmutation");
+  yield setNodeAttribute("body", "contextmenu", "menu2");
+  yield onMutated;
+
+  info("Checking for links in the updated attribute");
+  ({editor}) = yield getContainerForSelector("body", inspector);
+  linkEls = editor.attrElements.get("contextmenu").querySelectorAll(".link");
+  is(linkEls.length, 1, "There is one link in the contextmenu attribute");
+  is(linkEls[0].dataset.type, "idref", "The link has the right type");
+  is(linkEls[0].textContent, "menu2", "The link has the right value");
+});

browser/devtools/markupview/test/doc_markup_links.html

@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>Markup-view links</title>
+    <link rel="stylesheet" type="text/css" href="style.css">
+    <link rel="icon" type="image/png" sizes="196x196" href="/media/img/firefox/favicon-196.223e1bcaf067.png">
+  </head>
+  <body>
+    <form id="message-form" method="post" action="/post_message">
+      <p>
+        <label for="name">Name</label>
+        <input id="name" type="text" />
+      </p>
+      <p>
+        <label for="message">Message</label>
+        <input id="message" type="text" />
+      </p>
+      <p>
+        <button>Send message</button>
+      </p>
+      <output form="message-form" for="name message">Thank you for your message!</output>
+    </form>
+    <a href="/go/somewhere/else" ping="/analytics?page=pageA /analytics?user=test">Click me, I'm a link</a>
+    <ul>
+      <li contextmenu="menu1">Item 1</li>
+      <li contextmenu="menu2">Item 2</li>
+      <li contextmenu="menu3">Item 3</li>
+    </ul>
+    <menu type="context" id="menu1">
+      <menuitem label="custom menu 1"></menuitem>
+    </menu>
+    <menu type="context" id="menu2">
+      <menuitem label="custom menu 2"></menuitem>
+    </menu>
+    <menu type="context" id="menu3">
+      <menuitem label="custom menu 3"></menuitem>
+    </menu>
+    <video controls poster="doc_markup_tooltip.png" src="code-rush.mp4"></video>
+    <script type="text/javascript" src="lib_jquery_1.0.js"></script>
+  </body>
+</html>