tor-browser

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

scroll-state-scrolled-pu-pd-scroll.html (2149B)

      1 <!DOCTYPE html>
      2 <title>@container: scroll-state(scrolled) PageUp/PageDown keys press scroll</title>
      3 <link rel="help" href="https://drafts.csswg.org/css-conditional-5/#scrolled">
      4 <script src="/resources/testharness.js"></script>
      5 <script src="/resources/testharnessreport.js"></script>
      6 <script src="/resources/testdriver.js"></script>
      7 <script src="/resources/testdriver-actions.js"></script>
      8 <script src="/resources/testdriver-vendor.js"></script>
      9 <script src="/web-animations/testcommon.js"></script>
     10 <script src="/css/css-conditional/container-queries/support/cq-testcommon.js"></script>
     11 <style>
     12  #scroller {
     13    width: 200px;
     14    height: 200px;
     15    container-type: scroll-state;
     16    overflow-y: scroll;
     17  }
     18  #filler {
     19    height: 600px;
     20  }
     21  #target {
     22    --none: no;
     23    --top: no;
     24    @container scroll-state(scrolled: none) {
     25      --none: yes;
     26    }
     27    @container scroll-state(scrolled: top) {
     28      --top: yes;
     29    }
     30  }
     31 </style>
     32 <div id="scroller">
     33  <div id="filler">
     34    <div id="target"></div>
     35  </div>
     36 </div>
     37 <script>
     38  setup(() => assert_implements_scroll_state_container_queries());
     39 
     40  promise_test(async t => {
     41    const PageUp = '\uE00E';
     42    const PageDown = '\uE00F';
     43    scroller.focus();
     44    await new test_driver.Actions()
     45      .keyDown(PageUp)
     46      .keyUp(PageUp)
     47      .send();
     48    await new test_driver.Actions()
     49      .keyDown(PageUp)
     50      .keyUp(PageUp)
     51      .send();
     52    await waitForAnimationFrames(2);
     53    assert_equals(getComputedStyle(target).getPropertyValue("--none"), "yes");
     54    assert_equals(getComputedStyle(target).getPropertyValue("--top"), "no");
     55 
     56  }, "PageUp key shouldn't scroll when scroller is already on top");
     57 
     58  promise_test(async t => {
     59    const PageUp = '\uE00E';
     60    const PageDown = '\uE00F';
     61    scroller.scrollTop = 100;
     62    scroller.focus();
     63    await new test_driver.Actions()
     64      .keyDown(PageUp)
     65      .keyUp(PageUp)
     66      .send();
     67    await new test_driver.Actions()
     68      .keyDown(PageUp)
     69      .keyUp(PageUp)
     70      .send();
     71    await waitForAnimationFrames(2);
     72    assert_equals(getComputedStyle(target).getPropertyValue("--top"), "yes");
     73 
     74  }, "PageUp key scroll");
     75 
     76 </script>