tor-browser

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

overscroll-behavior-without-overflow.html (4158B)

      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="/dom/events/scrolling/scroll_support.js"></script>
      8 <script src="/css/css-scroll-snap/support/common.js"></script>
      9 <link rel="help" href="https://drafts.csswg.org/css-overscroll-behavior">
     10 
     11 <style>
     12 body {
     13  margin: 0;
     14  width: 150vw;
     15  height: 150vh;
     16 }
     17 #container {
     18  width: 500px;
     19  height: 300px;
     20  border: 2px solid orange;
     21  border-radius: 5px;
     22  overflow: scroll;
     23 }
     24 #content {
     25  background: repeating-linear-gradient(to bottom right, blue 15%, white 30%);
     26  width: 400px;
     27  height: 200px;
     28 }
     29 </style>
     30 
     31 <body>
     32  <div id="container">
     33    <div id="content"></div>
     34  </div>
     35 </body>
     36 
     37 <script>
     38 const container = document.getElementById('container');
     39 const content = document.getElementById('content');
     40 const scrollAmount = 120;
     41 const scrollRight = { dx: scrollAmount, dy: 0 };
     42 const scrollDown = { dx: 0, dy: scrollAmount };
     43 const startPosition = { x: 200, y: 100 };
     44 
     45 async function performGestureScroll(posX, posY, deltaX, deltaY) {
     46  await new test_driver.Actions()
     47      .scroll(posX, posY, deltaX, deltaY)
     48      .send();
     49  await waitForCompositorCommit();
     50 }
     51 
     52 promise_test(async (t) => {
     53  window.scrollTo(0, 0);
     54  container.style.overflow = 'hidden';
     55  container.style.overscrollBehaviorX = 'none';
     56  container.style.overscrollBehaviorY = 'auto';
     57  await waitForCompositorCommit();
     58 
     59  assert_equals(window.scrollX, 0);
     60  assert_equals(window.scrollY, 0);
     61 
     62  await performGestureScroll(
     63      startPosition.x, startPosition.y, scrollRight.dx, scrollRight.dy);
     64  assert_equals(window.scrollX, 0);
     65 
     66  await performGestureScroll(
     67      startPosition.x, startPosition.y, scrollDown.dx, scrollDown.dy);
     68  assert_greater_than(window.scrollY, 100);
     69 }, 'overflow: hidden and overscroll-behavior-x: none should only prevent ' +
     70   'scroll propagation on x axis.');
     71 
     72 promise_test(async (t) => {
     73  window.scrollTo(0, 0);
     74  container.style.overflow = 'hidden';
     75  container.style.overscrollBehaviorX = 'auto';
     76  container.style.overscrollBehaviorY = 'none';
     77  await waitForCompositorCommit();
     78 
     79  assert_equals(window.scrollX, 0);
     80  assert_equals(window.scrollY, 0);
     81 
     82  await performGestureScroll(
     83      startPosition.x, startPosition.y, scrollRight.dx, scrollRight.dy);
     84  assert_greater_than(window.scrollX, 100);
     85 
     86  await performGestureScroll(
     87      startPosition.x, startPosition.y, scrollDown.dx, scrollDown.dy);
     88  assert_equals(window.scrollY, 0);
     89 }, 'overflow: hidden and overscroll-behavior-y: none should only prevent ' +
     90   'scroll propagation on y axis.');
     91 
     92 promise_test(async (t) => {
     93  window.scrollTo(0, 0);
     94  container.style.overflow = 'auto';
     95  container.style.overscrollBehaviorX = 'none';
     96  container.style.overscrollBehaviorY = 'auto';
     97  await waitForCompositorCommit();
     98 
     99  assert_equals(window.scrollX, 0);
    100  assert_equals(window.scrollY, 0);
    101 
    102  await performGestureScroll(
    103      startPosition.x, startPosition.y, scrollRight.dx, scrollRight.dy);
    104  assert_equals(window.scrollX, 0);
    105 
    106  await performGestureScroll(
    107      startPosition.x, startPosition.y, scrollDown.dx, scrollDown.dy);
    108  assert_greater_than(window.scrollY, 100);
    109 }, 'overflow: auto and overscroll-behavior-x: none should only prevent ' +
    110   'scroll propagation on x axis.');
    111 
    112 promise_test(async (t) => {
    113  window.scrollTo(0, 0);
    114  container.style.overflow = 'auto';
    115  container.style.overscrollBehaviorX = 'auto';
    116  container.style.overscrollBehaviorY = 'none';
    117  await waitForCompositorCommit();
    118 
    119  assert_equals(window.scrollX, 0);
    120  assert_equals(window.scrollY, 0);
    121 
    122  await performGestureScroll(
    123      startPosition.x, startPosition.y,
    124      scrollRight.dx, scrollRight.dy);
    125  assert_greater_than(window.scrollX, 100);
    126 
    127  await performGestureScroll(
    128      startPosition.x, startPosition.y,
    129      scrollDown.dx, scrollDown.dy);
    130  assert_equals(window.scrollY, 0);
    131 }, 'overflow: auto and overscroll-behavior-y: none should only prevent ' +
    132   'scroll propagation on y axis.');
    133 </script>