accessiblecaret_magnifier.html

Enable keyboard shortcuts

<!DOCTYPE html>

<html>

<head>

  <script src="/tests/SimpleTest/EventUtils.js"></script>

</head>

<body>

<p id="display">

  <div id="editable" contenteditable inputmode="none" style="width: 400px; font-size: 4em;">foobarbaz</div>

</p>

<script>

const SimpleTest = parent.SimpleTest;

const is = parent.is;

const info = parent.info;

const isnot = parent.isnot;

const ok = parent.ok;

window.addEventListener("load", runTest);

async function runTest() {

  let target = document.getElementById("editable");

  target.focus();

  let targetRect = target.getBoundingClientRect();

  let selection = window.getSelection();

  // Select word then show accessible caret

  synthesizeTouchAtCenter(target, { type: "touchstart" });

  synthesizeMouseAtCenter(target, { type: "mouselongtap" });

  synthesizeTouchAtCenter(target, { type: "touchend" });

  ok(!selection.getRangeAt(0).collapsed, "Select word");

  let rangeRect = selection.getRangeAt(0).getBoundingClientRect();

  let presscaret = 0;

  let dragcaret = 0;

  let releasecaret = 0;

  const dragStart = {

    x: Math.round(rangeRect.left),

    y: Math.round(rangeRect.bottom + 12)

};

  const dragEnd = {

    x: Math.round(rangeRect.left + 60),

    y: Math.round(rangeRect.bottom + 12)

};

  let handler;

  let promise = new Promise(resolve => {

    handler = function(e) {

      info("mozcaretstatechanged is fired with " + e.reason);

      switch (e.reason) {

        case "presscaret":

          is(dragStart.x, e.clientX, "dragcaret event has clientX data.");

          is(dragStart.y, e.clientY, "dragcaret event has clientY data.");

          presscaret++;

          break;

        case "dragcaret":

          is(dragEnd.x, e.clientX, "dragcaret event has clientX data.");

          is(dragEnd.y, e.clientY, "dragcaret event has clientY data.");

          dragcaret++;

          break;

        case "releasecaret":

          releasecaret++;

          resolve();

          break;

};

});

  SpecialPowers.addChromeEventListener("mozcaretstatechanged", handler, true);

  // Drag accessible caret

  synthesizeTouchAtPoint(dragStart.x, dragStart.y, { type: "touchstart" });

  synthesizeTouchAtPoint(dragEnd.x, dragEnd.y, { type: "touchmove" });

  synthesizeTouchAtPoint(dragEnd.x, dragEnd.y, { type: "touchend" });

  await promise;

  SpecialPowers.removeChromeEventListener("mozcaretstatechanged", handler, true);

  is(presscaret, 1, "presscaret is fired correctly");

  is(dragcaret, 1, "presscaret is fired correctly");

  is(releasecaret, 1, "releasecaret is fired correctly");

  let newRangeRect = selection.getRangeAt(0).getBoundingClientRect();

  isnot(rangeRect.left, newRangeRect.left,

        "Selected range is changed by dragging accessible caret");

  SimpleTest.finish();

</script>

</body>

</html>