| OLD | NEW |
| (Empty) |
| 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 } | |
| OLD | NEW |