<head>
<style>
@font-face {
    font-family: 'webfont';
    src: url(http://localhost:8000/css/resources/webfont-request.php?mode=getFont&filename=webfontRequestCount.txt) format('truetype');
}
</style>
<script>
if (window.testRunner) {
    testRunner.dumpAsText();
    testRunner.waitUntilDone();
}

var filename = 'filename=webfontRequestCount.txt';
var xhr;

function startTest() {
    // Resets request count before starting the test.
    xhr = new XMLHttpRequest;
    xhr.onerror = function() {
        document.getElementById('result').innerText = 'FAIL: Network error.';
        if (window.testRunner)
            testRunner.notifyDone();
    };
    xhr.onreadystatechange = function() {
        if (xhr.readyState == xhr.DONE)
            forceStyleSelectorRecreation();
    };
    xhr.open('GET', '/resources/reset-temp-file.php?' + filename, true);
    xhr.send();
}

function forceStyleSelectorRecreation() {
    document.head.appendChild(document.createElement("style"));
    // Pauses for a moment to see whether font re-fetching occurs.
    setTimeout(getRequestCount, 100);
}

function getRequestCount() {
    xhr.onreadystatechange = function() {
        if (xhr.readyState == xhr.DONE)
            checkRequestCount();
    };
    xhr.open('GET', 'http://localhost:8000/css/resources/webfont-request.php?mode=getRequestCount&' + filename, true);
    xhr.send();
}

function checkRequestCount() {
    var numRequest = xhr.responseText;
    var result = document.getElementById('result');
    result.innerHTML = 'Number of requests after recalculation: ' + numRequest + '<br />';
    if (numRequest == '0')
        result.innerHTML += 'SUCCESS';
    else
        result.innerHTML += 'FAIL';
    if (window.testRunner)
        testRunner.notifyDone();
};
</script>
</head>
<body onload="startTest()">
<p>This test ensures that webfonts are not re-fetched after style recalculation.</p>
<div style="font-family: webfont;">Text</div>
<div id="result"></div>
<script>
document.body.offsetTop;
</script>
</body>