third_party/WebKit/Source/web/tests/data/touch-action-pan.html

   1 <!DOCTYPE html>
   2 <link rel='stylesheet' type='text/css' href='touch-action-tests.css'>
   3 <script src='touch-action-tests.js'></script>
   4
   5 <!--
   6     Test a bunch of complex cases where touch-action: [pan-x ||pan-y].
   7 -->
   8
   9 <div class='ta-panx' expected-action='pan-x'>Simple div with touch-action: pan-x</div>
  10 <div class='ta-pany' expected-action='pan-y'>Simple div with touch-action: pan-y</div>
  11 <div class='ta-panxy' expected-action='pan-x-y'>Simple div with touch-action: pan-x pan-y</div>
  12 <div class='ta-manipulation' expected-action='manipulation'>Simple div with touch-action: manipulation</div>
  13
  14 <div class='ta-none' style='height: 0; margin-bottom: 50px'>
  15   <div class='ta-panx' expected-action='none'>
  16     Explicitly setting touch-action: pan-x does nothing to prevent propagation of none
  17   </div>
  18 </div>
  19
  20 <div class='ta-pany'>
  21   <div class='ta-none' expected-action='none'>
  22     Explicitly setting touch-action: none prevent propagation of pan-y
  23   </div>
  24 </div>
  25
  26 <div class='ta-panx'>
  27   <div class='ta-pany' expected-action='none'>
  28     Disjoint flags intersect to none
  29   </div>
  30 </div>
  31
  32 <div class='ta-panxy'>
  33   <div class='ta-auto' expected-action='pan-x-y'>
  34     Explicitly setting touch-action: auto does nothing to prevent propagation of 'pan-x pan-y'
  35   </div>
  36 </div>
  37
  38 <div class='ta-panx'>
  39   <div class='ta-panxy' expected-action='pan-x'>
  40     Explicitly setting touch-action: pan-x pan-y does nothing to prevent propagation of pan-x
  41   </div>
  42 </div>
  43
  44 <div class='ta-panx'>
  45   <div class='ta-auto'>
  46     <div class='ta-pany' expected-action='none'>
  47       Disjoint flags intersect to none
  48     </div>
  49   </div>
  50 </div>
  51
  52 <div class='ta-panx'>
  53   <div class='scroll ta-pany' expected-action='pan-y'>
  54     Touch-action: pan-x is not propagated into overflow-scroll elements
  55   </div>
  56 </div>
  57
  58  <div class='ta-panx'>
  59   <div class='ta-manipulation' expected-action='pan-x'>
  60     Explicitly setting touch-action: manipulation does nothing to prevent propagation of 'pan-x'
  61   </div>
  62  </div>
  63
  64  <div class='ta-manipulation'>
  65   <div class='ta-auto' expected-action='manipulation'>
  66     Explicitly setting touch-action: auto does nothing to prevent propagation of 'manipulation'
  67   </div>
  68 </div>