Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Fetching contributors…

Cannot retrieve contributors at this time

157 lines (132 sloc) 5.688 kB
<!DOCTYPE html>
<html>
<head>
<title>Tokenizer Tests</title>
<style type="text/css">
table {
border-collapse: collapse;
border-spacing: 0;
width: 100%;
}
th, td {
text-align: left;
padding: .2em 1em;
border-bottom: 1px solid #CCC;
font: 13px sans-serif;
}
.tokens ul,
.tokens li {
list-style: none;
margin: 0;
padding: 0;
}
.result {
font-weight: bold;
}
.fail {
color: orange;
}
.error {
color: red;
}
.pass {
color: green;
}
</style>
</head>
<body>
<script type="text/javascript">
window.PIE = {};
function runTest( css, expectedTokens) {
document.write( '<tr><td class="css">' + css + '</td><td class="tokens"><ul>' );
var result, error, className;
try {
var tokenizer = new PIE.Tokenizer( css ),
actualTokens = [],
token, expected, failure;
function checkMatch( msgPrefix ) {
if( actualTokens.length === expectedTokens.length ) {
for( var i = 0, len = actualTokens.length; i < len; i++ ) {
expected = expectedTokens[i];
if( actualTokens[i].type !== expected.type ) {
failure = ( msgPrefix || '' ) + "Type mismatch at token " + i + ": expected " + expected.type + ', got ' + actualTokens[i].type;
break;
}
if( actualTokens[i].value !== expected.value ) {
failure = ( msgPrefix || '' ) + "Value mismatch at token " + i + ": expected " + expected.value + ', got ' + actualTokens[i].value;
break;
}
}
} else {
failure = ( msgPrefix || '' ) + "Number of tokens is different: expected " + expectedTokens.length + ', got ' + actualTokens.length;
}
}
// verify tokens in forward order
while( token = tokenizer.next() ) {
actualTokens.push( token );
document.write( '<li>type=' + token.type + ', value=' + token.value + '</li>' );
}
checkMatch( '' );
// step back through all of them to make sure backtracking works
actualTokens = [];
while( token = tokenizer.prev() ) {
actualTokens.unshift( token );
}
checkMatch( 'Backtracking: ' );
} catch( e ) {
error = e.message;
}
className = !!error ? 'error' : !!failure ? 'fail' : 'pass';
document.write( '</ul></td><td class="result ' + className + '">' + ( error || failure || 'Passed' ) + '</td></tr>' );
}
</script>
<script type="text/javascript" src="../sources/Tokenizer.js"></script>
<table>
<thead>
<tr>
<th>CSS Value</th>
<th>Tokens</th>
<th>Test Result</th>
</tr>
</thead>
<tbody>
<script type="text/javascript">
runTest( '#00CCFF', [
{ type: PIE.Tokenizer.Type.COLOR, value: '#00CCFF' }
] );
runTest( 'rgb(0,127, 255 )', [
{ type: PIE.Tokenizer.Type.COLOR, value:'rgb(0,127, 255 )' }
] );
runTest( 'rgba(0,127, 255, 1 )', [
{ type: PIE.Tokenizer.Type.COLOR, value:'rgba(0,127, 255, 1 )' }
] );
runTest( 'linear-gradient(center top, yellow, blue)', [
{ type: PIE.Tokenizer.Type.FUNCTION, value: 'linear-gradient(' },
{ type: PIE.Tokenizer.Type.IDENT, value: 'center' },
{ type: PIE.Tokenizer.Type.IDENT, value: 'top' },
{ type: PIE.Tokenizer.Type.OPERATOR, value: ',' },
{ type: PIE.Tokenizer.Type.COLOR, value: 'yellow' },
{ type: PIE.Tokenizer.Type.OPERATOR, value: ',' },
{ type: PIE.Tokenizer.Type.COLOR, value: 'blue' },
{ type: PIE.Tokenizer.Type.CHARACTER, value: ')' }
] );
runTest( 'linear-gradient(top, yellow, rgba(0,0,255,0.5))', [
{ type: PIE.Tokenizer.Type.FUNCTION, value: 'linear-gradient(' },
{ type: PIE.Tokenizer.Type.IDENT, value: 'top' },
{ type: PIE.Tokenizer.Type.OPERATOR, value: ',' },
{ type: PIE.Tokenizer.Type.COLOR, value: 'yellow' },
{ type: PIE.Tokenizer.Type.OPERATOR, value: ',' },
{ type: PIE.Tokenizer.Type.COLOR, value: 'rgba(0,0,255,0.5)' },
{ type: PIE.Tokenizer.Type.CHARACTER, value: ')' }
]);
runTest( 'top 15px 3em 50%', [
{ type: PIE.Tokenizer.Type.IDENT, value: 'top' },
{ type: PIE.Tokenizer.Type.LENGTH, value: '15px' },
{ type: PIE.Tokenizer.Type.LENGTH, value: '3em' },
{ type: PIE.Tokenizer.Type.PERCENT, value: '50%' }
] );
</script>
</tbody>
</table>
</body>
</html>
Jump to Line
Something went wrong with that request. Please try again.