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
139
140
141
142
143
144
145
|
<!doctype html>
<meta charset="utf-8">
<meta name="timeout" content="long">
<title>Test for inserting paragraph in non-splittable elements</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>
<script src="../include/editor-test-utils.js"></script>
<div contenteditable></div>
<script>
"use strict";
const editingHost = document.querySelector("div[contenteditable]");
const utils = new EditorTestUtils(editingHost);
const tests = [
{
selector: "button",
initial: "<div><button>abc</button></div>",
// <button> can have <br> so that it should be handled as insertLineBreak.
expected: "<div><button><br>abc</button></div>",
},
{
selector: "caption",
initial: "<div><table><caption>abc</caption><tbody><tr><td>abc</td></tr></tbody></table></div>",
// <caption> can have paragraphs so that it should be handled as in a block.
expected: [
"<div><table><caption><br><div>abc</div></caption><tbody><tr><td>abc</td></tr></tbody></table></div>",
"<div><table><caption><div><br></div><div>abc</div></caption><tbody><tr><td>abc</td></tr></tbody></table></div>",
],
},
{
selector: "col",
initial: "<div><table><colgroup><col></colgroup><tbody><tr><td>abc</td></tr></tbody></table></div>",
// <col> and its table parents cannot have paragraphs nor <br>, therefore,
// it should be handled outside <table> or the first cell in the table.
expected: [
"<div><table><colgroup><col></colgroup><tbody><tr><td><br>abc</td></tr></tbody></table></div>", // handled with the first cell case
"<div><br></div><div><table><colgroup><col></colgroup><tbody><tr><td>abc</td></tr></tbody></table></div>", // handled outside the table case
],
},
{
selector: "colgroup",
initial: "<div><table><colgroup><col></colgroup><tbody><tr><td>abc</td></tr></tbody></table></div>",
// <colgroup> and its table parents cannot have paragraphs nor <br>,
// therefore, it should be handled outside <table> or the the first cell
// in the table.
expected: [
"<div><table><colgroup><col></colgroup><tbody><tr><td><br>abc</td></tr></tbody></table></div>", // handled with the first cell case
"<div><br></div><div><table><colgroup><col></colgroup><tbody><tr><td>abc</td></tr></tbody></table></div>", // handled outside the table case
],
},
{
selector: "iframe",
initial: "<div><iframe srcdoc=\"abc\"></iframe></div>",
// <iframe> is a replaced element so that it should be handled outside of it.
expected: "<div><br></div><div><iframe srcdoc=\"abc\"></iframe></div>",
},
{
selector: "legend",
initial: "<div><fieldset><legend>abc</legend></fieldset></div>",
// <fieldset> cannot have multiple <legend> elements so that it should not
// be split, and it cannot have paragraphs so that <br> element should be
// inserted instead.
expected: "<div><fieldset><legend><br>abc</legend></fieldset></div>",
},
{
selector: "meter",
initial: "<div><meter max=\"100\" value=\"50\">abc</meter></div>",
// <meter> is a replaced element so that it should be handled outside of it.
expected: "<div><br></div><div><meter max=\"100\" value=\"50\">abc</meter></div>",
},
{
selector: "optgroup",
initial: "<div><select><optgroup><option>abc</option></optgroup></select></div>",
// <optgroup> is a part of <select> and they are replaced so that it should
// be handled outside of it.
expected: "<div><br></div><div><select><optgroup><option>abc</option></optgroup></select></div>",
},
{
selector: "option",
initial: "<div><select><option>abc</option></select></div>",
// <option> is a part of <select> and they are replaced so that it should
// be handled outside of it.
expected: "<div><select><option>abc</option></select></div>",
},
{
selector: "progress",
initial: "<div><progress max=\"100\" value=\"50\">abc</progress></div>",
// <meter> is a replaced element so that it should be handled outside of it.
expected: "<div><br></div><div><progress max=\"100\" value=\"50\">abc</progress></div>",
},
{
selector: "select",
initial: "<div><select><option>abc</option></select></div>",
// <select> is a replaced element so that it should be handled outside of it.
expected: "<div><br></div><div><select><option>abc</option></select></div>",
},
{
selector: "table",
initial: "<div><table><tbody><tr><td>abc</td></tr></tbody></table></div>",
// <table> cannot have paragraphs nor <br>, therefore, it should be handled
// outside or in the first cell in the table.
expected: [
"<div><table><tbody><tr><td><br>abc</td></tr></tbody></table></div>", // handled in the first cell case
"<div><br></div><div><table><tbody><tr><td>abc</td></tr></tbody></table></div>", // handled outside the table case
],
},
{
selector: "tbody",
initial: "<div><table><tbody><tr><td>abc</td></tr></tbody></table></div>",
// <tbody> and its parent cannot have paragraphs nor <br>, therefore,
// it should be handled outside <table> or the first cell in the table.
expected: [
"<div><table><tbody><tr><td><br>abc</td></tr></tbody></table></div>", // handled in the next cell case
"<div><br></div><div><table><tbody><tr><td>abc</td></tr></tbody></table></div>", // handled outside the table case
],
},
{
selector: "tr",
initial: "<div><table><tbody><tr><td>abc</td></tr></tbody></table></div>",
// <tr> and its table parents cannot have paragraphs nor <br>, therefore,
// it should be handled outside <table> or the first cell in the table.
expected: [
"<div><table><tbody><tr><td><br>abc</td></tr></tbody></table></div>", // handled in the next cell case
"<div><br></div><div><table><tbody><tr><td>abc</td></tr></tbody></table></div>", // handled outside the table case
],
},
];
for (const currentTest of tests) {
promise_test(async t => {
editingHost.innerHTML = currentTest.initial;
getSelection().collapse(editingHost.querySelector(currentTest.selector), 0);
await utils.sendEnterKey();
if (Array.isArray(currentTest.expected)) {
assert_in_array(editingHost.innerHTML, currentTest.expected);
} else {
assert_equals(editingHost.innerHTML, currentTest.expected);
}
}, `insertParagraph in ${currentTest.selector} of ${currentTest.initial}`);
}
</script>
|
