calc-in-counter-001.xhtml (1246B)
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <title>CSS Test: counter-* properties with a calc() expression</title> 5 <link rel="author" title="Ondřej Žára" href="https://ondras.zarovi.cz/"/> 6 7 <link rel="help" href="https://www.w3.org/TR/CSS21/generate.html#counters"/> 8 <link rel="help" href="https://www.w3.org/TR/CSS21/generate.html#propdef-content"/> 9 <link rel="help" href="https://www.w3.org/TR/CSS21/syndata.html#counter"/> 10 <link rel="help" href="https://www.w3.org/TR/css-values-3/#calc-notation"/> 11 <link rel="help" href="https://www.w3.org/TR/css-lists-3/#counter-properties"/> 12 <link rel="match" href="calc-in-counter-001-ref.xhtml"/> 13 <style type="text/css"> 14 15 body { 16 white-space: nowrap; 17 } 18 19 #a { counter-reset: a calc(3 + 5); } 20 #a::before { content: counter(a); } 21 22 #b { counter-reset: b 0; counter-increment: b calc(4 + 6); } 23 #b::before { content: counter(b); } 24 25 </style> 26 </head> 27 <body> 28 29 <p>The following two lines should be the same:</p> 30 31 <div id="test"> 32 <span id="a"></span> 33 <span id="b"></span> 34 </div> 35 36 <div id="reference"> 37 <span>8</span> 38 <span>10</span> 39 </div> 40 41 </body> 42 </html>