Skip to content
Browse files

Implement rendering of box-shadow spread property for outset shadows,…

… and prevent inset shadows from being rendered at all until they are properly implemented. Closes #5.
  • Loading branch information...
1 parent d69817f commit e6d16a659a5c991f02d14c10d61b5aba300f2985 Jason Johnston committed May 20, 2010
Showing with 73 additions and 5 deletions.
  1. +7 −5 sources/BoxShadowRenderer.js
  2. +66 −0 tests/box-shadow-tests.html
View
12 sources/BoxShadowRenderer.js
@@ -59,7 +59,7 @@ PIE.BoxShadowRenderer = (function() {
// Blurred shadows end up slightly too wide; shrink them down
shape.coordsize = ( w * 2 + shrink ) + ',' + ( h * 2 + shrink );
shape.coordorigin = '1,1';
- shape.path = this.getBoxPath( 0, 2 );
+ shape.path = this.getBoxPath( spread ? { t: -spread, r: -spread, b: -spread, l: -spread } : 0, 2 );
} else {
this.destroy();
}
@@ -71,15 +71,14 @@ PIE.BoxShadowRenderer = (function() {
},
getBox: function() {
- var box = this._box, s, ss, cs, bs, xOff, yOff, spread, blur, halfBlur, shape, el, filter, alpha;
+ var box = this._box, s, ss, cs, bs, xOff, yOff, blur, halfBlur, shape, el, filter, alpha;
if( !box ) {
el = this.element;
box = this._box = el.document.createElement( 'box-shadow' );
bs = this.styleInfos.boxShadowInfo.getProps();
xOff = bs.xOffset.pixels( el );
yOff = bs.yOffset.pixels( el );
blur = bs.blur.pixels( el );
- spread = bs.spread.pixels( el );
// Adjust the blur value so it's always an even number
halfBlur = Math.ceil( blur / 2 );
@@ -106,8 +105,8 @@ PIE.BoxShadowRenderer = (function() {
s.top = yOff - 20 + spread - blur;
s.border = '20px solid ' + bs.color.value( el );
} else {*/
- s.left = xOff - blur - spread;
- s.top = yOff - blur - spread;
+ s.left = xOff - blur;
+ s.top = yOff - blur;
shape.filled = true;
shape.fillcolor = bs.color.value( el );
@@ -126,6 +125,9 @@ PIE.BoxShadowRenderer = (function() {
}
this.parent.addLayer( bs.inset ? this.insetZIndex : this.outsetZIndex, box );
+ if( bs.inset ) {
+ box.style.display = 'none';
+ }
}
return box;
},
View
66 tests/box-shadow-tests.html
@@ -0,0 +1,66 @@
+<!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 2em 2em 0;
+ behavior: url(../build/PIE.htc);
+ }
+ .w3cSpecRound {
+ -webkit-border-radius: 20px;
+ -moz-border-radius: 20px;
+ border-radius: 20px;
+ clear: left;
+ float: left;
+ }
+ .w3cSpecOutset {
+ -moz-box-shadow: rgba(0,0,0,0.4) 10px 10px;
+ box-shadow: rgba(0,0,0,0.4) 10px 10px;
+ }
+ .w3cSpecInset {
+ -moz-box-shadow: rgba(0,0,0,0.4) 10px 10px inset;
+ box-shadow: rgba(0,0,0,0.4) 10px 10px inset;
+ }
+ .w3cSpecOutsetSpread {
+ -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 {
+ -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;
+ }
+
+ </style>
+
+</head>
+<body>
+
+ <h1>Tests for box-shadow</h1>
+
+ <div>
+ <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>
+
+</body>
+</html>

0 comments on commit e6d16a6

Please sign in to comment.
Something went wrong with that request. Please try again.