<!DOCTYPE html>
<html>
<body>
<script src="../../resources/js-test-pre.js"></script>
<script src="../../fast/dom/resources/event-sender-util.js"></script>
<script src="../../fast/dom/shadow/resources/polyfill.js"></script>

<p>This test confirms that selecting an element having Shadow DOM doesn't cross editing boundaries errornously.</p>

<div>
    <div id="before">BEFORE</div>
    <div id="host" contenteditable>HOST</div>
    <div id="after">AFTER</div>
</div>

<pre id="console"></pre>

<script>

var shadowRoot = host.webkitCreateShadowRoot();
shadowRoot.innerHTML = "SHADOW DOM";

var selection = shadowRoot.getSelection();

debug('Move mouse from BEFORE to HOST');

mouseMoveToElem(before);
eventSender.mouseDown();
mouseMoveToElem(host);
eventSender.mouseUp();
shouldBeNull('selection.anchorNode');
shouldBeNull('selection.focusNode');

// Check crash won't happen.
document.execCommand('delete');
debug('PASS document.execCommand("delete") did not crash.');

debug('');
debug('Move mouse from AFTER to HOST');

mouseMoveToElem(after);
eventSender.mouseDown();
mouseMoveToElem(host);
eventSender.mouseUp();
shouldBeNull('selection.anchorNode');
shouldBeNull('selection.focusNode');
// Check crash won't happen.
document.execCommand('delete');
debug('PASS document.execCommand("delete") did not crash.');

var successfullyParsed = true;
</script>
<script src="../../resources/js-test-post.js"></script>
</body>

</html>