<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
 <head>
  <title>CSS 2.1 Test Suite: dynamic changes to 'counter-increment'</title>
  <style type="text/css">

  #test, .reset { counter-reset: c; }
  .increment:before { content: counters(c, ".") "-"; }
  .increment { counter-increment: c; }

  </style>
  <script src="../../../resources/js-test-pre.js"></script>
  <script type="text/javascript">

  if (window.testRunner)
      testRunner.dumpAsText();

  function checkCounterValuesBeforeChange()
  {
      debug('Before the dynamic change:');
      shouldBe("window.internals.counterValue(document.getElementById('one'))", "'1'");
      shouldBe("window.internals.counterValue(document.getElementById('two'))", "'3'");
      shouldBe("window.internals.counterValue(document.getElementById('three'))", "'4'");
  }

  function checkCounterValuesAfterChange()
  {
      debug('After the dynamic change:');
      shouldBe("window.internals.counterValue(document.getElementById('one'))", "'1'");
      shouldBe("window.internals.counterValue(document.getElementById('two'))", "'2'");
      shouldBe("window.internals.counterValue(document.getElementById('three'))", "'3'");

      debug('');
      debug('TEST COMPLETE');
      // Eliminate confusing messages (counter values won't be dumped by dumpAsText).
      var viewElement = document.getElementById("view");
      viewElement.parentNode.removeChild(viewElement);
  }

  function run()
  {
      if (window.testRunner)
          checkCounterValuesBeforeChange();

      var t = document.getElementById("test");
      t.removeChild(t.childNodes.item(1));

      if (window.testRunner)
          checkCounterValuesAfterChange();
  }
  </script>
 </head>

 <body onload="run();">

 <p>This is the WebKit version of <a href="http://www.w3.org/Style/CSS/Test/CSS2.1/20061011/html4/t1204-increment-01-c-o.htm">CSS 2.1 Test Suite: dynamic changes to 'counter-increment'</a>.</p>

 <div id="view">
 <p>The following two lines should be the same:</p>
 <div id="test"><span id="one" class="increment"></span><span class="increment">FAIL-</span><span id="two" class="increment"></span><span id="three" class="increment"></span></div>
 <div id="reference">1-2-3-</div>
 </div>

 <div id="console"></div>

 </body>
</html>