40 lines
1.1 KiB
HTML
40 lines
1.1 KiB
HTML
<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>
|