mirror of
https://github.com/servo/servo
synced 2026-04-29 02:47:55 +02:00
69 lines
2.1 KiB
HTML
69 lines
2.1 KiB
HTML
<!doctype html>
|
|
<html>
|
|
<head>
|
|
<title>Dragover repeating</title>
|
|
<style type="text/css">
|
|
div:first-child {
|
|
height: 100px;
|
|
width: 100px;
|
|
background: orange;
|
|
display: inline-block;
|
|
}
|
|
div:first-child + div {
|
|
height: 100px;
|
|
width: 100px;
|
|
background: blue;
|
|
display: inline-block;
|
|
}
|
|
</style>
|
|
<script type="text/javascript">
|
|
window.onload = function () {
|
|
var numsecs = 5, maxpolltime = 0.550, minpolltime = 0.150;
|
|
var blue = document.getElementsByTagName('div')[1], p = document.getElementsByTagName('p')[0];
|
|
var numfired = 0, readytocount = false;
|
|
document.getElementsByTagName('div')[0].ondragstart = function (e) {
|
|
e.dataTransfer.effectAllowed = 'all';
|
|
e.dataTransfer.setData('text','dummy text');
|
|
};
|
|
blue.ondrop = function (e) {
|
|
e.preventDefault();
|
|
};
|
|
blue.ondragover = function (e) {
|
|
e.preventDefault();
|
|
if( readytocount ) { numfired++; }
|
|
};
|
|
blue.ondragenter = function (e) {
|
|
e.preventDefault();
|
|
p.innerHTML = 'Keep the mouse perfectly still...';
|
|
//give the tester a second to get ready
|
|
setTimeout(function () {
|
|
readytocount = true;
|
|
numfired = 0;
|
|
p.innerHTML = 'Keep the mouse perfectly still for '+numsecs+' seconds';
|
|
var countsecs = numsecs;
|
|
var intr = setInterval(function () {
|
|
countsecs--;
|
|
if( countsecs ) {
|
|
p.innerHTML = 'Keep the mouse perfectly still for '+countsecs+' seconds';
|
|
} else {
|
|
clearInterval(intr);
|
|
var passed = numfired >= Math.floor( numsecs / maxpolltime ) && numfired <= Math.floor( numsecs / minpolltime );
|
|
document.getElementsByTagName('p')[0].innerHTML = ( passed ? 'PASS' : 'FAIL' ) +
|
|
'<br><br>(Fired ' + numfired + ' times in ' + numsecs + ' seconds, must be between ' +
|
|
Math.floor( numsecs / maxpolltime ) + ' and ' + Math.floor( numsecs / minpolltime ) + ')<br>You can release the drag now';
|
|
}
|
|
},1000);
|
|
},1000);
|
|
};
|
|
};
|
|
</script>
|
|
</head>
|
|
<body>
|
|
|
|
<div draggable="true"></div>
|
|
<div></div>
|
|
<p>Drag the orange square over the blue square, then keep the mouse perfectly still until the result appears.</p>
|
|
<noscript><p>Enable JavaScript and reload</p></noscript>
|
|
|
|
</body>
|
|
</html> |