1a854de003a23bf3c7f95ec0f8154ada64092ff5cTorne (Richard Coles)/* 2a854de003a23bf3c7f95ec0f8154ada64092ff5cTorne (Richard Coles) Use a class to apply touch-action so that we can easily manually check 3a854de003a23bf3c7f95ec0f8154ada64092ff5cTorne (Richard Coles) the tests for consistent behavior on IE10 as well. 4a854de003a23bf3c7f95ec0f8154ada64092ff5cTorne (Richard Coles)*/ 507a852d8c1953036774d8f3b65d18dcfea3bb4a2Ben Murdoch* /deep/ .ta-none { 6a854de003a23bf3c7f95ec0f8154ada64092ff5cTorne (Richard Coles) -ms-touch-action: none; 7a854de003a23bf3c7f95ec0f8154ada64092ff5cTorne (Richard Coles) touch-action: none; 8a854de003a23bf3c7f95ec0f8154ada64092ff5cTorne (Richard Coles)} 9a854de003a23bf3c7f95ec0f8154ada64092ff5cTorne (Richard Coles).ta-auto { 10a854de003a23bf3c7f95ec0f8154ada64092ff5cTorne (Richard Coles) -ms-touch-action: auto; 11a854de003a23bf3c7f95ec0f8154ada64092ff5cTorne (Richard Coles) touch-action: auto; 12a854de003a23bf3c7f95ec0f8154ada64092ff5cTorne (Richard Coles)} 1309380295ba73501a205346becac22c6978e4671dTorne (Richard Coles).ta-panx { 1409380295ba73501a205346becac22c6978e4671dTorne (Richard Coles) -ms-touch-action: pan-x; 1509380295ba73501a205346becac22c6978e4671dTorne (Richard Coles) touch-action: pan-x; 1609380295ba73501a205346becac22c6978e4671dTorne (Richard Coles)} 1709380295ba73501a205346becac22c6978e4671dTorne (Richard Coles).ta-pany { 1809380295ba73501a205346becac22c6978e4671dTorne (Richard Coles) -ms-touch-action: pan-y; 1909380295ba73501a205346becac22c6978e4671dTorne (Richard Coles) touch-action: pan-y; 2009380295ba73501a205346becac22c6978e4671dTorne (Richard Coles)} 2109380295ba73501a205346becac22c6978e4671dTorne (Richard Coles).ta-panxy { 2209380295ba73501a205346becac22c6978e4671dTorne (Richard Coles) -ms-touch-action: pan-x pan-y; 2309380295ba73501a205346becac22c6978e4671dTorne (Richard Coles) touch-action: pan-x pan-y; 2409380295ba73501a205346becac22c6978e4671dTorne (Richard Coles)} 25a854de003a23bf3c7f95ec0f8154ada64092ff5cTorne (Richard Coles) 26d5428f32f5d1719f774f62e19147104ca245a3abTorne (Richard Coles).ta-manipulation { 27d5428f32f5d1719f774f62e19147104ca245a3abTorne (Richard Coles) -ms-touch-action: manipulation; 28d5428f32f5d1719f774f62e19147104ca245a3abTorne (Richard Coles) touch-action: manipulation; 29d5428f32f5d1719f774f62e19147104ca245a3abTorne (Richard Coles)} 30d5428f32f5d1719f774f62e19147104ca245a3abTorne (Richard Coles) 31a854de003a23bf3c7f95ec0f8154ada64092ff5cTorne (Richard Coles)/* Make it easy to visualize div boundaries */ 32a854de003a23bf3c7f95ec0f8154ada64092ff5cTorne (Richard Coles)[expected-action] { 33a854de003a23bf3c7f95ec0f8154ada64092ff5cTorne (Richard Coles) margin: 15px; 34a854de003a23bf3c7f95ec0f8154ada64092ff5cTorne (Richard Coles) padding: 10px; 35a854de003a23bf3c7f95ec0f8154ada64092ff5cTorne (Richard Coles) border: 1px solid blue; 36a854de003a23bf3c7f95ec0f8154ada64092ff5cTorne (Richard Coles) max-width: 700px; 37a854de003a23bf3c7f95ec0f8154ada64092ff5cTorne (Richard Coles)} 38a854de003a23bf3c7f95ec0f8154ada64092ff5cTorne (Richard Coles) 39a854de003a23bf3c7f95ec0f8154ada64092ff5cTorne (Richard Coles)[expected-action=none]::before { 40a854de003a23bf3c7f95ec0f8154ada64092ff5cTorne (Richard Coles) content: "NONE \2190 "; 41a854de003a23bf3c7f95ec0f8154ada64092ff5cTorne (Richard Coles)} 42a854de003a23bf3c7f95ec0f8154ada64092ff5cTorne (Richard Coles)[expected-action=auto]::before { 43a854de003a23bf3c7f95ec0f8154ada64092ff5cTorne (Richard Coles) content: "AUTO \2190 "; 44a854de003a23bf3c7f95ec0f8154ada64092ff5cTorne (Richard Coles)} 4509380295ba73501a205346becac22c6978e4671dTorne (Richard Coles)[expected-action=pan-x]::before { 4609380295ba73501a205346becac22c6978e4671dTorne (Richard Coles) content: "PAN-X \2190 "; 4709380295ba73501a205346becac22c6978e4671dTorne (Richard Coles)} 4809380295ba73501a205346becac22c6978e4671dTorne (Richard Coles)[expected-action=pan-y]::before { 4909380295ba73501a205346becac22c6978e4671dTorne (Richard Coles) content: "PAN-Y \2190 "; 5009380295ba73501a205346becac22c6978e4671dTorne (Richard Coles)} 5109380295ba73501a205346becac22c6978e4671dTorne (Richard Coles)[expected-action=pan-x-y]::before { 5209380295ba73501a205346becac22c6978e4671dTorne (Richard Coles) content: "PAN-X PAN-Y \2190 "; 5309380295ba73501a205346becac22c6978e4671dTorne (Richard Coles)} 54d5428f32f5d1719f774f62e19147104ca245a3abTorne (Richard Coles)[expected-action=manipulation]::before { 55d5428f32f5d1719f774f62e19147104ca245a3abTorne (Richard Coles) content: "MANIPULATION \2190 "; 56d5428f32f5d1719f774f62e19147104ca245a3abTorne (Richard Coles)} 57a854de003a23bf3c7f95ec0f8154ada64092ff5cTorne (Richard Coles) 58a854de003a23bf3c7f95ec0f8154ada64092ff5cTorne (Richard Coles)body { 59a854de003a23bf3c7f95ec0f8154ada64092ff5cTorne (Richard Coles) /* Leave gap for test to scroll down */ 60a854de003a23bf3c7f95ec0f8154ada64092ff5cTorne (Richard Coles) padding-top: 100px; 61a854de003a23bf3c7f95ec0f8154ada64092ff5cTorne (Richard Coles) /* Ensure pages are scrollable for manual testing */ 62a854de003a23bf3c7f95ec0f8154ada64092ff5cTorne (Richard Coles) height: 2000px; 63a854de003a23bf3c7f95ec0f8154ada64092ff5cTorne (Richard Coles) /* Use fixed line height so co-ordinates will be similar in test and browser */ 64a854de003a23bf3c7f95ec0f8154ada64092ff5cTorne (Richard Coles) font-size: 20px; 65a854de003a23bf3c7f95ec0f8154ada64092ff5cTorne (Richard Coles) white-space: nowrap; 66a854de003a23bf3c7f95ec0f8154ada64092ff5cTorne (Richard Coles)} 67a854de003a23bf3c7f95ec0f8154ada64092ff5cTorne (Richard Coles) 68a854de003a23bf3c7f95ec0f8154ada64092ff5cTorne (Richard Coles).scroll { 69a854de003a23bf3c7f95ec0f8154ada64092ff5cTorne (Richard Coles) overflow: scroll; 70a854de003a23bf3c7f95ec0f8154ada64092ff5cTorne (Richard Coles) height: 50px; 71a854de003a23bf3c7f95ec0f8154ada64092ff5cTorne (Richard Coles)} 72a854de003a23bf3c7f95ec0f8154ada64092ff5cTorne (Richard Coles).spacer { 73a854de003a23bf3c7f95ec0f8154ada64092ff5cTorne (Richard Coles) height: 500px; 74a854de003a23bf3c7f95ec0f8154ada64092ff5cTorne (Richard Coles)} 75a854de003a23bf3c7f95ec0f8154ada64092ff5cTorne (Richard Coles) 76a854de003a23bf3c7f95ec0f8154ada64092ff5cTorne (Richard Coles).marker { 77a854de003a23bf3c7f95ec0f8154ada64092ff5cTorne (Richard Coles) position: absolute; 78a854de003a23bf3c7f95ec0f8154ada64092ff5cTorne (Richard Coles) opacity: 0.5; 79a854de003a23bf3c7f95ec0f8154ada64092ff5cTorne (Richard Coles) /* Note, if changing size, be sure to change kMarkerSize in JS too */ 80a854de003a23bf3c7f95ec0f8154ada64092ff5cTorne (Richard Coles) width: 6px; 81a854de003a23bf3c7f95ec0f8154ada64092ff5cTorne (Richard Coles) height: 6px; 82a854de003a23bf3c7f95ec0f8154ada64092ff5cTorne (Richard Coles) background-color: red; 83a854de003a23bf3c7f95ec0f8154ada64092ff5cTorne (Richard Coles)} 84