Skip to content
Fetching contributors…
Cannot retrieve contributors at this time
113 lines (101 sloc) 5.83 KB
<!DOCTYPE html>
<html>
<head>
<title>Tests for background gradients</title>
<!--[if IE 9]><script src="../build/PIE_IE9_uncompressed.js"></script><![endif]-->
<!--[if lt IE 9]><script src="../build/PIE_IE678_uncompressed.js"></script><![endif]-->
<style type="text/css">
html { -pie-load-path: "../build"; }
.test {
float: left;
padding: 10px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
border: 3px solid;
margin: 5px;
}
</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': '#00FFFF',
'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': '#FF0000',
'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'
},
alphaTests = {
'aqua': 1,
'beige': 1,
'#123456': 1,
'#123': 1,
'rgb(0, 0, 255)': 1,
'rgba(0, 0, 255, 0.5)': 0.5,
'rgba(0, 0, 255, .5)': 0.5,
'hsl(0, 100%, 50%)': 1,
'hsla(0, 100%, 50%, 0.5)': 0.5,
'hsla(0, 100%, 50%, .5)': 0.5,
'currentColor': 1,
'transparent': 0
},
currentColorTester = document.getElementById('currentColorTester'),
failed = false,
c, val;
for (c in colorValueTests) {
val = PIE.getColor( c ).colorValue( currentColorTester );
if ( val.toLowerCase() !== colorValueTests[ c ].toLowerCase() ) {
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.toLowerCase() !== hexValueTests[ c ].toLowerCase() ) {
document.write('<p style="color:red">PIE.Color#hexValue() failed for "' + c + '": got "' + val + '", expected "' + hexValueTests[c] + '"</p>')
failed = true;
}
}
for (c in alphaTests) {
val = PIE.getColor( c ).alpha();
if ( val !== alphaTests[ c ] ) {
document.write('<p style="color:red">PIE.Color#alpha() failed for "' + c + '": got "' + val + '", expected "' + alphaTests[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" id="test' + i + '" style="border-color:' + colors[i] + ';">' + colors[i] + '</div>');
PIE.attach( document.getElementById('test' + i) );
}
</script>
</body>
</html>
Something went wrong with that request. Please try again.