summaryrefslogtreecommitdiffstats
path: root/testing/web-platform/tests/editing/other/edit-in-textcontrol-immediately-after-hidden.tentative.html
blob: 2cdffd6e2c07b93810e9ff115e2e92bdb4bc27f0 (plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
<!doctype html>
<meta charset=utf-8>
<meta name="variant" content="?editor=input&hide-target=editor">
<meta name="variant" content="?editor=textarea&hide-target=editor">
<meta name="variant" content="?editor=input&hide-target=parent">
<meta name="variant" content="?editor=textarea&hide-target=parent">
<title>Testing edit action in zombie editor</title>
<script src=/resources/testharness.js></script>
<script src=/resources/testharnessreport.js></script>
<script src="/resources/testdriver.js"></script>
<script src="/resources/testdriver-vendor.js"></script>
<script src="/resources/testdriver-actions.js"></script>
<body>
<script>
"use strict";

const params = new URLSearchParams(location.search);

/**
 * The expected results is based on Chrome 93.
 * The behavior is reasonable because JS API which requires focus and user input
 * does not work if it's hidden.
 */

function init() {
  const div = document.createElement("div");
  const editor = document.createElement(params.get("editor"));
  const hideTarget = params.get("hide-target") == "editor" ? editor : div;
  editor.value = "default value";
  div.appendChild(editor);
  document.body.appendChild(div);
  return [ hideTarget, editor ];
}

function finalize(editor) {
  editor.blur();
  editor.parentNode.remove();
  document.body.getBoundingClientRect();
}

promise_test(async () => {
  await new Promise(resolve => addEventListener("load", resolve, {once: true}));
}, "Wait for load event");

promise_test(async () => {
  const [hideTarget, editor] = init();
  try {
    editor.select();
    hideTarget.style.display = "none";
    document.execCommand("insertText", false, "typed value");
    assert_equals(editor.value, "default value", "The value shouldn't be modified by \"insertText\" command");
  } finally {
    finalize(editor);
  }
}, `execCommand("insertText", false, "typed value") in <${params.get("editor")}>`);

promise_test(async () => {
  const [hideTarget, editor] = init();
  try {
    editor.select();
    hideTarget.style.display = "none";
    document.execCommand("delete");
    assert_equals(editor.value, "default value", "The value shouldn't be modified by \"delete\" command");
  } finally {
    finalize(editor);
  }
}, `execCommand("delete") in <${params.get("editor")}>`);

promise_test(async () => {
  const [hideTarget, editor] = init();
  try {
    editor.select();
    const waitForKeyDown = new Promise(resolve => {
      editor.addEventListener("keydown", () => {
        hideTarget.style.display = "none";
        resolve();
      });
    });
    await new test_driver.Actions()
      .keyDown("a").keyUp("a")
      .send();
    assert_equals(
      editor.value,
      "default value",
      "The value shouldn't be modified by user input if \"keydown\" event listener destroyed the editor"
    );
  } finally {
    finalize(editor);
  }
}, `<${params.get("editor")}> is hidden by "keydown" event listener`);

promise_test(async () => {
  const [hideTarget, editor] = init();
  try {
    editor.select();
    const waitForKeyDown = new Promise(resolve => {
      editor.addEventListener("keypress", () => {
        hideTarget.style.display = "none";
        resolve();
      });
    });
    await new test_driver.Actions()
      .keyDown("a").keyUp("a")
      .send();
    assert_equals(
      editor.value,
      "default value",
      "The value shouldn't be modified by user input if \"keypress\" event listener destroyed the editor"
    );
  } finally {
    finalize(editor);
  }
}, `<${params.get("editor")}> is hidden by "keypress" event listener`);

promise_test(async () => {
  const [hideTarget, editor] = init();
  try {
    editor.select();
    const waitForKeyDown = new Promise(resolve => {
      editor.addEventListener("beforeinput", () => {
        hideTarget.style.display = "none";
        resolve();
      });
    });
    await new test_driver.Actions()
      .keyDown("a").keyUp("a")
      .send();
    assert_equals(
      editor.value,
      "default value",
      "The value shouldn't be modified by user input if \"beforeinput\" event listener destroyed the editor"
    );
  } finally {
    finalize(editor);
  }
}, `<${params.get("editor")}> is hidden by "beforeinput" event listener`);
</script>
</body>