third_party/WebKit/LayoutTests/http/tests/webfont/fallback-font-while-loading.html

   1 <style>
   2 @font-face {
   3     font-family: webfont;
   4     src: url(slow-ahem-loading.cgi);
   5 }
   6 </style>
   7 <p>
   8 This test checks that the fallback font is used for layout while a webfont is loading.
   9 </p>
  10 Target:
  11 <div>
  12 <span id="target-arial" style="font-family: webfont, Arial;">A text to be measured.</span>
  13 </div>
  14 <div>
  15 <span id="target-serif" style="font-family: webfont, serif;">A text to be measured.</span>
  16 </div>
  17 <div>
  18 <span id="target-monospace" style="font-family: webfont, monospace;">A text to be measured.</span>
  19 </div>
  20 <div>
  21 <span id="target-default" style="font-family: webfont;">A text to be measured.</span>
  22 </div>
  23 Reference:
  24 <div>
  25 <span id="reference-arial" style="font-family: Arial;">A text to be measured.</span>
  26 </div>
  27 <div>
  28 <span id="reference-serif" style="font-family: serif;">A text to be measured.</span>
  29 </div>
  30 <div>
  31 <span id="reference-monospace" style="font-family: monospace;">A text to be measured.</span>
  32 </div>
  33 <div>
  34 <span id="reference-default">A text to be measured.</span>
  35 </div>
  36 <pre id="result"></pre>
  37
  38 <script>
  39 if (window.testRunner) {
  40     testRunner.dumpAsText();
  41 }
  42
  43 function checkSize(fallbackFont) {
  44     var target = document.getElementById('target-' + fallbackFont);
  45     var reference = document.getElementById('reference-' + fallbackFont);
  46     var result = document.getElementById('result');
  47     result.innerText += fallbackFont + '\n';
  48     if (target.offsetWidth == reference.offsetWidth && target.offsetHeight == reference.offsetHeight) {
  49         result.innerText += 'PASS: The width of target text and reference text is the same.\n';
  50     } else {
  51         result.innerText += 'FAIL: The width of target text and reference text is different: '
  52             + target.offsetWidth + ' != ' + reference.offsetWidth + ' or ' + target.offsetHeight + ' != ' + reference.offsetHeight + '\n';
  53     }
  54 }
  55
  56 checkSize('arial');
  57 checkSize('serif');
  58 // FIXME: checkSize('default');
  59 // FIXME: checkSize('monospace');
  60 </script>