tor-browser

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

html-scroll-marker-target-before-after.html (2607B)

      1 <!doctype html>
      2 <meta charset="utf-8">
      3 <title>CSS Test: :target-before and :target-after on html anchor scroll markers</title>
      4 <link rel="help" href="https://drafts.csswg.org/css-overflow-5/#scroll-target-group">
      5 <link rel="help" href="https://github.com/w3c/csswg-drafts/issues/11600">
      6 <script src="/resources/testharness.js"></script>
      7 <script src="/resources/testharnessreport.js"></script>
      8 <script src="/css/css-transitions/support/helper.js"></script>
      9 <style>
     10  .scroller {
     11    width: 600px;
     12    height: 300px;
     13    overflow: scroll;
     14  }
     15 
     16  .scroller div {
     17    width: 600px;
     18    height: 300px;
     19    margin-bottom: 20px;
     20    background: green;
     21  }
     22 
     23  .wrapper {
     24    scroll-target-group: auto;
     25  }
     26 
     27  .wrapper a {
     28    color: blue;
     29  }
     30 
     31  .wrapper a:target-current {
     32    color: green;
     33  }
     34 
     35  .wrapper a:target-before {
     36    color: red;
     37  }
     38 
     39  .wrapper a:target-after {
     40    color: yellow;
     41  }
     42 </style>
     43 <div class="scroller">
     44  <div id="first"></div>
     45  <div id="second"></div>
     46  <div id="third"></div>
     47  <div id="fourth"></div>
     48  <div id="fifth"></div>
     49  <div id="sixth"></div>
     50 </div>
     51 <div class="wrapper">
     52  <a href="#first">First</a>
     53  <a href="#second">Second</a>
     54  <a href="#third">Third</a>
     55  <a href="#fourth">Fourth</a>
     56  <a href="#fifth">Fifth</a>
     57  <a href="#sixth">Sixth</a>
     58 </div>
     59 <script>
     60  function checkScrollMarkers(scrollMarkers, targetCurrentIndex) {
     61    for (let i = 0; i < scrollMarkers.length; ++i) {
     62      if (i < targetCurrentIndex) {
     63        assert_equals(getComputedStyle(scrollMarkers[i]).color, "rgb(255, 0, 0)", "scroll marker before the :target-current one should be red as :target-before");
     64      } else if (i === targetCurrentIndex) {
     65        assert_equals(getComputedStyle(scrollMarkers[i]).color, "rgb(0, 128, 0)", "the :target-current scroll marker should be green");
     66      } else {
     67        assert_equals(getComputedStyle(scrollMarkers[i]).color, "rgb(255, 255, 0)", "scroll marker before the :target-current one should be yellow as :target-after");
     68      }
     69    }
     70  }
     71  const scroller = document.querySelector(".scroller");
     72  const scrollTargets = scroller.querySelectorAll("div");
     73  const wrapper = document.querySelector(".wrapper");
     74  const scrollMarkers = wrapper.querySelectorAll("a");
     75  for (let i = 0; i < scrollTargets.length; ++i) {
     76    promise_test(async t => {
     77      // Make i-th scroll marker :target-current.
     78      scrollTargets[i].scrollIntoView();
     79      await waitForAnimationFrames(2);
     80      // Check the :target-before/:target-after relations on all scroll markers.
     81      checkScrollMarkers(scrollMarkers, i);
     82    }, i + "th scroll marker test");
     83  }
     84 </script>