forked from lojjic/PIE
/
box-shadow-tests.html
166 lines (137 loc) · 5.91 KB
/
box-shadow-tests.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
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
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
<!DOCTYPE html>
<html>
<head>
<meta content="text/html; charset=UTF-8" http-equiv="content-type">
<title>Test cases for box-shadow</title>
<style type="text/css">
.w3cSpec {
border:5px solid blue;
background-color:#FFA500;
width: 144px;
height: 144px;
margin: 0 40px 40px 184px;
behavior: url(../build/PIE.htc);
}
.w3cSpecRound {
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
clear: left;
float: left;
margin-left: 0;
}
.w3cSpecOutset {
-webkit-box-shadow: rgba(0,0,0,0.4) 10px 10px;
-moz-box-shadow: rgba(0,0,0,0.4) 10px 10px;
box-shadow: rgba(0,0,0,0.4) 10px 10px;
}
.w3cSpecInset {
-webkit-box-shadow: rgba(0,0,0,0.4) 10px 10px inset;
-moz-box-shadow: rgba(0,0,0,0.4) 10px 10px inset;
box-shadow: rgba(0,0,0,0.4) 10px 10px inset;
}
.w3cSpecOutsetSpread {
-webkit-box-shadow: rgba(0,0,0,0.4) 10px 10px 0 10px;
-moz-box-shadow: rgba(0,0,0,0.4) 10px 10px 0 10px;
box-shadow: rgba(0,0,0,0.4) 10px 10px 0 10px;
}
.w3cSpecInsetSpread {
-webkit-box-shadow: rgba(0,0,0,0.4) 10px 10px 0 10px inset;
-moz-box-shadow: rgba(0,0,0,0.4) 10px 10px 0 10px inset;
box-shadow: rgba(0,0,0,0.4) 10px 10px 0 10px inset;
}
#elektroNotdienst {
background: khaki;
padding: 2em;
}
#elektroNotdienst div {
width: 8em;
font: small "Courier New", "Nimbus Mono L", FreeMono, "Luxi Mono";
padding: 0.5em;
margin: 1.6em 0;
background: white;
white-space: pre;
behavior: url(../build/PIE.htc);
position: relative;
}
</style>
</head>
<body>
<h1>Tests for box-shadow</h1>
<div id="w3cTests">
<h2>Examples from W3C <a href="http://dev.w3.org/csswg/css3-background/#box-shadow-samples">spec</a></h2>
<div class="w3cSpec w3cSpecOutset w3cSpecRound"></div>
<div class="w3cSpec w3cSpecOutset"></div>
<div class="w3cSpec w3cSpecInset w3cSpecRound"></div>
<div class="w3cSpec w3cSpecInset"></div>
<div class="w3cSpec w3cSpecOutsetSpread w3cSpecRound"></div>
<div class="w3cSpec w3cSpecOutsetSpread"></div>
<div class="w3cSpec w3cSpecInsetSpread w3cSpecRound"></div>
<div class="w3cSpec w3cSpecInsetSpread"></div>
</div>
<div id="elektroNotdienst">
<h2>Examples from <a href="http://www.elektronotdienst-nuernberg.de/bugs/box-shadow_inset.html">Elektro-Notdienst test document</a></h2>
<div>0.5em -0.5em 0.4em red,
0.5em 0.5em 0.4em yellow,
-0.5em 0.5em 0.4em lime,
-0.5em -0.5em 0.4em blue;</div>
<div>0 0 0 0.5em;</div>
<div>0 0 1em;</div>
<div>1em 0.5em;</div>
<div>1em 0.5em 1em;</div>
<div>0.3em 0.3em silver;</div>
<div>0.3em 0.3em 0 0.6em silver;</div>
<div>0 0 1em maroon;</div>
<div>0 0 1em 0.5em maroon;</div>
<div>-0.4em -0.4em 1em olive;</div>
<div>0.4em 0.4em 1em olive;</div>
<div>0.4em 0.4em 1em -0.2em olive;</div>
<div>0.4em 0.4em 1em 0.4em olive;</div>
<div>inset 0 0 0.5em blue;</div>
<div>inset 0 0 1em blue;</div>
<div>inset 0 0 2em blue;</div>
<div>inset 0 2em 3em -1em green;</div>
<div>inset 0 2em 3em -2em green;</div>
<div>inset 0 2em 3em -3em green;</div>
<div>inset 0 0 1em khaki, inset 0 0 1em khaki, inset 0 0 1em khaki, inset 0 0 1em khaki;</div>
<div>inset 0 2em 3em -1.5em green, inset 0 -2em 3em -2em blue;</div>
<div>inset 1em 1em 2em -1em blue;</div>
<div>inset 1em 1em 2em -1em blue, inset -1em -1em 2em -1em red;</div>
<div style="background:red;">inset 0 2em 3em -2em white, inset 0 -2em 3em -2.5em black; /* background:red */</div>
<div style="background:red;">inset 1em 1em 1em -1em white, inset -1em -1em 1em -1em black; /* background:red */</div>
<div style="background:red;">inset -1em -1em 1em -1em black, inset 1em 1em 1em -1em white; /* background:red */</div>
<div>inset -3em 0 3em -2em blue;</div>
<div>0.2em 0.2em 0.7em black, inset 0 0 0.7em red;</div>
<script type="text/javascript">
(function() {
var S= "";
var D= document.getElementById("elektroNotdienst").getElementsByTagName("div");
for(var i=0; S=D[i] && D[i].firstChild.data; i++) {
D[i].style.cssText += "; -moz-box-shadow:" + S + "-webkit-box-shadow:" + S + "box-shadow:" + S;
}
})();
</script>
</div>
<div id="misc">
<h2>Miscellaneous</h2>
<style type="text/css">
#misc div {
behavior: url(../build/PIE.htc);
}
#misc1 {
margin: 16px;
padding: 20px;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
background: #EEE;
width: 400px;
-webkit-box-shadow: 0 0 0 2px blue, 0 0 0 4px red, 0 0 0 6px green, 0 0 0 8px yellow, 0 0 0 10px purple, 0 0 0 12px olive, 0 0 0 14px aqua, 0 0 0 16px black;
-moz-box-shadow: 0 0 0 2px blue, 0 0 0 4px red, 0 0 0 6px green, 0 0 0 8px yellow, 0 0 0 10px purple, 0 0 0 12px olive, 0 0 0 14px aqua, 0 0 0 16px black;
box-shadow: 0 0 0 2px blue, 0 0 0 4px red, 0 0 0 6px green, 0 0 0 8px yellow, 0 0 0 10px purple, 0 0 0 12px olive, 0 0 0 14px aqua, 0 0 0 16px black;
}
</style>
<div id="misc1">Faking multiple borders with box-shadow</div>
</div>
</body>
</html>