Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Fetching contributors…

Cannot retrieve contributors at this time

257 lines (233 sloc) 8.309 kB
<!DOCTYPE html>
<html>
<head>
<title></title>
<script type="text/javascript">
function toggleClass( el, cls ) {
var re = new RegExp( '\\b' + cls + '\\b' );
if( re.test( el.className ) ) {
el.className = el.className.replace( re, '' );
} else {
el.className += ' ' + cls;
}
}
function log( txt ) {
var el = log._el;
if(!el) {
el =log._el = document.createElement( 'div' );
el.style.position = 'absolute';
el.style.bottom = '1em';
el.style.right = '1em';
el.style.width = '200px';
el.style.height = '100px';
el.style.overflow = 'auto';
el.style.background = '#FFF';
el.style.border = '1px solid #EEE';
el.style.fontSize = '9px';
document.body.appendChild( el );
}
var item = document.createElement( 'div' );
item.appendChild( document.createTextNode( txt ) );
el.appendChild( item )
}
function animate( el, fromX, fromY, toX, toY ) {
el.style.position = 'absolute';
var i = 0;
function step() {
el.style.left = fromX + ( toX - fromX ) * i / 100 + 'px';
el.style.top = fromY + ( toY - fromY ) * i / 100 + 'px';
i++;
if( i < 100 ) {
setTimeout( step, 10 );
}
}
step();
}
</script>
<style>
body {
/*background:url(border.png);*/
}
.shadow {
behavior: url(../build/PIE.htc);
background: #EEE;
float: left;
padding: 50px;
margin: 10px;
}
#test1 {
box-shadow: #000 0 0 3px;
-moz-box-shadow: #000 0 0 3px;
-webkit-box-shadow: #000 0 0 3px;
}
#test2 {
box-shadow: #000 0 0 5px;
-moz-box-shadow: #000 0 0 5px;
-webkit-box-shadow: #000 0 0 5px;
}
#test3 {
box-shadow: #000 0 0 8px;
-moz-box-shadow: #000 0 0 8px;
-webkit-box-shadow: #000 0 0 8px;
}
#test4 {
box-shadow: #000 0 0 10px;
-moz-box-shadow: #000 0 0 10px;
-webkit-box-shadow: #000 0 0 10px;
}
#test5 {
clear: both;
float: none;
-moz-border-radius: 20px 20px 30px / 10px 20px 30px 40px;
-webkit-border-radius: 20px 20px 30px / 10px 20px 30px 40px;
border-radius: 20px 20px 30px / 10px 20px 30px 40px;
box-shadow: #000 0 0 8px;
-moz-box-shadow: #000 0 0 8px;
-webkit-box-shadow: #000 0 0 8px;
}
#test6 {
clear: both;
-moz-border-radius: 100%;
-webkit-border-radius: 100%;
border-radius: 100%;
box-shadow: #000 0 0 20px;
-moz-box-shadow: #000 0 0 20px;
-webkit-box-shadow: #000 0 0 20px;
}
#test6.classed {
border-radius: 25%;
-moz-border-radius: 25%;
-webkit-border-radius: 25%;
background-color: #CEF;
}
#test7 {
clear: both;
-moz-border-radius: 100%;
-webkit-border-radius: 100%;
border-radius: 100%;
box-shadow: #000 0 0 20px;
-moz-box-shadow: #000 0 0 20px;
-webkit-box-shadow: #000 0 0 20px;
-pie-watch-ancestors: 2;
}
.classed #test7 {
-moz-border-radius: 25%;
-webkit-border-radius: 25%;
border-radius: 25%;
background-color: #CEF;
}
#test8 {
clear: both;
width: 100px;
height: 50px;
padding: 10px;
text-align: center;
-moz-border-radius: 20px 40px;
-webkit-border-radius: 20px 40px;
border-radius: 20px 40px;
box-shadow: #000 0 0 5px;
-moz-box-shadow: #000 0 0 5px;
-webkit-box-shadow: #000 0 0 5px;
}
#test8.changed {
-moz-border-radius: 20px 80px;
-webkit-border-radius: 20px 80px;
border-radius: 20px 80px;
}
#test9 {
clear: both;
width: 40%;
-moz-border-radius: 20px 40px;
-webkit-border-radius: 20px 40px;
border-radius: 20px 40px;
background: #EEE url(border.png) repeat 50% 50%;
box-shadow: #000 0 0 10px;
-moz-box-shadow: #000 0 0 10px;
-webkit-box-shadow: #000 0 0 10px;
border: 1px dotted;
}
#test10 {
clear: both;
width: 40%;
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
border-radius: 20px;
border-width: 6px;
border-color: red green blue black;
border-style: dashed dotted solid double;
background: #EEE url(border.png);
box-shadow: #000 0 0 10px;
-moz-box-shadow: #000 0 0 10px;
-webkit-box-shadow: #000 0 0 10px;
}
#test11 {
clear: both;
width: 80%;
background: transparent;
border-width: 20px;
border-bottom-width: 30px;
border-image: url(border.png) 27 stretch;
-moz-border-image: url(border.png) 27 stretch;
-webkit-border-image: url(border.png) 27 stretch;
}
#test12 {
clear: both;
margin: 50px;
background: url(border.png);
padding: 40px;
}
#test12 div {
behavior: url(../build/PIE.htc);
background: #EEE;
-moz-box-shadow: rgba(0,0,0,0.5) 10px 10px 0;
-webkit-box-shadow: rgba(0,0,0,0.5) 10px 10px 0;
box-shadow: rgba(0,0,0,0.5) 10px 10px 0;
position: relative;
}
#test13 {
clear: both;
background: #EEE;
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border: 1px solid;
position: relative;
}
#test13:hover {
border-radius: 30px / 20px;
-webkit-border-radius: 30px 20px;
-moz-border-radius: 30px / 20px;
background: url(border.png);
border: 4px dotted blue;
left: 20px;
width: 50%;
-webkit-box-shadow: blue 0 0 10px;
-moz-box-shadow: blue 0 0 10px;
box-shadow: blue 0 0 10px;
}
</style>
</head>
<body>
<div id="test1" class="shadow">test 1 <a href="misc-tests.html#" onclick="animate(this.parentNode, 20, 20, 400, 400)">anim</a></div>
<div id="test2" class="shadow">test 2</div>
<div id="test3" class="shadow">test 3</div>
<div id="test4" class="shadow">test 4</div>
<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>
<div id="test6" class="shadow">test 6
<button onclick="toggleClass(this.parentNode, 'classed')">Toggle className</button>
</div>
<div id="test7cont">
<div>
<div id="test7" class="shadow">test 7
<button onclick="toggleClass(document.getElementById('test7cont'), 'classed')">Toggle parent className</button>
</div>
</div>
</div>
<div class="shadow" id="test8">test 8 <button onclick="toggleClass(this.parentNode, 'changed')">change</button></div>
<div class="shadow" id="test9">test 9</div>
<div class="shadow" id="test10">test 10</div>
<div class="shadow" id="test11">test 11</div>
<div id="test12"><div>test 12 - rgba color for box-shadow</div></div>
<div class="shadow" id="test13">test 13 - :hover</div>
</body>
</html>
Jump to Line
Something went wrong with that request. Please try again.