/
calc.html
56 lines (52 loc) · 1.43 KB
/
calc.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>calc()</title>
<style type="text/css">
ol li {border: 1px dotted gray; background: rgba(255,255,0,0.1);}
li:nth-child(1) {width: calc(7em + 6em);}
li:nth-child(2) {width: calc(7em+6em);}
li:nth-child(3) {width: calc(7em + (1em * 6));}
li:nth-child(4) {width: calc(7em + 96px);}
li:nth-child(5) {width: calc(7em + 6);}
li:nth-child(6) {width: calc(7em + 5s);}
li:nth-child(7) {width: calc(7em + calc(4em + 2em));}
li:nth-child(8) {width: calc(7em + (4em + 2em));}
li:nth-child(9) {width: calc(6.5em * 2);}
li:nth-child(10) {width: calc(6.5em*2);}
li:nth-child(11) {width: calc(6.5 * 2em);}
li:nth-child(12) {width: calc(6.5em * 2em);}
li:nth-child(13) {width: calc(6.5em * 0);}
li:nth-child(14) {width: calc(26em / 2);}
li:nth-child(15) {width: calc(26em/2);}
li:nth-child(16) {width: calc(26 / 2em);}
li:nth-child(17) {width: calc(26em / 2em);}
li:nth-child(18) {width: calc(13em / 0);}
</style>
</head>
<body>
<ol>
<li>A list item.</li>
<li>A list item.</li>
<li>A list item.</li>
<li>A list item.</li>
<li>A list item.</li>
<li>A list item.</li>
<li>A list item.</li>
<li>A list item.</li>
<li>A list item.</li>
<li>A list item.</li>
<li>A list item.</li>
<li>A list item.</li>
<li>A list item.</li>
<li>A list item.</li>
<li>A list item.</li>
<li>A list item.</li>
<li>A list item.</li>
<li>A list item.</li>
</ol>
</div>
<a href="http://www.w3.org/TR/css3-values">Specification</a>
</body>
</html>