Files
firefox/editor/libeditor/tests/test_inline_style_cache.html
Masayuki Nakano 1c1025a6e6 Bug 1814337 - Fix bugs at applying multiple styles to collapsed Selection r=m_kato
There are 3 bugs.

One is, `PendingStyles::TakeAllPreservedStyles` returns styles in reversed order
of setting styles, this unexpected order causes that `<font>` element is placed
innermost instead of outermost, thus, background color may be applied to shorter
area than text.  Unfortunately, Chrome applies the style in fixed order, but
using same order as setting the styles is reasonable for us because we use
same code to apply multiple styles once.

Another is, `AutoInlineStyleSetter` extends the range to apply new style to
parents even if the given point is not in start or end of the first container.
Current code works fine if there is only one text node in an inline element,
but after un-setting a style, text nodes may be keep split.  And also when we
apply new style, we create an empty text node for a placeholder of new text,
therefore, the range may be extended from the empty text node to before/after
its previous/next text node.  Note that the latter case needs to work with
invisible things more, but this bug needs to be fixed ASAP due to the dead line,
and invisible things not so appear in inline elements.  Therefore, it's okay
to leave it.

The other is, the delete handlers do not clear the cached styles (cached when
`HTMLEditor` starts handling it).  If it's caused by a `Backspace` key press
in start of a block, `HTMLEditor` caches the style at caret (right paragraph),
then, collapse `Selection` to end of the ex-left block where may have different
style, then, when user types new text there, the cached style is applied into
to the new text **too**.  Therefore, if `Selection` was collapsed and handling
a `Backspace` key press, the cached styles should be forgotten.

Depends on D168640

Differential Revision: https://phabricator.services.mozilla.com/D168865
2023-02-07 14:52:02 +00:00

152 lines
8.1 KiB
HTML

<!DOCTYPE html>
<html>
<head>
<title>Tests for inline style cache</title>
<script src="/tests/SimpleTest/SimpleTest.js"></script>
<script src="/tests/SimpleTest/EventUtils.js"></script>
<link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css" />
</head>
<body>
<p id="display"></p>
<div id="content" style="display: none;">
</div>
<div id="editor" contenteditable></div>
<pre id="test">
<script class="testbody" type="application/javascript">
SimpleTest.waitForExplicitFinish();
SimpleTest.waitForFocus(function() {
var editor = document.getElementById("editor");
editor.focus();
document.execCommand("defaultParagraphSeparator", false, "div");
var selection = window.getSelection();
// #01-01 Typing something after setting some styles should insert some nodes to insert text.
editor.innerHTML = "beforeafter";
selection.collapse(editor.firstChild, "before".length);
document.execCommand("bold");
document.execCommand("italic");
document.execCommand("strikethrough");
sendString("test");
is(editor.innerHTML, "before<b><i><strike>test</strike></i></b>after",
"#01-01 At typing something after setting some styles, should cause inserting some nodes to apply the style");
// #01-02 Typing something after removing some characters after setting some styles should work as without removing some character.
editor.innerHTML = "beforeafter";
selection.collapse(editor.firstChild, "before".length);
document.execCommand("bold");
document.execCommand("italic");
document.execCommand("strikethrough");
synthesizeKey("KEY_Delete");
sendString("test");
todo_is(
editor.innerHTML,
"beforetestfter",
"#01-02-1 At typing something after Delete after setting style, the style should not be preserved for compatibility with the other browsers"
);
is(
editor.innerHTML,
"before<b><i><strike>test</strike></i></b>fter",
"#01-02-1 At typing something after Delete after setting style, the style should not be preserved, but it's okay to do it for backward compatibility"
);
editor.innerHTML = "beforeafter";
selection.collapse(editor.firstChild, "before".length);
document.execCommand("bold");
document.execCommand("italic");
document.execCommand("strikethrough");
synthesizeKey("KEY_Backspace");
sendString("test");
is(editor.innerHTML, "befor<b><i><strike>test</strike></i></b>after",
"#01-02-2 At typing something after Backspace after setting style, should cause inserting some nodes to apply the style");
// #03-01 Replacing in <b style="font-weight: normal;"> shouldn't cause new <b>.
editor.innerHTML = "<b style=\"font-weight: normal;\">beforeselectionafter</b>";
selection.collapse(editor.firstChild.firstChild, "before".length);
selection.extend(editor.firstChild.firstChild, "beforeselection".length);
sendString("test");
is(editor.innerHTML, "<b style=\"font-weight: normal;\">beforetestafter</b>",
"#03-01 Replacing text in styled inline elements should respect the styles");
// #03-02 Typing something after removing selected text in <b style="font-weight: normal;"> shouldn't cause new <b>.
editor.innerHTML = "<b style=\"font-weight: normal;\">beforeselectionafter</b>";
selection.collapse(editor.firstChild.firstChild, "before".length);
selection.extend(editor.firstChild.firstChild, "beforeselection".length);
synthesizeKey("KEY_Backspace");
sendString("test");
is(editor.innerHTML, "<b style=\"font-weight: normal;\">beforetestafter</b>",
"#03-02 Inserting text after removing text in styled inline elements should respect the styles");
// #03-03 Typing something after typing Enter at selected text in <b style="font-weight: normal;"> shouldn't cause new <b>.
editor.innerHTML = "<b style=\"font-weight: normal;\">beforeselectionafter</b>";
selection.collapse(editor.firstChild.firstChild, "before".length);
selection.extend(editor.firstChild.firstChild, "beforeselection".length);
synthesizeKey("KEY_Enter");
sendString("test");
is(editor.innerHTML, "<div><b style=\"font-weight: normal;\">before</b></div><div><b style=\"font-weight: normal;\">testafter</b></div>",
"#03-03-1 Inserting text after typing Enter at selected text in styled inline elements should respect the styles");
editor.innerHTML = "<p><b style=\"font-weight: normal;\">beforeselectionafter</b></p>";
selection.collapse(editor.firstChild.firstChild.firstChild, "before".length);
selection.extend(editor.firstChild.firstChild.firstChild, "beforeselection".length);
synthesizeKey("KEY_Enter");
sendString("test");
is(editor.innerHTML, "<p><b style=\"font-weight: normal;\">before</b></p><p><b style=\"font-weight: normal;\">testafter</b></p>",
"#03-03-2 Inserting text after typing Enter at selected text in styled inline elements should respect the styles");
// #04-01 Replacing in some styled inline elements shouldn't cause new same elements.
editor.innerHTML = "<strike style=\"text-decoration: none;\"><i style=\"font-style: normal;\"><b style=\"font-weight: normal;\">beforeselectionafter</b></i></strike>";
selection.collapse(editor.firstChild.firstChild.firstChild.firstChild, "before".length);
selection.extend(editor.firstChild.firstChild.firstChild.firstChild, "beforeselection".length);
sendString("test");
is(editor.innerHTML, "<strike style=\"text-decoration: none;\"><i style=\"font-style: normal;\"><b style=\"font-weight: normal;\">beforetestafter</b></i></strike>",
"#04-01 Replacing text in styled inline elements should respect the styles");
// #04-02 Typing something after removing selected text in some styled inline elements shouldn't cause new same elements.
editor.innerHTML = "<strike style=\"text-decoration: none;\"><i style=\"font-style: normal;\"><b style=\"font-weight: normal;\">beforeselectionafter</b>";
selection.collapse(editor.firstChild.firstChild.firstChild.firstChild, "before".length);
selection.extend(editor.firstChild.firstChild.firstChild.firstChild, "beforeselection".length);
synthesizeKey("KEY_Backspace");
sendString("test");
is(editor.innerHTML, "<strike style=\"text-decoration: none;\"><i style=\"font-style: normal;\"><b style=\"font-weight: normal;\">beforetestafter</b></i></strike>",
"#04-02 Inserting text after removing text in styled inline elements should respect the styles");
// #04-03 Typing something after typing Enter at selected text in some styled inline elements shouldn't cause new same elements.
editor.innerHTML = "<strike style=\"text-decoration: none;\"><i style=\"font-style: normal;\"><b style=\"font-weight: normal;\">beforeselectionafter</b>";
selection.collapse(editor.firstChild.firstChild.firstChild.firstChild, "before".length);
selection.extend(editor.firstChild.firstChild.firstChild.firstChild, "beforeselection".length);
synthesizeKey("KEY_Enter");
sendString("test");
is(editor.innerHTML, "<div><strike style=\"text-decoration: none;\"><i style=\"font-style: normal;\"><b style=\"font-weight: normal;\">before</b></i></strike></div><div><strike style=\"text-decoration: none;\"><i style=\"font-style: normal;\"><b style=\"font-weight: normal;\">testafter</b></i></strike></div>",
"#04-03-1 Inserting text after typing Enter at selected text in styled inline elements should respect the styles");
editor.innerHTML = "<p><strike style=\"text-decoration: none;\"><i style=\"font-style: normal;\"><b style=\"font-weight: normal;\">beforeselectionafter</b></p>";
selection.collapse(editor.firstChild.firstChild.firstChild.firstChild.firstChild, "before".length);
selection.extend(editor.firstChild.firstChild.firstChild.firstChild.firstChild, "beforeselection".length);
synthesizeKey("KEY_Enter");
sendString("test");
is(editor.innerHTML, "<p><strike style=\"text-decoration: none;\"><i style=\"font-style: normal;\"><b style=\"font-weight: normal;\">before</b></i></strike></p><p><strike style=\"text-decoration: none;\"><i style=\"font-style: normal;\"><b style=\"font-weight: normal;\">testafter</b></i></strike></p>",
"#04-03-2 Inserting text after typing Enter at selected text in styled inline elements should respect the styles");
SimpleTest.finish();
});
</script>
</pre>
</body>
</html>