src/third_party/WebKit/Source/web/tests/data/touch-action-tests.css

   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 }