This repository has been archived by the owner on Apr 20, 2023. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 235
/
box-shadow-tests.html
142 lines (116 loc) · 4.92 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
<!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_uncompressed.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_uncompressed.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 gold,
-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>
</body>
</html>