| <!DOCTYPE html> |
| <style id="sheet"> |
| @font-face { |
| font-family: myahem; |
| src: url(../../resources/Ahem.ttf); |
| } |
| </style> |
| <script> |
| if (window.testRunner) |
| testRunner.waitUntilDone(); |
| |
| function getDocumentFontFaces() { |
| var faces = []; |
| document.fonts.forEach(function(face) { faces.push(face); }); |
| return faces; |
| } |
| |
| function runTest() { |
| var face = getDocumentFontFaces()[0]; |
| |
| document.getElementById("t").style.fontFamily = "myahem"; |
| document.body.offsetTop; // force recalc and start loading font. |
| |
| var newStyle = document.createElement("style"); |
| newStyle.innerHTML = "#dummy { color: red; }"; |
| var referenceNode = document.getElementById("sheet"); |
| referenceNode.parentNode.insertBefore(newStyle, referenceNode); |
| |
| face.loaded.then(finish); |
| } |
| |
| function finish() { |
| if (window.testRunner) |
| testRunner.notifyDone(); |
| } |
| |
| onload = function() { |
| // FIXME: we need a better way of waiting for chromium events to happen |
| setTimeout(runTest, 1); |
| } |
| </script> |
| <p>You should see a black rectangle below.</p> |
| <div id="t">FAIL</div> |
