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