Skip to content

Commit

Permalink
part 1: Add some edge cases into input-events-get-target-ranges-delet…
Browse files Browse the repository at this point in the history 
…ing-in-list-items.tentative.html

Some `contenteditable="false"` inclusing cases do not pass on Blink too, though.

Differential Revision: https://phabricator.services.mozilla.com/D125028

bugzilla-url: https://bugzilla.mozilla.org/show_bug.cgi?id=1672900
gecko-commit: e88bc0e4b9d4c2f3fa5df2bb04253183b85ce561
gecko-reviewers: m_kato
  • Loading branch information
@masayuki-nakano @moz-wptsync-bot
masayuki-nakano authored and moz-wptsync-bot committed Sep 13, 2021
1 parent 141a4cb commit f49b5fb
Showing 1 changed file with 279 additions and 0 deletions.
279 changes: 279 additions & 0 deletions input-events/input-events-get-target-ranges-deleting-in-list-items.tentative.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -457,6 +457,213 @@
}
);

addPromiseTest(
`<div>{<${list}><li><br></li></${list}>}</div>`,
{
expectedInnerHTML: ["<div><br></div>", "<div><div><br></div></div>"],
expectedTargetRanges: () => {
return [
{
startContainer: gEditor.querySelector("div"),
startOffset: 0,
endContainer: gEditor.querySelector("div"),
endOffset: 1,
},
];
},
expectInputEvent: true,
}
);

// It may be better to ignore the invisible white-space and take same action
// as above, but it requires more expensive check before deleting. So perhaps,
// this behavior is reasonable.
addPromiseTest(
`<div>{ <${list}><li><br></li></${list}> }</div>`,
{
expectedInnerHTML: ["<div><br></div>", "<div><div><br></div></div>"],
expectedTargetRanges: () => {
return [
{
startContainer: gEditor.querySelector("div"),
startOffset: 0,
endContainer: gEditor.querySelector("div"),
endOffset: 3,
},
];
},
expectInputEvent: true,
}
);

addPromiseTest(
`<div><${list}><li>{}<br></li></${list}></div>`,
{
expectedInnerHTML: ["<div><br></div>", "<div><div><br></div></div>"],
expectedTargetRanges: () => {
return [
{
startContainer: gEditor.querySelector("div"),
startOffset: 0,
endContainer: gEditor.querySelector("div"),
endOffset: 1,
},
];
},
expectInputEvent: true,
}
);

// XXX Blink does not delete the list element if its first or last <li> element
// is not editable. However, it means that user cannot delete the list
// element, and it's not consistent behavior when only middle list item(s)
// are not editable. Perhaps, once it makes the list element has only
// one empty list item element, then, another deleting operation allows to
// delete the list element.
addPromiseTest(
`<div>{<${list}><li contenteditable="false"><br></li></${list}>}</div>`,
{
expectedInnerHTML: `<div><${list}><li><br></li></${list}></div>`,
expectedTargetRanges: () => {
return [
{
startContainer: gEditor.querySelector(list),
startOffset: 0,
endContainer: gEditor.querySelector(list),
endOffset: 1,
},
];
},
expectInputEvent: true,
}
);

addPromiseTest(
`<div>{<${list}><li contenteditable="false">list-item1</li></${list}>}</div>`,
{
expectedInnerHTML: `<div><${list}><li><br></li></${list}></div>`,
expectedTargetRanges: () => {
return [
{
startContainer: gEditor.querySelector(list),
startOffset: 0,
endContainer: gEditor.querySelector(list),
endOffset: 1,
},
];
},
expectInputEvent: true,
}
);

addPromiseTest(
`<div>{<${list}><li contenteditable="false">list-item1</li><li><br></li></${list}>}</div>`,
{
expectedInnerHTML: `<div><${list}><li><br></li></${list}></div>`,
expectedTargetRanges: () => {
return [
{
startContainer: gEditor.querySelector(list),
startOffset: 0,
endContainer: gEditor.querySelector("li + li"),
endOffset: 1,
},
];
},
expectInputEvent: true,
}
);

addPromiseTest(
`<div>{<${list}><li contenteditable="false">list-item1</li><li>list-item2</li></${list}>}</div>`,
{
expectedInnerHTML: `<div><${list}><li><br></li></${list}></div>`,
expectedTargetRanges: () => {
return [
{
startContainer: gEditor.querySelector(list),
startOffset: 0,
endContainer: gEditor.querySelector("li + li").firstChild,
endOffset: gEditor.querySelector("li + li").firstChild.length,
},
];
},
expectInputEvent: true,
}
);

addPromiseTest(
`<div>{<${list}><li><br></li><li contenteditable="false">list-item2</li></${list}>}</div>`,
{
expectedInnerHTML: `<div><${list}><li><br></li></${list}></div>`,
expectedTargetRanges: () => {
return [
{
startContainer: gEditor.querySelector("li").firstChild,
startOffset: 0,
endContainer: gEditor.querySelector(list),
endOffset: 2,
},
];
},
expectInputEvent: true,
}
);

addPromiseTest(
`<div>{<${list}><li>list-item1</li><li contenteditable="false">list-item2</li></${list}>}</div>`,
{
expectedInnerHTML: `<div><${list}><li><br></li></${list}></div>`,
expectedTargetRanges: () => {
return [
{
startContainer: gEditor.querySelector("li").firstChild,
startOffset: 0,
endContainer: gEditor.querySelector(list),
endOffset: 2,
},
];
},
expectInputEvent: true,
}
);

addPromiseTest(
`<div>{<${list}><li><br></li><li contenteditable="false">list-item2</li><li><br></li></${list}>}</div>`,
{
expectedInnerHTML: `<div><${list}><li><br></li></${list}></div>`,
expectedTargetRanges: () => {
return [
{
startContainer: gEditor.querySelector("li").firstChild,
startOffset: 0,
endContainer: gEditor.querySelector("li + li + li"),
endOffset: 1,
},
];
},
expectInputEvent: true,
}
);

addPromiseTest(
`<div>{<${list}><li>list-item1</li><li contenteditable="false">list-item2</li><li>list-item3</li></${list}>}</div>`,
{
expectedInnerHTML: `<div><${list}><li><br></li></${list}></div>`,
expectedTargetRanges: () => {
return [
{
startContainer: gEditor.querySelector("li").firstChild,
startOffset: 0,
endContainer: gEditor.querySelector("li + li + li").firstChild,
endOffset: gEditor.querySelector("li + li + li").firstChild.length,
},
];
},
expectInputEvent: true,
}
);

addPromiseTest(
`<${list}><li>list-item1</li>{<li>list-item2</li>}<li>list-item3</li></${list}>`,
{
Expand Down Expand Up @@ -959,6 +1166,42 @@
}
);

addPromiseTest(
`<${list}><li><${childList}><li>[list-item1]</li></${childList}></li></${list}>`,
{
expectedInnerHTML: `<${list}><li><${childList}><li><br></li></${childList}></li></${list}>`,
expectedTargetRanges: () => {
return [
{
startContainer: gEditor.querySelector(`li li`).firstChild,
startOffset: 0,
endContainer: gEditor.querySelector(`li li`).firstChild,
endOffset: gEditor.querySelector(`li li`).firstChild.length,
},
];
},
expectInputEvent: true,
}
);

addPromiseTest(
`<${list}><li>{<${childList}><li>list-item1</li></${childList}>}</li></${list}>`,
{
expectedInnerHTML: `<${list}><li><${childList}><li><br></li></${childList}></li></${list}>`,
expectedTargetRanges: () => {
return [
{
startContainer: gEditor.querySelector(`li li`).firstChild,
startOffset: 0,
endContainer: gEditor.querySelector(`li li`).firstChild,
endOffset: gEditor.querySelector(`li li`).firstChild.length,
},
];
},
expectInputEvent: true,
}
);

addPromiseTest(
`<${list}><li><${childList}><li>{}<br></li></${childList}></li><li>list-item2</li></${list}>`,
{
Expand Down Expand Up @@ -1014,6 +1257,42 @@
}
);

addPromiseTest(
`<${list}><${childList}><li>[list-item1]</li></${childList}></${list}>`,
{
expectedInnerHTML: `<${list}><${childList}><li><br></li></${childList}></${list}>`,
expectedTargetRanges: () => {
return [
{
startContainer: gEditor.querySelector(`li`).firstChild,
startOffset: 0,
endContainer: gEditor.querySelector(`li`).firstChild,
endOffset: gEditor.querySelector(`li`).firstChild.length,
},
];
},
expectInputEvent: true,
}
);

addPromiseTest(
`<${list}>{<${childList}><li>list-item1</li></${childList}>}</${list}>`,
{
expectedInnerHTML: `<${list}><${childList}><li><br></li></${childList}></${list}>`,
expectedTargetRanges: () => {
return [
{
startContainer: gEditor.querySelector(`li`).firstChild,
startOffset: 0,
endContainer: gEditor.querySelector(`li`).firstChild,
endOffset: gEditor.querySelector(`li`).firstChild.length,
},
];
},
expectInputEvent: true,
}
);

addPromiseTest(
`<${list}><${childList}><li>{}<br></li></${childList}><li>list-item2</li></${list}>`,
{
Expand Down

0 comments on commit f49b5fb

Please sign in to comment.