tor-browser

The Tor Browser
git clone https://git.dasho.dev/tor-browser.git
Log | Files | Refs | README | LICENSE

helper_hittest_touchaction.html (12395B)

      1 <!DOCTYPE HTML>
      2 <html>
      3 <head>
      4  <title>Testing APZ hit-test with touch-action boxes</title>
      5  <script type="application/javascript" src="apz_test_utils.js"></script>
      6  <script type="application/javascript" src="apz_test_native_event_utils.js"></script>
      7  <script src="/tests/SimpleTest/paint_listener.js"></script>
      8  <meta name="viewport" content="width=device-width"/>
      9  <style>
     10 .taBox {
     11    width: 20px;
     12    height: 20px;
     13    background-color: green;
     14    display: inline-block;
     15 }
     16 .taBox > div {
     17    /* make sure this doesn't obscure the center of the enclosing taBox */
     18    width: 5px;
     19    height: 5px;
     20    background-color: blue;
     21 }
     22 
     23 .taBigBox {
     24    width: 150px;
     25    height: 150px;
     26    background-color: green;
     27    display: inline-block;
     28 }
     29 .taBigBox > div {
     30    width: 40px;
     31    height: 40px;
     32    overflow: auto;
     33 }
     34 .taBigBox > div > div {
     35    width: 100px;
     36    height: 100px;
     37 }
     38  </style>
     39 </head>
     40 <body>
     41 <!-- Create a bunch of divs for hit-testing. Some of the divs also
     42    contain nested divs to test inheritance/combination of touch-action
     43    properties. This is not an exhaustive list of all the possible
     44    combinations but it's assorted enough to provide good coverage. -->
     45 <div id="taNone" class="taBox" style="touch-action: none">
     46  <div id="taInnerNonePanX" style="touch-action: pan-x"></div>
     47  <div id="taInnerNoneManip" style="touch-action: manipulation"></div>
     48 </div>
     49 <div id="taPanX" class="taBox" style="touch-action: pan-x">
     50  <div id="taInnerPanXY" style="touch-action: pan-y"></div>
     51  <div id="taInnerPanXManip" style="touch-action: manipulation"></div>
     52 </div>
     53 <div id="taPanY" class="taBox" style="touch-action: pan-y">
     54  <div id="taInnerPanYX" style="touch-action: pan-x"></div>
     55  <div id="taInnerPanYY" style="touch-action: pan-y"></div>
     56 </div>
     57 <div id="taPanXY" class="taBox" style="touch-action: pan-x pan-y">
     58  <div id="taInnerPanXYNone" style="touch-action: none"></div>
     59 </div>
     60 <div id="taManip" class="taBox" style="touch-action: manipulation">
     61  <div id="taInnerManipPanX" style="touch-action: pan-x"></div>
     62  <div id="taInnerManipNone" style="touch-action: none"></div>
     63  <div id="taInnerManipListener" ontouchstart="return false;"></div>
     64 </div>
     65 <div id="taListener" class="taBox" ontouchstart="return false;">
     66  <div id="taInnerListenerPanX" style="touch-action: pan-x"></div>
     67 </div>
     68 <div id="taPinchZoom" class="taBox" style="touch-action: pinch-zoom">
     69 </div>
     70 
     71 <br/>
     72 
     73 <!-- More divs for hit-testing. These comprise one big outer div with
     74     a touch-action property, then inside is a scrollable div, possibly with
     75     a touch-action of its own, and inside that is another div to make the
     76     scrollable div scrollable. Note that the touch-action for an element
     77     includes the restrictions from all ancestor elements up to and including
     78     the element that has the default action for that touch-action property.
     79     Panning actions therefore get inherited from the nearest scrollframe
     80     downwards, while zooming actions get inherited from the root content
     81     element (because that's the only one that has zooming as the default action)
     82     downwards. In effect, any pan restrictions on the outer div should not
     83     apply to the inner div, but zooming restrictions should. Also, the
     84     touch-action on the scrollable div itself should apply to user interaction
     85     inside the scrollable div. -->
     86 <div id="taOuterPanX" class="taBigBox" style="touch-action: pan-x">
     87  <div id="taScrollerPanY" style="touch-action: pan-y">
     88   <div></div>
     89  </div>
     90  <div id="taScroller">
     91   <div style="touch-action: pan-y"></div>
     92  </div>
     93  <div id="taScroller2">
     94   <div></div>
     95  </div>
     96 </div>
     97 <div id="taOuterManipulation" class="taBigBox" style="touch-action: manipulation">
     98  <div id="taScrollerPanX" style="touch-action: pan-x">
     99   <div></div>
    100  </div>
    101  <div id="taScroller3">
    102   <div></div>
    103  </div>
    104  <div id="taScroller4" style="touch-action: pan-y">
    105   <div style="overflow:hidden"></div>
    106  </div>
    107 </div>
    108 </body>
    109 <script type="application/javascript">
    110 
    111 var config = getHitTestConfig();
    112 
    113 async function test() {
    114  for (var scroller of document.querySelectorAll(".taBigBox > div")) {
    115    // layerize all the scrollable divs
    116    config.utils.setDisplayPortForElement(0, 0, 100, 100, scroller, 1);
    117  }
    118  await promiseApzFlushedRepaints();
    119 
    120  var scrollId = config.utils.getViewId(document.scrollingElement);
    121  var layersId = config.utils.getLayersId();
    122 
    123  checkHitResult(
    124      hitTest(centerOf("taNone")),
    125      APZHitResultFlags.VISIBLE |
    126      APZHitResultFlags.PAN_X_DISABLED |
    127      APZHitResultFlags.PAN_Y_DISABLED |
    128      APZHitResultFlags.PINCH_ZOOM_DISABLED |
    129      APZHitResultFlags.DOUBLE_TAP_ZOOM_DISABLED,
    130      scrollId,
    131      layersId,
    132      "touch-action: none");
    133  checkHitResult(
    134      hitTest(centerOf("taInnerNonePanX")),
    135      APZHitResultFlags.VISIBLE |
    136      APZHitResultFlags.PAN_X_DISABLED |
    137      APZHitResultFlags.PAN_Y_DISABLED |
    138      APZHitResultFlags.PINCH_ZOOM_DISABLED |
    139      APZHitResultFlags.DOUBLE_TAP_ZOOM_DISABLED,
    140      scrollId,
    141      layersId,
    142      "touch-action: pan-x inside touch-action: none");
    143  checkHitResult(
    144      hitTest(centerOf("taInnerNoneManip")),
    145      APZHitResultFlags.VISIBLE |
    146      APZHitResultFlags.PAN_X_DISABLED |
    147      APZHitResultFlags.PAN_Y_DISABLED |
    148      APZHitResultFlags.PINCH_ZOOM_DISABLED |
    149      APZHitResultFlags.DOUBLE_TAP_ZOOM_DISABLED,
    150      scrollId,
    151      layersId,
    152      "touch-action: manipulation inside touch-action: none");
    153 
    154  checkHitResult(
    155      hitTest(centerOf("taPanX")),
    156      APZHitResultFlags.VISIBLE |
    157      APZHitResultFlags.PAN_Y_DISABLED |
    158      APZHitResultFlags.PINCH_ZOOM_DISABLED |
    159      APZHitResultFlags.DOUBLE_TAP_ZOOM_DISABLED,
    160      scrollId,
    161      layersId,
    162      "touch-action: pan-x");
    163  checkHitResult(
    164      hitTest(centerOf("taInnerPanXY")),
    165      APZHitResultFlags.VISIBLE |
    166      APZHitResultFlags.PAN_X_DISABLED |
    167      APZHitResultFlags.PAN_Y_DISABLED |
    168      APZHitResultFlags.PINCH_ZOOM_DISABLED |
    169      APZHitResultFlags.DOUBLE_TAP_ZOOM_DISABLED,
    170      scrollId,
    171      layersId,
    172      "touch-action: pan-y inside touch-action: pan-x");
    173  checkHitResult(
    174      hitTest(centerOf("taInnerPanXManip")),
    175      APZHitResultFlags.VISIBLE |
    176      APZHitResultFlags.PAN_Y_DISABLED |
    177      APZHitResultFlags.PINCH_ZOOM_DISABLED |
    178      APZHitResultFlags.DOUBLE_TAP_ZOOM_DISABLED,
    179      scrollId,
    180      layersId,
    181      "touch-action: manipulation inside touch-action: pan-x");
    182 
    183  checkHitResult(
    184      hitTest(centerOf("taPanY")),
    185      APZHitResultFlags.VISIBLE |
    186      APZHitResultFlags.PAN_X_DISABLED |
    187      APZHitResultFlags.PINCH_ZOOM_DISABLED |
    188      APZHitResultFlags.DOUBLE_TAP_ZOOM_DISABLED,
    189      scrollId,
    190      layersId,
    191      "touch-action: pan-y");
    192  checkHitResult(
    193      hitTest(centerOf("taInnerPanYX")),
    194      APZHitResultFlags.VISIBLE |
    195      APZHitResultFlags.PAN_X_DISABLED |
    196      APZHitResultFlags.PAN_Y_DISABLED |
    197      APZHitResultFlags.PINCH_ZOOM_DISABLED |
    198      APZHitResultFlags.DOUBLE_TAP_ZOOM_DISABLED,
    199      scrollId,
    200      layersId,
    201      "touch-action: pan-x inside touch-action: pan-y");
    202  checkHitResult(
    203      hitTest(centerOf("taInnerPanYY")),
    204      APZHitResultFlags.VISIBLE |
    205      APZHitResultFlags.PAN_X_DISABLED |
    206      APZHitResultFlags.PINCH_ZOOM_DISABLED |
    207      APZHitResultFlags.DOUBLE_TAP_ZOOM_DISABLED,
    208      scrollId,
    209      layersId,
    210      "touch-action: pan-y inside touch-action: pan-y");
    211 
    212  checkHitResult(
    213      hitTest(centerOf("taPanXY")),
    214      APZHitResultFlags.VISIBLE |
    215      APZHitResultFlags.PINCH_ZOOM_DISABLED |
    216      APZHitResultFlags.DOUBLE_TAP_ZOOM_DISABLED,
    217      scrollId,
    218      layersId,
    219      "touch-action: pan-x pan-y");
    220  checkHitResult(
    221      hitTest(centerOf("taInnerPanXYNone")),
    222      APZHitResultFlags.VISIBLE |
    223      APZHitResultFlags.PAN_X_DISABLED |
    224      APZHitResultFlags.PAN_Y_DISABLED |
    225      APZHitResultFlags.PINCH_ZOOM_DISABLED |
    226      APZHitResultFlags.DOUBLE_TAP_ZOOM_DISABLED,
    227      scrollId,
    228      layersId,
    229      "touch-action: none inside touch-action: pan-x pan-y");
    230 
    231  checkHitResult(
    232      hitTest(centerOf("taManip")),
    233      APZHitResultFlags.VISIBLE |
    234      APZHitResultFlags.DOUBLE_TAP_ZOOM_DISABLED,
    235      scrollId,
    236      layersId,
    237      "touch-action: manipulation");
    238  checkHitResult(
    239      hitTest(centerOf("taInnerManipPanX")),
    240      APZHitResultFlags.VISIBLE |
    241      APZHitResultFlags.PAN_Y_DISABLED |
    242      APZHitResultFlags.PINCH_ZOOM_DISABLED |
    243      APZHitResultFlags.DOUBLE_TAP_ZOOM_DISABLED,
    244      scrollId,
    245      layersId,
    246      "touch-action: pan-x inside touch-action: manipulation");
    247  checkHitResult(
    248      hitTest(centerOf("taInnerManipNone")),
    249      APZHitResultFlags.VISIBLE |
    250      APZHitResultFlags.PAN_X_DISABLED |
    251      APZHitResultFlags.PAN_Y_DISABLED |
    252      APZHitResultFlags.PINCH_ZOOM_DISABLED |
    253      APZHitResultFlags.DOUBLE_TAP_ZOOM_DISABLED,
    254      scrollId,
    255      layersId,
    256      "touch-action: none inside touch-action: manipulation");
    257  checkHitResult(
    258      hitTest(centerOf("taInnerManipListener")),
    259      APZHitResultFlags.VISIBLE |
    260      APZHitResultFlags.APZ_AWARE_LISTENERS |
    261      APZHitResultFlags.DOUBLE_TAP_ZOOM_DISABLED,
    262      scrollId,
    263      layersId,
    264      "div with touch listener inside touch-action: manipulation");
    265 
    266  checkHitResult(
    267      hitTest(centerOf("taListener")),
    268      APZHitResultFlags.VISIBLE |
    269      APZHitResultFlags.APZ_AWARE_LISTENERS,
    270      scrollId,
    271      layersId,
    272      "div with touch listener");
    273  checkHitResult(
    274      hitTest(centerOf("taInnerListenerPanX")),
    275      APZHitResultFlags.VISIBLE |
    276      APZHitResultFlags.APZ_AWARE_LISTENERS |
    277      APZHitResultFlags.PAN_Y_DISABLED |
    278      APZHitResultFlags.PINCH_ZOOM_DISABLED |
    279      APZHitResultFlags.DOUBLE_TAP_ZOOM_DISABLED,
    280      scrollId,
    281      layersId,
    282      "touch-action: pan-x inside div with touch listener");
    283 
    284  checkHitResult(
    285      hitTest(centerOf("taPinchZoom")),
    286      APZHitResultFlags.VISIBLE |
    287      APZHitResultFlags.PAN_Y_DISABLED |
    288      APZHitResultFlags.PAN_X_DISABLED |
    289      APZHitResultFlags.DOUBLE_TAP_ZOOM_DISABLED,
    290      scrollId,
    291      layersId,
    292      "touch-action: pinch-zoom inside div with touch listener");
    293 
    294  checkHitResult(
    295      hitTest(centerOf("taScrollerPanY")),
    296      APZHitResultFlags.VISIBLE |
    297      APZHitResultFlags.PAN_X_DISABLED |
    298      APZHitResultFlags.PINCH_ZOOM_DISABLED |
    299      APZHitResultFlags.DOUBLE_TAP_ZOOM_DISABLED,
    300      config.utils.getViewId(document.getElementById("taScrollerPanY")),
    301      layersId,
    302      "touch-action: pan-y on scroller");
    303  checkHitResult(
    304      hitTest(centerOf("taScroller")),
    305      APZHitResultFlags.VISIBLE |
    306      APZHitResultFlags.PAN_X_DISABLED |
    307      APZHitResultFlags.PINCH_ZOOM_DISABLED |
    308      APZHitResultFlags.DOUBLE_TAP_ZOOM_DISABLED,
    309      config.utils.getViewId(document.getElementById("taScroller")),
    310      layersId,
    311      "touch-action: pan-y on div inside scroller");
    312  checkHitResult(
    313      hitTest(centerOf("taScroller2")),
    314      APZHitResultFlags.VISIBLE |
    315      APZHitResultFlags.PINCH_ZOOM_DISABLED |
    316      APZHitResultFlags.DOUBLE_TAP_ZOOM_DISABLED,
    317      config.utils.getViewId(document.getElementById("taScroller2")),
    318      layersId,
    319      "zooming restrictions from pan-x outside scroller get inherited in");
    320 
    321  checkHitResult(
    322      hitTest(centerOf("taScrollerPanX")),
    323      APZHitResultFlags.VISIBLE |
    324      APZHitResultFlags.PAN_Y_DISABLED |
    325      APZHitResultFlags.PINCH_ZOOM_DISABLED |
    326      APZHitResultFlags.DOUBLE_TAP_ZOOM_DISABLED,
    327      config.utils.getViewId(document.getElementById("taScrollerPanX")),
    328      layersId,
    329      "touch-action: pan-x on scroller inside manipulation");
    330  checkHitResult(
    331      hitTest(centerOf("taScroller3")),
    332      APZHitResultFlags.VISIBLE |
    333      APZHitResultFlags.DOUBLE_TAP_ZOOM_DISABLED,
    334      config.utils.getViewId(document.getElementById("taScroller3")),
    335      layersId,
    336      "touch-action: manipulation outside scroller gets inherited in");
    337  checkHitResult(
    338      hitTest(centerOf("taScroller4")),
    339      APZHitResultFlags.VISIBLE |
    340      APZHitResultFlags.PAN_X_DISABLED |
    341      APZHitResultFlags.PINCH_ZOOM_DISABLED |
    342      APZHitResultFlags.DOUBLE_TAP_ZOOM_DISABLED,
    343      config.utils.getViewId(document.getElementById("taScroller4")),
    344      layersId,
    345      "overflow:hidden div doesn't reset pan-x/pan-y from enclosing scroller");
    346 }
    347 
    348 waitUntilApzStable()
    349  .then(test)
    350  .then(subtestDone, subtestFailed);
    351 
    352 </script>
    353 </html>