LayoutTests/webanimations/background-image-css-variable-no-transition.html - WebKit - Git at Google

 <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>
	<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>