Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Fetching contributors…

Cannot retrieve contributors at this time

259 lines (234 sloc) 8.355 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>
html { -pie-load-path: "../build"; }
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.