tor-browser

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

scroll-state-initially-scrollable.html (4190B)

      1 <!DOCTYPE html>
      2 <title>@container: scroll-state(scrollable) matching for initial rendering</title>
      3 <link rel="help" href="https://drafts.csswg.org/css-conditional-5/#scrollable">
      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  }
     14  .auto {
     15    overflow-y: auto;
     16  }
     17  .scroll {
     18    overflow-y: scroll;
     19  }
     20  .clip {
     21    overflow-y: clip;
     22  }
     23  .scrollable::after {
     24    content: " ";
     25    display: block;
     26    height: 10000px;
     27  }
     28  span {
     29    --top: no;
     30    --bottom: no;
     31    --none: no;
     32  }
     33  @container scroll-state(scrollable: top) {
     34    span { --top: yes; }
     35  }
     36  @container scroll-state(scrollable: bottom) {
     37    span { --bottom: yes; }
     38  }
     39  @container scroll-state(scrollable: none) {
     40    span { --none: yes; }
     41  }
     42 </style>
     43 <div class="scroller">
     44  <span id="t1"></span>
     45 </div>
     46 <div class="scroller auto">
     47  <span id="t2"></span>
     48 </div>
     49 <div class="scroller scroll">
     50  <span id="t3"></span>
     51 </div>
     52 <div class="scroller clip">
     53  <span id="t4"></span>
     54 </div>
     55 <div class="scroller scrollable">
     56  <span id="t5"></span>
     57 </div>
     58 <div class="scroller auto scrollable">
     59  <span id="t6"></span>
     60 </div>
     61 <div class="scroller scroll scrollable">
     62  <span id="t7"></span>
     63 </div>
     64 <div class="scroller clip scrollable">
     65  <span id="t8"></span>
     66 </div>
     67 <script>
     68  setup(() => assert_implements_scroll_state_container_queries());
     69 
     70  promise_test(async t => {
     71    await waitForAnimationFrames(2);
     72    assert_equals(getComputedStyle(t1).getPropertyValue("--top"), "no");
     73    assert_equals(getComputedStyle(t1).getPropertyValue("--bottom"), "no");
     74    assert_equals(getComputedStyle(t1).getPropertyValue("--none"), "yes");
     75  }, "overflow:visible, no scrollable content - no matches");
     76 
     77  promise_test(async t => {
     78    assert_equals(getComputedStyle(t2).getPropertyValue("--top"), "no");
     79    assert_equals(getComputedStyle(t2).getPropertyValue("--bottom"), "no");
     80    assert_equals(getComputedStyle(t2).getPropertyValue("--none"), "yes");
     81  }, "overflow:auto, no scrollable content - no matches");
     82 
     83  promise_test(async t => {
     84    assert_equals(getComputedStyle(t3).getPropertyValue("--top"), "no");
     85    assert_equals(getComputedStyle(t3).getPropertyValue("--bottom"), "no");
     86    assert_equals(getComputedStyle(t3).getPropertyValue("--none"), "yes");
     87  }, "overflow:scroll, no scrollable content - no matches");
     88 
     89  promise_test(async t => {
     90    assert_equals(getComputedStyle(t4).getPropertyValue("--top"), "no");
     91    assert_equals(getComputedStyle(t4).getPropertyValue("--bottom"), "no");
     92    assert_equals(getComputedStyle(t4).getPropertyValue("--none"), "yes");
     93  }, "overflow:clip, no scrollable content - no matches");
     94 
     95  promise_test(async t => {
     96    assert_equals(getComputedStyle(t5).getPropertyValue("--top"), "no");
     97    assert_equals(getComputedStyle(t5).getPropertyValue("--bottom"), "no");
     98    assert_equals(getComputedStyle(t5).getPropertyValue("--none"), "yes");
     99  }, "overflow:visible, scrollable content - no matches");
    100 
    101  promise_test(async t => {
    102    assert_equals(getComputedStyle(t6).getPropertyValue("--top"), "no");
    103    assert_equals(getComputedStyle(t6).getPropertyValue("--bottom"), "yes");
    104    assert_equals(getComputedStyle(t6).getPropertyValue("--none"), "no");
    105  }, "overflow:auto, scrollable content - matches scrollable:bottom");
    106 
    107  promise_test(async t => {
    108    assert_equals(getComputedStyle(t7).getPropertyValue("--top"), "no");
    109    assert_equals(getComputedStyle(t7).getPropertyValue("--bottom"), "yes");
    110    assert_equals(getComputedStyle(t7).getPropertyValue("--none"), "no");
    111  }, "overflow:scroll, scrollable content - matches scrollable:bottom");
    112 
    113  promise_test(async t => {
    114    assert_equals(getComputedStyle(t8).getPropertyValue("--top"), "no");
    115    assert_equals(getComputedStyle(t8).getPropertyValue("--bottom"), "no");
    116    assert_equals(getComputedStyle(t8).getPropertyValue("--none"), "yes");
    117  }, "overflow:clip, scrollable content - no matches");
    118 
    119 </script>