widget/tests/test_ime_focus_with_multiple_contenteditable.html

   1 <!DOCTYPE html>
   2 <html>
   3 <!--
   4 https://bugzilla.mozilla.org/show_bug.cgi?id=1872863
   5 -->
   6 <head>
   7 <title>Test IME state and focus with multiple contenteditable elements</title>
   8   <script src="chrome://mochikit/content/tests/SimpleTest/SimpleTest.js"></script>
   9   <script src="chrome://mochikit/content/tests/SimpleTest/EventUtils.js"></script>
  10   <script src="file_ime_state_test_helper.js"></script>
  11 <link rel="stylesheet" type="text/css" href="chrome://mochikit/content/tests/SimpleTest/test.css"/>
  12
  13 <style>
  14 #div0 {
  15   width: 200px;
  16   height: 50px;
  17 }
  18
  19 #div3 {
  20   background-color: blue;
  21   width: 200px;
  22   height: 100px;
  23 }
  24
  25 #div4 {
  26   width: 200px;
  27   height: 50px;
  28 }
  29 </style>
  30 <script>
  31 add_task(async function test_modify_contenteditable_on_focused_element() {
  32   await SimpleTest.promiseFocus();
  33
  34   const tipWrapper = new TIPWrapper(window);
  35   ok(tipWrapper.isAvailable(), "TextInputProcessor should've been initialized");
  36
  37   const div1 = document.getElementById("div1");
  38   const div2 = document.getElementById("div2");
  39   const div3 = document.getElementById("div3");
  40
  41   div1.addEventListener("mousedown", () => {
  42     div2.contentEditable = true;
  43   });
  44   div3.addEventListener("mousedown", e => {
  45     div2.contentEditable = false;
  46     e.preventDefault();
  47   });
  48
  49   // Set focus by mouse then contenteditable becomes true by script.
  50
  51   const promiseFocus = new Promise(resolve => {
  52     div2.addEventListener("focus", resolve, { once: true });
  53   });
  54   synthesizeMouseAtCenter(div1, {});
  55   await promiseFocus;
  56
  57   is(
  58     SpecialPowers.DOMWindowUtils.IMEStatus,
  59     SpecialPowers.DOMWindowUtils.IME_STATUS_ENABLED,
  60     "IMEStatus is enabled on contenteditable=true"
  61   );
  62   ok(tipWrapper.IMEHasFocus, "IME has focus");
  63
  64   // Move focus by mouse then contenteditable becomes false by script.
  65
  66   const promiseMouseUp = new Promise(resolve => {
  67     div3.addEventListener("mouseup", resolve, { once: true });
  68   });
  69   synthesizeMouseAtCenter(div3, {});
  70   await promiseMouseUp;
  71
  72   is(
  73     SpecialPowers.DOMWindowUtils.IMEStatus,
  74     SpecialPowers.DOMWindowUtils.IME_STATUS_DISABLED,
  75     "IMEStatus is disabled on contenteditable=false"
  76   );
  77   ok(!tipWrapper.IMEHasFocus, "IME losts focus after contenteditable=false");
  78
  79   // contenteditable changes to true on focused element.
  80
  81   const promiseMouseUp2 = new Promise(resolve => {
  82     div1.addEventListener("mouseup", resolve, { once: true });
  83   });
  84   synthesizeMouseAtCenter(div1, {});
  85   await promiseMouseUp2;
  86
  87   is(
  88     SpecialPowers.DOMWindowUtils.IMEStatus,
  89     SpecialPowers.DOMWindowUtils.IME_STATUS_ENABLED,
  90     "IMEStatus is enabled on contenteditable=true"
  91   );
  92
  93   ok(tipWrapper.IMEHasFocus, "IME has focus after contenteditable=true again");
  94 });
  95 </script>
  96 </head>
  97 <body>
  98 <div id="div0"><div id="div1">
  99 <div id="div2" contenteditable="false"><div>foo</div></div>
 100 </div></div>
 101 <div id="div3"></div>
 102 <div id="div4" contenteditable></div>
 103 </body>
 104 </html>