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
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
|
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS Test: Box Shadow Syntax: Reordering Components</title>
<link rel="author" title="Elika J. Etemad" href="http://fantasai.inkedblade.net/contact"/>
<link rel="help" href="http://www.w3.org/TR/css3-background/#the-box-shadow"/>
<link rel="match" href="reference/box-shadow-syntax-001.xht"/>
<meta name="assert" content="Box shadow color, inset, and length parameters can be mixed in any order, but lengths must stay adjacent." />
<style type="text/css">
.container {
margin: 4px;
border: solid red 4px;
padding-top: 1px;
border-style: none none solid solid;
}
.outset {
height: 12px;
margin: -5px -4px 0 0;
}
.inset {
color: green;
height: 13px;
margin: -1px 0 -4px -4px;
}
/* color */
#c1 > div { box-shadow: -4px 4px green;
box-shadow: red;
box-shadow: 4px red;
box-shadow: red 4px;
box-shadow: -4px red 4px;
box-shadow: red -4px 4px red;
box-shadow: -4px 4px red 0;
box-shadow: -4px 4px 0 red 0;
}
#c2 > div { box-shadow: green -4px 4px; }
#c3 > div { box-shadow: -4px 4px 0 green; }
#c4 > div { box-shadow: green -4px 4px 0; }
#c5 > div { box-shadow: -4px 4px 0 0 green; }
#c6 > div { box-shadow: green -4px 4px 0 0; }
/* inset */
#i1 > div { box-shadow: 4px -4px inset; }
#i2 > div { box-shadow: inset 4px -4px; }
#i3 > div { box-shadow: 4px -4px 0 inset; }
#i4 > div { box-shadow: inset 4px -4px 0; }
#i5 > div { box-shadow: 4px -4px 0 0 inset; }
#i6 > div { box-shadow: inset 4px -4px 0 0; }
#i7 { border-color: green; }
#i7 > div { box-shadow: 4px -4px green inset;
color: red;
box-shadow: inset;
box-shadow: inset 4px;
box-shadow: 4px inset;
box-shadow: 4px inset -4px;
box-shadow: inset 4px -4px inset;
box-shadow: 4px -4px inset 0;
box-shadow: 4px -4px 0 inset 0;
}
/* color and inset */
#ci1 > div { box-shadow: 4px -4px green inset;
box-shadow: red inset;
box-shadow: inset red;
box-shadow: 4px red inset;
box-shadow: red inset 4px;
box-shadow: 4px inset red;
box-shadow: inset red 4px;
box-shadow: 4px red inset -4px;
box-shadow: 4px inset red -4px;
box-shadow: inset 4px red -4px;
box-shadow: 4px red 4px inset;
box-shadow: red 4px inset -4px;
box-shadow: 4px inset -4px red;
box-shadow: 4px -4px red inset 0;
box-shadow: 4px -4px inset red 0;
box-shadow: inset 4px -4px red 0;
box-shadow: 4px -4px red 0 inset;
box-shadow: red 4px -4px inset 0;
box-shadow: 4px -4px inset 0 red;
}
#ci2 > div { box-shadow: 4px -4px inset green; }
#ci3 > div { box-shadow: inset green 4px -4px; }
#ci4 > div { box-shadow: green inset 4px -4px; }
#ci5 > div { box-shadow: green 4px -4px inset; }
#ci6 > div { box-shadow: inset 4px -4px green; }
#ci11 > div { box-shadow: inset green 4px -4px 0; }
#ci12 > div { box-shadow: green inset 4px -4px 0; }
#ci13 > div { box-shadow: 4px -4px 0 green inset; }
#ci14 > div { box-shadow: 4px -4px 0 inset green; }
#ci15 > div { box-shadow: green 4px -4px 0 inset; }
#ci16 > div { box-shadow: inset 4px -4px 0 green; }
#ci21 > div { box-shadow: inset green 4px -4px 0 0; }
#ci22 > div { box-shadow: green inset 4px -4px 0 0; }
#ci23 > div { box-shadow: 4px -4px 0 0 green inset; }
#ci24 > div { box-shadow: 4px -4px 0 0 inset green; }
#ci25 > div { box-shadow: green 4px -4px 0 0 inset; }
#ci26 > div { box-shadow: inset 4px -4px 0 0 green; }
</style>
</head>
<body>
<p>There must be 31 green L-shapes below and no red.</p>
<div class="wrapper">
<div id="c1" class="container"><div class="outset"></div></div>
<div id="c2" class="container"><div class="outset"></div></div>
<div id="c3" class="container"><div class="outset"></div></div>
<div id="c4" class="container"><div class="outset"></div></div>
<div id="c5" class="container"><div class="outset"></div></div>
<div id="c6" class="container"><div class="outset"></div></div>
<div id="i1" class="container"><div class="inset"></div></div>
<div id="i2" class="container"><div class="inset"></div></div>
<div id="i3" class="container"><div class="inset"></div></div>
<div id="i4" class="container"><div class="inset"></div></div>
<div id="i5" class="container"><div class="inset"></div></div>
<div id="i6" class="container"><div class="inset"></div></div>
<div id="i7" class="container"><div class="inset"></div></div>
<div id="ci1" class="container"><div class="inset"></div></div>
<div id="ci2" class="container"><div class="inset"></div></div>
<div id="ci3" class="container"><div class="inset"></div></div>
<div id="ci4" class="container"><div class="inset"></div></div>
<div id="ci5" class="container"><div class="inset"></div></div>
<div id="ci6" class="container"><div class="inset"></div></div>
<div id="ci11" class="container"><div class="inset"></div></div>
<div id="ci12" class="container"><div class="inset"></div></div>
<div id="ci13" class="container"><div class="inset"></div></div>
<div id="ci14" class="container"><div class="inset"></div></div>
<div id="ci15" class="container"><div class="inset"></div></div>
<div id="ci16" class="container"><div class="inset"></div></div>
<div id="ci21" class="container"><div class="inset"></div></div>
<div id="ci22" class="container"><div class="inset"></div></div>
<div id="ci23" class="container"><div class="inset"></div></div>
<div id="ci24" class="container"><div class="inset"></div></div>
<div id="ci25" class="container"><div class="inset"></div></div>
<div id="ci26" class="container"><div class="inset"></div></div>
</div>
</body>
</html>
|
