<!DOCTYPE html>
<html>
<head>
<title>Preserve selection direction</title>
<script src="../../resources/js-test-pre.js"></script>
<script src="../../resources/dump-as-markup.js"></script>
</head>
<body>
<div id="editable" contenteditable>This is some sample text</div>
<div id="console"></div>
<script>
var editable = document.getElementById("editable");
var selection = window.getSelection();

Markup.description(`Bug 110979: Selection direction is not preserved when applying styles
This test verifies that selection direction is preserved when applying styles.`);

selection.collapse(editable.firstChild, 3);
selection.extend(editable.firstChild, 8);
Markup.dump('editable', 'Before foreColor 1');
document.execCommand('foreColor', false, 'green');
Markup.dump('editable', 'After foreColor 1');

editable.innerHTML = 'This is some sample text';
selection.collapse(editable.firstChild, 8);
selection.extend(editable.firstChild, 3);
Markup.dump('editable', 'Before foreColor 2');
document.execCommand('foreColor', false, 'green');
Markup.dump('editable', 'After foreColor 2');

</script>
</body>
</html>
