1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
2 <html>
3 <head>
4 <title>CSS Test: Box Shadow Syntax: Reordering Components</title>
5 <link rel="author" title="Elika J. Etemad" href="http://fantasai.inkedblade.net/contact">
6 <link rel="help" href="http://www.w3.org/TR/css3-background/#the-box-shadow">
7 <link rel="match" href="reference/box-shadow-syntax-001.htm">
8 <meta name="assert" content="Box shadow color, inset, and length parameters can be mixed in any order, but lengths must stay adjacent.">
9 <style type="text/css">
10
11 .container {
12 margin: 4px;
13 border: solid red 4px;
14 padding-top: 1px;
15 border-style: none none solid solid;
16 }
17 .outset {
18 height: 12px;
19 margin: -5px -4px 0 0;
20
21 }
22 .inset {
23 color: green;
24 height: 13px;
25 margin: -1px 0 -4px -4px;
26 }
27
28 /* color */
29 #c1 > div { box-shadow: -4px 4px green;
30 box-shadow: red;
31 box-shadow: 4px red;
32 box-shadow: red 4px;
33 box-shadow: -4px red 4px;
34 box-shadow: red -4px 4px red;
35 box-shadow: -4px 4px red 0;
36 box-shadow: -4px 4px 0 red 0;
37 }
38 #c2 > div { box-shadow: green -4px 4px; }
39 #c3 > div { box-shadow: -4px 4px 0 green; }
40 #c4 > div { box-shadow: green -4px 4px 0; }
41 #c5 > div { box-shadow: -4px 4px 0 0 green; }
42 #c6 > div { box-shadow: green -4px 4px 0 0; }
43
44 /* inset */
45 #i1 > div { box-shadow: 4px -4px inset; }
46 #i2 > div { box-shadow: inset 4px -4px; }
47 #i3 > div { box-shadow: 4px -4px 0 inset; }
48 #i4 > div { box-shadow: inset 4px -4px 0; }
49 #i5 > div { box-shadow: 4px -4px 0 0 inset; }
50 #i6 > div { box-shadow: inset 4px -4px 0 0; }
51 #i7 { border-color: green; }
52 #i7 > div { box-shadow: 4px -4px green inset;
53 color: red;
54 box-shadow: inset;
55 box-shadow: inset 4px;
56 box-shadow: 4px inset;
57 box-shadow: 4px inset -4px;
58 box-shadow: inset 4px -4px inset;
59 box-shadow: 4px -4px inset 0;
60 box-shadow: 4px -4px 0 inset 0;
61 }
62
63
64 /* color and inset */
65 #ci1 > div { box-shadow: 4px -4px green inset;
66
67 box-shadow: red inset;
68 box-shadow: inset red;
69
70 box-shadow: 4px red inset;
71 box-shadow: red inset 4px;
72 box-shadow: 4px inset red;
73 box-shadow: inset red 4px;
74
75 box-shadow: 4px red inset -4px;
76 box-shadow: 4px inset red -4px;
77 box-shadow: inset 4px red -4px;
78 box-shadow: 4px red 4px inset;
79 box-shadow: red 4px inset -4px;
80 box-shadow: 4px inset -4px red;
81
82 box-shadow: 4px -4px red inset 0;
83 box-shadow: 4px -4px inset red 0;
84 box-shadow: inset 4px -4px red 0;
85 box-shadow: 4px -4px red 0 inset;
86 box-shadow: red 4px -4px inset 0;
87 box-shadow: 4px -4px inset 0 red;
88 }
89 #ci2 > div { box-shadow: 4px -4px inset green; }
90 #ci3 > div { box-shadow: inset green 4px -4px; }
91 #ci4 > div { box-shadow: green inset 4px -4px; }
92 #ci5 > div { box-shadow: green 4px -4px inset; }
93 #ci6 > div { box-shadow: inset 4px -4px green; }
94
95 #ci11 > div { box-shadow: inset green 4px -4px 0; }
96 #ci12 > div { box-shadow: green inset 4px -4px 0; }
97 #ci13 > div { box-shadow: 4px -4px 0 green inset; }
98 #ci14 > div { box-shadow: 4px -4px 0 inset green; }
99 #ci15 > div { box-shadow: green 4px -4px 0 inset; }
100 #ci16 > div { box-shadow: inset 4px -4px 0 green; }
101
102 #ci21 > div { box-shadow: inset green 4px -4px 0 0; }
103 #ci22 > div { box-shadow: green inset 4px -4px 0 0; }
104 #ci23 > div { box-shadow: 4px -4px 0 0 green inset; }
105 #ci24 > div { box-shadow: 4px -4px 0 0 inset green; }
106 #ci25 > div { box-shadow: green 4px -4px 0 0 inset; }
107 #ci26 > div { box-shadow: inset 4px -4px 0 0 green; }
108 </style>
109 </head>
110 <body>
111 <p>There must be 31 green L-shapes below and no red.</p>
112
113 <div class="wrapper">
114 <div id="c1" class="container"><div class="outset"></div></div>
115 <div id="c2" class="container"><div class="outset"></div></div>
116 <div id="c3" class="container"><div class="outset"></div></div>
117 <div id="c4" class="container"><div class="outset"></div></div>
118 <div id="c5" class="container"><div class="outset"></div></div>
119 <div id="c6" class="container"><div class="outset"></div></div>
120 <div id="i1" class="container"><div class="inset"></div></div>
121 <div id="i2" class="container"><div class="inset"></div></div>
122 <div id="i3" class="container"><div class="inset"></div></div>
123 <div id="i4" class="container"><div class="inset"></div></div>
124 <div id="i5" class="container"><div class="inset"></div></div>
125 <div id="i6" class="container"><div class="inset"></div></div>
126 <div id="i7" class="container"><div class="inset"></div></div>
127 <div id="ci1" class="container"><div class="inset"></div></div>
128 <div id="ci2" class="container"><div class="inset"></div></div>
129 <div id="ci3" class="container"><div class="inset"></div></div>
130 <div id="ci4" class="container"><div class="inset"></div></div>
131 <div id="ci5" class="container"><div class="inset"></div></div>
132 <div id="ci6" class="container"><div class="inset"></div></div>
133 <div id="ci11" class="container"><div class="inset"></div></div>
134 <div id="ci12" class="container"><div class="inset"></div></div>
135 <div id="ci13" class="container"><div class="inset"></div></div>
136 <div id="ci14" class="container"><div class="inset"></div></div>
137 <div id="ci15" class="container"><div class="inset"></div></div>
138 <div id="ci16" class="container"><div class="inset"></div></div>
139 <div id="ci21" class="container"><div class="inset"></div></div>
140 <div id="ci22" class="container"><div class="inset"></div></div>
141 <div id="ci23" class="container"><div class="inset"></div></div>
142 <div id="ci24" class="container"><div class="inset"></div></div>
143 <div id="ci25" class="container"><div class="inset"></div></div>
144 <div id="ci26" class="container"><div class="inset"></div></div>
145 </div>
146 </body>
147 </html>