<html>
<head>
<title>UseCounter Features Test</title>
<style>
div {
animation-duration: 3s;
animation-name: test;
}
@keyframes test {
from {
margin-left: 100%;
width: 300%;
}
to {
margin-left: 0%;
width: 100%;
}
}
</style>
</head>
<body>
<div id="div">This is a div</div>
<link href="data:text/css,#foo { color: red; }" rel="stylesheet">
<p id="para" style="font-size:50px; font-family:serif;">TEST</p>
<div id="fullscreen">This is a div</div>
<script type="text/javascript">
for (var i = 0; i < 3; i++) {
document.getElementById("div").animate([
{ transform: 'translateY(0px)' },
{ transform: 'translateY(-300px)' }
]);
document.getElementById("para").firstChild.wholeText;
navigator.vibrate(10);
}
// Try to access fullscreen feature. This should trigger a permissions policy
// violation.
document.getElementById('fullscreen').requestFullscreen()
.then(() => console.error("Fullscreen should not be allowed in this document"))
.catch(e => console.error(e));
</script>
<img src="http://example.test"/>
<audio controls><source src="http://example.test" type="audio/mpeg"></audio>
<video controls id="testvideo"><source src="http://example.test" type="video/mp4"></video>
</body>
</html>