<!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>