<!DOCTYPE html> 
<html> 
  <body> 
    <input id="input"> 
    <ul id="list"><li><span></span></li></ul>
    <div id="console"></div>
    
    <script>
        if (window.testRunner)
            testRunner.dumpAsText();
            
        var listElement = document.getElementById('list');
        var templateElement = list.firstChild;
        var inputElement = document.getElementById('input');
        
        function test(numberOfElements, focusInput)
        {
            if (focusInput)
                inputElement.focus();

            var startTime = performance.now();
            for (var i = 0; i < numberOfElements; i++) {
                var clone = templateElement.cloneNode(true);
                clone.childNodes[0].textContent = i;
                listElement.appendChild(clone);
            }
            var endTime = performance.now();

            if (focusInput)
                inputElement.blur();

            const originalItem = listElement.firstChild;
            listElement.textContent = '';
            listElement.appendChild(originalItem);

            return endTime - startTime;
        }

        function log(str)
        {
            var element = document.createElement('div');
            element.appendChild(document.createTextNode(str));
            document.getElementById('console').appendChild(element);
        }

        const start = performance.now();
        let factor = 0;
        while (test(1000 * factor, false) < 5)
            factor++;

        var timeWithoutFocus = test(1000 * factor, false);
        var timeWithFocus = test(1000 * factor, true);

        if (Math.abs(timeWithFocus - timeWithoutFocus) <= timeWithoutFocus) {
            log('PASS. Cloning elements takes roughly as long with as without focus.');
        } else {
            log('FAIL. Cloning 1000 elements with focus took ' + timeWithFocus + 'ms, without took ' + timeWithoutFocus + 'ms.');
        }
    </script> 
  </body> 
</html>