tor-browser

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

test_bug1216483.html (5932B)

      1 <!DOCTYPE HTML>
      2 <html>
      3 <!--
      4  https://bugzilla.mozilla.org/show_bug.cgi?id=1216483
      5 -->
      6 <meta charset="utf-8">
      7 <title>Test for Bug 1216483</title>
      8 <script src="/tests/SimpleTest/SimpleTest.js"></script>
      9 <script src="/tests/SimpleTest/EventUtils.js"></script>
     10 <link rel="stylesheet" href="/tests/SimpleTest/test.css"/>
     11 <a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1216483">Mozilla Bug 1216483</a>
     12 <style>
     13  .container {
     14    border: 1px solid black;
     15    margin-bottom: 1em;
     16  }
     17 
     18  .with-before {
     19    counter-reset: cnt;
     20  }
     21 
     22  .with-before .container {
     23    counter-increment: cnt;
     24  }
     25 
     26  td {
     27    width: 100px;
     28  }
     29 
     30  .with-before td {
     31    counter-increment: cnt;
     32  }
     33 
     34  .with-before .container::before {
     35    content: counter(cnt) ")";
     36    margin: 0 8px;
     37    color: grey;
     38  }
     39 
     40  .with-before td::before {
     41    content: counter(cnt) ")";
     42    margin: 0 8px;
     43    color: grey;
     44  }
     45 
     46  .block .container { display: block; }
     47  .flex .container { display: flex; }
     48  .grid .container { display: grid; }
     49 </style>
     50 
     51 <h1>Only editable content</h1>
     52 <h2>display: block</h2>
     53 <div class="editor block" contenteditable inputmode="none">
     54  <div class="container">
     55    <div class="first">PLACE CURSOR HERE, THEN PRESS DOWNARROW.</div>
     56  </div>
     57  <div class="container">
     58    <div class="second">a<br>b<br>c</div>
     59  </div>
     60 </div>
     61 
     62 <h2>display: flex</h2>
     63 <div class="editor flex" contenteditable inputmode="none">
     64  <div class="container">
     65    <div class="first">PLACE CURSOR HERE, THEN PRESS DOWNARROW.</div>
     66  </div>
     67  <div class="container">
     68    <div class="second">a<br>b<br>c</div>
     69  </div>
     70 </div>
     71 
     72 <h2>display: grid</h2>
     73 <div class="editor grid" contenteditable inputmode="none">
     74  <div class="container">
     75    <div class="first">PLACE CURSOR HERE, THEN PRESS DOWNARROW.</div>
     76  </div>
     77  <div class="container">
     78    <div class="second">a<br>b<br>c</div>
     79  </div>
     80 </div>
     81 
     82 <h2>Table</h2>
     83 <div class="editor table" contenteditable inputmode="none">
     84  <div class="first">PLACE CURSOR HERE, THEN PRESS DOWNARROW.</div>
     85  <table border="1">
     86    <tr><td class="second">a<br>b<br>c</td><td>d</td></tr>
     87    <tr><td>k<br>l<br>m</td><td>n</td></tr>
     88  </table>
     89 </div>
     90 
     91 <h2>Table with element inside</h2>
     92 <div class="editor table" contenteditable inputmode="none">
     93  <div class="first">PLACE CURSOR HERE, THEN PRESS DOWNARROW.</div>
     94  <table border="1">
     95    <tr><td><span class="second">a<br>b<br>c</span></td><td><span>d</span></td></tr>
     96    <tr><td><span>k<br>l<br>m</span></td><td><span>n</span></td></tr>
     97  </table>
     98 </div>
     99 
    100 <h2>Table in a flex container</h2>
    101 <div class="editor flex table" contenteditable inputmode="none">
    102  <div class="container">
    103    <div class="first">PLACE CURSOR HERE, THEN PRESS DOWNARROW.</div>
    104  </div>
    105  <div class="container">
    106    <table border="1">
    107      <tr><td><span class="second">a<br>b<br>c</span></td><td><span>d</span></td></tr>
    108      <tr><td><span>k<br>l<br>m</span></td><td><span>n</span></td></tr>
    109    </table>
    110  </div>
    111 </div>
    112 
    113 <h1>Some non-editable content involved and skipped</h1>
    114 
    115 <h2>display: block</h2>
    116 <div class="editor block with-before" contenteditable inputmode="none">
    117  <div class="container">
    118    <div class="first">PLACE CURSOR HERE, THEN PRESS DOWNARROW.</div>
    119  </div>
    120  <div class="container">
    121    <div class="second">a<br>b<br>c</div>
    122  </div>
    123 </div>
    124 
    125 <h2>display: flex</h2>
    126 <div class="editor flex with-before" contenteditable inputmode="none">
    127  <div class="container">
    128    <div class="first">PLACE CURSOR HERE, THEN PRESS DOWNARROW.</div>
    129  </div>
    130  <div class="container">
    131    <div class="second">a<br>b<br>c</div>
    132  </div>
    133 </div>
    134 
    135 <h2>Flex with contenteditable="false"</h2>
    136 <div class="editor flex" contenteditable inputmode="none">
    137  <div class="container">
    138    <div class="first">PLACE CURSOR HERE, THEN PRESS DOWNARROW.</div>
    139  </div>
    140  <div class="container">
    141    <div contenteditable="false">X</div>
    142    <div class="second">a<br>b<br>c</div>
    143  </div>
    144 </div>
    145 
    146 <h2>display: grid</h2>
    147 <div class="editor grid with-before" contenteditable inputmode="none">
    148  <div class="container">
    149    <div class="first">PLACE CURSOR HERE, THEN PRESS DOWNARROW.</div>
    150  </div>
    151  <div class="container">
    152    <div class="second">a<br>b<br>c</div>
    153  </div>
    154 </div>
    155 
    156 <h2>Table</h2>
    157 <div class="editor table" contenteditable inputmode="none">
    158  <div class="first">PLACE CURSOR HERE, THEN PRESS DOWNARROW.</div>
    159  <table border="1">
    160    <tr><td class="second">a<br>b<br>c</td><td>d</td></tr>
    161    <tr><td>k<br>l<br>m</td><td>n</td></tr>
    162  </table>
    163 </div>
    164 
    165 <h2>Table with element inside</h2>
    166 <div class="editor table with-before" contenteditable inputmode="none">
    167  <div class="first">PLACE CURSOR HERE, THEN PRESS DOWNARROW.</div>
    168  <table border="1">
    169    <tr><td><span class="second">a<br>b<br>c</span></td><td><span>d</span></td></tr>
    170    <tr><td><span>k<br>l<br>m</span></td><td><span>n</span></td></tr>
    171  </table>
    172 </div>
    173 
    174 <h2>Table in a flex container</h2>
    175 <div class="editor flex table with-before" contenteditable inputmode="none">
    176  <div class="container">
    177    <div class="first">PLACE CURSOR HERE, THEN PRESS DOWNARROW.</div>
    178  </div>
    179  <div class="container">
    180    <table border="1">
    181      <tr><td><span class="second">a<br>b<br>c</span></td><td><span>d</span></td></tr>
    182      <tr><td><span>k<br>l<br>m</span></td><td><span>n</span></td></tr>
    183    </table>
    184  </div>
    185 </div>
    186 
    187 <script>
    188  const editors = document.querySelectorAll('.editor')
    189  editors.forEach(function (editor) {
    190    add_task(function() {
    191      editor.focus();
    192      const first = editor.querySelector('.first');
    193      const second = editor.querySelector('.second')
    194 
    195      document.getSelection().collapse(first.childNodes[0], 5);
    196 
    197      sendKey('DOWN');
    198 
    199      const sel = document.getSelection();
    200      is(sel.anchorNode.textContent, "a", editor.className + ': Caret not at the correct text node in second block')
    201      is(sel.anchorOffset, 1, editor.className + ': Caret not at the expected offset')
    202    });
    203  });
    204 </script>