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 .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 /* Make it easy to visualize div boundaries */
  27 [expected-action] {
  28   margin: 15px;
  29   padding: 10px;
  30   border: 1px solid blue;
  31   max-width: 700px;
  32 }
  33
  34 [expected-action=none]::before {
  35   content: "NONE \2190 ";
  36 }
  37 [expected-action=auto]::before {
  38   content: "AUTO \2190 ";
  39 }
  40 [expected-action=pan-x]::before {
  41   content: "PAN-X \2190 ";
  42 }
  43 [expected-action=pan-y]::before {
  44   content: "PAN-Y \2190 ";
  45 }
  46 [expected-action=pan-x-y]::before {
  47   content: "PAN-X PAN-Y \2190 ";
  48 }
  49
  50 body {
  51   /* Leave gap for test to scroll down */
  52   padding-top: 100px;
  53   /* Ensure pages are scrollable for manual testing */
  54   height: 2000px;
  55   /* Use fixed line height so co-ordinates will be similar in test and browser */
  56   font-size: 20px;
  57   white-space: nowrap;
  58 }
  59
  60 .scroll {
  61   overflow: scroll;
  62   height: 50px;
  63 }
  64 .spacer {
  65   height: 500px;
  66 }
  67
  68 .marker {
  69   position: absolute;
  70   opacity: 0.5;
  71   /* Note, if changing size, be sure to change kMarkerSize in JS too */
  72   width: 6px;
  73   height: 6px;
  74   background-color: red;
  75 }