tor-browser

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

accessiblecaret_magnifier.html (2777B)

      1 <!DOCTYPE html>
      2 <html>
      3 <head>
      4  <script src="/tests/SimpleTest/EventUtils.js"></script>
      5 </head>
      6 <body>
      7 <p id="display">
      8  <div id="editable" contenteditable inputmode="none" style="width: 400px; font-size: 4em;">foobarbaz</div>
      9 </p>
     10 <script>
     11 const SimpleTest = parent.SimpleTest;
     12 const is = parent.is;
     13 const info = parent.info;
     14 const isnot = parent.isnot;
     15 const ok = parent.ok;
     16 
     17 window.addEventListener("load", runTest);
     18 
     19 async function runTest() {
     20  let target = document.getElementById("editable");
     21  target.focus();
     22  let targetRect = target.getBoundingClientRect();
     23  let selection = window.getSelection();
     24 
     25  // Select word then show accessible caret
     26  synthesizeTouchAtCenter(target, { type: "touchstart" });
     27  synthesizeMouseAtCenter(target, { type: "mouselongtap" });
     28  synthesizeTouchAtCenter(target, { type: "touchend" });
     29  ok(!selection.getRangeAt(0).collapsed, "Select word");
     30 
     31  let rangeRect = selection.getRangeAt(0).getBoundingClientRect();
     32  let presscaret = 0;
     33  let dragcaret = 0;
     34  let releasecaret = 0;
     35 
     36  const dragStart = {
     37    x: Math.round(rangeRect.left),
     38    y: Math.round(rangeRect.bottom + 12)
     39  };
     40  const dragEnd = {
     41    x: Math.round(rangeRect.left + 60),
     42    y: Math.round(rangeRect.bottom + 12)
     43  };
     44  let handler;
     45 
     46  let promise = new Promise(resolve => {
     47    handler = function(e) {
     48      info("mozcaretstatechanged is fired with " + e.reason);
     49      switch (e.reason) {
     50        case "presscaret":
     51          is(dragStart.x, e.clientX, "dragcaret event has clientX data.");
     52          is(dragStart.y, e.clientY, "dragcaret event has clientY data.");
     53          presscaret++;
     54          break;
     55        case "dragcaret":
     56          is(dragEnd.x, e.clientX, "dragcaret event has clientX data.");
     57          is(dragEnd.y, e.clientY, "dragcaret event has clientY data.");
     58          dragcaret++;
     59          break;
     60        case "releasecaret":
     61          releasecaret++;
     62          resolve();
     63          break;
     64      }
     65    };
     66  });
     67 
     68  SpecialPowers.addChromeEventListener("mozcaretstatechanged", handler, true);
     69 
     70  // Drag accessible caret
     71  synthesizeTouchAtPoint(dragStart.x, dragStart.y, { type: "touchstart" });
     72  synthesizeTouchAtPoint(dragEnd.x, dragEnd.y, { type: "touchmove" });
     73  synthesizeTouchAtPoint(dragEnd.x, dragEnd.y, { type: "touchend" });
     74 
     75  await promise;
     76 
     77  SpecialPowers.removeChromeEventListener("mozcaretstatechanged", handler, true);
     78 
     79  is(presscaret, 1, "presscaret is fired correctly");
     80  is(dragcaret, 1, "presscaret is fired correctly");
     81  is(releasecaret, 1, "releasecaret is fired correctly");
     82 
     83  let newRangeRect = selection.getRangeAt(0).getBoundingClientRect();
     84  isnot(rangeRect.left, newRangeRect.left,
     85        "Selected range is changed by dragging accessible caret");
     86 
     87  SimpleTest.finish();
     88 }
     89 </script>
     90 </body>
     91 </html>