devtools/server/tests/chrome/test_inspector-mutations-attr.html

   1 <!DOCTYPE HTML>
   2 <html>
   3 <!--
   4 https://bugzilla.mozilla.org/show_bug.cgi?id=
   5 -->
   6 <head>
   7   <meta charset="utf-8">
   8   <title>Test for Bug </title>
   9
  10   <script src="chrome://mochikit/content/tests/SimpleTest/SimpleTest.js"></script>
  11   <link rel="stylesheet" type="text/css" href="chrome://mochikit/content/tests/SimpleTest/test.css">
  12   <script type="application/javascript" src="inspector-helpers.js"></script>
  13   <script type="application/javascript">
  14 "use strict";
  15
  16 window.onload = function() {
  17   SimpleTest.waitForExplicitFinish();
  18   runNextTest();
  19 };
  20
  21 let gInspectee = null;
  22 let gWalker = null;
  23 let attrNode;
  24 let attrFront;
  25
  26 addTest(async function setup() {
  27   const url = document.getElementById("inspectorContent").href;
  28   const { target, doc } = await attachURL(url);
  29   const inspector = await target.getFront("inspector");
  30   gInspectee = doc;
  31   gWalker = inspector.walker;
  32   runNextTest();
  33 });
  34
  35 addTest(setupAttrTest);
  36 addTest(testAddAttribute);
  37 addTest(testChangeAttribute);
  38 addTest(testRemoveAttribute);
  39 addTest(testQueuedMutations);
  40 addTest(setupFrameAttrTest);
  41 addTest(testAddAttribute);
  42 addTest(testChangeAttribute);
  43 addTest(testRemoveAttribute);
  44 addTest(testQueuedMutations);
  45
  46 function setupAttrTest() {
  47   attrNode = gInspectee.querySelector("#a");
  48   promiseDone(gWalker.querySelector(gWalker.rootNode, "#a").then(node => {
  49     attrFront = node;
  50   }).then(runNextTest));
  51 }
  52
  53 function setupFrameAttrTest() {
  54   const frame = gInspectee.querySelector("#childFrame");
  55   attrNode = frame.contentDocument.querySelector("#a");
  56
  57   promiseDone(gWalker.querySelector(gWalker.rootNode, "#childFrame").then(childFrame => {
  58     return childFrame.walkerFront.children(childFrame);
  59   }).then(children => {
  60     const nodes = children.nodes;
  61     is(nodes.length, 1, "There should be only one child of the iframe");
  62     const [iframeNode] = nodes;
  63     is(iframeNode.nodeType, Node.DOCUMENT_NODE, "iframe child should be a document node");
  64     return iframeNode.walkerFront.querySelector(iframeNode, "#a");
  65   }).then(node => {
  66     attrFront = node;
  67   }).then(runNextTest));
  68 }
  69
  70 function testAddAttribute() {
  71   attrNode.setAttribute("data-newattr", "newvalue");
  72   attrNode.setAttribute("data-newattr2", "newvalue");
  73   attrFront.walkerFront.once("mutations", () => {
  74     is(attrFront.attributes.length, 3, "Should have id and two new attributes.");
  75     is(attrFront.getAttribute("data-newattr"), "newvalue",
  76        "Node front should have the first new attribute");
  77     is(attrFront.getAttribute("data-newattr2"), "newvalue",
  78        "Node front should have the second new attribute.");
  79     runNextTest();
  80   });
  81 }
  82
  83 function testChangeAttribute() {
  84   attrNode.setAttribute("data-newattr", "changedvalue1");
  85   attrNode.setAttribute("data-newattr", "changedvalue2");
  86   attrNode.setAttribute("data-newattr", "changedvalue3");
  87   attrFront.walkerFront.once("mutations", mutations => {
  88     is(mutations.length, 1,
  89        "Only one mutation is sent for multiple queued attribute changes");
  90     is(attrFront.attributes.length, 3, "Should have id and two new attributes.");
  91     is(attrFront.getAttribute("data-newattr"), "changedvalue3",
  92        "Node front should have the changed first value");
  93     is(attrFront.getAttribute("data-newattr2"), "newvalue",
  94        "Second value should remain unchanged.");
  95     runNextTest();
  96   });
  97 }
  98
  99 function testRemoveAttribute() {
 100   attrNode.removeAttribute("data-newattr2");
 101   attrFront.walkerFront.once("mutations", () => {
 102     is(attrFront.attributes.length, 2, "Should have id and one remaining attribute.");
 103     is(attrFront.getAttribute("data-newattr"), "changedvalue3",
 104        "Node front should still have the first value");
 105     ok(!attrFront.hasAttribute("data-newattr2"), "Second value should be removed.");
 106     runNextTest();
 107   });
 108 }
 109
 110 function testQueuedMutations() {
 111   // All modifications to each attribute should be queued in one mutation event.
 112
 113   attrNode.removeAttribute("data-newattr");
 114   attrNode.setAttribute("data-newattr", "1");
 115   attrNode.removeAttribute("data-newattr");
 116   attrNode.setAttribute("data-newattr", "2");
 117   attrNode.removeAttribute("data-newattr");
 118
 119   for (let i = 0; i <= 1000; i++) {
 120     attrNode.setAttribute("data-newattr2", i);
 121   }
 122
 123   attrNode.removeAttribute("data-newattr3");
 124   attrNode.setAttribute("data-newattr3", "1");
 125   attrNode.removeAttribute("data-newattr3");
 126   attrNode.setAttribute("data-newattr3", "2");
 127   attrNode.removeAttribute("data-newattr3");
 128   attrNode.setAttribute("data-newattr3", "3");
 129
 130   // This shouldn't be added in the attribute set, since it's a new
 131   // attribute that's been added and removed.
 132   attrNode.setAttribute("data-newattr4", "4");
 133   attrNode.removeAttribute("data-newattr4");
 134
 135   attrFront.walkerFront.once("mutations", mutations => {
 136     is(mutations.length, 4,
 137        "Only one mutation each is sent for multiple queued attribute changes");
 138     is(attrFront.attributes.length, 3,
 139        "Should have id, data-newattr2, and data-newattr3.");
 140
 141     is(attrFront.getAttribute("data-newattr2"), "1000",
 142        "Node front should still have the correct value");
 143     is(attrFront.getAttribute("data-newattr3"), "3",
 144        "Node front should still have the correct value");
 145     ok(!attrFront.hasAttribute("data-newattr"), "Attribute value should be removed.");
 146     ok(!attrFront.hasAttribute("data-newattr4"), "Attribute value should be removed.");
 147
 148     runNextTest();
 149   });
 150 }
 151
 152 addTest(function cleanup() {
 153   gInspectee = null;
 154   gWalker = null;
 155   runNextTest();
 156 });
 157   </script>
 158 </head>
 159 <body>
 160 <a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=">Mozilla Bug </a>
 161 <a id="inspectorContent" target="_blank" href="inspector-traversal-data.html">Test Document</a>
 162 <p id="display"></p>
 163 <div id="content" style="display: none">
 164
 165 </div>
 166 <pre id="test">
 167 </pre>
 168 </body>
 169 </html>