Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<link rel='stylesheet' type='text/css' href='touch-action-tests.css'>
<script src='touch-action-tests.js'></script>
​
<!-- 
     Test a bunch of simple cases where touch-action: none results in a svg element. 
-->
<svg class='ta-none' expected-action='none' style="position:absolute; top:50px; left:0px; width:1000px; height:50px;" xmlns="http://www.w3.org/2000/svg">
    <g>
        <rect expected-action='none' x="10" y="0" width="1000" height="50" fill="blue"/>
        <text fill="white" text-anchor="middle" y="30" x="200">
            svg element with touch-action: none
        </text> 
    </g>
</svg>
​
<svg style="position:absolute; top:150px; left:0px; width:1000px; height:50px;" xmlns="http://www.w3.org/2000/svg">
    <g>
        <rect class='ta-none' expected-action='none' x="10" y="0" width="1000" height="50" fill="blue"/>
        <text fill="white" text-anchor="middle" y="30" x="200">
            rect element with touch-action: none
        </text>         
    </g>
</svg>
​
<svg style="position:absolute; top:250px; left:0px; width:1000px; height:50px;" xmlns="http://www.w3.org/2000/svg">
    <rect x="10" y="0" width="1000" height="50" fill="blue"> 
        <animate class='ta-none' expected-action='none' attributeType="XML" attributeName="x" from="-100" to="120" dur="10s" repeatCount="indefinite"/> 
    </rect> 
    <text fill="white" text-anchor="middle" y="30" x="200">
            animate element with touch-action: none
    </text> 
</svg>
​
<svg style="position:absolute; top:350px; left:0px; width:1000px; height:50px;" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> 
    <a class='ta-none' expected-action='none' xlink:href="https://developer.mozilla.org/en-US/docs/SVG"> 
        <rect x="10" y="0" width="1000" height="50" fill="blue"/> 
        <text fill="white" text-anchor="middle" y="30" x="200">
            a element with touch-action: none
        </text> 
    </a>
</svg>
​
<svg style="position:absolute; top:450px; left:0px; width:1000px; height:350px;" xmlns="http://www.w3.org/2000/svg">
    <path class='ta-none' expected-action='none' d="M 10 0 L 1000 0 L 1000 50 L 10 50 L 10 0 z" fill="blue" stroke="blue" stroke-width="5" />
    <text fill="white" text-anchor="middle" y="30" x="200">
        path element with touch-action: none
    </text>     
</svg>
​
 
/*
   Use a class to apply touch-action so that we can easily manually check
   the tests for consistent behavior on IE10 as well.
*/
.ta-none {
  -ms-touch-action: none;
  touch-action: none;
}
.ta-auto {
  -ms-touch-action: auto;
  touch-action: auto;
}
.ta-panx {
  -ms-touch-action: pan-x;
  touch-action: pan-x;
}
.ta-pany {
  -ms-touch-action: pan-y;
  touch-action: pan-y;
}
.ta-panxy {
  -ms-touch-action: pan-x pan-y;
  touch-action: pan-x pan-y;
}
​
/* Make it easy to visualize div boundaries */
[expected-action] {
  margin: 15px;
  padding: 10px;
  border: 1px solid blue;
  max-width: 700px;
}
​
[expected-action=none]::before {
  content: "NONE \2190 ";
}
[expected-action=auto]::before {
  content: "AUTO \2190 ";
}
[expected-action=pan-x]::before {
  content: "PAN-X \2190 ";
}
[expected-action=pan-y]::before {
  content: "PAN-Y \2190 ";
}
[expected-action=pan-x-y]::before {
  content: "PAN-X PAN-Y \2190 ";
}
​
body {
  /* Leave gap for test to scroll down */
  padding-top: 100px;
  /* Ensure pages are scrollable for manual testing */
  height: 2000px;
  /* Use fixed line height so co-ordinates will be similar in test and browser */
  font-size: 20px;
  white-space: nowrap;
}
​
.scroll {
  overflow: scroll;
  height: 50px;
}
.spacer {
  height: 500px;
}
​
.marker {
  position: absolute;
  opacity: 0.5;
  /* Note, if changing size, be sure to change kMarkerSize in JS too */
  width: 6px;
  height: 6px;
  background-color: red;
}
​
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
rbyerspro
0viewers