-
Notifications
You must be signed in to change notification settings - Fork 0
/
input_types.html
93 lines (85 loc) · 3.17 KB
/
input_types.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
<!DOCTYPE html>
<html onpointermove="onpointermovehandler(event);">
<head>INKING DEMO.
<meta charset="UTF-8">
<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Expires" content="0" />
<style>
.divstyle {
height: 50px;
width: 200px;
border: 1px solid red;
}
</style>
<script>
function onpointermovehandler(event) {
var pageX = Math.round(event.pageX);
var pageY = Math.round(event.pageY);
document.getElementById("x").innerHTML = pageX;
document.getElementById("y").innerHTML = pageY;
}
// Hang for "hangTime" after every "hangInterval"
var hangTime = 0;
var hangInterval = 500;
var g_intervalHandle;
function stopHangs() {
clearInterval(g_intervalHandle);
}
function hang() {
var now = (new Date()).getTime();
for (;;) {
if((new Date()).getTime() - now > hangTime) {
break;
}
}
}
function startIntermittentHangs() {
if(hangTime == 0)
return;
g_intervalHandle = setInterval(hang, hangInterval);
}
function updateJank() {
stopHangs();
var step_value = 100;
hangTime = document.getElementById("slider").value * step_value;
document.getElementById("hangmsg").innerHTML = hangTime;
startIntermittentHangs();
}
// Main thread animation for reference.
var rotate_deg = 0;
function rotateImage() {
var r = document.getElementById('rotatorJS');
r.style.transform = 'rotate('+((rotate_deg++)%360)+'deg)';
window.requestAnimationFrame(rotateImage);
}
function onloadhandler() {
stopHangs();
window.requestAnimationFrame(rotateImage);
document.getElementById("hangint").innerHTML = hangInterval;
}
</script>
</head>
<body onload="onloadhandler()">
<br /><br />
Pointer co-ordinates: (<span id="x">0</span>, <span id="y">0</span>)<br /><br />
Hang the main thread for <span id="hangmsg">0</span> ms every <span id="hangint">0</span> ms.<br />
<input type="range" min="0" step="1" max="10" value="0" id="slider" oninput="updateJank()"><br /><br />
Main JS thread animation (mostly exists so that you can visually see the jank).<br />
<div id="rotatorJS" style="height:100px;width:100px;border: 5px solid;" onclick="rotateImage()"></div>
<br /><br />
textarea<br />
<textarea rows="4" cols="50"></textarea><br /><br />
textarea (handwriting="false")<br />
<textarea handwriting="false" rows="4" cols="50"></textarea><br /><br />
contenteditable<br />
<div contenteditable="true" class="divstyle">
</div><br />
<span>Input type text: </span><input type="text">
<br /><br /><span>Input type email: </span><input type="email">
<br /><br /><span>Input type search: </span><input type="search">
<br /><br /><span>Input type tel: </span><input type="tel">
<br /><br /><span>Input type url: </span><input type="url">
<div style="width: 1000vw; height: 1000vh;"></div>
</body>
</html>