tor-browser

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

scroll-marker-multiple-activation.html (3700B)

      1 <!DOCTYPE html>
      2 <meta charset="utf-8">
      3 <title>CSS Values Test: ::scroll-marker activation of multiple markers</title>
      4 <link rel="help" href="https://drafts.csswg.org/css-overflow-5/#scroll-marker-activation">
      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 <style>
     11  body {
     12    margin: 0;
     13  }
     14 
     15  #scroller {
     16    width: 600px;
     17    height: 300px;
     18    overflow: auto;
     19    scroll-marker-group: before;
     20    white-space: nowrap;
     21  }
     22 
     23  #scroller div {
     24    background: green;
     25    display: inline-block;
     26    width: 600px;
     27    height: 200px;
     28  }
     29 
     30  #scroller::scroll-marker-group {
     31    display: flex;
     32    height: 20px;
     33    width: 140px;
     34  }
     35 
     36  #scroller div::scroll-marker {
     37    content: "";
     38    width: 20px;
     39    height: 20px;
     40    background-color: red;
     41    display: inline-block;
     42  }
     43 
     44  #scroller div::scroll-marker:target-current {
     45    background-color: green;
     46  }
     47 </style>
     48 <div id="scroller">
     49  <div></div>
     50  <div id="firstTarget"></div>
     51  <div></div>
     52  <div></div>
     53  <div></div>
     54  <div id="secondTarget"></div>
     55  <div></div>
     56 </div>
     57 <script>
     58  promise_test(async t => {
     59    const firstTarget = document.getElementById("firstTarget");
     60    const secondTarget = document.getElementById("secondTarget");
     61 
     62    const firstTargetScrollMarkerX = 30;
     63    const firstTargetScrollMarkerY = 10;
     64    const secondTargetScrollMarkerX = 110;
     65    const secondTargetScrollMarkerY = 10;
     66 
     67    // Ensure the scroll markers are not active before activation.
     68    assert_equals(getComputedStyle(firstTarget, "::scroll-marker").backgroundColor, "rgb(255, 0, 0)", "first target ::scroll-marker is not active before activation");
     69    assert_equals(getComputedStyle(secondTarget, "::scroll-marker").backgroundColor, "rgb(255, 0, 0)", "second target ::scroll-marker is not active before activation");
     70 
     71    // Activate the first target's scroll marker.
     72    await new test_driver.Actions()
     73      .pointerMove(firstTargetScrollMarkerX, firstTargetScrollMarkerY)
     74      .pointerDown()
     75      .pointerUp()
     76      .send();
     77    assert_equals(getComputedStyle(firstTarget, "::scroll-marker").backgroundColor, "rgb(0, 128, 0)", "first target ::scroll-marker is :target-current after activation");
     78    assert_equals(getComputedStyle(secondTarget, "::scroll-marker").backgroundColor, "rgb(255, 0, 0)", "second target ::scroll-marker is not active when the first is activated");
     79 
     80    // Activate the second target's scroll marker.
     81    await new test_driver.Actions()
     82      .pointerMove(secondTargetScrollMarkerX, secondTargetScrollMarkerY)
     83      .pointerDown()
     84      .pointerUp()
     85      .send();
     86    assert_equals(getComputedStyle(firstTarget, "::scroll-marker").backgroundColor, "rgb(255, 0, 0)", "first target ::scroll-marker is not when the second is activated");
     87    assert_equals(getComputedStyle(secondTarget, "::scroll-marker").backgroundColor, "rgb(0, 128, 0)", "second target ::scroll-marker is :target-current after activation");
     88 
     89    // Activate the first target's scroll marker again.
     90    await new test_driver.Actions()
     91      .pointerMove(firstTargetScrollMarkerX, firstTargetScrollMarkerY)
     92      .pointerDown()
     93      .pointerUp()
     94      .send();
     95    assert_equals(getComputedStyle(firstTarget, "::scroll-marker").backgroundColor, "rgb(0, 128, 0)", "first target ::scroll-marker is :target-current after activation");
     96    assert_equals(getComputedStyle(secondTarget, "::scroll-marker").backgroundColor, "rgb(255, 0, 0)", "second target ::scroll-marker is not active when the first is activated again");
     97  });
     98 </script>