<html>
<head>
    <style>
        pre { margin: 0; }
    </style>
    <script src="../../resources/dump-as-markup.js"></script>
    <script>
    Markup.noAutoDump();
    
    function assertMarkup(name, element, expected) {
      var markup = Markup.get(element);
      if (markup == expected)
          log('PASS: ' + name);
      else
          log('FAIL: ' + name  + '\nWas:\n' + markup + '\nExpected:\n' + expected);
    }
    
    function log(text) {
      var el = document.createElement('pre');
      el.appendChild(document.createTextNode(text));
      document.getElementById('result').appendChild(el);
    }
    
    function runTest() {
        if (window.testRunner)
            testRunner.dumpAsText()

        var items = document.getElementsByTagName('li');

        document.getElementById('testReplace').outerText = 'Replaced';
        assertMarkup('replace', items[0], '| "Replaced node using outerText."');
        
        document.getElementById('testRemove').outerText = '';
        assertMarkup('remove', items[1], '| " removing node using outerText."');

        document.getElementById('testEmpty').outerText = '';
        assertMarkup('empty text node', items[2], '| ""');
        
        document.getElementById('testAddBr').outerText = 'br\n';
        assertMarkup('line break', items[3], '| "Testing adding br"\n| <br>\n| " using outerText."');
    }
    </script>
</head>
<body onload="runTest()">
    <ul>
      <li><span id="testReplace">Testing replacing</span> node using outerText.</li>
      <li><span id="testRemove">Testing</span> removing node using outerText.</li>
      <li><span id="testEmpty">Test removing entire node</span></li>
      <li>Testing adding <span id="testAddBr">line break</span> using outerText.</li>
    </ul>
    <div id="result"></div>
</body>
</html>