View All Attachments for Bug 60318

Obsolete attachments are hidden. To view all attachments (including obsolete) click here.

Attachment #98021
zooming test case	text/html	2011-06-21 11:31:40 PDT	1.62 KB	no flags	Details

<!DOCTYPE html>
<html>
<head>
    <title>layout zoom test</title>
    <style> 
        #test {
            width: 500px;
            height: 1500px;
            background: skyblue;
        }
        #test > div {
            background: navy;
            height: 15px;
        }
    </style>
</head>
<body>
    <div id="test"></div>
    <div id="console"></div>
</body>
<script>
    var testElement = document.getElementById('test');
    var consoleElement = document.getElementById('console');

    function init()
    {
        testElement.innerHTML = '';
        for (var i = 0; i < 100; i++)
            testElement.appendChild(document.createElement('div'));
    }

    function test(zoom)
    {
        testElement.style.zoom = zoom + '%';
        
        var lastElementBottom = testElement.lastChild.getBoundingClientRect().bottom;
        var containerBottom = testElement.getBoundingClientRect().bottom;
        if (Math.abs(lastElementBottom - containerBottom) < 0.01)
            log('PASS: With zoom of ' + zoom + '% bottom edge of last child lines up with bottom edge of container.');
        else
            log('FAIL: With zoom of ' + zoom + '% bottom edge of last child at ' + lastElementBottom + ', container at ' + containerBottom + '.');
    }

    function log(str)
    {
        consoleElement.appendChild(document.createTextNode(str));
        consoleElement.appendChild(document.createElement('br'));
    }

    init();
    test(100);
    test(125);
    test(133);
    test(150);
    test(166);
    test(200);
    test(250);
    test(300);
    test(333);
    test(75);
    test(66);
    test(50);
    test(33);
</script>
</html>

Attachment #98022
perf test case	text/html	2011-06-21 11:32:07 PDT	8.18 KB	no flags	Details

<!DOCTYPE html>
<html>
<head>
    <title>int/float perf test</title>
    <style>
        #test {
            height: 600px;
            overflow: auto;
            font-size: 0;
        }
        #test > div {
            display: inline-block;
            width: 5px;
            height: 5px;
            margin: 1px;
            border: 1px solid navy;
            background: skyblue;
        }
        #test.test2 {
            padding: 5px;
        }
        #test.test2 > div {
            margin: 1px;
            border: 1px solid green;
            background: lime;
        }
        #test.test3 {
            padding: 18.3px;
        }
        #test.test3 > div {
            margin: 1.33px;
            border: 0.4px solid red;
            background: pink;
        }
        #test.test4 {
            padding: 18.3px;
        }
        #test.test4 > div {
            margin: 1.37px;
            border: 1px solid navy;
            background: skyblue;
        }
        #test.test4 > div:nth-child(odd) {
            width: 18.7px;
            height: 18.7px;
        }
        #console {
            margin-top: 1ex;
        }
        #console > span {
            display: inline-block;
            width: 15em;
        }
        #console > time {
            display: inline-block;
            width: 7em;
            text-align: right;
        }
    </style>
</head>
<body>
    <div id="test"></div>
    <br>Tests:<br>
    <input type="checkbox" id="t1" disabled="true" checked="true"><label for="t1">Create and layout on int boundaries</label><br>
    <input type="checkbox" id="t2" checked="true"><label for="t2">Re-layout padding/margin</label><br>
    <input type="checkbox" id="t3" checked="true"><label for="t3">Re-layout with subpixel padding/margin/size</label><br>
    <input type="checkbox" id="t4" checked="true"><label for="t4">Re-layout with varying size</label><br>
    Run
    <select id="iteration">
        <option value="100">100</option>
        <option value="10" selected="true">10</option>
        <option value="1">1</option>
    </select>
    iteration(s) with
    <select id="elements">
        <option value="10000">10,000</option>
        <option value="5000">5,000</option>
        <option value="1000" selected="true">1,000</option>
        <option value="500">500</option>
        <option value="100">100</option>
    </select>
    elements
    <button onclick="test(document.getElementById('iteration').value, document.getElementById('elements').value)">Go</button>
    <div id="console"></div>
</body>
<script>
    var testElement = document.getElementById('test');
    var consoleElement = document.getElementById('console');

    
    function test(iterations, elements)
    {
        var results = [];
        consoleElement.innerHTML = 'Running test...';
        runAsync(0, iterations, elements, results);
    }


    function testAsync(iteration, iterations, elements, results)
    {
        runTest(elements, results);
        iteration++;
        if (iteration == iterations)
            printSummary(elements, results);
        else {
            consoleElement.innerHTML = 'Running test (' + iteration + '/' + iterations + ')...';
            runAsync(iteration, iterations, elements, results);
        }
    }

    function runAsync(iteration, iterations, elements, results)
    {
        testElement.innerHTML = '';
        testElement.className = '';
        var height = testElement.offsetHeight;
        window.setTimeout(function() {
            testAsync(iteration, iterations, elements, results);
        }, 25);
    }


    function runTest(elements, results)
    {       
        var d0 = Date.now();
        for (var i = 0; i < elements; i++) {
            testElement.appendChild(document.createElement('div'));
        }
        var d1 = Date.now();
        var height = testElement.offsetHeight;
        var d2 = Date.now();

        var d3 = Date.now();
        if (document.getElementById('t2').checked)
            testElement.className = 'test2';
        var d4 = Date.now();
        var height = testElement.offsetHeight;
        var d5 = Date.now();

        var d6 = Date.now();
        if (document.getElementById('t3').checked)
            testElement.className = 'test3';
        var d7 = Date.now();
        var height = testElement.offsetHeight;
        var d8 = Date.now();

        var d9 = Date.now();
        if (document.getElementById('t4').checked)
            testElement.className = 'test4';
        var d10 = Date.now();
        var height = testElement.offsetHeight;
        var d11 = Date.now();

        results.push([d1 - d0, d2 - d1, d4 - d3, d5 - d4, d7 - d6, d8 - d7, d10 - d9, d11 - d10]);
    }

    function median(a)
    {
        if ((a.length & 1) == 1) {
            return a[Math.floor(a.length / 2)];
        }
        var i = a.length / 2;
        return (a[i - 1] + a[i]) / 2;
    }
    
    function printSummary(elements, results)
    {
        var time1 = 0, min1 = Infinity, max1 = 0;
        var time2 = 0, min2 = Infinity, max2 = 0;
        var time3 = 0, min3 = Infinity, max3 = 0;
        var time4 = 0, min4 = Infinity, max4 = 0;
        var times1 = [], times2 = [], times3 = [], times4 = [];

        var iterations = results.length;
        for (var i = 0; i < iterations; i++) {
            time1 += results[i][0] + results[i][1];
            min1 = Math.min(min1, results[i][0] + results[i][1]);
            max1 = Math.max(max1, results[i][0] + results[i][1]);
            times1.push(results[i][0] + results[i][1]);

            time2 += results[i][2] + results[i][3];
            min2 = Math.min(min2, results[i][2] + results[i][3]);
            max2 = Math.max(max2, results[i][2] + results[i][3]);
            times2.push(results[i][2] + results[i][3]);

            time3 += results[i][4] + results[i][5];
            min3 = Math.min(min3, results[i][4] + results[i][5]);
            max3 = Math.max(max3, results[i][4] + results[i][5]);
            times3.push(results[i][4] + results[i][5]);

            time4 += results[i][6] + results[i][7];
            min4 = Math.min(min4, results[i][6] + results[i][7]);
            max4 = Math.max(max4, results[i][6] + results[i][7]);
            times4.push(results[i][6] + results[i][7]);
        }

        var print = function(caption, opt_time, opt_min, opt_max, opt_median) {
            var captionElement = document.createElement('span');
            if (typeof opt_time == 'undefined')
                consoleElement.appendChild(document.createTextNode(caption));
            else {
                    var time = parseInt(opt_time * 100, 10) / 100;
                    captionElement.appendChild(document.createTextNode(caption + ':'));
                    consoleElement.appendChild(captionElement);
                    var timeElement = document.createElement('time');
                    timeElement.appendChild(document.createTextNode(time + 'ms'));
                    consoleElement.appendChild(timeElement);
                    timeElement = document.createElement('time');
                    timeElement.appendChild(document.createTextNode('+/- '  + Math.abs(opt_max - opt_min) + 'ms'));
                    consoleElement.appendChild(timeElement);

                    var med = parseInt(opt_median * 100, 10) / 100;
                    timeElement = document.createElement('time');
                    timeElement.appendChild(document.createTextNode('median '  + med + 'ms'));
                    consoleElement.appendChild(timeElement);
            }
            consoleElement.appendChild(document.createElement('br'));
        };
        
        consoleElement.innerHTML = '';
        print('Summary after ' + iterations + ' iteration(s):');
        print('Create and layout ' + elements + ' elements', time1 / iterations, min1, max1, median(times1));
        if (document.getElementById('t2').checked)
            print('Re-layout (test2) '+ elements + ' elements', time2 / iterations, min2, max2, median(times2));
        if (document.getElementById('t3').checked)
            print('Re-layout (test3) '+ elements + ' elements', time3 / iterations, min3, max3, median(times3));
        if (document.getElementById('t4').checked)
            print('Re-layout (test4) '+ elements + ' elements', time4 / iterations, min4, max4, median(times4));
    }

</script>
</html>

Attachment #98023
zoom perf test case	text/html	2011-06-21 11:32:21 PDT	1.95 KB	no flags	Details

<!DOCTYPE html>
<html>
<head>
    <title>layout zoom test</title>
    <style> 
        #test {
            width: 500px;
            background: skyblue;
            overflow: hidden;
        }
        #test > div {
            background: navy;
            height: 15px;
        }
    </style>
</head>
<body>
    <div id="test"></div>
    <div id="console"></div>
</body>
<script>
    var testElement = document.getElementById('test');
    var consoleElement = document.getElementById('console');

    var numberOfElements = 2500;

    function test(zoom)
    {
        testElement.innerHTML = '';
        testElement.style.height = numberOfElements * 15 + 'px';
        testElement.style.zoom = zoom + '%';

        var startTime = Date.now();
        
        for (var i = 0; i < numberOfElements; i++)
        {
            testElement.appendChild(document.createElement('div'));
        }

        var lastElementBottom = testElement.lastChild.getBoundingClientRect().bottom;
        var containerBottom = testElement.getBoundingClientRect().bottom;

        var endTime = Date.now();

        log('create/layout ' + numberOfElements + ' elements at zoom ' + zoom + '% in ' + (endTime - startTime) + 'ms.');

/*        
        if (Math.abs(lastElementBottom - containerBottom) < 0.01)
            log('PASS: With zoom of ' + zoom + '% bottom edge of last child lines up with bottom edge of container.');
        else
            log('FAIL: With zoom of ' + zoom + '% bottom edge of last child at ' + lastElementBottom + ', container at ' + containerBottom + '.');
*/
    }

    function log(str)
    {
        consoleElement.appendChild(document.createTextNode(str));
        consoleElement.appendChild(document.createElement('br'));
    }

    test(100);
    test(125);
    test(133);
    test(150);
    test(166);
    test(200);
    test(250);
    test(300);
    test(333);
    test(100);
    test(75);
    test(66);
    test(50);
    test(33);
    test(10);
    test(1);
</script>
</html>

Attachment #140063
Patch for landing	patch	2012-05-03 12:09:18 PDT	42.08 KB	no flags	Details

Attachment #141771
Patch. Minor ChangeLog cleanup.	patch	2012-05-14 12:45:44 PDT	3.08 KB	rniwa: commit-queue+	Details