tor-browser

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

scroll-target-group-013.html (2026B)

      1 <!DOCTYPE html>
      2 <meta charset="utf-8">
      3 <title>CSS Overflow Test: scroll-target-group property invalidation of :target-current</title>
      4 <link rel="help" href="https://drafts.csswg.org/css-overflow-5/#scroll-target-group">
      5 <script src="/resources/testharness.js"></script>
      6 <script src="/resources/testharnessreport.js"></script>
      7 <script src="/resources/testdriver.js"></script>
      8 <script src="/resources/testdriver-actions.js"></script>
      9 <script src="/resources/testdriver-vendor.js"></script>
     10 <script src="/css/css-transitions/support/helper.js"></script>
     11 <style>
     12  #wrapper {
     13    position: fixed;
     14    left: 0;
     15    top: 0;
     16  }
     17 
     18  .stg {
     19    scroll-target-group: auto;
     20  }
     21 
     22  #scroller {
     23    overflow: auto;
     24    height: 130px;
     25    width: 100px;
     26  }
     27 
     28  .item {
     29    width: 100px;
     30    height: 300px;
     31    background-color: blue;
     32    margin: 5px;
     33  }
     34 
     35  a {
     36    color: red;
     37  }
     38 
     39  a:target-current {
     40    color: green;
     41  }
     42 </style>
     43 <div class="item" id="target1"></div>
     44 <div class="item" id="target2"></div>
     45 <div class="item" id="target3"></div>
     46 <div class="item" id="target4"></div>
     47 <div id="wrapper" class="stg">
     48  <a id="link1" href="#target1">t1</a>
     49  <a id="link2" href="#target2">t2</a>
     50  <div id="subwrapper">
     51    <a id="link3" href="#target3">t3</a>
     52    <a id="link4" href="#target4">t4</a>
     53  </div>
     54 </div>
     55 <script>
     56  // Triggers recalculation of scroll target group relations.
     57  link2.addEventListener("click", () => {
     58    subwrapper.classList.add("stg");
     59  });
     60  promise_test(async t => {
     61    const link2X = link2.getBoundingClientRect().left;
     62    const link2Y = link2.getBoundingClientRect().top;
     63    await new test_driver.Actions()
     64      .pointerMove(link2X, link2Y)
     65      .pointerDown()
     66      .pointerUp()
     67      .send();
     68    await waitForAnimationFrames(2);
     69    assert_equals(getComputedStyle(link1).color, "rgb(255, 0, 0)", "link1 shouldn't be :target-current after clicking link2");
     70    assert_equals(getComputedStyle(link2).color, "rgb(0, 128, 0)", "link2 should be :target-current after clicking link2");
     71  });
     72 </script>