third_party/WebKit/LayoutTests/fast/css/font-face-css-change-while-loading.html

   1 <!DOCTYPE html>
   2 <style id="sheet">
   3 @font-face {
   4     font-family: myahem;
   5     src: url(../../resources/Ahem.ttf);
   6 }
   7 </style>
   8 <script>
   9 if (window.testRunner)
  10     window.testRunner.waitUntilDone();
  11
  12 function getDocumentFontFaces() {
  13     var faces = [];
  14     document.fonts.forEach(function(face) { faces.push(face); });
  15     return faces;
  16 }
  17
  18 function runTest() {
  19     var face = getDocumentFontFaces()[0];
  20
  21     document.getElementById("t").style.fontFamily = "myahem";
  22     document.body.offsetTop; // force recalc and start loading font.
  23
  24     var newStyle = document.createElement("style");
  25     newStyle.innerHTML = "#dummy { color: red; }";
  26     var referenceNode = document.getElementById("sheet");
  27     referenceNode.parentNode.insertBefore(newStyle, referenceNode);
  28
  29     face.loaded.then(finish);
  30 }
  31
  32 function finish() {
  33     if (window.testRunner)
  34         window.testRunner.notifyDone();
  35 }
  36
  37 onload = function() {
  38     // FIXME: we need a better way of waiting for chromium events to happen
  39     setTimeout(runTest, 1);
  40 }
  41 </script>
  42 <p>You should see a black rectangle below.</p>
  43 <div id="t">FAIL</div>