Add a demo for passive touch listeners.
authordino@apple.com <dino@apple.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Fri, 1 Jun 2018 18:55:45 +0000 (18:55 +0000)
committerdino@apple.com <dino@apple.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Fri, 1 Jun 2018 18:55:45 +0000 (18:55 +0000)
* demos/passive-touches/index.html: Added.

git-svn-id: https://svn.webkit.org/repository/webkit/trunk@232402 268f45cc-cd09-0410-ab3c-d52691b4dbfc

Websites/webkit.org/ChangeLog
Websites/webkit.org/demos/passive-touches/index.html [new file with mode: 0644]

index 45866b0..3591736 100644 (file)
@@ -1,3 +1,9 @@
+2018-06-01  Dean Jackson  <dino@apple.com>
+
+        Add a demo for passive touch listeners.
+
+        * demos/passive-touches/index.html: Added.
+
 2018-05-23  Roy Reapor  <rreapor@apple.com>
 
         Remove Source Sans Pro from WebKit website
diff --git a/Websites/webkit.org/demos/passive-touches/index.html b/Websites/webkit.org/demos/passive-touches/index.html
new file mode 100644 (file)
index 0000000..f1eb9b4
--- /dev/null
@@ -0,0 +1,247 @@
+<meta name="viewport" content="initial-scale=1.0">
+<style>
+    body {
+        background-color: #999;
+        padding: 0;
+        margin: 0;
+    }
+    
+    p {
+        padding: 0;
+        margin: 0;
+    }
+    
+    svg {
+        width: 100vw;
+        height: 200px;
+    }
+    
+    circle {
+        fill: none;
+        stroke: #333;
+        stroke-width: 8px;
+    }
+
+    circle.main {
+        fill: none;
+        stroke-width: 3px;
+    }
+
+    text {
+        fill: #333;
+        font-family: -apple-system;
+        font-size: 52px;
+        text-anchor: middle;
+    }
+</style>
+<script>
+    let ctx = null;
+    function spin()
+    {
+        var endTime = Date.now() + 750;
+
+        while (true) {
+            var foo = document.cookies;
+
+            var currentTime = Date.now();
+            if (currentTime > endTime)
+                break;
+        }
+    }
+
+    function doSetup()
+    {
+        let circles = document.querySelectorAll("circle:first-of-type");
+        for (let i=0; i < circles.length; i++) {
+            let circle = circles[i];
+            circle.style.fill = `rgb(${Math.floor(255 - (i / circles.length * 240))}, 80, ${Math.floor((i / circles.length * 220))})`;
+        }
+        window.addEventListener("touchmove", function(e) {
+            spin();
+        }, false);
+    }
+
+    window.addEventListener("load", doSetup, false);
+</script>
+<p>
+    <svg viewBox="0 0 100 100">
+        <circle class="main" cx="50" cy="50" r="45"/>
+        <circle cx="50" cy="50" r="38"/>
+        <text x="50" y="64">a</text>
+    </svg>
+</p>
+<p>
+    <svg viewBox="0 0 100 100">
+        <circle class="main" cx="50" cy="50" r="45"/>
+        <circle cx="50" cy="50" r="38"/>
+        <text x="50" y="64">b</text>
+    </svg>
+</p>
+<p>
+    <svg viewBox="0 0 100 100">
+        <circle class="main" cx="50" cy="50" r="45"/>
+        <circle cx="50" cy="50" r="38"/>
+        <text x="50" y="64">c</text>
+    </svg>
+</p>
+<p>
+    <svg viewBox="0 0 100 100">
+        <circle class="main" cx="50" cy="50" r="45"/>
+        <circle cx="50" cy="50" r="38"/>
+        <text x="50" y="64">d</text>
+    </svg>
+</p>
+<p>
+    <svg viewBox="0 0 100 100">
+        <circle class="main" cx="50" cy="50" r="45"/>
+        <circle cx="50" cy="50" r="38"/>
+        <text x="50" y="64">e</text>
+    </svg>
+</p>
+<p>
+    <svg viewBox="0 0 100 100">
+        <circle class="main" cx="50" cy="50" r="45"/>
+        <circle cx="50" cy="50" r="38"/>
+        <text x="50" y="64">f</text>
+    </svg>
+</p>
+<p>
+    <svg viewBox="0 0 100 100">
+        <circle class="main" cx="50" cy="50" r="45"/>
+        <circle cx="50" cy="50" r="38"/>
+        <text x="50" y="64">g</text>
+    </svg>
+</p>
+<p>
+    <svg viewBox="0 0 100 100">
+        <circle class="main" cx="50" cy="50" r="45"/>
+        <circle cx="50" cy="50" r="38"/>
+        <text x="50" y="64">h</text>
+    </svg>
+</p>
+<p>
+    <svg viewBox="0 0 100 100">
+        <circle class="main" cx="50" cy="50" r="45"/>
+        <circle cx="50" cy="50" r="38"/>
+        <text x="50" y="64">i</text>
+    </svg>
+</p>
+<p>
+    <svg viewBox="0 0 100 100">
+        <circle class="main" cx="50" cy="50" r="45"/>
+        <circle cx="50" cy="50" r="38"/>
+        <text x="50" y="64">j</text>
+    </svg>
+</p>
+<p>
+    <svg viewBox="0 0 100 100">
+        <circle class="main" cx="50" cy="50" r="45"/>
+        <circle cx="50" cy="50" r="38"/>
+        <text x="50" y="64">k</text>
+    </svg>
+</p>
+<p>
+    <svg viewBox="0 0 100 100">
+        <circle class="main" cx="50" cy="50" r="45"/>
+        <circle cx="50" cy="50" r="38"/>
+        <text x="50" y="64">l</text>
+    </svg>
+</p>
+<p>
+    <svg viewBox="0 0 100 100">
+        <circle class="main" cx="50" cy="50" r="45"/>
+        <circle cx="50" cy="50" r="38"/>
+        <text x="50" y="64">m</text>
+    </svg>
+</p>
+<p>
+    <svg viewBox="0 0 100 100">
+        <circle class="main" cx="50" cy="50" r="45"/>
+        <circle cx="50" cy="50" r="38"/>
+        <text x="50" y="64">n</text>
+    </svg>
+</p>
+<p>
+    <svg viewBox="0 0 100 100">
+        <circle class="main" cx="50" cy="50" r="45"/>
+        <circle cx="50" cy="50" r="38"/>
+        <text x="50" y="64">o</text>
+    </svg>
+</p>
+<p>
+    <svg viewBox="0 0 100 100">
+        <circle class="main" cx="50" cy="50" r="45"/>
+        <circle cx="50" cy="50" r="38"/>
+        <text x="50" y="64">p</text>
+    </svg>
+</p>
+<p>
+    <svg viewBox="0 0 100 100">
+        <circle class="main" cx="50" cy="50" r="45"/>
+        <circle cx="50" cy="50" r="38"/>
+        <text x="50" y="64">q</text>
+    </svg>
+</p>
+<p>
+    <svg viewBox="0 0 100 100">
+        <circle class="main" cx="50" cy="50" r="45"/>
+        <circle cx="50" cy="50" r="38"/>
+        <text x="50" y="64">r</text>
+    </svg>
+</p>
+<p>
+    <svg viewBox="0 0 100 100">
+        <circle class="main" cx="50" cy="50" r="45"/>
+        <circle cx="50" cy="50" r="38"/>
+        <text x="50" y="64">s</text>
+    </svg>
+</p>
+<p>
+    <svg viewBox="0 0 100 100">
+        <circle class="main" cx="50" cy="50" r="45"/>
+        <circle cx="50" cy="50" r="38"/>
+        <text x="50" y="64">t</text>
+    </svg>
+</p>
+<p>
+    <svg viewBox="0 0 100 100">
+        <circle class="main" cx="50" cy="50" r="45"/>
+        <circle cx="50" cy="50" r="38"/>
+        <text x="50" y="64">u</text>
+    </svg>
+</p>
+<p>
+    <svg viewBox="0 0 100 100">
+        <circle class="main" cx="50" cy="50" r="45"/>
+        <circle cx="50" cy="50" r="38"/>
+        <text x="50" y="64">v</text>
+    </svg>
+</p>
+<p>
+    <svg viewBox="0 0 100 100">
+        <circle class="main" cx="50" cy="50" r="45"/>
+        <circle cx="50" cy="50" r="38"/>
+        <text x="50" y="64">w</text>
+    </svg>
+</p>
+<p>
+    <svg viewBox="0 0 100 100">
+        <circle class="main" cx="50" cy="50" r="45"/>
+        <circle cx="50" cy="50" r="38"/>
+        <text x="50" y="64">x</text>
+    </svg>
+</p>
+<p>
+    <svg viewBox="0 0 100 100">
+        <circle class="main" cx="50" cy="50" r="45"/>
+        <circle cx="50" cy="50" r="38"/>
+        <text x="50" y="64">y</text>
+    </svg>
+</p>
+<p>
+    <svg viewBox="0 0 100 100">
+        <circle class="main" cx="50" cy="50" r="45"/>
+        <circle cx="50" cy="50" r="38"/>
+        <text x="50" y="64">z</text>
+    </svg>
+</p>