<!DOCTYPE html>
<body>
<pre id="log"></pre>
<script src="../resources/runner.js"></script>
<div id="sandbox" style="display:none"></div>
<script>
var sandbox = document.getElementById('sandbox');
var observing = false;

var elems = [];
for (var i = 0; i < 50000; ++i)
    elems[i] = document.createElement('div');
var observer = new WebKitMutationObserver(listener);
var tickledSpan = document.createElement('span');
observer.observe(tickledSpan, {attributes: true});

function resetState() {
    window.start = null;
    window.numRuns = 25;
    window.times = [];
}

function runAgain() {
    tickledSpan.setAttribute('data-foo', numRuns);
}

function listener(mutations) {
    if (start) {
        var time = Date.now() - start;
        times.push(time);
        PerfTestRunner.log(time);
    }
    if (numRuns-- >= 0) {
        runAgain();
        if (observing)
            observer.disconnect()
        sandbox.innerHTML = '';
        if (observing)
            observer.observe(sandbox, {childList: true});
        start = Date.now();
        for (var i = 0; i < elems.length; ++i)
            sandbox.appendChild(elems[i]);
    } else {
        PerfTestRunner.logStatistics(times);
        if (!observing) {
            observing = true;
            resetState();
            PerfTestRunner.log('\n------------\n');
            PerfTestRunner.log('Running ' + numRuns + ' times with observation');
            setTimeout(runAgain, 0);
        }
    }
}

resetState();
PerfTestRunner.log('Running ' + numRuns + ' times without observation');
window.addEventListener('load', runAgain);
</script>
</body>