605 lines
25 KiB
HTML
605 lines
25 KiB
HTML
<!DOCTYPE html>
|
|
<meta charset="utf-8">
|
|
<meta name="timeout" content="long">
|
|
<meta name="variant" content="?Backspace">
|
|
<meta name="variant" content="?Delete">
|
|
<title>InputEvent.getTargetRanges() at deleting in/around/across list item elements</title>
|
|
<div contenteditable></div>
|
|
<script src="input-events-get-target-ranges.js"></script>
|
|
<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>
|
|
"use strict";
|
|
|
|
const action = location.search.substring(1);
|
|
function run() {
|
|
switch (action) {
|
|
case "Backspace":
|
|
return sendBackspaceKey();
|
|
case "Delete":
|
|
return sendDeleteKey();
|
|
default:
|
|
throw "Unhandled variant";
|
|
}
|
|
}
|
|
|
|
/**
|
|
* @param innerHTML Initial `innerHTML` value of the editor.
|
|
* @param data
|
|
* expectedInnerHTML
|
|
* Expected `innerHTML` of the editor after calling
|
|
* `run()`. This can be array of string if there are
|
|
* some acceptable differences like whether there is
|
|
* an invisible `<br>` element at end of list item.
|
|
* expectedTargetRanges
|
|
* `null` or `unspecified` if `beforeinput` event shouldn't
|
|
* be fired.
|
|
* Otherwise, function returning an array of objects
|
|
* which have `startContainer`, `startOffset`,
|
|
* `endContainer`, `endOffset`. This will be called
|
|
* before calling `run()` and compared with
|
|
* `getTargetRanges()` after that.
|
|
* expectInputEvent:
|
|
* `true` if it should cause an `input` event.
|
|
*/
|
|
function addPromiseTest(innerHTML, data) {
|
|
promise_test(async (t) => {
|
|
initializeTest(innerHTML);
|
|
let expectedTargetRanges =
|
|
typeof data.expectedTargetRanges === "function"
|
|
? data.expectedTargetRanges()
|
|
: null;
|
|
await run();
|
|
checkEditorContentResultAsSubTest(data.expectedInnerHTML, t.name);
|
|
if (expectedTargetRanges !== null) {
|
|
checkGetTargetRangesOfBeforeinputOnDeleteSomething(expectedTargetRanges);
|
|
if (data.expectInputEvent) {
|
|
checkGetTargetRangesOfInputOnDeleteSomething();
|
|
} else {
|
|
checkGetTargetRangesOfInputOnDoNothing();
|
|
}
|
|
} else {
|
|
checkBeforeinputAndInputEventsOnNOOP();
|
|
}
|
|
}, `${action} at "${innerHTML}"`);
|
|
}
|
|
|
|
// Join left list element and right list element, both have one item.
|
|
function test_join_1_1(leftItem, rightItem) {
|
|
addPromiseTest(
|
|
action === "Backspace"
|
|
? `<dl><${leftItem}>list-item1</${leftItem}></dl><dl><${rightItem}>[]list-item2</${rightItem}></dl>`
|
|
: `<dl><${leftItem}>list-item1[]</${leftItem}></dl><dl><${rightItem}>list-item2</${rightItem}></dl>`,
|
|
{
|
|
expectedInnerHTML: [
|
|
`<dl><${leftItem}>list-item1list-item2</${leftItem}></dl>`,
|
|
`<dl><${leftItem}>list-item1list-item2<br></${leftItem}></dl>`,
|
|
],
|
|
expectedTargetRanges: () => {
|
|
return [
|
|
{
|
|
startContainer: gEditor.querySelector(`${leftItem}`).firstChild,
|
|
startOffset: gEditor.querySelector(`${leftItem}`).firstChild.length,
|
|
endContainer: gEditor.querySelector(`dl + dl > ${rightItem}`).firstChild,
|
|
endOffset: 0,
|
|
},
|
|
];
|
|
},
|
|
expectInputEvent: true,
|
|
}
|
|
);
|
|
|
|
addPromiseTest(
|
|
`<dl><${leftItem}>list-item1[</${leftItem}></dl><dl><${rightItem}>}list-item2</${rightItem}></dl>`,
|
|
{
|
|
expectedInnerHTML: [
|
|
`<dl><${leftItem}>list-item1list-item2</${leftItem}></dl>`,
|
|
`<dl><${leftItem}>list-item1list-item2<br></${leftItem}></dl>`,
|
|
],
|
|
expectedTargetRanges: () => {
|
|
return [
|
|
{
|
|
startContainer: gEditor.querySelector(`${leftItem}`).firstChild,
|
|
startOffset: gEditor.querySelector(`${leftItem}`).firstChild.length,
|
|
endContainer: gEditor.querySelector(`dl + dl > ${rightItem}`),
|
|
endOffset: 0,
|
|
},
|
|
];
|
|
},
|
|
expectInputEvent: true,
|
|
}
|
|
);
|
|
|
|
addPromiseTest(
|
|
`<dl><${leftItem}>[list-item1</${leftItem}></dl><dl><${rightItem}>}list-item2</${rightItem}></dl>`,
|
|
{
|
|
expectedInnerHTML:
|
|
leftItem === "dt" && rightItem === "dd"
|
|
? [
|
|
`<dl><${rightItem}>list-item2</${rightItem}></dl>`,
|
|
`<dl><${rightItem}>list-item2<br></${rightItem}></dl>`,
|
|
]
|
|
: [
|
|
`<dl><${leftItem}>list-item2</${leftItem}></dl>`,
|
|
`<dl><${leftItem}>list-item2<br></${leftItem}></dl>`,
|
|
],
|
|
expectedTargetRanges: () => {
|
|
return [
|
|
{
|
|
startContainer: gEditor.querySelector(`${leftItem}`).firstChild,
|
|
startOffset: 0,
|
|
endContainer: gEditor.querySelector(`dl + dl > ${rightItem}`),
|
|
endOffset: 0,
|
|
},
|
|
];
|
|
},
|
|
expectInputEvent: true,
|
|
}
|
|
);
|
|
|
|
addPromiseTest(
|
|
`<dl><${leftItem}>list-item1[</${leftItem}></dl><dl><${rightItem}>list-item2]</${rightItem}></dl>`,
|
|
{
|
|
expectedInnerHTML: [
|
|
`<dl><${leftItem}>list-item1</${leftItem}></dl>`,
|
|
`<dl><${leftItem}>list-item1<br></${leftItem}></dl>`,
|
|
],
|
|
expectedTargetRanges: () => {
|
|
return [
|
|
{
|
|
startContainer: gEditor.querySelector(`${leftItem}`).firstChild,
|
|
startOffset: 0,
|
|
endContainer: gEditor.querySelector(`dl + dl > ${rightItem}`).firstChild,
|
|
endOffset: gEditor.querySelector(`dl + dl > ${rightItem}`).firstChild.length,
|
|
},
|
|
];
|
|
},
|
|
expectInputEvent: true,
|
|
}
|
|
);
|
|
|
|
addPromiseTest(
|
|
`<dl><${leftItem}>[list-item1</${leftItem}></dl><dl><${rightItem}>list-item2]</${rightItem}></dl>`,
|
|
{
|
|
expectedInnerHTML: `<dl><${leftItem}><br></${leftItem}></dl>`,
|
|
expectedTargetRanges: () => {
|
|
return [
|
|
{
|
|
startContainer: gEditor.querySelector(`${leftItem}`).firstChild,
|
|
startOffset: 0,
|
|
endContainer: gEditor.querySelector(`dl + dl > ${rightItem}`).firstChild,
|
|
endOffset: gEditor.querySelector(`dl + dl > ${rightItem}`).firstChild.length,
|
|
},
|
|
];
|
|
},
|
|
expectInputEvent: true,
|
|
}
|
|
);
|
|
}
|
|
|
|
// Join left list element which has 2 items and right list element which has one item.
|
|
function test_join_2_1(leftItems, rightItem) {
|
|
addPromiseTest(
|
|
action === "Backspace"
|
|
? `<dl><${leftItems[0]}>list-item1</${leftItems[0]}><${leftItems[1]}>list-item2</${leftItems[1]}></dl><dl><${rightItem}>[]list-item3</${rightItem}></dl>`
|
|
: `<dl><${leftItems[0]}>list-item1</${leftItems[0]}><${leftItems[1]}>list-item2[]</${leftItems[1]}></dl><dl><${rightItem}>list-item3</${rightItem}></dl>`,
|
|
{
|
|
expectedInnerHTML: [
|
|
`<dl><${leftItems[0]}>list-item1</${leftItems[0]}><${leftItems[1]}>list-item2list-item3</${leftItems[1]}></dl>`,
|
|
`<dl><${leftItems[0]}>list-item1</${leftItems[0]}><${leftItems[1]}>list-item2list-item3<br></${leftItems[1]}></dl>`,
|
|
],
|
|
expectedTargetRanges: () => {
|
|
return [
|
|
{
|
|
startContainer: gEditor.querySelector(`${leftItems[0]} + ${leftItems[1]}`).firstChild,
|
|
startOffset: gEditor.querySelector(`${leftItems[0]} + ${leftItems[1]}`).firstChild.length,
|
|
endContainer: gEditor.querySelector(`dl + dl > ${rightItem}`).firstChild,
|
|
endOffset: 0,
|
|
},
|
|
];
|
|
},
|
|
expectInputEvent: true,
|
|
}
|
|
);
|
|
|
|
addPromiseTest(
|
|
`<dl><${leftItems[0]}>list-item1</${leftItems[0]}><${leftItems[1]}>list-item2[</${leftItems[1]}></dl><dl><${rightItem}>}list-item3</${rightItem}></dl>`,
|
|
{
|
|
expectedInnerHTML: [
|
|
`<dl><${leftItems[0]}>list-item1</${leftItems[0]}><${leftItems[1]}>list-item2list-item3</${leftItems[1]}></dl>`,
|
|
`<dl><${leftItems[0]}>list-item1</${leftItems[0]}><${leftItems[1]}>list-item2list-item3<br></${leftItems[1]}></dl>`,
|
|
],
|
|
expectedTargetRanges: () => {
|
|
return [
|
|
{
|
|
startContainer: gEditor.querySelector(`${leftItems[0]} + ${leftItems[1]}`).firstChild,
|
|
startOffset: gEditor.querySelector(`${leftItems[0]} + ${leftItems[1]}`).firstChild.length,
|
|
endContainer: gEditor.querySelector(`dl + dl > ${rightItem}`),
|
|
endOffset: 0,
|
|
},
|
|
];
|
|
},
|
|
expectInputEvent: true,
|
|
}
|
|
);
|
|
|
|
addPromiseTest(
|
|
`<dl><${leftItems[0]}>list-item1</${leftItems[0]}><${leftItems[1]}>[list-item2</${leftItems[1]}></dl><dl><${rightItem}>}list-item3</${rightItem}></dl>`,
|
|
{
|
|
expectedInnerHTML:
|
|
leftItems[1] === "dt" && rightItem === "dd"
|
|
? [
|
|
`<dl><${leftItems[0]}>list-item1</${leftItems[0]}></dl><dl><${rightItem}>list-item3</${rightItem}></dl>`,
|
|
`<dl><${leftItems[0]}>list-item1</${leftItems[0]}></dl><dl><${rightItem}>list-item3<br></${rightItem}></dl>`,
|
|
]
|
|
: [
|
|
`<dl><${leftItems[0]}>list-item1</${leftItems[0]}><${leftItems[1]}>list-item3</${leftItems[1]}></dl>`,
|
|
`<dl><${leftItems[0]}>list-item1</${leftItems[0]}><${leftItems[1]}>list-item3<br></${leftItems[1]}></dl>`,
|
|
],
|
|
expectedTargetRanges: () => {
|
|
return [
|
|
{
|
|
startContainer: gEditor.querySelector(`${leftItems[0]} + ${leftItems[1]}`).firstChild,
|
|
startOffset: 0,
|
|
endContainer: gEditor.querySelector(`dl + dl > ${rightItem}`),
|
|
endOffset: 0,
|
|
},
|
|
];
|
|
},
|
|
expectInputEvent: true,
|
|
}
|
|
);
|
|
|
|
addPromiseTest(
|
|
`<dl><${leftItems[0]}>[list-item1</${leftItems[0]}><${leftItems[1]}>list-item2</${leftItems[1]}></dl><dl><${rightItem}>}list-item3</${rightItem}></dl>`,
|
|
{
|
|
expectedInnerHTML:
|
|
leftItems[0] === "dt" && rightItem === "dd"
|
|
? [
|
|
`<dl><${rightItem}>list-item3</${rightItem}></dl>`,
|
|
`<dl><${rightItem}>list-item3<br></${rightItem}></dl>`,
|
|
]
|
|
: [
|
|
`<dl><${leftItems[0]}>list-item3</${leftItems[0]}></dl>`,
|
|
`<dl><${leftItems[0]}>list-item3<br></${leftItems[0]}></dl>`,
|
|
],
|
|
expectedTargetRanges: () => {
|
|
return [
|
|
{
|
|
startContainer: gEditor.querySelector(`${leftItems[0]}`).firstChild,
|
|
startOffset: 0,
|
|
endContainer: gEditor.querySelector(`dl + dl > ${rightItem}`),
|
|
endOffset: 0,
|
|
},
|
|
];
|
|
},
|
|
expectInputEvent: true,
|
|
}
|
|
);
|
|
|
|
addPromiseTest(
|
|
`<dl><${leftItems[0]}>list-item1</${leftItems[0]}><${leftItems[1]}>list-item2[</${leftItems[1]}></dl><dl><${rightItem}>list-item3]</${rightItem}></dl>`,
|
|
{
|
|
expectedInnerHTML: `<dl><${leftItems[0]}>list-item1</${leftItems[0]}><${leftItems[1]}>list-item2</${leftItems[1]}></dl>`,
|
|
expectedTargetRanges: () => {
|
|
return [
|
|
{
|
|
startContainer: gEditor.querySelector(`${leftItems[0]} + ${leftItems[1]}`).firstChild,
|
|
startOffset: gEditor.querySelector(`${leftItems[0]} + ${leftItems[1]}`).firstChild.length,
|
|
endContainer: gEditor.querySelector(`dl + dl > ${rightItem}`),
|
|
endOffset: 0,
|
|
},
|
|
];
|
|
},
|
|
expectInputEvent: true,
|
|
}
|
|
);
|
|
|
|
addPromiseTest(
|
|
`<dl><${leftItems[0]}>list-item1</${leftItems[0]}><${leftItems[1]}>[list-item2</${leftItems[1]}></dl><dl><${rightItem}>list-item3]</${rightItem}></dl>`,
|
|
{
|
|
expectedInnerHTML: `<dl><${leftItems[0]}>list-item1</${leftItems[0]}><${leftItems[1]}><br></${leftItems[1]}></dl>`,
|
|
expectedTargetRanges: () => {
|
|
return [
|
|
{
|
|
startContainer: gEditor.querySelector(`${leftItems[0]} + ${leftItems[1]}`).firstChild,
|
|
startOffset: 0,
|
|
endContainer: gEditor.querySelector(`dl + dl > ${rightItem}`).firstChild,
|
|
endOffset: gEditor.querySelector(`dl + dl > ${rightItem}`).firstChild.length,
|
|
},
|
|
];
|
|
},
|
|
expectInputEvent: true,
|
|
}
|
|
);
|
|
}
|
|
|
|
// Join left list element which has one item and right list element which has 2 items.
|
|
function test_join_1_2(leftItem, rightItems) {
|
|
addPromiseTest(
|
|
action === "Backspace"
|
|
? `<dl><${leftItem}>list-item1</${leftItem}></dl><dl><${rightItems[0]}>[]list-item2</${rightItems[0]}><${rightItems[1]}>list-item3</${rightItems[1]}></dl>`
|
|
: `<dl><${leftItem}>list-item1[]</${leftItem}></dl><dl><${rightItems[0]}>list-item2</${rightItems[0]}><${rightItems[1]}>list-item3</${rightItems[1]}></dl>`,
|
|
{
|
|
expectedInnerHTML: [
|
|
`<dl><${leftItem}>list-item1list-item2</${leftItem}></dl><dl><${rightItems[1]}>list-item3</${rightItems[1]}></dl>`,
|
|
`<dl><${leftItem}>list-item1list-item2<br></${leftItem}></dl><dl><${rightItems[1]}>list-item3</${rightItems[1]}></dl>`,
|
|
],
|
|
expectedTargetRanges: () => {
|
|
return [
|
|
{
|
|
startContainer: gEditor.querySelector(`${leftItem}`).firstChild,
|
|
startOffset: gEditor.querySelector(`${leftItem}`).firstChild.length,
|
|
endContainer: gEditor.querySelector(`dl + dl > ${rightItems[0]}`).firstChild,
|
|
endOffset: 0,
|
|
},
|
|
];
|
|
},
|
|
expectInputEvent: true,
|
|
}
|
|
);
|
|
|
|
addPromiseTest(
|
|
`<dl><${leftItem}>list-item1[</${leftItem}></dl><dl><${rightItems[0]}>}list-item2</${rightItems[0]}><${rightItems[1]}>list-item3</${rightItems[1]}></dl>`,
|
|
{
|
|
expectedInnerHTML: [
|
|
`<dl><${leftItem}>list-item1list-item2</${leftItem}></dl><dl><${rightItems[1]}>list-item3</${rightItems[1]}></dl>`,
|
|
`<dl><${leftItem}>list-item1list-item2<br></${leftItem}></dl><dl><${rightItems[1]}>list-item3</${rightItems[1]}></dl>`,
|
|
],
|
|
expectedTargetRanges: () => {
|
|
return [
|
|
{
|
|
startContainer: gEditor.querySelector(`${leftItem}`).firstChild,
|
|
startOffset: gEditor.querySelector(`${leftItem}`).firstChild.length,
|
|
endContainer: gEditor.querySelector(`dl + dl > ${rightItems[0]}`),
|
|
endOffset: 0,
|
|
},
|
|
];
|
|
},
|
|
expectInputEvent: true,
|
|
}
|
|
);
|
|
|
|
addPromiseTest(
|
|
`<dl><${leftItem}>list-item1[</${leftItem}></dl><dl><${rightItems[0]}>list-item2]</${rightItems[0]}><${rightItems[1]}>list-item3</${rightItems[1]}></dl>`,
|
|
{
|
|
expectedInnerHTML: [
|
|
`<dl><${leftItem}>list-item1</${leftItem}></dl><dl><${rightItems[1]}>list-item3</${rightItems[1]}></dl>`,
|
|
`<dl><${leftItem}>list-item1<br></${leftItem}></dl><dl><${rightItems[1]}>list-item3</${rightItems[1]}</dl>`,
|
|
],
|
|
expectedTargetRanges: () => {
|
|
return [
|
|
{
|
|
startContainer: gEditor.querySelector(`${leftItem}`).firstChild,
|
|
startOffset: gEditor.querySelector(`${leftItem}`).firstChild.length,
|
|
endContainer: gEditor.querySelector(`dl + dl > ${rightItems[0]}`).firstChild,
|
|
endOffset: gEditor.querySelector(`dl + dl > ${rightItems[0]}`).firstChild.length,
|
|
},
|
|
];
|
|
},
|
|
expectInputEvent: true,
|
|
}
|
|
);
|
|
|
|
addPromiseTest(
|
|
`<dl><${leftItem}>[list-item1</${leftItem}></dl><dl><${rightItems[0]}>list-item2]</${rightItems[0]}><${rightItems[1]}>list-item3</${rightItems[1]}></dl>`,
|
|
{
|
|
expectedInnerHTML: `<dl><${leftItem}><br></${leftItem}></dl><dl><${rightItems[1]}>list-item3</${rightItems[1]}></dl>`,
|
|
expectedTargetRanges: () => {
|
|
return [
|
|
{
|
|
startContainer: gEditor.querySelector(`${leftItem}`).firstChild,
|
|
startOffset: 0,
|
|
endContainer: gEditor.querySelector(`dl + dl > ${rightItems[0]}`).firstChild,
|
|
endOffset: gEditor.querySelector(`dl + dl > ${rightItems[0]}`).firstChild.length,
|
|
},
|
|
];
|
|
},
|
|
expectInputEvent: true,
|
|
}
|
|
);
|
|
|
|
addPromiseTest(
|
|
`<dl><${leftItem}>[list-item1</${leftItem}></dl><dl><${rightItems[0]}>list-item2</${rightItems[0]}><${rightItems[1]}>}list-item3</${rightItems[1]}></dl>`,
|
|
{
|
|
expectedInnerHTML:
|
|
leftItem === "dt" && rightItems[1] === "dd"
|
|
? [
|
|
`<dl><${rightItems[1]}>list-item3</${rightItems[1]}></dl>`,
|
|
`<dl><${rightItems[1]}>list-item3<br></${rightItems[1]}></dl>`,
|
|
]
|
|
: [
|
|
`<dl><${leftItem}>list-item3</${leftItem}></dl>`,
|
|
`<dl><${leftItem}>list-item3<br></${leftItem}></dl>`,
|
|
],
|
|
expectedTargetRanges: () => {
|
|
return [
|
|
{
|
|
startContainer: gEditor.querySelector(`${leftItem}`).firstChild,
|
|
startOffset: 0,
|
|
endContainer: gEditor.querySelector(`dl + dl > ${rightItems[0]} + ${rightItems[1]}`),
|
|
endOffset: 0,
|
|
},
|
|
];
|
|
},
|
|
expectInputEvent: true,
|
|
}
|
|
);
|
|
}
|
|
|
|
// Join left list element and right list element, both have 2 items.
|
|
function test_join_2_2(leftItems, rightItems) {
|
|
addPromiseTest(
|
|
action === "Backspace"
|
|
? `<dl><${leftItems[0]}>list-item1</${leftItems[0]}><${leftItems[1]}>list-item2</${leftItems[1]}></dl><dl><${rightItems[0]}>[]list-item3</${rightItems[0]}><${rightItems[1]}>list-item4</${rightItems[1]}></dl>`
|
|
: `<dl><${leftItems[0]}>list-item1</${leftItems[0]}><${leftItems[1]}>list-item2[]</${leftItems[1]}></dl><dl><${rightItems[0]}>list-item3</${rightItems[0]}><${rightItems[1]}>list-item4</${rightItems[1]}></dl>`,
|
|
{
|
|
expectedInnerHTML: [
|
|
`<dl><${leftItems[0]}>list-item1</${leftItems[0]}><${leftItems[1]}>list-item2list-item3</${leftItems[1]}></dl><dl><${rightItems[1]}>list-item4</${rightItems[1]}></dl>`,
|
|
`<dl><${leftItems[0]}>list-item1</${leftItems[0]}><${leftItems[1]}>list-item2list-item3<br></${leftItems[1]}></dl><dl><${rightItems[1]}>list-item4</${rightItems[1]}></dl>`,
|
|
],
|
|
expectedTargetRanges: () => {
|
|
return [
|
|
{
|
|
startContainer: gEditor.querySelector(`${leftItems[0]} + ${leftItems[1]}`).firstChild,
|
|
startOffset: gEditor.querySelector(`${leftItems[0]} + ${leftItems[1]}`).firstChild.length,
|
|
endContainer: gEditor.querySelector(`dl + dl > ${rightItems[0]}`).firstChild,
|
|
endOffset: 0,
|
|
},
|
|
];
|
|
},
|
|
expectInputEvent: true,
|
|
}
|
|
);
|
|
|
|
addPromiseTest(
|
|
`<dl><${leftItems[0]}>list-item1</${leftItems[0]}><${leftItems[1]}>list-item2[</${leftItems[1]}></dl><dl><${rightItems[0]}>}list-item3</${rightItems[0]}><${rightItems[1]}>list-item4</${rightItems[1]}></dl>`,
|
|
{
|
|
expectedInnerHTML: [
|
|
`<dl><${leftItems[0]}>list-item1</${leftItems[0]}><${leftItems[1]}>list-item2list-item3</${leftItems[1]}></dl><dl><${rightItems[1]}>list-item4</${rightItems[1]}></dl>`,
|
|
`<dl><${leftItems[0]}>list-item1</${leftItems[0]}><${leftItems[1]}>list-item2list-item3<br></${leftItems[1]}></dl><dl><${rightItems[1]}>list-item4</${rightItems[1]}></dl>`,
|
|
],
|
|
expectedTargetRanges: () => {
|
|
return [
|
|
{
|
|
startContainer: gEditor.querySelector(`${leftItems[0]} + ${leftItems[1]}`).firstChild,
|
|
startOffset: gEditor.querySelector(`${leftItems[0]} + ${leftItems[1]}`).firstChild.length,
|
|
endContainer: gEditor.querySelector(`dl + dl > ${rightItems[0]}`),
|
|
endOffset: 0,
|
|
},
|
|
];
|
|
},
|
|
expectInputEvent: true,
|
|
}
|
|
);
|
|
|
|
// XXX This and next one's expectation come from Blink's behavior.
|
|
// I'm not sure whether this is intentional complicated handling
|
|
// or not.
|
|
addPromiseTest(
|
|
`<dl><${leftItems[0]}>list-item1</${leftItems[0]}><${leftItems[1]}>[list-item2</${leftItems[1]}></dl><dl><${rightItems[0]}>}list-item3</${rightItems[0]}><${rightItems[1]}>list-item4</${rightItems[1]}></dl>`,
|
|
{
|
|
expectedInnerHTML:
|
|
leftItems[1] === "dt" && rightItems[0] === "dd"
|
|
? [
|
|
`<dl><${leftItems[0]}>list-item1</${leftItems[0]}></dl><dl><${rightItems[0]}>list-item3</${rightItems[0]}><${rightItems[1]}>list-item4</${rightItems[1]}></dl>`,
|
|
`<dl><${leftItems[0]}>list-item1</${leftItems[0]}></dl><dl><${rightItems[0]}>list-item3<br></${rightItems[0]}><${rightItems[1]}>list-item4</${rightItems[1]}></dl>`,
|
|
]
|
|
: [
|
|
`<dl><${leftItems[0]}>list-item1</${leftItems[0]}><${leftItems[1]}>list-item3</${leftItems[1]}></dl><dl><${rightItems[1]}>list-item4</${rightItems[1]}></dl>`,
|
|
`<dl><${leftItems[0]}>list-item1</${leftItems[0]}><${leftItems[1]}>list-item3<br></${leftItems[1]}></dl><dl><${rightItems[1]}>list-item4</${rightItems[1]}></dl>`,
|
|
],
|
|
expectedTargetRanges: () => {
|
|
return [
|
|
{
|
|
startContainer: gEditor.querySelector(`${leftItems[0]} + ${leftItems[1]}`).firstChild,
|
|
startOffset: 0,
|
|
endContainer: gEditor.querySelector(`dl + dl > ${rightItems[0]}`),
|
|
endOffset: 0,
|
|
},
|
|
];
|
|
},
|
|
expectInputEvent: true,
|
|
}
|
|
);
|
|
|
|
addPromiseTest(
|
|
`<dl><${leftItems[0]}>[list-item1</${leftItems[0]}><${leftItems[1]}>list-item2</${leftItems[1]}></dl><dl><${rightItems[0]}>}list-item3</${rightItems[0]}><${rightItems[1]}>list-item4</${rightItems[1]}></dl>`,
|
|
{
|
|
expectedInnerHTML:
|
|
leftItems[0] === "dt" && rightItems[0] === "dd"
|
|
? [
|
|
`<dl><${rightItems[0]}>list-item3</${rightItems[0]}><${rightItems[1]}>list-item4</${rightItems[1]}></dl>`,
|
|
`<dl><${rightItems[0]}>list-item3<br></${rightItems[0]}><${rightItems[1]}>list-item4</${rightItems[1]}></dl>`,
|
|
]
|
|
: [
|
|
`<dl><${leftItems[0]}>list-item3</${leftItems[0]}></dl><dl><${rightItems[1]}>list-item4</${rightItems[1]}></dl>`,
|
|
`<dl><${leftItems[0]}>list-item3<br></${leftItems[0]}></dl><dl><${rightItems[1]}>list-item4</${rightItems[1]}></dl>`,
|
|
],
|
|
expectedTargetRanges: () => {
|
|
return [
|
|
{
|
|
startContainer: gEditor.querySelector(`${leftItems[0]}`).firstChild,
|
|
startOffset: 0,
|
|
endContainer: gEditor.querySelector(`dl + dl > ${rightItems[0]}`),
|
|
endOffset: 0,
|
|
},
|
|
];
|
|
},
|
|
expectInputEvent: true,
|
|
}
|
|
);
|
|
|
|
addPromiseTest(
|
|
`<dl><${leftItems[0]}>list-item1</${leftItems[0]}><${leftItems[1]}>list-item2[</${leftItems[1]}></dl><dl><${rightItems[0]}>list-item3]</${rightItems[0]}><${rightItems[1]}>list-item4</${rightItems[1]}></dl>`,
|
|
{
|
|
expectedInnerHTML: `<dl><${leftItems[0]}>list-item1</${leftItems[0]}><${leftItems[1]}>list-item2</${leftItems[1]}></dl><dl><${rightItems[1]}>list-item4</${rightItems[1]}></dl>`,
|
|
expectedTargetRanges: () => {
|
|
return [
|
|
{
|
|
startContainer: gEditor.querySelector(`${leftItems[0]} + ${leftItems[1]}`).firstChild,
|
|
startOffset: gEditor.querySelector(`${leftItems[0]} + ${leftItems[1]}`).firstChild.length,
|
|
endContainer: gEditor.querySelector(`dl + dl > ${rightItems[0]}`).firstChild,
|
|
endOffset: gEditor.querySelector(`dl + dl > ${rightItems[0]}`).firstChild.length,
|
|
},
|
|
];
|
|
},
|
|
expectInputEvent: true,
|
|
}
|
|
);
|
|
|
|
addPromiseTest(
|
|
`<dl><${leftItems[0]}>list-item1</${leftItems[0]}><${leftItems[1]}>[list-item2</${leftItems[1]}></dl><dl><${rightItems[0]}>list-item3]</${rightItems[0]}><${rightItems[1]}>list-item4</${rightItems[1]}></dl>`,
|
|
{
|
|
expectedInnerHTML: `<dl><${leftItems[0]}>list-item1</${leftItems[0]}><${leftItems[1]}><br></${leftItems[1]}></dl><dl><${rightItems[1]}>list-item4</${rightItems[1]}></dl>`,
|
|
expectedTargetRanges: () => {
|
|
return [
|
|
{
|
|
startContainer: gEditor.querySelector(`${leftItems[0]} + ${leftItems[1]}`).firstChild,
|
|
startOffset: 0,
|
|
endContainer: gEditor.querySelector(`dl + dl > ${rightItems[0]}`).firstChild,
|
|
endOffset: gEditor.querySelector(`dl + dl > ${rightItems[0]}`).firstChild.length,
|
|
},
|
|
];
|
|
},
|
|
expectInputEvent: true,
|
|
}
|
|
);
|
|
|
|
addPromiseTest(
|
|
`<dl><${leftItems[0]}>[list-item1</${leftItems[0]}><${leftItems[1]}>list-item2</${leftItems[1]}></dl><dl><${rightItems[0]}>list-item3</${rightItems[0]}><${rightItems[1]}>list-item4]</${rightItems[1]}></dl>`,
|
|
{
|
|
expectedInnerHTML: `<dl><${leftItems[0]}><br></${leftItems[0]}></dl>`,
|
|
expectedTargetRanges: () => {
|
|
return [
|
|
{
|
|
startContainer: gEditor.querySelector(`${leftItems[0]}`).firstChild,
|
|
startOffset: 0,
|
|
endContainer: gEditor.querySelector(`dl + dl > ${rightItems[0]} + ${rightItems[1]}`).firstChild,
|
|
endOffset: gEditor.querySelector(`dl + dl > ${rightItems[0]} + ${rightItems[1]}`).firstChild.length,
|
|
},
|
|
];
|
|
},
|
|
expectInputEvent: true,
|
|
}
|
|
);
|
|
}
|
|
|
|
// Joining dl elements
|
|
for (let listItem1 of ["dt", "dd"]) {
|
|
for (let listItem2 of ["dt", "dd"]) {
|
|
test_join_1_1(listItem1, listItem2);
|
|
for (let listItem3 of ["dt", "dd"]) {
|
|
test_join_2_1([listItem1, listItem2], listItem3);
|
|
test_join_1_2(listItem1, [listItem2, listItem3]);
|
|
for (let listItem4 of ["dt", "dd"]) {
|
|
test_join_2_2([listItem1, listItem2], [listItem3, listItem4]);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
</script>
|