editor/libeditor/tests/test_cmd_backgroundColor.html

   1 <!doctype html>
   2 <html>
   3 <head>
   4 <meta charset="utf-8">
   5 <title>Testing "cmd_backgroundColor" behavior</title>
   6 <script src="/tests/SimpleTest/SimpleTest.js"></script>
   7 <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css" />
   8 </head>
   9 <body>
  10 <div contenteditable></div>
  11 <script>
  12 "use strict";
  13
  14 SimpleTest.waitForExplicitFinish();
  15 SimpleTest.waitForFocus(() => {
  16   document.execCommand("styleWithCSS", false, "true");
  17   const commandManager =
  18     SpecialPowers.wrap(window).
  19       docShell.
  20       QueryInterface(SpecialPowers.Ci.nsIInterfaceRequestor).
  21       getInterface(SpecialPowers.Ci.nsICommandManager);
  22   const editor = document.querySelector("div[contenteditable]");
  23   editor.style.backgroundColor = "#ff0000";
  24
  25   editor.innerHTML = "<p>abc</p>";
  26   editor.getBoundingClientRect();
  27   editor.focus();
  28   getSelection().collapse(editor.querySelector("p").firstChild, 1);
  29   let params = SpecialPowers.Cu.createCommandParams();
  30   commandManager.getCommandState("cmd_backgroundColor", window, params);
  31   is(
  32     params.getCStringValue("state_attribute"),
  33     "rgb(255, 0, 0)",
  34     "cmd_backgroundColor should return the editing host's background color (should ignore the transparent paragraph)"
  35   );
  36
  37   editor.innerHTML = "<p style=\"background-color: #00ff00\">abc</p>";
  38   editor.getBoundingClientRect();
  39   editor.focus();
  40   getSelection().collapse(editor.querySelector("p").firstChild, 1);
  41   params = SpecialPowers.Cu.createCommandParams();
  42   commandManager.getCommandState("cmd_backgroundColor", window, params);
  43   is(
  44     params.getCStringValue("state_attribute"),
  45     "rgb(0, 255, 0)",
  46     "cmd_backgroundColor should return the paragraph's background color"
  47   );
  48
  49   editor.innerHTML = "<span style=\"background-color: #00ff00\">abc</span>";
  50   editor.getBoundingClientRect();
  51   editor.focus();
  52   getSelection().collapse(editor.querySelector("span").firstChild, 1);
  53   params = SpecialPowers.Cu.createCommandParams();
  54   commandManager.getCommandState("cmd_backgroundColor", window, params);
  55   is(
  56     params.getCStringValue("state_attribute"),
  57     "rgb(255, 0, 0)",
  58     "cmd_backgroundColor shouldn't return the span's background color due to inline element"
  59   );
  60
  61   editor.innerHTML = "<p style=\"background-color: #00ff00\" contenteditable=\"false\">a<span style=\"background-color: #0000ff\" contenteditable=\"true\">b</span>c</p>";
  62   editor.getBoundingClientRect();
  63   editor.focus();
  64   getSelection().collapse(editor.querySelector("span[contenteditable=true]").firstChild, 1);
  65   params = SpecialPowers.Cu.createCommandParams();
  66   commandManager.getCommandState("cmd_backgroundColor", window, params);
  67   is(
  68     params.getCStringValue("state_attribute"),
  69     "rgb(0, 255, 0)",
  70     "cmd_backgroundColor should return non-editable block element's background color"
  71   );
  72
  73   editor.innerHTML = "<p contenteditable=\"false\">a<span style=\"background-color: #0000ff\" contenteditable=\"true\">b</span>c</p>";
  74   editor.getBoundingClientRect();
  75   editor.focus();
  76   getSelection().collapse(editor.querySelector("span[contenteditable=true]").firstChild, 1);
  77   params = SpecialPowers.Cu.createCommandParams();
  78   commandManager.getCommandState("cmd_backgroundColor", window, params);
  79   is(
  80     params.getCStringValue("state_attribute"),
  81     "rgb(255, 0, 0)",
  82     "cmd_backgroundColor should return the parent editing host's background color (should ignore the transparent non-editable paragraph)"
  83   );
  84
  85   editor.style.backgroundColor = "#ff0000";
  86   editor.innerHTML = "<div><p><span>abc</span></p></div>";
  87   editor.getBoundingClientRect();
  88   editor.focus();
  89   getSelection().collapse(editor.querySelector("span").firstChild, 1);
  90   SpecialPowers.doCommand(window, "cmd_backgroundColor", "#00ff00");
  91   is(
  92     editor.outerHTML,
  93     "<div contenteditable=\"\" style=\"background-color: rgb(255, 0, 0);\"><div><p style=\"background-color: rgb(0, 255, 0);\"><span>abc</span></p></div></div>",
  94     "cmd_backgroundColor should set background of the closest block element from the caret in a text node"
  95   );
  96
  97   editor.style.backgroundColor = "#ff0000";
  98   editor.innerHTML = "abc";
  99   editor.getBoundingClientRect();
 100   editor.focus();
 101   getSelection().collapse(editor.firstChild, 1);
 102   SpecialPowers.doCommand(window, "cmd_backgroundColor", "#00ff00");
 103   is(
 104     editor.outerHTML,
 105     "<div contenteditable=\"\" style=\"background-color: rgb(0, 255, 0);\">abc</div>",
 106     "cmd_backgroundColor should set background of the editing host which is direct block parent from the caret in a text node"
 107   );
 108
 109   editor.style.backgroundColor = "#ff0000";
 110   editor.innerHTML = "<div contenteditable=\"false\"><span contenteditable=\"true\">abc</span></div>";
 111   editor.getBoundingClientRect();
 112   editor.focus();
 113   getSelection().collapse(editor.firstChild, 1);
 114   SpecialPowers.doCommand(window, "cmd_backgroundColor", "#00ff00");
 115   is(
 116     editor.outerHTML,
 117     "<div contenteditable=\"\" style=\"background-color: rgb(255, 0, 0);\"><div contenteditable=\"false\"><span contenteditable=\"true\">abc</span></div></div>",
 118     "cmd_backgroundColor should not set background color of inline editing host nor its non-editable parent block"
 119   );
 120
 121   editor.style.backgroundColor = "#ff0000";
 122   editor.innerHTML = "<div><p><span>ab<br>c</span></p></div>";
 123   editor.getBoundingClientRect();
 124   editor.focus();
 125   getSelection().setBaseAndExtent(editor.querySelector("span"), 1, editor.querySelector("span"), 2);
 126   SpecialPowers.doCommand(window, "cmd_backgroundColor", "#00ff00");
 127   is(
 128     editor.outerHTML,
 129     "<div contenteditable=\"\" style=\"background-color: rgb(255, 0, 0);\"><div><p style=\"background-color: rgb(0, 255, 0);\"><span>ab<br>c</span></p></div></div>",
 130     "cmd_backgroundColor should set background of the closest block element when selection a leaf element"
 131   );
 132
 133   editor.style.backgroundColor = "#ff0000";
 134   editor.innerHTML = "<div><p><span>abc</span></p></div>";
 135   editor.getBoundingClientRect();
 136   editor.focus();
 137   getSelection().setBaseAndExtent(editor.firstChild, 0, editor.firstChild, 1);
 138   SpecialPowers.doCommand(window, "cmd_backgroundColor", "#00ff00");
 139   is(
 140     editor.outerHTML,
 141     "<div contenteditable=\"\" style=\"background-color: rgb(255, 0, 0);\"><div><p style=\"background-color: rgb(0, 255, 0);\"><span>abc</span></p></div></div>",
 142     "cmd_backgroundColor should set background of the selected block element"
 143   );
 144
 145   editor.style.backgroundColor = "#ff0000";
 146   editor.innerHTML = "<div><p><span>abc</span></p><p><span>def</span></p><p><span>ghi</span></p></div>";
 147   editor.getBoundingClientRect();
 148   editor.focus();
 149   getSelection().setBaseAndExtent(editor.querySelector("span").firstChild, 1, editor.querySelector("p + p + p > span").firstChild, 1);
 150   SpecialPowers.doCommand(window, "cmd_backgroundColor", "#00ff00");
 151   is(
 152     editor.outerHTML,
 153     "<div contenteditable=\"\" style=\"background-color: rgb(255, 0, 0);\"><div><p style=\"background-color: rgb(0, 255, 0);\"><span>abc</span></p>" +
 154       "<p style=\"background-color: rgb(0, 255, 0);\"><span>def</span></p>" +
 155       "<p style=\"background-color: rgb(0, 255, 0);\"><span>ghi</span></p></div></div>",
 156     "cmd_backgroundColor should set background of the paragraph elements in the selection range"
 157   );
 158
 159   editor.style.backgroundColor = "#ff0000";
 160   editor.innerHTML = "<div><p><span>abc</span></p><p><span contenteditable=\"false\">def</span></p><p><span>ghi</span></p></div>";
 161   editor.getBoundingClientRect();
 162   editor.focus();
 163   getSelection().setBaseAndExtent(editor.querySelector("span").firstChild, 1, editor.querySelector("p + p + p > span").firstChild, 1);
 164   SpecialPowers.doCommand(window, "cmd_backgroundColor", "#00ff00");
 165   is(
 166     editor.outerHTML,
 167     "<div contenteditable=\"\" style=\"background-color: rgb(255, 0, 0);\"><div><p style=\"background-color: rgb(0, 255, 0);\"><span>abc</span></p>" +
 168       "<p style=\"background-color: rgb(0, 255, 0);\"><span contenteditable=\"false\">def</span></p>" +
 169       "<p style=\"background-color: rgb(0, 255, 0);\"><span>ghi</span></p></div></div>",
 170     "cmd_backgroundColor should set background of the paragraph elements in the selection range even if a paragraph has only non-editable content"
 171   );
 172
 173   editor.style.backgroundColor = "#ff0000";
 174   editor.innerHTML = "<div><p><span>abc</span></p><p contenteditable=\"false\"><span>def</span></p><p><span>ghi</span></p></div>";
 175   editor.getBoundingClientRect();
 176   editor.focus();
 177   getSelection().setBaseAndExtent(editor.querySelector("span").firstChild, 1, editor.querySelector("p + p + p > span").firstChild, 1);
 178   SpecialPowers.doCommand(window, "cmd_backgroundColor", "#00ff00");
 179   is(
 180     editor.outerHTML,
 181     "<div contenteditable=\"\" style=\"background-color: rgb(255, 0, 0);\"><div><p style=\"background-color: rgb(0, 255, 0);\"><span>abc</span></p>" +
 182       "<p contenteditable=\"false\"><span>def</span></p>" +
 183       "<p style=\"background-color: rgb(0, 255, 0);\"><span>ghi</span></p></div></div>",
 184     "cmd_backgroundColor should set background of the paragraph elements in the selection range except the non-editable paragraph"
 185   );
 186
 187   editor.style.backgroundColor = "#ff0000";
 188   editor.innerHTML = "<div><p><span>abc</span></p><span>def</span><p><span>ghi</span></p></div>";
 189   editor.getBoundingClientRect();
 190   editor.focus();
 191   getSelection().setBaseAndExtent(editor.querySelector("span").firstChild, 1, editor.querySelector("p + span + p > span").firstChild, 1);
 192   SpecialPowers.doCommand(window, "cmd_backgroundColor", "#00ff00");
 193   is(
 194     editor.outerHTML,
 195     "<div contenteditable=\"\" style=\"background-color: rgb(255, 0, 0);\"><div style=\"background-color: rgb(0, 255, 0);\">" +
 196       "<p style=\"background-color: rgb(0, 255, 0);\"><span>abc</span></p>" +
 197       "<span>def</span>" +
 198       "<p style=\"background-color: rgb(0, 255, 0);\"><span>ghi</span></p></div></div>",
 199     "cmd_backgroundColor should set background of the paragraph elements in the selection range and the container <div> which has inline child"
 200   );
 201
 202   editor.style.backgroundColor = "#ff0000";
 203   editor.innerHTML = "<p><span>abc</span></p><span>def</span><p><span>ghi</span></p>";
 204   editor.getBoundingClientRect();
 205   editor.focus();
 206   getSelection().setBaseAndExtent(editor.querySelector("span").firstChild, 1, editor.querySelector("p + span + p > span").firstChild, 1);
 207   SpecialPowers.doCommand(window, "cmd_backgroundColor", "#00ff00");
 208   is(
 209     editor.outerHTML,
 210     "<div contenteditable=\"\" style=\"background-color: rgb(0, 255, 0);\">" +
 211       "<p style=\"background-color: rgb(0, 255, 0);\"><span>abc</span></p>" +
 212       "<span>def</span>" +
 213       "<p style=\"background-color: rgb(0, 255, 0);\"><span>ghi</span></p></div>",
 214     "cmd_backgroundColor should set background of the paragraph elements in the selection range and the editing host which has inline child"
 215   );
 216
 217   // TODO: Add testcase for HTML styling mode.
 218
 219   SimpleTest.finish();
 220 });
 221 </script>
 222 </body>
 223 </html>