Tests that user can mutate DOM by means of elements panel.

 
Edited Text
Span contents
A#nbsp;B#ensp;C#emsp;D#thinsp;E#zwnj;F#zwj;G#rlm;H#lrm;I
Element

Running: testSetUp

Running: testRemove
==== before ====
- <div id="testRemove">
      <div id="node-to-remove"></div>
  </div>
==== after ====
- <div id="testRemove">
  </div>

Running: testSetNodeName
==== before ====
- <div id="testSetNodeName">
      <div id="node-to-set-name"></div>
  </div>
==== after ====
- <div id="testSetNodeName">
      <span id="node-to-set-name" ></span>
  </div>

Running: testSetNodeNameInput
==== before ====
- <div id="testSetNodeNameInput">
      <div id="node-to-set-name-input"></div>
  </div>
==== after ====
- <div id="testSetNodeNameInput">
      <input id="node-to-set-name-input" >
  </div>

Running: testSetNodeValue
==== before ====
- <div id="testSetNodeValue">
      <div id="node-to-set-value">\n          Text\n        </div>
  </div>
==== after ====
- <div id="testSetNodeValue">
      <div id="node-to-set-value">  \n  Edited Text  \n  </div>
  </div>

Running: testSetAttribute
==== before ====
- <div id="testSetAttribute">
      <div foo="attribute value" id="node-to-set-attribute"></div>
  </div>
==== after ====
- <div id="testSetAttribute">
      <div id="node-to-set-attribute" bar="edited attribute"></div>
  </div>

Running: testRemoveAttribute
==== before ====
- <div id="testRemoveAttribute">
      <div foo="attribute value" id="node-to-remove-attribute"></div>
  </div>
==== after ====
- <div id="testRemoveAttribute">
      <div id="node-to-remove-attribute"></div>
  </div>

Running: testAddAttribute
==== before ====
- <div id="testAddAttribute">
      <div id="node-to-add-attribute"></div>
  </div>
==== after ====
- <div id="testAddAttribute">
      <div id="node-to-add-attribute" newattr="new-value"></div>
  </div>

Running: testEditCommentAsHTML
==== before ====
- <div id="testEditCommentAsHTML">
      <!-- Comment -->
  </div>
<!-- Comment -->
==== after ====
- <div id="testEditCommentAsHTML">
      <div foo="bar-comment">Element</div>
  </div>

Running: testEditAsHTML
==== before ====
- <div id="testEditAsHTML">
    - <div id="node-to-edit-as-html">
          <span id="span">Text</span>
      </div>
  </div>
<div id="node-to-edit-as-html"><span id="span">Text</span></div>
==== after ====
- <div id="testEditAsHTML">
    - <span foo="bar">
          <span id="inner-span">Span contents</span>
      </span>
  </div>

Running: testEditInvisibleCharsAsHTML
==== before ====
- <div id="testEditInvisibleCharsAsHTML">
      <div id="node-with-invisible-chars">A&nbsp;B&ensp;C&emsp;D&thinsp;E&zwnj;F&zwj;G&rlm;H&lrm;I</div>
  </div>
<div id="node-with-invisible-chars">A&nbsp;B&ensp;C&emsp;D&thinsp;E&zwnj;F&zwj;G&rlm;H&lrm;I</div>
==== after ====
- <div id="testEditInvisibleCharsAsHTML">
      <div id="node-with-invisible-chars">A#nbsp;B#ensp;C#emsp;D#thinsp;E#zwnj;F#zwj;G#rlm;H#lrm;I</div>
  </div>

Running: testEditScript
==== before ====
- <div id="testEditScript">
    - <script id="node-to-edit-script">
          \n          var i = 0;\n          var j = 5;\n          for (; i < j; ++i) {\n              // Do nothing.\n          }\n\n
      </script>
  </div>
==== after ====
- <div id="testEditScript">
    - <script id="node-to-edit-script">
          var i = 0;\n    var j = 0;\n
      </script>
  </div>