Permalink
Fetching contributors…
Cannot retrieve contributors at this time
87 lines (84 sloc) 3.21 KB
<!DOCTYPE html>
<html>
<head>
<link href="/basic.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="/jquery.min.js"></script>
<script type="text/javascript" src="/webfont-fontwatchrunner.js"></script>
<style type="text/css">
#results {
font-family: arial, sans-serif;
font-size: 16px;
}
.test-case {
font-size: 300px;
}
</style>
<script type="text/javascript">
var styles = '<style type="text/css">';
styles += '.default-fonts-a {font-family: ' + webfont.FontWatchRunner.DEFAULT_FONTS_A + ';}';
styles += '.default-fonts-b {font-family: ' + webfont.FontWatchRunner.DEFAULT_FONTS_B + ';}';
styles += '</style>';
document.write(styles);
</script>
</head>
<body>
<p id="results">Calculating...</p>
<p>
The goal of this page is to verify that the two default font stacks in
FontWatchRunner have different widths on a given platform when rendering the
default test string. The pairs of headings below should render in different
fonts and the results above should indicate that they all have different
widths.
</p>
<hr>
<div id="test-cases"></div>
<script type="text/javascript">
// Calculate all the different combinations of styles to test
var styles = {
'font-weight': [100, 200, 300, 400, 500, 600, 700, 800, 900, 1000],
'font-style': ['normal', 'italic'],
'text-rendering': [null, 'optimizeLegibility']
};
function calculateStyleCombos(props, styles) {
if (props.length <= 0) {
return [{}]
}
var remainingProps = $.extend(true, [], props);
var prop = remainingProps.pop();
var remainingCombos = calculateStyleCombos(remainingProps, styles);
var combos = [];
for (var i = 0; i < remainingCombos.length; i++) {
for (var j = 0; j < styles[prop].length; j++) {
var combo = {};
if (styles[prop][j] !== null) {
combo[prop] = styles[prop][j];
}
combos.push($.extend(combo, remainingCombos[i]));
}
}
return combos;
}
var styleCombos = calculateStyleCombos(['font-weight', 'font-style', 'text-rendering'], styles);
// Create test cases with default test strings for each style combo
var testCases = $('#test-cases');
for (var i = 0; i < styleCombos.length; i++) {
var test = $('<div class="test-case"></div>').css(styleCombos[i]);
test.append($('<span class="default-fonts-a"></span>').text(webfont.FontWatchRunner.DEFAULT_TEST_STRING));
test.append($('<span class="default-fonts-b"></span>').text(webfont.FontWatchRunner.DEFAULT_TEST_STRING));
testCases.append(test);
}
// Calculate the width of the spans after timeout
setTimeout(function() {
var comparisons = $('<span></span>');
var allPassed = true;
$('.test-case').each(function() {
var a = $(this).find('span').first().width();
var b = $(this).find('span').last().width();
comparisons.append($('<span></span>').css('color', a != b ? 'green' : 'red').text(a - b)).append(' ');
allPassed = allPassed && a != b;
});
$('#results').text(allPassed ? 'SUCCESS | ' : 'FAIL | ').append(comparisons);
}, 500);
</script>
</body>
</html>