Skip to content
This repository
Newer
Older
100644 257 lines (233 sloc) 8.309 kb
dea6dca4 »
2010-04-17 Add test file for miscellaneous items
1 <!DOCTYPE html>
2
3 <html>
4 <head>
5 <title></title>
6
7 <script type="text/javascript">
8 function toggleClass( el, cls ) {
9 var re = new RegExp( '\\b' + cls + '\\b' );
10 if( re.test( el.className ) ) {
11 el.className = el.className.replace( re, '' );
12 } else {
13 el.className += ' ' + cls;
14 }
15 }
16
17 function log( txt ) {
18 var el = log._el;
19 if(!el) {
20 el =log._el = document.createElement( 'div' );
21 el.style.position = 'absolute';
22 el.style.bottom = '1em';
23 el.style.right = '1em';
24 el.style.width = '200px';
25 el.style.height = '100px';
26 el.style.overflow = 'auto';
27 el.style.background = '#FFF';
28 el.style.border = '1px solid #EEE';
29 el.style.fontSize = '9px';
30 document.body.appendChild( el );
31 }
32 var item = document.createElement( 'div' );
33 item.appendChild( document.createTextNode( txt ) );
34 el.appendChild( item )
35 }
36
37 function animate( el, fromX, fromY, toX, toY ) {
38 el.style.position = 'absolute';
39 var i = 0;
40
41 function step() {
42 el.style.left = fromX + ( toX - fromX ) * i / 100 + 'px';
43 el.style.top = fromY + ( toY - fromY ) * i / 100 + 'px';
44 i++;
45 if( i < 100 ) {
46 setTimeout( step, 10 );
47 }
48 }
49
50 step();
51 }
52 </script>
53
54 <style>
55
56 body {
57 /*background:url(border.png);*/
58 }
59
60 .shadow {
61 behavior: url(../build/PIE.htc);
62 background: #EEE;
63 float: left;
64 padding: 50px;
65 margin: 10px;
66 }
67 #test1 {
88811556 »
2010-04-24 Allow non-prefixed border-image and box-shadow CSS styles to be used,…
68 box-shadow: #000 0 0 3px;
dea6dca4 »
2010-04-17 Add test file for miscellaneous items
69 -moz-box-shadow: #000 0 0 3px;
70 -webkit-box-shadow: #000 0 0 3px;
71 }
72 #test2 {
88811556 »
2010-04-24 Allow non-prefixed border-image and box-shadow CSS styles to be used,…
73 box-shadow: #000 0 0 5px;
dea6dca4 »
2010-04-17 Add test file for miscellaneous items
74 -moz-box-shadow: #000 0 0 5px;
75 -webkit-box-shadow: #000 0 0 5px;
76 }
77 #test3 {
88811556 »
2010-04-24 Allow non-prefixed border-image and box-shadow CSS styles to be used,…
78 box-shadow: #000 0 0 8px;
dea6dca4 »
2010-04-17 Add test file for miscellaneous items
79 -moz-box-shadow: #000 0 0 8px;
80 -webkit-box-shadow: #000 0 0 8px;
81 }
82 #test4 {
88811556 »
2010-04-24 Allow non-prefixed border-image and box-shadow CSS styles to be used,…
83 box-shadow: #000 0 0 10px;
dea6dca4 »
2010-04-17 Add test file for miscellaneous items
84 -moz-box-shadow: #000 0 0 10px;
85 -webkit-box-shadow: #000 0 0 10px;
86 }
87 #test5 {
88 clear: both;
89 float: none;
90 -moz-border-radius: 20px 20px 30px / 10px 20px 30px 40px;
91 -webkit-border-radius: 20px 20px 30px / 10px 20px 30px 40px;
92 border-radius: 20px 20px 30px / 10px 20px 30px 40px;
88811556 »
2010-04-24 Allow non-prefixed border-image and box-shadow CSS styles to be used,…
93 box-shadow: #000 0 0 8px;
dea6dca4 »
2010-04-17 Add test file for miscellaneous items
94 -moz-box-shadow: #000 0 0 8px;
95 -webkit-box-shadow: #000 0 0 8px;
96 }
97 #test6 {
98 clear: both;
99 -moz-border-radius: 100%;
100 -webkit-border-radius: 100%;
101 border-radius: 100%;
88811556 »
2010-04-24 Allow non-prefixed border-image and box-shadow CSS styles to be used,…
102 box-shadow: #000 0 0 20px;
dea6dca4 »
2010-04-17 Add test file for miscellaneous items
103 -moz-box-shadow: #000 0 0 20px;
104 -webkit-box-shadow: #000 0 0 20px;
105 }
106 #test6.classed {
107 border-radius: 25%;
108 -moz-border-radius: 25%;
109 -webkit-border-radius: 25%;
110 background-color: #CEF;
111 }
112
113 #test7 {
114 clear: both;
115 -moz-border-radius: 100%;
116 -webkit-border-radius: 100%;
117 border-radius: 100%;
88811556 »
2010-04-24 Allow non-prefixed border-image and box-shadow CSS styles to be used,…
118 box-shadow: #000 0 0 20px;
dea6dca4 »
2010-04-17 Add test file for miscellaneous items
119 -moz-box-shadow: #000 0 0 20px;
120 -webkit-box-shadow: #000 0 0 20px;
121 -pie-watch-ancestors: 2;
122 }
123 .classed #test7 {
124 -moz-border-radius: 25%;
125 -webkit-border-radius: 25%;
126 border-radius: 25%;
127 background-color: #CEF;
128 }
129
130 #test8 {
131 clear: both;
132 width: 100px;
133 height: 50px;
134 padding: 10px;
135 text-align: center;
136 -moz-border-radius: 20px 40px;
137 -webkit-border-radius: 20px 40px;
138 border-radius: 20px 40px;
88811556 »
2010-04-24 Allow non-prefixed border-image and box-shadow CSS styles to be used,…
139 box-shadow: #000 0 0 5px;
dea6dca4 »
2010-04-17 Add test file for miscellaneous items
140 -moz-box-shadow: #000 0 0 5px;
141 -webkit-box-shadow: #000 0 0 5px;
142 }
143 #test8.changed {
144 -moz-border-radius: 20px 80px;
145 -webkit-border-radius: 20px 80px;
146 border-radius: 20px 80px;
147 }
148
149 #test9 {
150 clear: both;
151 width: 40%;
152 -moz-border-radius: 20px 40px;
153 -webkit-border-radius: 20px 40px;
154 border-radius: 20px 40px;
155 background: #EEE url(border.png) repeat 50% 50%;
88811556 »
2010-04-24 Allow non-prefixed border-image and box-shadow CSS styles to be used,…
156 box-shadow: #000 0 0 10px;
dea6dca4 »
2010-04-17 Add test file for miscellaneous items
157 -moz-box-shadow: #000 0 0 10px;
158 -webkit-box-shadow: #000 0 0 10px;
159 border: 1px dotted;
160 }
161
162 #test10 {
163 clear: both;
164 width: 40%;
165 -moz-border-radius: 20px;
166 -webkit-border-radius: 20px;
167 border-radius: 20px;
168 border-width: 6px;
169 border-color: red green blue black;
170 border-style: dashed dotted solid double;
171 background: #EEE url(border.png);
88811556 »
2010-04-24 Allow non-prefixed border-image and box-shadow CSS styles to be used,…
172 box-shadow: #000 0 0 10px;
dea6dca4 »
2010-04-17 Add test file for miscellaneous items
173 -moz-box-shadow: #000 0 0 10px;
174 -webkit-box-shadow: #000 0 0 10px;
175 }
176
177 #test11 {
178 clear: both;
179 width: 80%;
180 background: transparent;
181 border-width: 20px;
182 border-bottom-width: 30px;
88811556 »
2010-04-24 Allow non-prefixed border-image and box-shadow CSS styles to be used,…
183 border-image: url(border.png) 27 stretch;
dea6dca4 »
2010-04-17 Add test file for miscellaneous items
184 -moz-border-image: url(border.png) 27 stretch;
185 -webkit-border-image: url(border.png) 27 stretch;
186 }
187
188 #test12 {
189 clear: both;
190 margin: 50px;
191 background: url(border.png);
192 padding: 40px;
193 }
194 #test12 div {
195 behavior: url(../build/PIE.htc);
196 background: #EEE;
f1a351a0 »
2010-05-01 Cross-browser fixes in test file
197 -moz-box-shadow: rgba(0,0,0,0.5) 10px 10px 0;
198 -webkit-box-shadow: rgba(0,0,0,0.5) 10px 10px 0;
88811556 »
2010-04-24 Allow non-prefixed border-image and box-shadow CSS styles to be used,…
199 box-shadow: rgba(0,0,0,0.5) 10px 10px 0;
dea6dca4 »
2010-04-17 Add test file for miscellaneous items
200 position: relative;
201 }
202
203 #test13 {
204 clear: both;
205 background: #EEE;
206 border-radius: 10px;
207 -moz-border-radius: 10px;
208 -webkit-border-radius: 10px;
209 border: 1px solid;
210 position: relative;
211 }
212 #test13:hover {
213 border-radius: 30px / 20px;
214 -webkit-border-radius: 30px 20px;
215 -moz-border-radius: 30px / 20px;
216 background: url(border.png);
217 border: 4px dotted blue;
218 left: 20px;
219 width: 50%;
f1a351a0 »
2010-05-01 Cross-browser fixes in test file
220 -webkit-box-shadow: blue 0 0 10px;
dea6dca4 »
2010-04-17 Add test file for miscellaneous items
221 -moz-box-shadow: blue 0 0 10px;
88811556 »
2010-04-24 Allow non-prefixed border-image and box-shadow CSS styles to be used,…
222 box-shadow: blue 0 0 10px;
dea6dca4 »
2010-04-17 Add test file for miscellaneous items
223 }
224
225
226 </style>
227 </head>
228 <body>
229
230 <div id="test1" class="shadow">test 1 <a href="misc-tests.html#" onclick="animate(this.parentNode, 20, 20, 400, 400)">anim</a></div>
231 <div id="test2" class="shadow">test 2</div>
232 <div id="test3" class="shadow">test 3</div>
233 <div id="test4" class="shadow">test 4</div>
234 <div id="test5" class="shadow">box shadow w/rounded corners <button onclick="this.parentNode.appendChild( document.createTextNode(' ... some extra text ... some extra text ... some extra text ... some extra text ') )">enlarge</button> </div>
235 <div id="test6" class="shadow">test 6
236 <button onclick="toggleClass(this.parentNode, 'classed')">Toggle className</button>
237 </div>
238
239 <div id="test7cont">
240 <div>
241 <div id="test7" class="shadow">test 7
242 <button onclick="toggleClass(document.getElementById('test7cont'), 'classed')">Toggle parent className</button>
243 </div>
244 </div>
245 </div>
246
247 <div class="shadow" id="test8">test 8 <button onclick="toggleClass(this.parentNode, 'changed')">change</button></div>
248 <div class="shadow" id="test9">test 9</div>
249
250 <div class="shadow" id="test10">test 10</div>
251 <div class="shadow" id="test11">test 11</div>
252 <div id="test12"><div>test 12 - rgba color for box-shadow</div></div>
253
254 <div class="shadow" id="test13">test 13 - :hover</div>
255
256 </body>
257 </html>
Something went wrong with that request. Please try again.