<!DOCTYPE html>
<html>
<head>
    <script src="../resources/runner.js"></script>
    <script src="resources/utils.js"></script>
</head>
<body>
    <header id=info>CSS Variables: <button id=button></button></header>
</body>
    <script>
        const propCount = 1000;

        // Add ?ref to URL to run a similar test without CSS Variables.
        const ref = document.location.href.endsWith('?ref');

        button.textContent = ref ? 'OFF' : 'ON';
        button.addEventListener('click', function(){
            let href = document.location.href;
            if (ref) {
                document.location.href = href.substr(0, href.length - 4);
            } else {
                document.location.href = href + '?ref';
            }
        });

        function hexcolor(i) {
            let hex = i.toString(16);
            while (hex.length < 6)
                hex = '0' + hex;
            return '#' + hex;
        }

        // Create a rule which defines 'propCount' custom properties at :root.
        function createRootRule() {
            let lines = [':root {'];
            for (let i = 0; i < propCount; i++) {
                lines.push(`--prop-${i}: ${hexcolor(i)};`);
            }
            lines.push('}');
            return lines.join('\n');
        }

        // Create 'propCount' rules, each refering to a custom property created
        // by createRootRule.
        //
        // If 'ref' is true, then the colors that would have been resolved via
        // the var()-references are inlined instead.
        function createDivRules() {
            let lines = [];
            for (let i = 0; i < propCount; i++) {
                if (ref) {
                    lines.push(`div { background-color: ${hexcolor(i)}; }`);
                } else {
                    lines.push(`div { background-color: var(--prop-${i}); }`);
                }
            }
            return lines.join('\n');
        }

        applyCSSRule(createRootRule());
        applyCSSRule(createDivRules());
        createRegularDOMTree();

        PerfTestRunner.measureTime({
            description: 'Measures the performance of applying many var()-references.',
            run: function() {
                document.body.style = 'display: none';
                forceStyleRecalc(document.body);
                document.body.style = 'display: block';
                forceStyleRecalc(document.body);
            }
        });
    </script>
</html>