1 <!DOCTYPE HTML PUBLIC
"-//W3C//DTD HTML 4.01//EN">
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-content">
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-Script-Type" content=
"text/javascript">
11 <style type=
"text/css">
12 body
{ white-space: nowrap
; }
13 #test, .reset
{ counter-reset: c
; }
14 .increment:before { content: counters
(c
, ".") "-"; }
15 .increment { counter-increment: c
; }
17 <script type=
"text/javascript">
18 if (window
.testRunner
) {
19 testRunner
.dumpAsText();
20 testRunner
.waitUntilDone();
24 var t
= document
.getElementById("test");
25 var s
= document
.createElement("span");
26 s
.setAttribute("class", "reset");
27 s
.setAttribute("id", "newSpan");
28 t
.insertBefore(s
, t
.childNodes
.item(1));
29 if (window
.testRunner
) {
30 testElement
= document
.getElementById("test");
31 console
= document
.getElementById("console");
32 spanList
= testElement
.getElementsByTagName("span")
33 for (i
= 0; i
< spanList
.length
; ++i
) {
34 newSpanElement
= document
.createElement("span");
35 newSpanElement
.innerText
=
36 window
.internals
.counterValue(document
.getElementById(spanList
.item(i
).getAttribute("id")));
37 if (newSpanElement
.innerText
.length
)
38 newSpanElement
.innerText
= newSpanElement
.innerText
+ "-"
39 console
.appendChild(newSpanElement
);
41 testRunner
.notifyDone();
45 </head><body onload=
"setTimeout('run()', 0)">
46 <p>The following two lines should be the same:
</p>
47 <div id=
"test"><span id=
"span1" class=
"increment"></span><span id=
"span2" class=
"reset"></span><span id=
"span3" class=
"increment"></span><span id=
"span4" class=
"increment"></span></div>
48 <div id=
"reference">1-
1.1-
1.2-
</div>