tor-browser

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

column-scroll-marker-003.html (2650B)

      1 <!DOCTYPE html>
      2 <link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org">
      3 <link rel="help" href="https://www.w3.org/TR/css-multicol-2/#column-pseudo">
      4 <script src="/resources/testharness.js"></script>
      5 <script src="/resources/testharnessreport.js"></script>
      6 <script src="/resources/testdriver.js"></script>
      7 <script src="/resources/testdriver-actions.js"></script>
      8 <script src="/resources/testdriver-vendor.js"></script>
      9 <style>
     10  #container {
     11    overflow: hidden;
     12    columns: 3;
     13    column-fill: auto;
     14    gap: 0;
     15    orphans: 1;
     16    widows: 1;
     17    height: 100px;
     18    border: 15px solid;
     19    line-height: 20px;
     20    scroll-marker-group: before;
     21    background: yellow;
     22  }
     23  #container::scroll-marker-group {
     24    display: flex;
     25    justify-content: space-between;
     26    height: 50px;
     27    background: cyan;
     28  }
     29  #container::column::scroll-marker {
     30    display: flex;
     31    justify-content: center;
     32    align-items: center;
     33    width: 50px;
     34    height: 50px;
     35    background: hotpink;
     36    content: "*";
     37  }
     38 </style>
     39 <div style="width:450px;">
     40  <div id="container">
     41    First column<br>
     42    <br>
     43    <br>
     44    <br>
     45    <br>
     46    Second column<br>
     47    <br>
     48    <br>
     49    <br>
     50    <br>
     51    Third column<br>
     52    <br>
     53    <br>
     54    <br>
     55    <br>
     56    Fourth column<br>
     57    <br>
     58    <br>
     59    <br>
     60    <br>
     61    Fifth column<br>
     62  </div>
     63 </div>
     64 <script>
     65  function sendClick(x) {
     66    return new test_driver.Actions()
     67      .pointerMove(x, 10)
     68      .pointerDown()
     69      .pointerUp()
     70      .send();
     71  }
     72 
     73  promise_test(async t => {
     74    await sendClick(110);
     75    assert_equals(container.scrollLeft, 140);
     76  }, "Scroll second column into view");
     77  promise_test(async t => {
     78    await sendClick(210);
     79    assert_equals(container.scrollLeft, 280);
     80  }, "Scroll third column into view");
     81  promise_test(async t => {
     82    await sendClick(310);
     83    assert_equals(container.scrollLeft, 280);
     84  }, "Scroll fourth column into view");
     85  promise_test(async t => {
     86    await sendClick(410);
     87    assert_equals(container.scrollLeft, 280);
     88  }, "Scroll fifth column into view");
     89  promise_test(async t => {
     90    await sendClick(310);
     91    assert_equals(container.scrollLeft, 280);
     92  }, "Scroll fourth column into view again");
     93  promise_test(async t => {
     94    await sendClick(210);
     95    assert_equals(container.scrollLeft, 280);
     96  }, "Scroll third column into view again");
     97  promise_test(async t => {
     98    await sendClick(110);
     99    assert_equals(container.scrollLeft, 140);
    100  }, "Scroll second column into view again");
    101  promise_test(async t => {
    102    await sendClick(10);
    103    assert_equals(container.scrollLeft, 0);
    104  }, "Scroll first column into view");
    105 </script>