tor-browser

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

scroll-state-scrolled-programmatic-absolute-scrolls.html (3678B)

      1 <!DOCTYPE html>
      2 <title>@container: scroll-state(scrolled) ignores absolute scrolls</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="/css/css-conditional/container-queries/support/cq-testcommon.js"></script>
      7 <script src="/css/css-transitions/support/helper.js"></script>
      8 <style>
      9  #scroller {
     10    width: 200px;
     11    height: 200px;
     12    container-type: scroll-state;
     13    overflow-x: scroll;
     14    overflow-y: scroll;
     15  }
     16  #filler {
     17    height: 600px;
     18    width: 600px;
     19  }
     20  #target {
     21    --top: no;
     22    --bottom: no;
     23    --y: no;
     24    --left: no;
     25    --right: no;
     26    --x: no;
     27    --none: no;
     28    @container scroll-state(scrolled: top) {
     29      --top: yes;
     30    }
     31    @container scroll-state(scrolled: bottom) {
     32      --bottom: yes;
     33    }
     34    @container scroll-state(scrolled: y) {
     35      --y: yes;
     36    }
     37    @container scroll-state(scrolled: left) {
     38      --left: yes;
     39    }
     40    @container scroll-state(scrolled: right) {
     41      --right: yes;
     42    }
     43    @container scroll-state(scrolled: x) {
     44      --x: yes;
     45    }
     46    @container scroll-state(scrolled: none) {
     47      --none: yes;
     48    }
     49  }
     50 </style>
     51 <div id="scroller">
     52  <div id="filler">
     53    <div id="target"></div>
     54  </div>
     55 </div>
     56 <script>
     57  setup(() => assert_implements_scroll_state_container_queries());
     58 
     59  promise_test(async t => {
     60    await waitForAnimationFrames(2);
     61    assert_equals(getComputedStyle(target).getPropertyValue("--none"), "yes");
     62 
     63    assert_equals(getComputedStyle(target).getPropertyValue("--bottom"), "no");
     64    assert_equals(getComputedStyle(target).getPropertyValue("--top"), "no");
     65    assert_equals(getComputedStyle(target).getPropertyValue("--y"), "no");
     66 
     67    assert_equals(getComputedStyle(target).getPropertyValue("--left"), "no");
     68    assert_equals(getComputedStyle(target).getPropertyValue("--right"), "no");
     69    assert_equals(getComputedStyle(target).getPropertyValue("--x"), "no");
     70  }, "Check that scroll-state(scrolled) state before scrolling");
     71 
     72  promise_test(async t => {
     73    scroller.scrollTop = 300;
     74    scroller.scrollLeft = 300;
     75    await waitForAnimationFrames(2);
     76    assert_equals(getComputedStyle(target).getPropertyValue("--none"), "yes");
     77 
     78    assert_equals(getComputedStyle(target).getPropertyValue("--bottom"), "no");
     79    assert_equals(getComputedStyle(target).getPropertyValue("--top"), "no");
     80    assert_equals(getComputedStyle(target).getPropertyValue("--y"), "no");
     81 
     82    assert_equals(getComputedStyle(target).getPropertyValue("--left"), "no");
     83    assert_equals(getComputedStyle(target).getPropertyValue("--right"), "no");
     84    assert_equals(getComputedStyle(target).getPropertyValue("--x"), "no");
     85    assert_equals(scroller.scrollTop, 300);
     86    assert_equals(scroller.scrollLeft, 300);
     87  }, "scrollTop and scrollLeft scrolls should not affect scroll-state(scrolled)");
     88 
     89  promise_test(async t => {
     90    scroller.scrollTo(0, 100);
     91    scroller.scrollTo(100, 0);
     92    await waitForAnimationFrames(2);
     93    assert_equals(getComputedStyle(target).getPropertyValue("--none"), "yes");
     94 
     95    assert_equals(getComputedStyle(target).getPropertyValue("--bottom"), "no");
     96    assert_equals(getComputedStyle(target).getPropertyValue("--top"), "no");
     97    assert_equals(getComputedStyle(target).getPropertyValue("--y"), "no");
     98 
     99    assert_equals(getComputedStyle(target).getPropertyValue("--left"), "no");
    100    assert_equals(getComputedStyle(target).getPropertyValue("--right"), "no");
    101    assert_equals(getComputedStyle(target).getPropertyValue("--x"), "no");
    102  }, "scrollTo scrolls should not affect scroll-state(scrolled)");
    103 
    104 </script>