test_resizers_appearance.html

Enable keyboard shortcuts

<!DOCTYPE html>

<html>

<head>

  <title>Test for resizers appearance</title>

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

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

  <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css" />

</head>

<body>

<p id="display"></p>

<div id="content" style="display: none;">

</div>

<div id="editor" contenteditable></div><br>

<div id="clickaway" style="width: 30px; height: 30px; border: 3px solid red;"></div>

<img src="green.png"><!-- for ensuring to load the image at first test of <img> case -->

<pre id="test">

<script class="testbody" type="application/javascript">

"use strict";

SimpleTest.waitForExplicitFinish();

SimpleTest.waitForFocus(async function() {

  async function waitForSelectionChange() {

    return new Promise(resolve => {

      document.addEventListener("selectionchange", () => {

        resolve();

      }, {once: true});

});

  let editor = document.getElementById("editor");

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

  const kTests = [

    { description: "<img>",

      innerHTML: "<img id=\"target\" src=\"green.png\" width=\"100\" height=\"100\">",

      resizable: true,

},

    { description: "<table>",

      innerHTML: "<table id=\"target\" border><tr><td>1-1</td><td>1-2</td></tr><tr><td>2-1</td><td>2-2</td></tr></table>",

      resizable: true,

},

    { description: "absolute positioned <div>",

      innerHTML: "<div id=\"target\" style=\"position: absolute; top: 50px; left: 50px;\">positioned</div>",

      resizable() { return document.queryCommandState("enableAbsolutePositionEditing"); },

},

    { description: "fixed positioned <div>",

      innerHTML: "<div id=\"target\" style=\"position: fixed; top: 50px; left: 50px;\">positioned</div>",

      resizable: false,

},

    { description: "relative positioned <div>",

      innerHTML: "<div id=\"target\" style=\"position: relative; top: 50px; left: 50px;\">positioned</div>",

      resizable: false,

},

];

  for (let kEnableAbsolutePositionEditor of [true, false]) {

    document.execCommand("enableAbsolutePositionEditing", false, kEnableAbsolutePositionEditor);

    for (const kTest of kTests) {

      const kDescription = kTest.description +

        (kEnableAbsolutePositionEditor ? " (enabled absolute position editor)" : "") + ": ";

      editor.innerHTML = kTest.innerHTML;

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

      document.execCommand("enableObjectResizing", false, false);

      ok(!document.queryCommandState("enableObjectResizing"),

         kDescription + "Object resizer should be disabled by the call of execCommand");

      synthesizeMouseAtCenter(outOfEditor, {});

      let promiseSelectionChangeEvent1 = waitForSelectionChange();

      synthesizeMouseAtCenter(target, {});

      await promiseSelectionChangeEvent1;

      ok(!target.hasAttribute("_moz_resizing"),

         kDescription + ": While enableObjectResizing is disabled, resizers shouldn't appear");

      document.execCommand("enableObjectResizing", false, true);

      ok(document.queryCommandState("enableObjectResizing"),

         kDescription + "Object resizer should be enabled by the call of execCommand");

      synthesizeMouseAtCenter(outOfEditor, {});

      let promiseSelectionChangeEvent2 = waitForSelectionChange();

      synthesizeMouseAtCenter(target, {});

      await promiseSelectionChangeEvent2;

      const kResizable = typeof kTest.resizable === "function" ? kTest.resizable() : kTest.resizable;

      is(target.hasAttribute("_moz_resizing"), kResizable,

         kDescription + (kResizable ? "While enableObjectResizing is enabled, resizers should appear" :

                                      "Even while enableObjectResizing is enabled, resizers shouldn't appear"));

      document.execCommand("enableObjectResizing", false, false);

      ok(!target.hasAttribute("_moz_resizing"),

         kDescription + "enableObjectResizing is disabled even while resizers are visible, resizers should disappear");

      document.execCommand("enableObjectResizing", false, true);

      is(target.hasAttribute("_moz_resizing"), kResizable,

         kDescription + (kResizable ? "enableObjectResizing is enabled when resizable object is selected, resizers should appear" :

                                      "Even if enableObjectResizing is enabled when non-resizable object is selected, resizers shouldn't appear"));

  SimpleTest.finish();

});

</script>

</pre>

</body>

</html>