tor-browser

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

column-scroll-marker-focus-002.html (3986B)

      1 <!DOCTYPE html>
      2 <title>Tab focus and ::colum::scroll-marker, wrapped column rows</title>
      3 <link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org">
      4 <link rel="help" href="https://drafts.csswg.org/css-overflow-5/#scroll-marker-next-focus">
      5 <style>
      6  body {
      7    margin: 0;
      8  }
      9  #container {
     10    scroll-marker-group: before;
     11    overflow: hidden;
     12    columns: 3;
     13    column-wrap: wrap;
     14    column-height: 100px;
     15    column-fill: auto;
     16    column-rule: solid;
     17    height: 150px;
     18    line-height: 20px;
     19  }
     20  #container::scroll-marker-group {
     21    display: flex;
     22    height: 20px;
     23    background: hotpink;
     24  }
     25  #container::column::scroll-marker {
     26    content: "";
     27    width: 20px;
     28    height: 20px;
     29    margin-right: 5px;
     30    background: blue;
     31  }
     32  #container::column::scroll-marker:focus {
     33    background: cyan;
     34  }
     35 </style>
     36 <div id="container">
     37  <!-- Column #0 -->
     38  <div tabindex="0" id="c0" style="height:100px;">First</div>
     39 
     40  <!-- Column #1 -->
     41  <div tabindex="0" id="c1first">line</div>
     42  <div tabindex="0" id="c1second" style="height:100px; background:red;">line</div>
     43 
     44  <!-- Column #2 -->
     45 
     46  <div tabindex="0" id="inlineBlock" style="display:inline-block; box-sizing:border-box; width:100%; height:70px; border:solid;"></div>
     47 
     48  <!-- Column #3 -->
     49  <div>
     50    <div style="display:flex; flex-flow:wrap row-reverse;">
     51      <div tabindex="0" id="flex1" style="width:30%; height:100px;">A</div>
     52      <div tabindex="0" id="flex2" style="width:30%;">B</div>
     53      <div tabindex="0" id="flex3" style="width:30%;">C</div>
     54    </div>
     55 
     56    <!-- Column #4 -->
     57    <div tabindex="0" id="flex4" style="width:30%;">D</div>
     58    <div tabindex="0" id="flex5" style="width:30%;">E</div>
     59    <div tabindex="0" id="flex6" style="width:30%;">F</div>
     60  </div>
     61 </div>
     62 
     63 <div tabindex="0" id="after">after</div>
     64 
     65 <script src="/resources/testharness.js"></script>
     66 <script src="/resources/testharnessreport.js"></script>
     67 <script src="/resources/testdriver.js"></script>
     68 <script src="/resources/testdriver-actions.js"></script>
     69 <script src="/resources/testdriver-vendor.js"></script>
     70 
     71 <script>
     72  async function activateMarker(idx) {
     73    await new test_driver.Actions()
     74      .pointerMove(5 + idx*25, 5)
     75      .pointerDown()
     76      .pointerUp()
     77      .send();
     78  }
     79 
     80  async function focusNext() {
     81    // https://w3c.github.io/webdriver/#keyboard-actions
     82    const kTab = '\uE004';
     83 
     84    await new test_driver.Actions()
     85      .keyDown(kTab)
     86      .keyUp(kTab)
     87      .send();
     88  }
     89 
     90  promise_test(async t => {
     91    await activateMarker(1);
     92    await focusNext();
     93    assert_equals(document.activeElement, c1first);
     94    await focusNext();
     95    assert_equals(document.activeElement, c1second);
     96    await focusNext();
     97    assert_equals(document.activeElement, inlineBlock);
     98  }, "Column #1");
     99 
    100  promise_test(async t => {
    101    await activateMarker(2);
    102    await focusNext();
    103    assert_equals(document.activeElement, inlineBlock);
    104    await focusNext();
    105    assert_equals(document.activeElement, flex1);
    106  }, "Column #2");
    107 
    108  promise_test(async t => {
    109    await activateMarker(0);
    110    await focusNext();
    111    assert_equals(document.activeElement, c0);
    112    await focusNext();
    113    assert_equals(document.activeElement, c1first);
    114  }, "Column #0");
    115 
    116  promise_test(async t => {
    117    await activateMarker(4);
    118    await focusNext();
    119    assert_equals(document.activeElement, flex4);
    120    await focusNext();
    121    assert_equals(document.activeElement, flex5);
    122    await focusNext();
    123    assert_equals(document.activeElement, flex6);
    124    await focusNext();
    125    assert_equals(document.activeElement, after);
    126  }, "Column #4");
    127 
    128  promise_test(async t => {
    129    await activateMarker(3);
    130    await focusNext();
    131    assert_equals(document.activeElement, flex1);
    132    await focusNext();
    133    assert_equals(document.activeElement, flex2);
    134    await focusNext();
    135    assert_equals(document.activeElement, flex3);
    136    await focusNext();
    137    assert_equals(document.activeElement, flex4);
    138  }, "Column #3");
    139 </script>