<html>
<head>
<style>

    :root {
        --checkbox-icon: url("data:image/svg+xml,%3Csvg width='29' height='20' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M27.707.293a.997.997 0 0 0-1.414 0L9 17.586l-7.293-7.293a1 1 0 0 0-1.414 1.414l8 8a.997.997 0 0 0 1.414 0l18-18a.997.997 0 0 0 0-1.414z' fill='black'/%3E%3C/svg%3E");
    }

    .box {
        position: absolute;
        height: 100px;
        width: 100px;
        background-repeat: no-repeat;
        background-position: center;
        background-size: 90%;
        background-image: var(--checkbox-icon);
        transition: 2s linear;
    }

    body.changed .box {
        visibility: visible;
    }

</style>
<script src="../resources/js-test.js"></script>
</head>
<body>
    <div class="box"></div>
    <script>
        const numberOfAnimationsBeforeStyleChange = document.getAnimations().length;
        shouldBe("numberOfAnimationsBeforeStyleChange", "0");

        document.body.classList.add('changed');

        const numberOfAnimationsAfterStyleChange = document.getAnimations().length;
        shouldBe("numberOfAnimationsAfterStyleChange", "0");
    </script>
</body>
</html>