Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Newer
Older
100644 166 lines (137 sloc) 6.054 kb
e6d16a6 Implement rendering of box-shadow spread property for outset shadows, an...
Jason Johnston authored
1 <!DOCTYPE html>
2 <html>
3 <head>
4
5 <meta content="text/html; charset=UTF-8" http-equiv="content-type">
6 <title>Test cases for box-shadow</title>
7
8 <style type="text/css">
9
10 .w3cSpec {
11 border:5px solid blue;
12 background-color:#FFA500;
13 width: 144px;
14 height: 144px;
988217b Add -webkit-box-shadow variants to box shadow tests
Jason Johnston authored
15 margin: 0 40px 40px 184px;
98d0e2a Add example of using multiple box-shadows with expanding spread values, ...
Jason Johnston authored
16 behavior: url(../build/PIE.htc);
e6d16a6 Implement rendering of box-shadow spread property for outset shadows, an...
Jason Johnston authored
17 }
18 .w3cSpecRound {
19 -webkit-border-radius: 20px;
20 -moz-border-radius: 20px;
21 border-radius: 20px;
22 clear: left;
23 float: left;
988217b Add -webkit-box-shadow variants to box shadow tests
Jason Johnston authored
24 margin-left: 0;
e6d16a6 Implement rendering of box-shadow spread property for outset shadows, an...
Jason Johnston authored
25 }
26 .w3cSpecOutset {
988217b Add -webkit-box-shadow variants to box shadow tests
Jason Johnston authored
27 -webkit-box-shadow: rgba(0,0,0,0.4) 10px 10px;
e6d16a6 Implement rendering of box-shadow spread property for outset shadows, an...
Jason Johnston authored
28 -moz-box-shadow: rgba(0,0,0,0.4) 10px 10px;
29 box-shadow: rgba(0,0,0,0.4) 10px 10px;
30 }
31 .w3cSpecInset {
988217b Add -webkit-box-shadow variants to box shadow tests
Jason Johnston authored
32 -webkit-box-shadow: rgba(0,0,0,0.4) 10px 10px inset;
e6d16a6 Implement rendering of box-shadow spread property for outset shadows, an...
Jason Johnston authored
33 -moz-box-shadow: rgba(0,0,0,0.4) 10px 10px inset;
34 box-shadow: rgba(0,0,0,0.4) 10px 10px inset;
35 }
36 .w3cSpecOutsetSpread {
988217b Add -webkit-box-shadow variants to box shadow tests
Jason Johnston authored
37 -webkit-box-shadow: rgba(0,0,0,0.4) 10px 10px 0 10px;
e6d16a6 Implement rendering of box-shadow spread property for outset shadows, an...
Jason Johnston authored
38 -moz-box-shadow: rgba(0,0,0,0.4) 10px 10px 0 10px;
39 box-shadow: rgba(0,0,0,0.4) 10px 10px 0 10px;
40 }
41 .w3cSpecInsetSpread {
988217b Add -webkit-box-shadow variants to box shadow tests
Jason Johnston authored
42 -webkit-box-shadow: rgba(0,0,0,0.4) 10px 10px 0 10px inset;
e6d16a6 Implement rendering of box-shadow spread property for outset shadows, an...
Jason Johnston authored
43 -moz-box-shadow: rgba(0,0,0,0.4) 10px 10px 0 10px inset;
44 box-shadow: rgba(0,0,0,0.4) 10px 10px 0 10px inset;
45 }
46
9475773 Add box-shadow test cases from http://www.elektronotdienst-nuernberg.de/...
Jason Johnston authored
47 #elektroNotdienst {
48 background: khaki;
49 padding: 2em;
50 }
51 #elektroNotdienst div {
52 width: 8em;
53 font: small "Courier New", "Nimbus Mono L", FreeMono, "Luxi Mono";
54 padding: 0.5em;
55 margin: 1.6em 0;
56 background: white;
57 white-space: pre;
98d0e2a Add example of using multiple box-shadows with expanding spread values, ...
Jason Johnston authored
58 behavior: url(../build/PIE.htc);
9475773 Add box-shadow test cases from http://www.elektronotdienst-nuernberg.de/...
Jason Johnston authored
59 position: relative;
60 }
61
62
e6d16a6 Implement rendering of box-shadow spread property for outset shadows, an...
Jason Johnston authored
63 </style>
64
65 </head>
66 <body>
67
68 <h1>Tests for box-shadow</h1>
69
9475773 Add box-shadow test cases from http://www.elektronotdienst-nuernberg.de/...
Jason Johnston authored
70 <div id="w3cTests">
e6d16a6 Implement rendering of box-shadow spread property for outset shadows, an...
Jason Johnston authored
71 <h2>Examples from W3C <a href="http://dev.w3.org/csswg/css3-background/#box-shadow-samples">spec</a></h2>
72
73 <div class="w3cSpec w3cSpecOutset w3cSpecRound"></div>
74 <div class="w3cSpec w3cSpecOutset"></div>
75
76 <div class="w3cSpec w3cSpecInset w3cSpecRound"></div>
77 <div class="w3cSpec w3cSpecInset"></div>
78
79 <div class="w3cSpec w3cSpecOutsetSpread w3cSpecRound"></div>
80 <div class="w3cSpec w3cSpecOutsetSpread"></div>
81
82 <div class="w3cSpec w3cSpecInsetSpread w3cSpecRound"></div>
83 <div class="w3cSpec w3cSpecInsetSpread"></div>
84 </div>
85
9475773 Add box-shadow test cases from http://www.elektronotdienst-nuernberg.de/...
Jason Johnston authored
86
87 <div id="elektroNotdienst">
88 <h2>Examples from <a href="http://www.elektronotdienst-nuernberg.de/bugs/box-shadow_inset.html">Elektro-Notdienst test document</a></h2>
89
667011c Fix formatting in test
Jason Johnston authored
90 <div>0.5em -0.5em 0.4em red,
0971a1c Change 'gold' to 'yellow' in test, since gold is not a CSS color value.
Jason Johnston authored
91 0.5em 0.5em 0.4em yellow,
667011c Fix formatting in test
Jason Johnston authored
92 -0.5em 0.5em 0.4em lime,
93 -0.5em -0.5em 0.4em blue;</div>
9475773 Add box-shadow test cases from http://www.elektronotdienst-nuernberg.de/...
Jason Johnston authored
94
95 <div>0 0 0 0.5em;</div>
96 <div>0 0 1em;</div>
97 <div>1em 0.5em;</div>
98 <div>1em 0.5em 1em;</div>
99
100 <div>0.3em 0.3em silver;</div>
101 <div>0.3em 0.3em 0 0.6em silver;</div>
102
103
104 <div>0 0 1em maroon;</div>
105 <div>0 0 1em 0.5em maroon;</div>
106
107 <div>-0.4em -0.4em 1em olive;</div>
108 <div>0.4em 0.4em 1em olive;</div>
109 <div>0.4em 0.4em 1em -0.2em olive;</div>
110 <div>0.4em 0.4em 1em 0.4em olive;</div>
111
112 <div>inset 0 0 0.5em blue;</div>
113
114 <div>inset 0 0 1em blue;</div>
115 <div>inset 0 0 2em blue;</div>
116 <div>inset 0 2em 3em -1em green;</div>
117 <div>inset 0 2em 3em -2em green;</div>
118 <div>inset 0 2em 3em -3em green;</div>
119 <div>inset 0 0 1em khaki, inset 0 0 1em khaki, inset 0 0 1em khaki, inset 0 0 1em khaki;</div>
120 <div>inset 0 2em 3em -1.5em green, inset 0 -2em 3em -2em blue;</div>
121 <div>inset 1em 1em 2em -1em blue;</div>
122 <div>inset 1em 1em 2em -1em blue, inset -1em -1em 2em -1em red;</div>
123
124 <div style="background:red;">inset 0 2em 3em -2em white, inset 0 -2em 3em -2.5em black; /* background:red */</div>
125 <div style="background:red;">inset 1em 1em 1em -1em white, inset -1em -1em 1em -1em black; /* background:red */</div>
126 <div style="background:red;">inset -1em -1em 1em -1em black, inset 1em 1em 1em -1em white; /* background:red */</div>
127 <div>inset -3em 0 3em -2em blue;</div>
128 <div>0.2em 0.2em 0.7em black, inset 0 0 0.7em red;</div>
129
130 <script type="text/javascript">
131 (function() {
132 var S= "";
133 var D= document.getElementById("elektroNotdienst").getElementsByTagName("div");
134 for(var i=0; S=D[i] && D[i].firstChild.data; i++) {
135 D[i].style.cssText += "; -moz-box-shadow:" + S + "-webkit-box-shadow:" + S + "box-shadow:" + S;
136 }
137 })();
138 </script>
139 </div>
140
98d0e2a Add example of using multiple box-shadows with expanding spread values, ...
Jason Johnston authored
141 <div id="misc">
142 <h2>Miscellaneous</h2>
143
144 <style type="text/css">
145 #misc div {
146 behavior: url(../build/PIE.htc);
147 }
148 #misc1 {
149 margin: 16px;
150 padding: 20px;
151 -webkit-border-radius: 20px;
152 -moz-border-radius: 20px;
153 border-radius: 20px;
154 background: #EEE;
155 width: 400px;
156 -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;
157 -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;
158 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;
159 }
160 </style>
161
162 <div id="misc1">Faking multiple borders with box-shadow</div>
163 </div>
164
e6d16a6 Implement rendering of box-shadow spread property for outset shadows, an...
Jason Johnston authored
165 </body>
166 </html>
Something went wrong with that request. Please try again.