| <style> |
| @font-face { |
| font-family: webfont; |
| src: url(slow-ahem-loading.cgi); |
| } |
| </style> |
| <p> |
| This test checks that the fallback font is used for layout while a webfont is loading. |
| </p> |
| Target: |
| <div> |
| <span id="target-arial" style="font-family: webfont, Arial;">A text to be measured.</span> |
| </div> |
| <div> |
| <span id="target-serif" style="font-family: webfont, serif;">A text to be measured.</span> |
| </div> |
| <div> |
| <span id="target-monospace" style="font-family: webfont, monospace;">A text to be measured.</span> |
| </div> |
| <div> |
| <span id="target-default" style="font-family: webfont;">A text to be measured.</span> |
| </div> |
| Reference: |
| <div> |
| <span id="reference-arial" style="font-family: Arial;">A text to be measured.</span> |
| </div> |
| <div> |
| <span id="reference-serif" style="font-family: serif;">A text to be measured.</span> |
| </div> |
| <div> |
| <span id="reference-monospace" style="font-family: monospace;">A text to be measured.</span> |
| </div> |
| <div> |
| <span id="reference-default">A text to be measured.</span> |
| </div> |
| <pre id="result"></pre> |
| |
| <script> |
| if (window.testRunner) { |
| testRunner.dumpAsText(); |
| } |
| |
| function checkSize(fallbackFont) { |
| var target = document.getElementById('target-' + fallbackFont); |
| var reference = document.getElementById('reference-' + fallbackFont); |
| var result = document.getElementById('result'); |
| result.innerText += fallbackFont + '\n'; |
| if (target.offsetWidth == reference.offsetWidth && target.offsetHeight == reference.offsetHeight) { |
| result.innerText += 'PASS: The width of target text and reference text is the same.\n'; |
| } else { |
| result.innerText += 'FAIL: The width of target text and reference text is different: ' |
| + target.offsetWidth + ' != ' + reference.offsetWidth + ' or ' + target.offsetHeight + ' != ' + reference.offsetHeight + '\n'; |
| } |
| } |
| |
| checkSize('arial'); |
| checkSize('serif'); |
| checkSize('default'); |
| // FIXME: checkSize('monospace'); |
| </script> |