<!DOCTYPE HTML>
<html>
    <head>
        <link rel="match" href="hover-image-change-expected.html">
        <style id="style">
        #testDiv {
            height: 100px;
            background: var(--background);
        }

        .divhover {
            border: 1rem solid blue;
        }
        </style>
    </head>
    <body>
        <div id="testDiv">This is a test</div>
        <script src="/common/utils.js"></script>
        <script>
        if (window.testRunner)
            testRunner.waitUntilDone();

        style.sheet.insertRule('div { --background: url(/html/dom/elements/images/image.py?id='+ token() + '); }');

        window.onload = () => {
            testDiv.className = 'divhover';
            if (window.testRunner)
                testRunner.notifyDone();
        }
        </script>
    </body>
</html>