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

204 lines (171 sloc) 7.365 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">
.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.