Implement touch-action pan-x/pan-y handling on the main thread

Source/web/tests/data/touch-action-tests.css

 /*
    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;
 }