<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="resources/regions.css" type="text/css"></link>
        <script src="../resources/runner.js"></script>
        <script src="resources/regions.js"></script>
        <style type="text/css">
        #log {
            position: fixed;
        }
        </style>
    </head>
    <body>
        <pre id="log"></pre>
        <script>
            function performSelection(paragraphCount) {
                var paragraphs = document.getElementsByClassName("contentParagraph");
                var selection = getSelection();

                selection.collapse(paragraphs[0], 0);

                for (var i = 1; i < paragraphCount; i++)
                    selection.extend(paragraphs[i], 0);
            }

            function createRegionsSelectionTest(regionCount) {
                var article = createArticle(regionCount, 1);
                article.className = "articleInFlow";
                var regions = createRegions("600px", "auto", regionCount, "auto");
                document.body.appendChild(article);
                document.body.appendChild(regions);
                return {
                    description: "Testing selection with " + regionCount + " regions. Select text from first region to last one passing through all the regions.",
                    run: function() {
                        performSelection(regionCount);
                    },
                    setup: function() {
                        window.getSelection().removeAllRanges();
                    },
                    done: function() {
                        document.body.removeChild(article);
                        document.body.removeChild(regions);
                        templateParagraph = null;
                        templateRegion = null;
                    }
                };
            }

            PerfTestRunner.measureTime(createRegionsSelectionTest(100));
        </script>
    </body>
</html>