Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP

Comparing changes

Choose two branches to see what's changed or to start a new pull request. If you need to, you can also compare across forks.

Open a pull request

Create a new pull request by comparing changes across two branches. If you need to, you can also compare across forks.
base fork: lojjic/PIE
...
head fork: lojjic/PIE
Checking mergeability… Don't worry, you can still create the pull request.
  • 7 commits
  • 10 files changed
  • 0 commit comments
  • 1 contributor
Commits on Jun 09, 2011
Jason Johnston Fix recognition of HSL colors in tokenizer 5bfe984
Commits on Jun 10, 2011
Jason Johnston Enhancements to PIE.Color: handle converting hsl and hsla color value…
…s to equivalents recognizable by IE, and add a hexValue method which forces colors to 6-digit hex format (this is needed by the Glow filter as it only accepts full hex)
95737dd
Jason Johnston Solid start to text-shadow implementation for IE6-8. Parsing is compl…
…eted; elements with single text nodes are rendered properly with offsets, blur, and color/alpha that match Gecko and WebKit rendering very closely. Needs to be enhanced to handle deep mixed markup, react to content changes, and to work in IE9.
bc3a28f
Commits on Jun 12, 2011
Jason Johnston Refinements to text-shadow blur algorithm to better match browsers ac…
…ross range of blur radii. Set width of each text-shadow to prevent wrapping/alignment issues. Adjust for the element's border-width when positioning shadows.
7f4922c
Commits on Jun 19, 2011
Jason Johnston Add support for text-shadow on nested mixed markup. Handle text-inden…
…t and inline elements that don't start at the beginning of the line.
cf7f207
Commits on Jul 02, 2011
Jason Johnston Fix reported alpha value in rgb and hsl colors b8fb3e5
Jason Johnston More text-shadow tests 5e69ca6
View
2  build.xml
@@ -33,6 +33,7 @@
<fileset file="${src_dir}/BorderRadiusStyleInfo.js" />
<fileset file="${src_dir}/BorderImageStyleInfo.js" />
<fileset file="${src_dir}/BoxShadowStyleInfo.js" />
+ <fileset file="${src_dir}/TextShadowStyleInfo.js" />
<fileset file="${src_dir}/VisibilityStyleInfo.js" />
<fileset file="${src_dir}/RendererBase.js" />
<fileset file="${src_dir}/RootRenderer.js" />
@@ -42,6 +43,7 @@
<fileset file="${src_dir}/BoxShadowOutsetRenderer.js" />
<!--<fileset file="${src_dir}/BoxShadowInsetRenderer.js" />-->
<fileset file="${src_dir}/ImgRenderer.js" />
+ <fileset file="${src_dir}/TextShadowRenderer.js" />
<fileset file="${src_dir}/IE9BackgroundRenderer.js" />
<fileset file="${src_dir}/Element.js" />
<fileset file="${src_dir}/PIE_API.js" />
View
1  sources/BackgroundRenderer.js
@@ -20,6 +20,7 @@ PIE.BackgroundRenderer = PIE.RendererBase.newRenderer( {
return si.borderImageInfo.isActive() ||
si.borderRadiusInfo.isActive() ||
si.backgroundInfo.isActive() ||
+ si.textShadowInfo.isActive() ||
( si.boxShadowInfo.isActive() && si.boxShadowInfo.getProps().inset );
},
View
7 sources/BoxShadowStyleInfo.js
@@ -12,6 +12,7 @@ PIE.BoxShadowStyleInfo = PIE.StyleInfoBase.newStyleInfo( {
var props,
getLength = PIE.getLength,
Type = PIE.Tokenizer.Type,
+ isTextShadow = this.isTextShadow,
tokenizer;
if( css ) {
@@ -38,6 +39,10 @@ PIE.BoxShadowStyleInfo = PIE.StyleInfoBase.newStyleInfo( {
color = value;
}
else if( type & Type.IDENT && value === 'inset' && !inset ) {
+ if (isTextShadow) {
+ // text-shadow does not allow 'inset' keyword
+ return false;
+ }
inset = true;
}
else { //encountered an unrecognized token; fail.
@@ -46,7 +51,7 @@ PIE.BoxShadowStyleInfo = PIE.StyleInfoBase.newStyleInfo( {
}
len = lengths && lengths.length;
- if( len > 1 && len < 5 ) {
+ if( len > 1 && len < ( isTextShadow ? 4 : 5 ) ) {
( inset ? props.inset : props.outset ).push( {
xOffset: getLength( lengths[0].tokenValue ),
yOffset: getLength( lengths[1].tokenValue ),
View
105 sources/Color.js
@@ -5,6 +5,44 @@
* @param {string} val The raw CSS string value for the color
*/
PIE.Color = (function() {
+
+ /*
+ * hsl2rgb from http://codingforums.com/showthread.php?t=11156
+ * code by Jason Karl Davis (http://www.jasonkarldavis.com)
+ * swiped from cssSandpaper by Zoltan Hawryluk (http://www.useragentman.com/blog/csssandpaper-a-css3-javascript-library/)
+ * modified for formatting and size optimizations
+ */
+ function hsl2rgb( h, s, l ) {
+ var m1, m2, r, g, b,
+ round = Math.round;
+ s /= 100;
+ l /= 100;
+ if ( !s ) { r = g = b = l * 255; }
+ else {
+ if ( l <= 0.5 ) { m2 = l * ( s + 1 ); }
+ else { m2 = l + s - l * s; }
+ m1 = l * 2 - m2;
+ h = ( h % 360 ) / 360;
+ r = hueToRgb( m1, m2, h + 1/3 );
+ g = hueToRgb( m1, m2, h );
+ b = hueToRgb( m1, m2, h - 1/3 );
+ }
+ return { r: round( r ), g: round( g ), b: round( b ) };
+ }
+ function hueToRgb( m1, m2, hue ) {
+ var v;
+ if ( hue < 0 ) { hue += 1; }
+ else if ( hue > 1 ) { hue -= 1; }
+ if ( 6 * hue < 1 ) { v = m1 + ( m2 - m1 ) * hue * 6; }
+ else if ( 2 * hue < 1 ) { v = m2; }
+ else if ( 3 * hue < 2 ) { v = m1 + ( m2 - m1 ) * ( 2/3 - hue ) * 6; }
+ else { v = m1; }
+ return 255 * v;
+ }
+
+
+
+
var instances = {};
function Color( val ) {
@@ -15,7 +53,8 @@ PIE.Color = (function() {
* Regular expression for matching rgba colors and extracting their components
* @type {RegExp}
*/
- Color.rgbaRE = /\s*rgba\(\s*(\d{1,3})\s*,\s*(\d{1,3})\s*,\s*(\d{1,3})\s*,\s*(\d+|\d*\.\d+)\s*\)\s*/;
+ Color.rgbOrRgbaRE = /\s*rgba?\(\s*(\d{1,3})\s*,\s*(\d{1,3})\s*,\s*(\d{1,3})\s*(,\s*(\d+|\d*\.\d+))?\s*\)\s*/;
+ Color.hslOrHslaRE = /\s*hsla?\(\s*(\d*\.?\d+)\s*,\s*(\d{1,3})%\s*,\s*(\d{1,3})%\s*(,\s*(\d+|\d*\.\d+))?\s*\)\s*/;
Color.names = {
"aliceblue":"F0F8FF", "antiquewhite":"FAEBD7", "aqua":"0FF",
@@ -74,32 +113,72 @@ PIE.Color = (function() {
parse: function() {
if( !this._color ) {
var me = this,
- v = me.val,
- vLower,
- m = v.match( Color.rgbaRE );
- if( m ) {
- me._color = 'rgb(' + m[1] + ',' + m[2] + ',' + m[3] + ')';
- me._alpha = parseFloat( m[4] );
+ color = me.val,
+ alpha, vLower, m, rgb;
+
+ // RGB or RGBA colors
+ if( m = color.match( Color.rgbOrRgbaRE ) ) {
+ color = me.rgbToHex( +m[1], +m[2], +m[3] );
+ alpha = ( m[5] === '' ) ? 1 : +m[5];
+ }
+ // HSL or HSLA colors
+ else if( m = color.match( Color.hslOrHslaRE ) ) {
+ rgb = hsl2rgb( m[1], m[2], m[3] );
+ color = me.rgbToHex( rgb.r, rgb.g, rgb.b );
+ alpha = ( m[5] === '' ) ? 1 : +m[5];
}
else {
- if( ( vLower = v.toLowerCase() ) in Color.names ) {
- v = '#' + Color.names[vLower];
+ if( Color.names.hasOwnProperty( vLower = color.toLowerCase() ) ) {
+ color = '#' + Color.names[vLower];
}
- me._color = v;
- me._alpha = ( v === 'transparent' ? 0 : 1 );
+ alpha = ( color === 'transparent' ? 0 : 1 );
}
+ me._color = color;
+ me._alpha = alpha;
}
},
/**
+ * Converts RGB color channels to a hex value string
+ */
+ rgbToHex: function( r, g, b ) {
+ return '#' + ( r < 16 ? '0' : '' ) + r.toString( 16 ) +
+ ( g < 16 ? '0' : '' ) + g.toString( 16 ) +
+ ( b < 16 ? '0' : '' ) + b.toString( 16 );
+ },
+
+ /**
* Retrieve the value of the color in a format usable by IE natively. This will be the same as
- * the raw input value, except for rgba values which will be converted to an rgb value.
+ * the raw input value, except for rgb(a) and hsl(a) values which will be converted to a hex value.
* @param {Element} el The context element, used to get 'currentColor' keyword value.
* @return {string} Color value
*/
colorValue: function( el ) {
this.parse();
- return this._color === 'currentColor' ? el.currentStyle.color : this._color;
+ return this._color === 'currentColor' ? PIE.getColor( el.currentStyle.color ).colorValue( el ) : this._color;
+ },
+
+ /**
+ * Retrieve the value of the color in a normalized six-digit hex format.
+ * @param el
+ */
+ hexValue: function( el ) {
+ var color = this.colorValue( el );
+ // At this point the color should be either a 3- or 6-digit hex value, or the string "transparent".
+
+ function ch( i ) {
+ return color.charAt( i );
+ }
+
+ // Fudge transparent to black - should be ignored anyway since its alpha will be 0
+ if( color === 'transparent' ) {
+ color = '#000';
+ }
+ // Expand 3-digit to 6-digit hex
+ if( ch(0) === '#' && color.length === 4 ) {
+ color = '#' + ch(1) + ch(1) + ch(2) + ch(2) + ch(3) + ch(3);
+ }
+ return color;
},
/**
View
5 sources/Element.js
@@ -88,6 +88,7 @@ PIE.Element = (function() {
borderImageInfo: new PIE.BorderImageStyleInfo( el ),
borderRadiusInfo: new PIE.BorderRadiusStyleInfo( el ),
boxShadowInfo: new PIE.BoxShadowStyleInfo( el ),
+ textShadowInfo: new PIE.TextShadowStyleInfo( el ),
visibilityInfo: new PIE.VisibilityStyleInfo( el )
};
styleInfosArr = [
@@ -96,6 +97,7 @@ PIE.Element = (function() {
styleInfos.borderImageInfo,
styleInfos.borderRadiusInfo,
styleInfos.boxShadowInfo,
+ styleInfos.textShadowInfo,
styleInfos.visibilityInfo
];
@@ -105,7 +107,8 @@ PIE.Element = (function() {
new PIE.BackgroundRenderer( el, boundsInfo, styleInfos, rootRenderer ),
//new PIE.BoxShadowInsetRenderer( el, boundsInfo, styleInfos, rootRenderer ),
new PIE.BorderRenderer( el, boundsInfo, styleInfos, rootRenderer ),
- new PIE.BorderImageRenderer( el, boundsInfo, styleInfos, rootRenderer )
+ new PIE.BorderImageRenderer( el, boundsInfo, styleInfos, rootRenderer ),
+ new PIE.TextShadowRenderer( el, boundsInfo, styleInfos, rootRenderer )
];
if( el.tagName === 'IMG' ) {
childRenderers.push( new PIE.ImgRenderer( el, boundsInfo, styleInfos, rootRenderer ) );
View
156 sources/TextShadowRenderer.js
@@ -0,0 +1,156 @@
+/**
+ * Renderer for text-shadows
+ * @constructor
+ * @param {Element} el The target element
+ * @param {Object} styleInfos The StyleInfo objects
+ * @param {PIE.RootRenderer} parent
+ */
+PIE.TextShadowRenderer = PIE.RendererBase.newRenderer( {
+
+ boxZIndex: 7,
+ boxName: 'text-shadow',
+ textStyles: [ 'fontSize', 'fontFamily', 'fontStyle', 'fontWeight', 'letterSpacing', 'lineHeight', 'textDecoration', 'textAlign' ],
+
+ needsUpdate: function() {
+ return this.styleInfos.textShadowInfo.changed();
+ },
+
+ isActive: function() {
+ var textShadowInfo = this.styleInfos.textShadowInfo;
+ return textShadowInfo.isActive() && textShadowInfo.getProps();
+ },
+
+ copyTextStyles: function( from, to ) {
+ var fromStyle = from.currentStyle,
+ toStyle = to.style,
+ textStyles = this.textStyles,
+ i = textStyles.length;
+ while( i-- ) {
+ toStyle[ textStyles[ i ] ] = fromStyle[ textStyles[ i ] ];
+ }
+ },
+
+ draw: function() {
+ var el = this.targetElement,
+ currentStyle = el.currentStyle,
+ box = this.getBox(),
+ si = this.styleInfos,
+ shadowProps = si.textShadowInfo.getProps(),
+ i = shadowProps.length,
+ getLength = PIE.getLength,
+ bounds = this.boundsInfo.getBounds(),
+ borderProps = si.borderInfo.getProps(),
+ borderWidths = borderProps && borderProps.widths,
+ borderTopWidth = borderWidths ? borderWidths['t'].pixels( el ) : 0,
+ borderLeftWidth = borderWidths ? borderWidths['l'].pixels( el ) : 0,
+ borderRightWidth = borderWidths ? borderWidths['r'].pixels( el ) : 0,
+ paddingLeft = getLength( currentStyle.paddingLeft ).pixels( el ),
+ paddingRight = getLength( currentStyle.paddingRight ).pixels( el ),
+ paddingTop = getLength( currentStyle.paddingTop ).pixels( el ),
+ indent = currentStyle.display === 'block' ?
+ getLength( currentStyle.textIndent ).pixels( el ) :
+ currentStyle.display === 'inline' ? el.getClientRects()[0].left - bounds.x : 0,
+ filterPrefix = 'progid:DXImageTransform.Microsoft.',
+ math = Math,
+ round = math.round,
+ childNodes = el.childNodes,
+ childCount = childNodes.length,
+ props, shadowEl, shadowStyle, color, blur, blurLog, glow, opacity, j, child, clone;
+
+ box.innerHTML = '';
+
+ while( i-- ) {
+ props = shadowProps[ i ];
+ shadowEl = doc.createElement( 'shadow' );
+ shadowStyle = shadowEl.style;
+ color = props.color;
+ blur = props.blur.pixels( el );
+
+ if ( blur ) {
+ blurLog = math.log( blur );
+
+ // Decrease the blur size to line up more closely with other browsers
+ if ( blur > 2 ) {
+ blur -= .75 + blur / 4;
+ }
+ else if ( blur > 1 ) {
+ blur = 1.5;
+ }
+
+ // For blurs over a threshold we must add a small amount of glow before blurring
+ // to keep the color from getting washed out.
+ glow = blur > 8 ? blurLog : 0;
+
+ // Calculate opacity; all blurs are adjusted down to a baseline and then multiplied
+ // by the alpha value from the specified text-shadow color.
+ opacity = math.max( ( blur > 8 ? 55 - blurLog * 2 : 70 + blur * 2 ), 1 ) * color.alpha();
+
+ shadowStyle.filter = 'alpha(opacity=' + opacity + ') ' +
+ ( glow ? filterPrefix + 'Glow(Strength=' + glow + ',Color=' + color.hexValue( el ) + ') ' : '' ) +
+ filterPrefix + 'Blur(PixelRadius=' + ( blur - glow ) + ',MakeShadow=false)';
+ }
+
+ // Size and position the shadow element
+ shadowStyle.position = 'absolute';
+ shadowStyle.left = props.xOffset.pixels( el ) - round(blur) + borderLeftWidth + paddingLeft;
+ shadowStyle.top = props.yOffset.pixels( el ) - round(blur) + borderTopWidth + paddingTop;
+ shadowStyle.width = bounds.w - paddingLeft - paddingRight - borderLeftWidth - borderRightWidth + round(blur) * 2;
+
+ // Handle indentation of the first line, either due to text-indent CSS on a block element
+ // or an inline element that is not the first text on the line and wraps to a second line.
+ shadowStyle.textIndent = indent;
+
+ // Copy the original text's styles to the shadow element
+ this.copyTextStyles( el, shadowEl );
+
+ shadowStyle.color = color.colorValue( el );
+
+ if ( el.tagName.toLowerCase() in { input:1, textarea:1 } ) {
+ shadowEl.innerText = el.value;
+ } else {
+ var childElements = [];
+ for( j = 0; j < childCount; j++ ) {
+ child = childNodes[ j ];
+ if ( child.nodeType === 1 && child.tagName.toLowerCase() !== 'css3-container' ) {
+ clone = this.deepCopy( child );
+ clone.style.visibility = 'hidden';
+ shadowEl.appendChild( clone );
+
+ clone.style.zoom = 1; //The original child is going to get layout by attaching PIE, so force layout on the clone to match
+ childElements.push( child );
+ }
+ else if ( child.nodeType === 3 ) {
+ shadowEl.appendChild( child.cloneNode() );
+ }
+ }
+
+ for( j = childElements.length; j--; ) {
+ PIE.attach( childElements[ j ] );
+ }
+ }
+
+ box.appendChild( shadowEl );
+ }
+ },
+
+ deepCopy: function( el ) {
+ var copy = doc.createElement( 'subel' ),
+ childNodes = el.childNodes,
+ childLength = childNodes.length,
+ i = 0, child, nodeType;
+ this.copyTextStyles( el, copy );
+ for ( ; i < childLength; i++ ) {
+ child = childNodes[ i ];
+ nodeType = child.nodeType;
+ if ( nodeType == 1 && child.tagName !== 'css3-container' ) {
+ copy.appendChild( this.deepCopy( child ) );
+ }
+ else if ( nodeType == 3 ) {
+ copy.appendChild( child.cloneNode() );
+ }
+ }
+ copy.style.display = el.currentStyle.display;
+ return copy;
+ }
+
+} );
View
19 sources/TextShadowStyleInfo.js
@@ -0,0 +1,19 @@
+/**
+ * Handles parsing, caching, and detecting changes to text-shadow CSS. The text-shadow
+ * format matches box-shadow exactly except that it does not allow the 'inset' keyword,
+ * so it uses the parsing logic from BoxShadowStyleInfo but removes any inset info.
+ * @constructor
+ * @param {Element} el the target element
+ */
+PIE.TextShadowStyleInfo = PIE.StyleInfoBase.newStyleInfo( {
+ cssProperty: 'text-shadow',
+ styleProperty: 'textShadow',
+ isTextShadow: true,
+
+ parseCss: (function( superMethod ) {
+ return function( css ) {
+ var info = superMethod.call( this, css );
+ return (info && info.outset) || null;
+ }
+ })( PIE.BoxShadowStyleInfo.prototype.parseCss )
+} );
View
2  sources/Tokenizer.js
@@ -192,7 +192,7 @@ PIE.Tokenizer = (function() {
isNumOrPct( next() ) &&
isValue( next(), ',' ) &&
isNumOrPct( next() ) &&
- ( val === 'rgb' || val === 'hsa' || (
+ ( val === 'rgb' || val === 'hsl' || (
isValue( next(), ',' ) &&
isNum( next() )
) ) &&
View
60 tests/color-names.html
@@ -4,6 +4,8 @@
<head>
<title>Tests for background gradients</title>
+ <script type="text/javascript" src="../build/PIE_uncompressed.js"></script>
+
<style type="text/css">
.test {
@@ -14,17 +16,71 @@
border-radius: 10px;
border: 3px solid;
margin: 5px;
- behavior: url(../build/PIE.htc);
}
</style>
</head>
<body>
+ <div style="display: none; color: red;" id="currentColorTester">tester for currentColor</div>
+
<script type="text/javascript">
+ // Some simple unit tests of color parsing
+ var colorValueTests = {
+ 'aqua': '#0FF',
+ 'beige': '#F5F5DC',
+ '#123456': '#123456',
+ '#123': '#123',
+ 'rgb(0, 0, 255)': '#0000ff',
+ 'rgba(0, 0, 255, 0.5)': '#0000ff',
+ 'rgba(0, 0, 255, .5)': '#0000ff',
+ 'hsl(0, 100%, 50%)': '#ff0000',
+ 'hsla(0, 100%, 50%, 0.5)': '#ff0000',
+ 'hsla(0, 100%, 50%, .5)': '#ff0000',
+ 'currentColor': '#F00',
+ 'transparent': 'transparent'
+ },
+ hexValueTests = {
+ 'aqua': '#00FFFF',
+ 'beige': '#F5F5DC',
+ '#123456': '#123456',
+ '#123': '#112233',
+ 'rgb(0, 0, 255)': '#0000ff',
+ 'rgba(0, 0, 255, 0.5)': '#0000ff',
+ 'rgba(0, 0, 255, .5)': '#0000ff',
+ 'hsl(0, 100%, 50%)': '#ff0000',
+ 'hsla(0, 100%, 50%, 0.5)': '#ff0000',
+ 'hsla(0, 100%, 50%, .5)': '#ff0000',
+ 'currentColor': '#FF0000',
+ 'transparent': '#000000'
+ },
+ currentColorTester = document.getElementById('currentColorTester'),
+ failed = false,
+ c, val;
+ for (c in colorValueTests) {
+ val = PIE.getColor( c ).colorValue( currentColorTester );
+ if ( val !== colorValueTests[ c ] ) {
+ document.write('<p style="color:red">PIE.Color#colorValue() failed for "' + c + '": got "' + val + '", expected "' + colorValueTests[c] + '"</p>')
+ failed = true;
+ }
+ }
+ for (c in hexValueTests) {
+ val = PIE.getColor( c ).hexValue( currentColorTester );
+ if ( val !== hexValueTests[ c ] ) {
+ document.write('<p style="color:red">PIE.Color#hexValue() failed for "' + c + '": got "' + val + '", expected "' + hexValueTests[c] + '"</p>')
+ failed = true;
+ }
+ }
+ if (!failed) {
+ document.write('<p style="color:#090">Color parsing tests all passed</p>')
+ }
+
+
+ // Visual test of color names
var colors = ["aliceblue", "antiquewhite", "aqua", "aquamarine", "azure", "beige", "bisque", "black", "blanchedalmond", "blue", "blueviolet", "brown", "burlywood", "cadetblue", "chartreuse", "chocolate", "coral", "cornflowerblue", "cornsilk", "crimson", "cyan", "darkblue", "darkcyan", "darkgoldenrod", "darkgray", "darkgreen", "darkkhaki", "darkmagenta", "darkolivegreen", "darkorange", "darkorchid", "darkred", "darksalmon", "darkseagreen", "darkslateblue", "darkslategray", "darkturquoise", "darkviolet", "deeppink", "deepskyblue", "dimgray", "dodgerblue", "firebrick", "floralwhite", "forestgreen", "fuchsia", "gainsboro", "ghostwhite", "gold", "goldenrod", "gray", "green", "greenyellow", "honeydew", "hotpink", "indianred", "indigo", "ivory", "khaki", "lavender", "lavenderblush", "lawngreen", "lemonchiffon", "lightblue", "lightcoral", "lightcyan", "lightgoldenrodyellow", "lightgreen", "lightgrey", "lightpink", "lightsalmon", "lightseagreen", "lightskyblue", "lightslategray", "lightsteelblue", "lightyellow", "lime", "limegreen", "linen", "magenta", "maroon", "mediumauqamarine", "mediumblue", "mediumorchid", "mediumpurple", "mediumseagreen", "mediumslateblue", "mediumspringgreen", "mediumturquoise", "mediumvioletred", "midnightblue", "mintcream", "mistyrose", "moccasin", "navajowhite", "navy", "oldlace", "olive", "olivedrab", "orange", "orangered", "orchid", "palegoldenrod", "palegreen", "paleturquoise", "palevioletred", "papayawhip", "peachpuff", "peru", "pink", "plum", "powderblue", "purple", "red", "rosybrown", "royalblue", "saddlebrown", "salmon", "sandybrown", "seagreen", "seashell", "sienna", "silver", "skyblue", "slateblue", "slategray", "snow", "springgreen", "steelblue", "tan", "teal", "thistle", "tomato", "turquoise", "violet", "wheat", "white", "whitesmoke", "yellow", "yellowgreen"];
for( var i=0, len=colors.length; i < len; i++ ) {
- document.write('<div class="test" style="border-color:' + colors[i] + ';">' + colors[i] + '</div>');
+ document.write('<div class="test" id="test' + i + '" style="border-color:' + colors[i] + ';">' + colors[i] + '</div>');
+ PIE.attach( document.getElementById('test' + i) );
}
</script>
View
547 tests/text-shadow-tests.html
@@ -0,0 +1,547 @@
+<!DOCTYPE html>
+<html>
+<head>
+
+ <meta content="text/html; charset=UTF-8" http-equiv="content-type">
+ <title>Basic CSS3 Demos</title>
+
+ <style type="text/css">
+ body {
+ font-size: 18px;
+ font-family: Arial;
+ }
+
+ * {
+ -pie-poll: false;
+ }
+
+ /* From http://www.w3.org/Style/Examples/007/text-shadow */
+ #w3c-tests div {
+ float: left;
+ padding: .5em;
+ margin: .25em;
+ font-size: 20px;
+ border-radius: 3px;
+ behavior: url(../build/PIE_uncompressed.htc);
+ }
+ #w3c1 {background: #CCF; color: blue; text-shadow: #333 0.1em 0.1em}
+ #w3c2 {background: #CCF; color: blue; text-shadow: #333 0.1em 0.1em 0.05em}
+ #w3c3 {background: #CCF; color: blue; text-shadow: black 0.1em 0.1em 0.2em}
+ #w3c4 {background: #EEE; color: white; text-shadow: black 0.1em 0.1em 0.2em}
+ #w3c5 {color: blue; text-shadow: 0.2em 0.5em 0.1em #600, -0.3em 0.1em 0.1em #006600, 0.4em -0.3em 0.1em #006}
+ #w3c6 {background: #CCC; color: #D1D1D1; text-shadow: -1px -1px white, 1px 1px #333; letter-spacing: 2px}
+ #w3c7 {background: #CCC; color: #C8C8C8; text-shadow: 1px 1px white, -1px -1px #444; letter-spacing: 2px}
+ #w3c8 {background: #CCF; color: blue; text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black}
+ #w3c9 {background: #CCF; color: #BBE; text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black}
+ #w3c10 {text-shadow: 0 0 0.2em #8F7}
+ #w3c11 {text-shadow: 0 0 0.2em #F87, 0 0 0.2em #F87}
+ /*#w3c12 {color: #fff; text-shadow: -2px -2px 2px #0000FF, 2px 2px 2px #FF0000, 0 -2px 2px #0000FF, 0 2px 2px #FF0000}*/
+ #w3c12 {text-shadow: 0 0 0.2em #87F, 0 0 0.2em #87F, 0 0 0.2em #87F}
+
+ #mixedMarkup {
+ behavior: url(../build/PIE_uncompressed.htc);
+ text-shadow: 1px 1px 2px #666;
+ clear: both;
+ width: 350px;
+ text-indent: 0.5em;
+ }
+ #mixedMarkup em {
+ text-shadow: 0 0 5px red;
+ }
+ #mixedMarkup .nested {
+ text-shadow: 0 -2px 4px blue;
+ }
+ #mixedMarkup .nested span {
+ text-shadow: 0 2px 2px green, 0 4px 2px yellow;
+ }
+ #mixedMarkup .multiline {
+ color: #FFF;
+ text-shadow: -1px 0 purple, 0 1px purple, 1px 0 purple, 0 -1px purple;
+ }
+ #mixedMarkup strong {
+ text-shadow: none;
+ }
+
+ .tester {
+ behavior: url(../build/PIE_uncompressed.htc);
+ padding: 5px;
+ clear: both;
+ }
+ </style>
+</head>
+
+<body>
+
+<div id="w3c-tests">
+ <div id="w3c1">PIE</div>
+ <div id="w3c2">PIE</div>
+ <div id="w3c3">PIE</div>
+ <div id="w3c4">PIE</div>
+ <div id="w3c5">PIE</div>
+ <div id="w3c6">PIE</div>
+ <div id="w3c7">PIE</div>
+ <div id="w3c8">PIE</div>
+ <div id="w3c9">PIE</div>
+ <div id="w3c10">PIE</div>
+ <div id="w3c11">PIE</div>
+ <div id="w3c12">PIE</div>
+</div>
+
+<div id="mixedMarkup">
+ This is an example of <em>mixed markup</em>.
+ It can be <span class="nested">deeply <span>nested</span> too</span> and can <span class="multiline">span across multiple lines</span>.
+ The shadow can also be <strong>removed entirely</strong> from nested nodes.
+</div>
+
+
+<script type="text/javascript">
+ var n = 25;
+ for(var i=1; i<n; i++) {
+ document.write('<div class="tester" style="height: 25px; text-shadow: 4px 4px ' + i + 'px #000">Text shadow blur radius ' + i + '</div>')
+ }
+ for(var i=1; i<n; i++) {
+ document.write('<div class="tester" style="height: 25px; text-shadow: 4px 4px ' + i + 'px #F00">Text shadow blur radius ' + i + '</div>')
+ }
+ for(var i=1; i<n; i++) {
+ document.write('<div class="tester" style="height: 25px; text-shadow: 0 0 ' + i + 'px #00F">Text shadow blur radius ' + i + '</div>')
+ }
+ for(var i=1; i<n; i++) {
+ document.write('<div class="tester" style="height: 25px; text-shadow: 0 0 ' + i + 'px #0F0">Text shadow blur radius ' + i + '</div>')
+ }
+</script>
+
+
+<style type="text/css">
+#content h2 {
+
+ margin: 0 0 10px 0 !important;
+}
+
+#intro {
+ color: #d6e2fc;
+ background: black;
+ width: 300px;
+ height: 166px;
+ line-height: 60px;
+ margin-top: 4px;
+ margin-right: 10px;
+ float: left;
+ font-family: "Fritz-Quad", "Garamond", serif;
+ font-size: 50px;
+ text-align: center;
+ padding-top: 40px;
+ text-transform: uppercase;
+}
+/*
+#intro a {
+ color: #d6e2fc;
+ text-decoration: none;
+}
+
+#intro a:hover {
+ color: white;
+}
+*/
+#css3And {
+ -sand-chroma-override: #666666;
+ text-shadow: -4px 0px 0px #0f1128,
+ -8px 0px 4px rgb(50, 152, 234),
+ -10px 0px 4px rgba(50, 152, 234, 0.3),
+ -8px -4px 4px rgba(50, 152, 234, 0.6),
+ -8px 4px 4px rgba(50, 152, 234, 0.6)
+ ;
+}
+#html5 {
+ -sand-chroma-override: #222222;
+ text-shadow: -4px 0px 0px #0f1128,
+ -8px 0px 4px rgb(143, 14, 18),
+ -10px 0px 4px rgba(143, 14, 18, 0.3),
+ -8px -4px 4px rgba(143, 14, 18, 0.6),
+ -8px 4px 4px rgba(143, 14, 18, 0.6)
+ ;
+}
+
+
+table.dataTable {
+ border-collapse: separate;
+}
+
+table.dataTable th {
+
+}
+
+table.dataTable td img {
+ border: none !important;
+ margin: 0 !important;
+
+}
+
+table.dataTable tr td.example span {
+ behavior: url(../build/PIE_uncompressed.htc);
+ position: relative;
+}
+table.dataTable tr td.example {
+ font-size: 31px;
+ vertical-align: top;
+ text-align: center;
+ padding-top: 30px;
+ padding-bottom: 12px;
+ height: 52px;
+ line-height: 35px;
+}
+
+table.dataTable tr td.example + td, table.dataTable tr td.example + td + td {
+ margin: 0;
+ max-width: 151px;
+ width: 140px;
+ min-width: 140px;
+ overflow: hidden;
+ padding: 0;
+}
+
+body.ie9 table.dataTable tr td.example {
+
+}
+
+table.dataTable td {
+ border: solid 1px #ccccce !important;
+
+}
+
+table.dataTable td {
+ padding: 0;
+}
+
+table.dataTable td.code {
+ vertical-align: middle;
+ background-color: white !important;
+ background-image: none;
+}
+
+table.dataTable td.code pre {
+ font-family: "Droid Sans Mono", "Consolas", "Courier New", monospace;
+ font-size: 12px;
+ padding-left: 10px;
+ line-height: 18px;
+}
+
+#example1 .example span {
+ text-shadow: 2px 2px 0 #E51919;
+ -sand-chroma-override: white;
+}
+
+#example2 .example span{
+ text-shadow: 3px 3px 3px #B24C4C;
+ -sand-chroma-override: white;
+}
+
+#example3 .example
+ {
+ border: white;
+ color: black;
+ background-image: -sand-gradient(linear, center top, center bottom, from(#ffffff), to(#999999));
+
+}
+
+#example3 .example span {
+ text-shadow: 0px 1px 0px white;
+ -sand-chroma-override: #cccccc;
+
+}
+
+#example4
+
+ {
+ background: black;
+}
+
+#example4 .example span {
+ color: white;
+ text-shadow: 0 0 4px white,
+ 0 -5px 4px #FFFF33,
+ 2px -10px 6px #FFDD33,
+ -2px -15px 11px #FF8800,
+ 2px -25px 18px #FF2200;
+ -sand-chroma-override: black;
+
+}
+
+#example5 {
+ background: black;
+}
+
+#example5 .example span {
+ color: white;
+ text-shadow: 0 0 1px #fff, 0 0 2px #fff, 0 0 3px #fff, 0 0 4px #ff00de, 0 0 7px #ff00de, 0 0 8px #ff00de, 0 0 10px #ff00de, 0 0 15px #ff00de;
+ -sand-chroma-override: #333333;
+}
+
+#example6 {
+ background: black;
+}
+
+#example6 .example span {
+ color: transparent;
+ text-shadow: 0 0 3px #fff;
+}
+
+#example7 {
+ background: black;
+}
+
+#example7 .example span {
+ color: black;
+ text-shadow:0 0 20px yellow, 0 0 60px yellow;
+ -sand-chroma-override: white;
+}
+
+#example8 {
+ background:#cccccc;
+}
+
+
+#example8 .example span {
+
+ background:#cccccc;
+ -sand-chroma-override: #cccccc;
+ color:#cccccd;
+ text-shadow: -1px -1px white, 1px 1px #333333;
+}
+
+#example9 {
+ background:#cccccc;
+
+}
+
+#example9 .example span {
+
+ background:#cccccc;
+ -sand-chroma-override: #cccccc;
+ color:#ccccce;
+ text-shadow: 1px 1px white,
+ -1px -1px #444;
+}
+
+#example8 td, #example9 td {
+ border-color: white !important;
+}
+
+#example8 td.code, #example9 td.code {
+ border-color: #cccccc !important;
+}
+
+#example10 .example {
+ background: black;
+ color: #ffd924;
+ font-weight: bold;
+ text-shadow: 1px 1px rgba(255,128,0,.7),
+ 2px 2px rgba(255,128,0,.7),
+ 3px 3px rgba(255,128,0,.7),
+ 4px 4px rgba(255,128,0,.7),
+ 5px 5px rgba(255,128,0,.7);
+ -sand-chroma-override: #ff8088; /* fills in cracks in the shadow */
+}
+
+
+
+.detailedScreenshots td {
+
+ background: black;
+}
+
+.detailedScreenshots img {
+ float: right;
+}
+
+#pageContainer {
+ min-width: 800px;
+}
+
+#content, #sidenav {
+ line-height: 22px;
+}
+
+table.dataTable td {
+ line-height: 31px !important;
+}
+
+#content, #sideNav {
+ line-height: 22px;
+}
+
+#content {
+ font-size: 14px;
+}
+</style>
+<table class="dataTable">
+<thead>
+<tr>
+<th style="text-shadow: 1px 1px 5px rgb(0, 0, 0);">
+Live CSS/HTML
+</th>
+<th class="screenshot" style="text-shadow: 1px 1px 5px rgb(0, 0, 0);">
+IE9
+</th>
+<th class="screenshot" style="text-shadow: 1px 1px 5px rgb(0, 0, 0);">
+Firefox
+</th>
+<th style="text-shadow: 1px 1px 5px rgb(0, 0, 0);">
+Text-Shadow Syntax<br>
+</th></tr>
+</thead>
+<tbody>
+<tr id="example1">
+<td class="example">
+<span data-csssandpaper-chroma="#ffffff" style="text-shadow: 2px 2px 0pt rgb(229, 25, 25);"><strong>Simple</strong></span>
+</td>
+<td>
+<img alt="" src="http://www.useragentman.com/blog/wp-content/uploads/2011/06/ie01.png">
+</td>
+<td>
+<img alt="" src="http://www.useragentman.com/blog/wp-content/uploads/2011/06/ff01.png">
+</td>
+<td class="code">
+<pre>2px 2px 0 #E51919
+</pre>
+</td>
+</tr>
+<tr id="example2">
+<td class="example">
+<span data-csssandpaper-chroma="#ffffff" style="text-shadow: 3px 3px 3px rgb(178, 76, 76);">Blurred</span>
+</td>
+<td>
+<img alt="" src="http://www.useragentman.com/blog/wp-content/uploads/2011/06/ie02.png">
+</td>
+<td>
+<img alt="" src="http://www.useragentman.com/blog/wp-content/uploads/2011/06/ff02.png">
+</td>
+<td class="code">
+<pre>3px 3px 3px #B24C4C
+</pre>
+</td>
+</tr>
+<tr id="example3">
+<td class="example cssSandpaper-IEuseGradientFilter" style="background-image: url(&quot;data:image/png;base64,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&quot;);">
+<span data-csssandpaper-chroma="#cccccc" style="text-shadow: 0px 1px 0px white;">Etched</span>
+</td>
+<td class="cssSandpaper-IEuseGradientFilter">
+<img alt="" src="http://www.useragentman.com/blog/wp-content/uploads/2011/06/ie03.png">
+</td>
+<td class="cssSandpaper-IEuseGradientFilter">
+<img alt="" src="http://www.useragentman.com/blog/wp-content/uploads/2011/06/ff03.png">
+</td>
+<td class="code">
+<pre>0px 1px 0px white
+</pre>
+</td>
+</tr>
+<tr id="example4">
+<td class="example">
+<span data-csssandpaper-chroma="#000000" style="text-shadow: 0pt 0pt 4px white, 0pt -5px 4px rgb(255, 255, 51), 2px -10px 6px rgb(255, 221, 51), -2px -15px 11px rgb(255, 136, 0), 2px -25px 18px rgb(255, 34, 0);">Flaming</span>
+</td>
+<td><img alt="" src="http://www.useragentman.com/blog/wp-content/uploads/2011/06/ie04.png"></td>
+<td><img alt="" src="http://www.useragentman.com/blog/wp-content/uploads/2011/06/ff04.png"></td>
+<td class="code">
+<pre>0px 0px 4px white, 0px -5px 4px #FFFF33,
+2px -10px 6px #FFDD33, -2px -15px 11px #FF8800,
+2px -25px 18px #FF2200 </pre>
+</td>
+</tr>
+<tr id="example5">
+<td class="example">
+<span data-csssandpaper-chroma="#333333" style="text-shadow: 0pt 0pt 1px rgb(255, 255, 255), 0pt 0pt 2px rgb(255, 255, 255), 0pt 0pt 3px rgb(255, 255, 255), 0pt 0pt 4px rgb(255, 0, 222), 0pt 0pt 7px rgb(255, 0, 222), 0pt 0pt 8px rgb(255, 0, 222), 0pt 0pt 10px rgb(255, 0, 222), 0pt 0pt 15px rgb(255, 0, 222);">Neon</span>
+</td>
+<td><img alt="" src="http://www.useragentman.com/blog/wp-content/uploads/2011/06/ie05.png"></td>
+<td><img alt="" src="http://www.useragentman.com/blog/wp-content/uploads/2011/06/ff05.png"></td>
+<td class="code">
+<pre>0 0 1px #ffffff, 0 0 2px #ffffff,
+0 0 3px #ffffff, 0 0 4px #ff00de,
+0 0 7px #ff00de, 0 0 8px #ff00de,
+0 0 10px #ff00de, 0 0 15px #ff00de;
+</pre>
+</td>
+</tr>
+<tr id="example6">
+<td class="example">
+<span style="text-shadow: 0pt 0pt 3px rgb(255, 255, 255);">Unfocused</span>
+</td>
+<td>
+<img alt="" src="http://www.useragentman.com/blog/wp-content/uploads/2011/06/ie06.png">
+</td>
+<td>
+<img alt="" src="http://www.useragentman.com/blog/wp-content/uploads/2011/06/ff06.png">
+</td>
+<td class="code">
+<pre>0 0 3px #fff
+</pre>
+</td>
+</tr>
+<tr id="example7">
+<td class="example">
+<span data-csssandpaper-chroma="#ffffff" style="text-shadow: 0pt 0pt 20px yellow, 0pt 0pt 60px yellow;">Glowing</span>
+</td>
+<td>
+<img alt="" src="http://www.useragentman.com/blog/wp-content/uploads/2011/06/ie07.png">
+</td>
+<td>
+<img alt="" src="http://www.useragentman.com/blog/wp-content/uploads/2011/06/ff07.png">
+</td>
+<td class="code">
+<pre>0 0 20px yellow, 0 0 60px yellow
+</pre>
+</td>
+</tr>
+<tr id="example8">
+<td class="example">
+<span data-csssandpaper-chroma="#cccccc" style="text-shadow: -1px -1px white, 1px 1px rgb(51, 51, 51);">Embossed</span>
+</td>
+<td>
+<img alt="" src="http://www.useragentman.com/blog/wp-content/uploads/2011/06/ie08.png">
+</td>
+<td>
+<img alt="" src="http://www.useragentman.com/blog/wp-content/uploads/2011/06/ff08.png">
+</td>
+<td class="code">
+<pre>-1px -1px white, 1px 1px #333333
+</pre>
+</td>
+</tr>
+<tr id="example9">
+<td class="example">
+<span data-csssandpaper-chroma="#cccccc" style="text-shadow: 1px 1px white, -1px -1px rgb(68, 68, 68);">Pillow</span>
+</td>
+<td>
+<img alt="" src="http://www.useragentman.com/blog/wp-content/uploads/2011/06/ie09.png">
+</td>
+<td>
+<img alt="" src="http://www.useragentman.com/blog/wp-content/uploads/2011/06/ff09.png">
+</td>
+<td class="code">
+<pre>1px 1px white, -1px -1px #444
+</pre>
+</td>
+</tr>
+<tr id="example10">
+<td class="example" data-csssandpaper-chroma="#ff8088" style="text-shadow: 1px 1px rgba(255, 128, 0, 0.7), 2px 2px rgba(255, 128, 0, 0.7), 3px 3px rgba(255, 128, 0, 0.7), 4px 4px rgba(255, 128, 0, 0.7), 5px 5px rgba(255, 128, 0, 0.7);">
+<span>Fake 3D</span>
+</td>
+<td>
+<img alt="" src="http://www.useragentman.com/blog/wp-content/uploads/2011/06/ie10.png">
+</td>
+<td>
+<img alt="" src="http://www.useragentman.com/blog/wp-content/uploads/2011/06/ff10.png">
+</td>
+<td class="code">
+<pre>1px 1px rgba(255,128,0,.7),
+2px 2px rgba(255,128,0,.7),
+3px 3px rgba(255,128,0,.7),
+4px 4px rgba(255,128,0,.7),
+5px 5px rgba(255,128,0,.7)
+</pre>
+</td>
+</tr>
+</tbody>
+</table>
+
+</body>
+</html>

No commit comments for this range

Something went wrong with that request. Please try again.