editor/libeditor/tests/test_abs_positioner_positioning_elements.html
author Mark Banner <standard8@mozilla.com>
Thu, 13 Sep 2018 07:58:19 +0000
changeset 436109 de36f39840c64a50ccc45f8c0593d8dcd651dfc2
parent 432325 e93a23a4741c7760d76e33c3515e9b6ee2f5e26d
child 447471 d4a142e1648b3e341fb0f486d7b15a0bad7e0904
permissions -rw-r--r--
Bug 1489980 - Enable ESLint for editor/ - automatic fixes r=masayuki These are all automatically generated by ESLint with the --fix option. Depends on D5584 Differential Revision: https://phabricator.services.mozilla.com/D5585

<!DOCTYPE HTML>
<html>
<head>
  <title>Test for positioners of absolute positioned elements</title>
  <script type="application/javascript" src="/tests/SimpleTest/SimpleTest.js"></script>
  <script type="text/javascript" src="/tests/SimpleTest/EventUtils.js"></script>
  <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css"/>
  <style>
  #target {
    background-color: green;
  }
  </style>
</head>
<body>
<p id="display"></p>
<div id="content" contenteditable style="height: 200px; width: 200px;"></div>
<div id="clickaway" style="position: absolute; top: 250px; width: 10px; height: 10px; z-index: 100;"></div>
<img src="green.png"><!-- for ensuring to load the image at first test of <img> case -->
<pre id="test">
<script type="application/javascript">
"use strict";

SimpleTest.waitForExplicitFinish();
SimpleTest.waitForFocus(async function() {
  document.execCommand("enableAbsolutePositionEditing", false, true);
  ok(document.queryCommandState("enableAbsolutePositionEditing"),
     "Absolute positioned element editor should be enabled by the call of execCommand");

  let outOfEditor = document.getElementById("clickaway");

  function cancel(e) { e.stopPropagation(); }
  let content = document.getElementById("content");
  content.addEventListener("mousedown", cancel);
  content.addEventListener("mousemove", cancel);
  content.addEventListener("mouseup", cancel);

  async function waitForSelectionChange() {
    return new Promise(resolve => {
      document.addEventListener("selectionchange", () => {
        resolve();
      }, {once: true});
    });
  }

  async function doTest(aDescription, aInnerHTML) {
    content.innerHTML = aInnerHTML;
    let description = aDescription + ": ";
    let target = document.getElementById("target");
    target.style.position = "absolute";

    async function testPositioner(aDeltaX, aDeltaY) {
      ok(true, description + "testPositioner(" + [aDeltaX, aDeltaY].join(", ") + ")");

      // Reset the position of the target.
      target.style.top = "50px";
      target.style.left = "50px";

      // Click on the target to show the positioner.
      let promiseSelectionChangeEvent = waitForSelectionChange();
      synthesizeMouseAtCenter(target, {});
      await promiseSelectionChangeEvent;

      let rect = target.getBoundingClientRect();

      ok(target.hasAttribute("_moz_abspos"),
         description + "While enableAbsolutePositionEditing is enabled, the positioner should appear");

      // left is abs positioned element's left + margin-left + border-left-width + 12.
      // XXX Perhaps, we need to add border-left-width here if you add new test to have thick border.
      const kPositionerX = 18;
      // top is abs positioned element's top + margin-top + border-top-width - 14.
      // XXX Perhaps, we need to add border-top-width here if you add new test to have thick border.
      const kPositionerY = -7;

      // Click on the positioner.
      synthesizeMouse(target, kPositionerX, kPositionerY, {type: "mousedown"});
      // Drag it delta pixels.
      synthesizeMouse(target, kPositionerX + aDeltaX, kPositionerY + aDeltaY, {type: "mousemove"});
      // Release the mouse button
      synthesizeMouse(target, kPositionerX + aDeltaX, kPositionerY + aDeltaY, {type: "mouseup"});
      // Move the mouse delta more pixels to the same direction to make sure that the
      // positioning operation has stopped.
      synthesizeMouse(target, kPositionerX + aDeltaX * 2, kPositionerY + aDeltaY * 2, {type: "mousemove"});
      // Click outside of the image to hide the positioner.
      synthesizeMouseAtCenter(outOfEditor, {});

      // Get the new dimensions for the absolute positioned element.
      let newRect = target.getBoundingClientRect();
      isfuzzy(newRect.x, rect.x + aDeltaX, 1, description + "The left should be increased by " + aDeltaX + " pixels");
      isfuzzy(newRect.y, rect.y + aDeltaY, 1, description + "The top should be increased by " + aDeltaY + "pixels");
    }

    await testPositioner( 10, 10);
    await testPositioner( 10, -10);
    await testPositioner(-10, 10);
    await testPositioner(-10, -10);
  }

  const kTests = [
    { description: "Positioner for <img>",
      innerHTML: "<img id=\"target\" src=\"green.png\">",
    },
    { description: "Positioner for <table>",
      innerHTML: "<table id=\"target\" border><tr><td>cell</td><td>cell</td></tr></table>",
    },
    { description: "Positioner for <div>",
      innerHTML: "<div id=\"target\">div element</div>",
    },
  ];

  for (const kTest of kTests) {
    await doTest(kTest.description, kTest.innerHTML);
  }
  content.innerHTML = "";
  SimpleTest.finish();
});
</script>
</pre>
</body>
</html>