Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(458)

Side by Side Diff: Source/web/tests/data/touch-action-tests.css

Issue 134153016: add 'manipulation' support to CSS touch-action parsing. (Closed) Base URL: https://chromium.googlesource.com/chromium/blink.git@master
Patch Set: rebase to trunk Created 6 years, 9 months ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View unified diff | Download patch
OLDNEW
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 }
OLDNEW

Powered by Google App Engine
This is Rietveld 408576698