Home | History | Annotate | Download | only in data
      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