third_party/WebKit/LayoutTests/inspector/elements/modify-chardata.html

   1 <html>
   2 <head>
   3 <script src="../../http/tests/inspector/inspector-test.js"></script>
   4 <script src="../../http/tests/inspector/elements-test.js"></script>
   5 <script>
   6
   7 function modifyChars()
   8 {
   9     var node = document.getElementById("node");
  10     node.firstChild.textContent = "Bar";
  11 }
  12
  13 function modifyViaRange()
  14 {
  15     var range = document.createRange();
  16     var referenceNode = document.getElementById("rangenode").firstChild;
  17     range.selectNode(referenceNode);
  18     range.setStart(referenceNode, 9);
  19     range.setEnd(referenceNode, 9 + 5);
  20     range.deleteContents();
  21     var span = range.startContainer.ownerDocument.createElement("span");
  22     span.innerHTML = "test";
  23     range.insertNode(span);
  24 }
  25
  26 function test()
  27 {
  28     var targetNode;
  29
  30     InspectorTest.runTestSuite([
  31         function testDumpInitial(next)
  32         {
  33             function callback(node)
  34             {
  35                 targetNode = node;
  36                 InspectorTest.addResult("========= Original for normal mutation ========");
  37                 InspectorTest.dumpElementsTree(targetNode);
  38                 next();
  39             }
  40             InspectorTest.selectNodeWithId("node", callback);
  41         },
  42
  43         function testSetAttribute(next)
  44         {
  45             function callback()
  46             {
  47                 InspectorTest.addResult("===== Mutated text node =====");
  48                 InspectorTest.dumpElementsTree(targetNode);
  49                 next();
  50             }
  51             InspectorTest.evaluateInPage("modifyChars()", callback);
  52         },
  53
  54         function testModifyViaRange(next)
  55         {
  56             function callback()
  57             {
  58                 InspectorTest.addResult("===== Contents modified via Range =====");
  59                 InspectorTest.dumpElementsTree(targetNode);
  60                 next();
  61             }
  62             function expandCallback()
  63             {
  64                 InspectorTest.expandElementsTree(callback);
  65             }
  66             function selectCallback(node)
  67             {
  68                 targetNode = node;
  69                 InspectorTest.addResult("========= Original for Range mutation ========");
  70                 InspectorTest.dumpElementsTree(targetNode);
  71                 InspectorTest.evaluateInPage("modifyViaRange()", expandCallback);
  72             }
  73             InspectorTest.selectNodeWithId("rangenode", selectCallback);
  74         }
  75     ]);
  76 }
  77
  78 </script>
  79 </head>
  80
  81 <body onload="runTest()">
  82 <p>
  83 Tests that elements panel updates dom tree structure upon changes to characters.
  84 </p>
  85
  86 <div id="node">Foo</div>
  87 <div id="rangenode">Lorem ipsum dolor sit amet</div>
  88
  89 </body>
  90 </html>