Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Fetching contributors…

Cannot retrieve contributors at this time

206 lines (172 sloc) 7.411 kB
<!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">
html { -pie-load-path: "../build"; }
.w3cSpec {
border:5px solid blue;
background-color:#FFA500;
width: 144px;
height: 144px;
margin: 0 40px 40px 184px;
behavior: url(../build/PIE.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.htc);
position: relative;
}
#rgba {
background: url(background2.gif);
padding: 2em;
}
#rgba div {
width: 15em;
height: 2em;
padding: 0.5em;
margin: 1.6em 0;
background: white;
white-space: pre;
behavior: url(../build/PIE.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 yellow,
-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>
<div id="rgba">
<div>10px 10px 0 rgba(0, 0, 0, 0.5);</div>
<div>10px 10px 2px rgba(0, 0, 0, 0.5);</div>
<div>10px 10px 5px rgba(0, 0, 0, 0.5);</div>
<div>10px 10px 10px rgba(0, 0, 0, 0.5);</div>
<div>10px 10px 20px rgba(0, 0, 0, 0.5);</div>
<div>10px 10px 10px 5px rgba(0, 0, 0, 0.5);</div>
<div>10px 10px 5px rgba(255, 0, 0, 0.5);</div>
<div>10px 10px 5px rgba(0, 255, 0, 0.5);</div>
<div>10px 10px 5px rgba(0, 0, 255, 0.5);</div>
<script type="text/javascript">
(function() {
var S= "";
var D= document.getElementById("rgba").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>
<div id="misc">
<h2>Miscellaneous</h2>
<style type="text/css">
#misc div {
behavior: url(../build/PIE.htc);
}
#misc1 {
margin: 16px;
padding: 20px;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
background: #EEE;
width: 400px;
-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;
-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;
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;
}
</style>
<div id="misc1">Faking multiple borders with box-shadow</div>
</div>
</body>
</html>
Jump to Line
Something went wrong with that request. Please try again.