tor-browser

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

contenteditable-insert-line-at-top.tentative.html (3481B)

      1 <!DOCTYPE html>
      2 <link rel="help" href="https://drafts.csswg.org/css-scroll-anchoring/">
      3 <meta name="viewport" content="width=device-width,initial-scale=1">
      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 
     11 #container {
     12  height: 300px;
     13  width: 300px;
     14  overflow-y: scroll;
     15  scroll-behavior: auto;
     16 }
     17 
     18 p {
     19  margin: 0px;
     20  line-height: 20px;
     21  font-size: 20px;
     22 }
     23 
     24 </style>
     25 
     26 <div id="container">
     27  <div contenteditable>
     28    <p>
     29    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ante
     30    nulla, dictum rhoncus libero vel, dictum iaculis sem. Morbi sit amet
     31    euismod ligula. Proin et est ex. Pellentesque sollicitudin lobortis diam
     32     eu posuere. Donec a diam risus. Fusce quis semper sapien, sed tincidunt
     33     mi. Nullam tortor diam, sagittis sed scelerisque ut, scelerisque a
     34    turpis. Integer a dignissim turpis. Etiam eu pharetra nisl, ac ultricies
     35     sem. Ut at tristique turpis. Aliquam vitae arcu quis turpis gravida
     36    luctus at at turpis. Nullam aliquet turpis sed lectus interdum
     37    ultricies.
     38    </p>
     39  </div>
     40 </div>
     41 <script>
     42 
     43 setup(() => {
     44  const editable = document.querySelector("div[contenteditable]");
     45  const child = editable.children[0];
     46 
     47  for (let i = 0; i < 10; i++) {
     48    const clone = child.cloneNode(true);
     49    editable.appendChild(clone);
     50  }
     51  document.documentElement.getBoundingClientRect();
     52 });
     53 
     54 promise_test(async t => {
     55  const editable = document.querySelector("div[contenteditable]");
     56  editable.focus();
     57 
     58  // Scroll down to the bottom.
     59  let scrollPromise = new Promise(resolve => {
     60    container.addEventListener("scroll", () => resolve(), { once: true });
     61  });
     62  // Hopefully 10000 is greater than the maximum possible scroll position.
     63  container.scrollTo(0, 10000);
     64  await scrollPromise;
     65 
     66  assert_greater_than(container.scrollTop, 0);
     67 
     68  const selection = window.getSelection();
     69  selection.collapse(editable.lastElementChild, 1);
     70 
     71  // Pres Ctrl+Home or Meta+ArrorUp to move back to the top.
     72  scrollPromise = new Promise(resolve => {
     73    container.addEventListener("scroll", () => resolve(), { once: true });
     74  });
     75  const kHomeOrArrowUp =
     76    navigator.platform.includes("Mac") ? "\uE013" : "\uE011";
     77  const kControlOrMeta =
     78    navigator.platform.includes("Mac") ? "\uE03d" : "\uE009";
     79  await new test_driver.Actions()
     80    .keyDown(kControlOrMeta)
     81    .keyDown(kHomeOrArrowUp)
     82    .keyUp(kHomeOrArrowUp)
     83    .keyUp(kControlOrMeta)
     84    .send();
     85  await scrollPromise;
     86 
     87  assert_equals(container.scrollTop, 0,
     88    "The scroll position should be restored to the top");
     89 
     90  container.addEventListener("scroll", () => {
     91    assert_false("Any scroll event should not happen");
     92  });
     93  // Press "Enter" to insert a new line at the top.
     94  const kEnter = "\uE007";
     95  await new test_driver.Actions()
     96    .keyDown(kEnter)
     97    .keyUp(kEnter)
     98    .send();
     99 
    100  // Wait 3 frames to give a chance to scroll.
    101  await new Promise(resolve => requestAnimationFrame(resolve));
    102  await new Promise(resolve => requestAnimationFrame(resolve));
    103  await new Promise(resolve => requestAnimationFrame(resolve));
    104 
    105  assert_equals(container.scrollTop, 0,
    106    "The scroll position should be unchanged");
    107 }, "The scroll position is unchanged when inserting a new line at the top of contenteditable");
    108 
    109 </script>