<!DOCTYPE html>
<html>
<head>
    <script src="../resources/runner.js"></script>
    <script src="resources/utils.js"></script>
    <style>
    </style>
</head>
<body>
    <script>
        for (let i = 0; i < 5000; i++) {
            let div = document.createElement('div');
            div.style = 'color: red'; // Avoid matched properties cache.
            document.body.appendChild(div);
        }

        let props = [];
        let value = 2**32;
        for (let i = 0; i < 1000; i++) {
            props.push(`--property-with-long-name-and-value-${i}: ${value.toString(2)};`);
            // Use a unique value every time to avoid optimization that might
            // utilize identical values.
            value--;
        }

        applyCSSRule(`body { ${props.join('\n')} }`);
        applyCSSRule('body { --x: 0; --y: var(--x); }');

        PerfTestRunner.measureTime({
            description: 'Measure impact of unused custom properties at body.',
            run: function() {
                document.body.style = 'display: none';
                forceStyleRecalc(document.body);
                document.body.style = '';
                forceStyleRecalc(document.body);
            }
        });
    </script>
</body>
</html>