tor-browser

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

overscroll-event-fired-to-element-with-overscroll-behavior.tentative.html (2882B)

      1 <!DOCTYPE HTML>
      2 <script src="/resources/testharness.js"></script>
      3 <script src="/resources/testharnessreport.js"></script>
      4 <script src="/resources/testdriver.js"></script>
      5 <script src="/resources/testdriver-actions.js"></script>
      6 <script src="/resources/testdriver-vendor.js"></script>
      7 <script src="scroll_support.js"></script>
      8 <style>
      9 #overscrollXDiv {
     10  width: 600px;
     11  height: 600px;
     12  overflow: scroll;
     13  overscroll-behavior-x: contain;
     14 }
     15 #overscrollYDiv {
     16  width: 500px;
     17  height: 500px;
     18  overflow: scroll;
     19  overscroll-behavior-y: none;
     20 }
     21 #targetDiv {
     22  width: 400px;
     23  height: 400px;
     24  overflow: scroll;
     25 }
     26 .content {
     27  width:800px;
     28  height:800px;
     29 }
     30 </style>
     31 
     32 <body style="margin:0" onload=runTest()>
     33 <div id="overscrollXDiv">
     34  <div class=content>
     35    <div id="overscrollYDiv">
     36      <div class=content>
     37        <div id="targetDiv">
     38          <div class="content">
     39          </div>
     40        </div>
     41      </div>
     42    </div>
     43  </div>
     44 </div>
     45 </body>
     46 
     47 <script>
     48 var target_div = document.getElementById('targetDiv');
     49 var overscrolled_x_delta = 0;
     50 var overscrolled_y_delta = 0;
     51 function onOverscrollX(event) {
     52  assert_false(event.cancelable);
     53  assert_false(event.bubbles);
     54  overscrolled_x_delta = event.deltaX;
     55 }
     56 function onOverscrollY(event) {
     57  assert_false(event.cancelable);
     58  assert_false(event.bubbles);
     59  overscrolled_y_delta = event.deltaY;
     60 }
     61 // Test that both "onoverscroll" and addEventListener("overscroll"... work.
     62 document.getElementById('overscrollXDiv').onoverscroll = onOverscrollX;
     63 document.getElementById('overscrollYDiv').
     64    addEventListener("overscroll", onOverscrollY);
     65 
     66 function runTest() {
     67  promise_test (async (t) => {
     68    // Make sure that no overscroll event is sent to document or target_div.
     69    document.addEventListener("overscroll",
     70        t.unreached_func("Document got unexpected overscroll event."));
     71    target_div.addEventListener("overscroll",
     72        t.unreached_func("target_div got unexpected overscroll event."));
     73    await waitForCompositorCommit();
     74    // Scroll up on target div and wait for the element with overscroll-y to get
     75    // overscroll event.
     76    await touchScrollInTarget(300, target_div, 'up');
     77    await waitFor(() => { return overscrolled_y_delta < 0; },
     78        'Expected element did not receive overscroll event after scroll up on ' +
     79        'target.');
     80    assert_equals(target_div.scrollTop, 0);
     81 
     82    // Scroll left on target div and wait for the element with overscroll-x to
     83    // get overscroll event.
     84    await touchScrollInTarget(300, target_div, 'left');
     85    await waitFor(() => { return overscrolled_x_delta < 0; },
     86        'Expected element did not receive overscroll event after scroll left ' +
     87        'on target.');
     88    assert_equals(target_div.scrollLeft, 0);
     89  }, 'Tests that the last element in the cut scroll chain gets overscroll ' +
     90     'event when no element scrolls by touch.');
     91 }
     92 </script>