<commit_before><!DOCTYPE html>
<html>
<head>
    <style>
        html, body {
            height: 100%;
        }

        #aligner {
            height: 100%;
            display: flex;
        }

        .container {
            width: 20%;
            background: #FF9800;
            cursor: pointer;
            position: relative;
            border-right: 1px solid black;
            border-left: 1px solid black;
        }

        .container.elq-width-under-200 {
            height: 200px;
        }

        .container.elq-width-above-200 {
            height: 400px;
        }

        #dimensions {
            font-size: 3em;
            color: #FFF;
        }

        #dim-x, #dim-y {
            color: #263248;
        }

    </style>
</head>
<body>
    <button onclick="resize()">Resize</button>
    <div id="aligner">
    </div>


    <script src="../node_modules/jquery/dist/jquery.min.js"></script>
    <script src="../build/element-resize-detector.js"></script>
    <script>
        var alignerWidth = 100;

        function resize() {
            if(alignerWidth === 100) {
                alignerWidth = 50;
            } else {
                alignerWidth = 100;
            }

            $("#aligner").width(alignerWidth + "%");
        }

        $(function() {
            function onElementResize(element) {
                var style = getComputedStyle(element);
                console.log(style.width);
            }

            function createDiv(width) {
                var d = document.createElement("div");
                d.className = "container";
                d.style.width = width;
                return d;
            }

            function loopCreateAndAppend(numNested, create, target) {
                for(var i = 0; i < numNested; i++) {
                    var d = create();
                    target.appendChild(d);
                }

                return target;
            }

            var numElements = 100;
            loopCreateAndAppend(numElements, createDiv.bind(null, numElements), document.getElementById("aligner"));

            (function listenToResize() {
                var erd = elementResizeDetectorMaker({
                    strategy: "scroll"
                });
                console.time("install");
                erd.listenTo({
                    callOnAdd: false,
                    onReady: function onReady() {
                        console.timeEnd("install");
                        console.log("ready");<commit_msg>Added resize measurer in perf.html<commit_after><!DOCTYPE html>
<html>
<head>
    <style>
        html, body {
            height: 100%;
        }

        #aligner {
            height: 100%;
            display: flex;
        }

        .container {
            width: 20%;
            background: #FF9800;
            cursor: pointer;
            position: relative;
            border-right: 1px solid black;
            border-left: 1px solid black;
        }

        .container.elq-width-under-200 {
            height: 200px;
        }

        .container.elq-width-above-200 {
            height: 400px;
        }

        #dimensions {
            font-size: 3em;
            color: #FFF;
        }

        #dim-x, #dim-y {
            color: #263248;
        }

    </style>
</head>
<body>
    <button onclick="resize()">Resize</button>
    <div id="aligner">
    </div>


    <script src="../node_modules/jquery/dist/jquery.min.js"></script>
    <script src="../build/element-resize-detector.js"></script>
    <script>
        var alignerWidth = 100;
        var cnt = 0;

        function resize() {
            if(alignerWidth === 100) {
                alignerWidth = 50;
            } else {
                alignerWidth = 100;
            }

            $("#aligner").width(alignerWidth + "%");

            console.time("resize");
        }

        $(function() {
            function onElementResize(element) {
                var style = getComputedStyle(element);
                console.log(style.width);

                if(++cnt === numElements) {
                    cnt = 0;
                    console.timeEnd("resize");
                }
            }

            function createDiv(width) {
                var d = document.createElement("div");
                d.className = "container";
                d.style.width = width;
                return d;
            }

            function loopCreateAndAppend(numNested, create, target) {
                for(var i = 0; i < numNested; i++) {
                    var d = create();
                    target.appendChild(d);
                }

                return target;
            }

            var numElements = 500;
            loopCreateAndAppend(numElements, createDiv.bind(null, numElements), document.getElementById("aligner"));

            (function listenToResize() {
                var erd = elementResizeDetectorMaker({
                    strategy: "object"
                });
                console.time("install");
                erd.listenTo({
                    callOnAdd: false,
                    onReady: function onReady() {
                        console.timeEnd("install");
                        console.log("ready");
{'fraction_non_alphanumeric': 0.1169078446306169, 'fraction_numerical': 0.018659558263518658, 'mean_word_length': 1.2089991589571067, 'pattern_counts': {'":': 0, '<': 37, '<?xml version=': 0, '>': 35, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '6156055', 'n_tokens_mistral': 1501, 'n_tokens_neox': 1330, 'n_words': 270}