1 /* 2 Use a class to apply touch-action so that we can easily manually check 3 the tests for consistent behavior on IE10 as well. 4 */ 5 * /deep/ .ta-none { 6 -ms-touch-action: none; 7 touch-action: none; 8 } 9 .ta-auto { 10 -ms-touch-action: auto; 11 touch-action: auto; 12 } 13 .ta-panx { 14 -ms-touch-action: pan-x; 15 touch-action: pan-x; 16 } 17 .ta-pany { 18 -ms-touch-action: pan-y; 19 touch-action: pan-y; 20 } 21 .ta-panxy { 22 -ms-touch-action: pan-x pan-y; 23 touch-action: pan-x pan-y; 24 } 25 26 .ta-manipulation { 27 -ms-touch-action: manipulation; 28 touch-action: manipulation; 29 } 30 31 /* Make it easy to visualize div boundaries */ 32 [expected-action] { 33 margin: 15px; 34 padding: 10px; 35 border: 1px solid blue; 36 max-width: 700px; 37 } 38 39 [expected-action=none]::before { 40 content: "NONE \2190 "; 41 } 42 [expected-action=auto]::before { 43 content: "AUTO \2190 "; 44 } 45 [expected-action=pan-x]::before { 46 content: "PAN-X \2190 "; 47 } 48 [expected-action=pan-y]::before { 49 content: "PAN-Y \2190 "; 50 } 51 [expected-action=pan-x-y]::before { 52 content: "PAN-X PAN-Y \2190 "; 53 } 54 [expected-action=manipulation]::before { 55 content: "MANIPULATION \2190 "; 56 } 57 58 body { 59 /* Leave gap for test to scroll down */ 60 padding-top: 100px; 61 /* Ensure pages are scrollable for manual testing */ 62 height: 2000px; 63 /* Use fixed line height so co-ordinates will be similar in test and browser */ 64 font-size: 20px; 65 white-space: nowrap; 66 } 67 68 .scroll { 69 overflow: scroll; 70 height: 50px; 71 } 72 .spacer { 73 height: 500px; 74 } 75 76 .marker { 77 position: absolute; 78 opacity: 0.5; 79 /* Note, if changing size, be sure to change kMarkerSize in JS too */ 80 width: 6px; 81 height: 6px; 82 background-color: red; 83 } 84