Add a demo for passive touch listeners.
[WebKit-https.git] / Websites / webkit.org / demos / passive-touches / index.html
1 <meta name="viewport" content="initial-scale=1.0">
2 <style>
3     body {
4         background-color: #999;
5         padding: 0;
6         margin: 0;
7     }
8     
9     p {
10         padding: 0;
11         margin: 0;
12     }
13     
14     svg {
15         width: 100vw;
16         height: 200px;
17     }
18     
19     circle {
20         fill: none;
21         stroke: #333;
22         stroke-width: 8px;
23     }
24
25     circle.main {
26         fill: none;
27         stroke-width: 3px;
28     }
29
30     text {
31         fill: #333;
32         font-family: -apple-system;
33         font-size: 52px;
34         text-anchor: middle;
35     }
36 </style>
37 <script>
38     let ctx = null;
39     function spin()
40     {
41         var endTime = Date.now() + 750;
42
43         while (true) {
44             var foo = document.cookies;
45
46             var currentTime = Date.now();
47             if (currentTime > endTime)
48                 break;
49         }
50     }
51
52     function doSetup()
53     {
54         let circles = document.querySelectorAll("circle:first-of-type");
55         for (let i=0; i < circles.length; i++) {
56             let circle = circles[i];
57             circle.style.fill = `rgb(${Math.floor(255 - (i / circles.length * 240))}, 80, ${Math.floor((i / circles.length * 220))})`;
58         }
59         window.addEventListener("touchmove", function(e) {
60             spin();
61         }, false);
62     }
63
64     window.addEventListener("load", doSetup, false);
65 </script>
66 <p>
67     <svg viewBox="0 0 100 100">
68         <circle class="main" cx="50" cy="50" r="45"/>
69         <circle cx="50" cy="50" r="38"/>
70         <text x="50" y="64">a</text>
71     </svg>
72 </p>
73 <p>
74     <svg viewBox="0 0 100 100">
75         <circle class="main" cx="50" cy="50" r="45"/>
76         <circle cx="50" cy="50" r="38"/>
77         <text x="50" y="64">b</text>
78     </svg>
79 </p>
80 <p>
81     <svg viewBox="0 0 100 100">
82         <circle class="main" cx="50" cy="50" r="45"/>
83         <circle cx="50" cy="50" r="38"/>
84         <text x="50" y="64">c</text>
85     </svg>
86 </p>
87 <p>
88     <svg viewBox="0 0 100 100">
89         <circle class="main" cx="50" cy="50" r="45"/>
90         <circle cx="50" cy="50" r="38"/>
91         <text x="50" y="64">d</text>
92     </svg>
93 </p>
94 <p>
95     <svg viewBox="0 0 100 100">
96         <circle class="main" cx="50" cy="50" r="45"/>
97         <circle cx="50" cy="50" r="38"/>
98         <text x="50" y="64">e</text>
99     </svg>
100 </p>
101 <p>
102     <svg viewBox="0 0 100 100">
103         <circle class="main" cx="50" cy="50" r="45"/>
104         <circle cx="50" cy="50" r="38"/>
105         <text x="50" y="64">f</text>
106     </svg>
107 </p>
108 <p>
109     <svg viewBox="0 0 100 100">
110         <circle class="main" cx="50" cy="50" r="45"/>
111         <circle cx="50" cy="50" r="38"/>
112         <text x="50" y="64">g</text>
113     </svg>
114 </p>
115 <p>
116     <svg viewBox="0 0 100 100">
117         <circle class="main" cx="50" cy="50" r="45"/>
118         <circle cx="50" cy="50" r="38"/>
119         <text x="50" y="64">h</text>
120     </svg>
121 </p>
122 <p>
123     <svg viewBox="0 0 100 100">
124         <circle class="main" cx="50" cy="50" r="45"/>
125         <circle cx="50" cy="50" r="38"/>
126         <text x="50" y="64">i</text>
127     </svg>
128 </p>
129 <p>
130     <svg viewBox="0 0 100 100">
131         <circle class="main" cx="50" cy="50" r="45"/>
132         <circle cx="50" cy="50" r="38"/>
133         <text x="50" y="64">j</text>
134     </svg>
135 </p>
136 <p>
137     <svg viewBox="0 0 100 100">
138         <circle class="main" cx="50" cy="50" r="45"/>
139         <circle cx="50" cy="50" r="38"/>
140         <text x="50" y="64">k</text>
141     </svg>
142 </p>
143 <p>
144     <svg viewBox="0 0 100 100">
145         <circle class="main" cx="50" cy="50" r="45"/>
146         <circle cx="50" cy="50" r="38"/>
147         <text x="50" y="64">l</text>
148     </svg>
149 </p>
150 <p>
151     <svg viewBox="0 0 100 100">
152         <circle class="main" cx="50" cy="50" r="45"/>
153         <circle cx="50" cy="50" r="38"/>
154         <text x="50" y="64">m</text>
155     </svg>
156 </p>
157 <p>
158     <svg viewBox="0 0 100 100">
159         <circle class="main" cx="50" cy="50" r="45"/>
160         <circle cx="50" cy="50" r="38"/>
161         <text x="50" y="64">n</text>
162     </svg>
163 </p>
164 <p>
165     <svg viewBox="0 0 100 100">
166         <circle class="main" cx="50" cy="50" r="45"/>
167         <circle cx="50" cy="50" r="38"/>
168         <text x="50" y="64">o</text>
169     </svg>
170 </p>
171 <p>
172     <svg viewBox="0 0 100 100">
173         <circle class="main" cx="50" cy="50" r="45"/>
174         <circle cx="50" cy="50" r="38"/>
175         <text x="50" y="64">p</text>
176     </svg>
177 </p>
178 <p>
179     <svg viewBox="0 0 100 100">
180         <circle class="main" cx="50" cy="50" r="45"/>
181         <circle cx="50" cy="50" r="38"/>
182         <text x="50" y="64">q</text>
183     </svg>
184 </p>
185 <p>
186     <svg viewBox="0 0 100 100">
187         <circle class="main" cx="50" cy="50" r="45"/>
188         <circle cx="50" cy="50" r="38"/>
189         <text x="50" y="64">r</text>
190     </svg>
191 </p>
192 <p>
193     <svg viewBox="0 0 100 100">
194         <circle class="main" cx="50" cy="50" r="45"/>
195         <circle cx="50" cy="50" r="38"/>
196         <text x="50" y="64">s</text>
197     </svg>
198 </p>
199 <p>
200     <svg viewBox="0 0 100 100">
201         <circle class="main" cx="50" cy="50" r="45"/>
202         <circle cx="50" cy="50" r="38"/>
203         <text x="50" y="64">t</text>
204     </svg>
205 </p>
206 <p>
207     <svg viewBox="0 0 100 100">
208         <circle class="main" cx="50" cy="50" r="45"/>
209         <circle cx="50" cy="50" r="38"/>
210         <text x="50" y="64">u</text>
211     </svg>
212 </p>
213 <p>
214     <svg viewBox="0 0 100 100">
215         <circle class="main" cx="50" cy="50" r="45"/>
216         <circle cx="50" cy="50" r="38"/>
217         <text x="50" y="64">v</text>
218     </svg>
219 </p>
220 <p>
221     <svg viewBox="0 0 100 100">
222         <circle class="main" cx="50" cy="50" r="45"/>
223         <circle cx="50" cy="50" r="38"/>
224         <text x="50" y="64">w</text>
225     </svg>
226 </p>
227 <p>
228     <svg viewBox="0 0 100 100">
229         <circle class="main" cx="50" cy="50" r="45"/>
230         <circle cx="50" cy="50" r="38"/>
231         <text x="50" y="64">x</text>
232     </svg>
233 </p>
234 <p>
235     <svg viewBox="0 0 100 100">
236         <circle class="main" cx="50" cy="50" r="45"/>
237         <circle cx="50" cy="50" r="38"/>
238         <text x="50" y="64">y</text>
239     </svg>
240 </p>
241 <p>
242     <svg viewBox="0 0 100 100">
243         <circle class="main" cx="50" cy="50" r="45"/>
244         <circle cx="50" cy="50" r="38"/>
245         <text x="50" y="64">z</text>
246     </svg>
247 </p>