OLD | NEW |
(Empty) | |
| 1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> |
| 2 <html><head> |
| 3 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> |
| 4 <title>CSS Test: dynamic changes to 'counter-increment'</title> |
| 5 <link rel="author" href="http://dbaron.org/" title="L. David Baron"> |
| 6 <link rel="help" href="http://www.w3.org/TR/CSS21/generate.html#counters"> |
| 7 <link rel="help" href="http://www.w3.org/TR/CSS21/generate.html#propdef-cont
ent"> |
| 8 <link rel="help" href="http://www.w3.org/TR/CSS21/syndata.html#counter"> |
| 9 <meta content="dom" name="flags"> |
| 10 <meta http-equiv="Content-Style-Type" content="text/css"> |
| 11 <meta http-equiv="Content-Script-Type" content="text/javascript"> |
| 12 <style type="text/css"> |
| 13 body { white-space: nowrap; } |
| 14 #test, .reset { counter-reset: c; } |
| 15 .increment:before, .use:before { content: counters(c, ".") "-"; } |
| 16 .increment { counter-increment: c; } |
| 17 </style> |
| 18 <script type="text/javascript"> |
| 19 if (window.layoutTestController) { |
| 20 layoutTestController.dumpAsText(); |
| 21 layoutTestController.waitUntilDone(); |
| 22 } |
| 23 |
| 24 function run() { |
| 25 document.getElementById("one").removeAttribute("class"); |
| 26 document.getElementById("two").setAttribute("class", "increment"); |
| 27 document.getElementById("three").setAttribute("style", "counter-incr
ement: c"); |
| 28 if (window.layoutTestController) { |
| 29 testElement = document.getElementById("test"); |
| 30 console = document.getElementById("console"); |
| 31 spanList = testElement.getElementsByTagName("span") |
| 32 for (i = 0; i < spanList.length; ++i ) { |
| 33 newSpanElement = document.createElement("span"); |
| 34 newSpanElement.innerText = |
| 35 layoutTestController.counterValueForElementById(spanList.ite
m(i).getAttribute("id")); |
| 36 if (newSpanElement.innerText.length) |
| 37 newSpanElement.innerText = newSpanElement.innerText + "-
"; |
| 38 console.appendChild(newSpanElement); |
| 39 } |
| 40 layoutTestController.notifyDone(); |
| 41 } |
| 42 } |
| 43 </script> |
| 44 </head><body onload="setTimeout('run()', 0)"> |
| 45 <p>The following two lines should have the same content:</p> |
| 46 <div id="test"><span id="one"></span><span id="parent"><span id="reset" clas
s="reset"><span id="resetchild" class="increment"></span><span class="increment"
id="two"></span></span></span><span style="counter-increment: c;" class="use" i
d="three"></span><span id="upperincrement" class="increment"></span></div> |
| 47 <div id="reference">0.1-0.2-1-2-</div> |
| 48 <hr> |
| 49 <div id="console"></div> |
| 50 </body></html> |
OLD | NEW |