large-grid.html | Explore in Territory

<!DOCTYPE html>
<html>

<head>
    <script src="../resources/runner.js"></script>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<style>
html, body { height: 100% }
ui-pane#main {
    contain: strict;
    min-width: 100% !important;
    width: 100% !important;
    max-width: 100% !important;
    min-height: 100% !important;
    height: 100% !important;
    max-height: 100% !important;
    overflow: hidden
}


[row1] {
    grid-row-start: 1;
    grid-row-end: auto
}

[row2] {
    grid-row-start: 2;
    grid-row-end: auto
}


[col2] {
    grid-column-start: 2;
    grid-column-end: auto
}

ui-pane {
    display: grid;
    height: 100%;
    contain: content
}

[hgrid] {
    grid-template-rows: 1fr
}

[vgrid] {
    grid-template-columns: 1fr
}

ui-icon {
    display: inline-block;
}

[collapsed ] { display: none; }

.eventChildrenWrap {
    grid-column: 1/span 3;
    contain: content
}

.eventChildrenContainer {
    display: grid;
    grid-template-columns: 3em 0px 1fr;
    contain: content;
}

.actionBlockWrap {
    grid-column: 3;
    align-self: start;
    contain: layout style;
    position: relative
}

.actionBlock {
    display: grid;
    grid-template-columns: 1fr;
    overflow: hidden;
    contain: content
}

</style>

</head>

<body>
    <pre id="log"></pre>

    <ui-pane id="main" vgrid="" style="grid-template-rows: 1fr;">
        <ui-pane id="middle" row1="" hgrid="" style="grid-template-columns: 320px 1fr 300px;">
            <ui-pane col2="">
                <ui-body row2="">
                    <ui-pane class="eventSheetViewPane">
                        <ui-body row2="" class="eventSheetView">
                                <div id="thisistheone" class="eventChildrenWrap">
                                    <div class="eventChildrenContainer">
                                        <div class="actionBlockWrap">
                                            <div class="actionBlock" id="inserthere">
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </ui-body>
                    </ui-pane>
                </ui-body>
            </ui-pane>

        </ui-pane>
    </ui-pane>


    <script>
        var target = document.getElementById('thisistheone');

        function setup() {
          let insert = document.getElementById('inserthere');
          for (let i = 0; i < 2750; ++i) {
            let name = document.createElement('div');
            name.className = 'actionNameCell';
            name.innerHTML = '<ui-icon style="width: 20px; height: 20px; "></ui-icon><span class="actionObjectNameSpan">Button</span>';
            let desc = document.createElement('div');
            desc.className = 'actionDescCell';
            desc.innerHTML = 'Set position to <event-parameter data-index="0"> <ui-icon class="objectParameterIcon" style="width: 20px; height: 20px; "></ui-icon><span class="objectParameterObjectName">Sprite</span> </event-parameter> <em>(image point <event-parameter data-index="1">3213213</event-parameter>)</em>';
            insert.appendChild(name);
            insert.appendChild(desc);
          }
        }

        function test() {
            target.setAttribute('collapsed', '');
            PerfTestRunner.forceLayout();
            target.removeAttribute('collapsed');
            PerfTestRunner.forceLayout();
        }

        setup();
        PerfTestRunner.measureRunsPerSecond({
            description: "Measures performance of laying out a large grid.",
            run: test
        });
    </script>
</body>

</html>
chromium/third_party/blink/perf_tests/layout/large-grid.html
