<!doctype html>
<script src="../../resources/testharness.js"></script>
<script src="../../resources/testharnessreport.js"></script>
<script src="../assert_selection.js"></script>
<script>
// Test that moving the caret with line granularity within the highest
// editable root works across non-editable content.
selection_test(
`
<div contenteditable style="font-family: monospace">
<div contenteditable="false">
<span contenteditable="true">app|le pie</span>
</div>
<div contenteditable="false">
pineapple
</div>
<div contenteditable="false">
<span contenteditable="true">apple juice</span>
</div>
</div>
`,
selection => selection.modify('move', 'forward', 'line'),
`
<div contenteditable style="font-family: monospace">
<div contenteditable="false">
<span contenteditable="true">apple pie</span>
</div>
<div contenteditable="false">
pineapple
</div>
<div contenteditable="false">
<span contenteditable="true">app|le juice</span>
</div>
</div>
`,
'Move down across non-editable div');
selection_test(
`
<div contenteditable style="font-family: monospace">
<div contenteditable="false">
<span contenteditable="true">apple pie</span>
</div>
<div contenteditable="false">
pineapple
</div>
<div contenteditable="false">
<span contenteditable="true">app|le juice</span>
</div>
</div>
`,
selection => selection.modify('move', 'backward', 'line'),
`
<div contenteditable style="font-family: monospace">
<div contenteditable="false">
<span contenteditable="true">app|le pie</span>
</div>
<div contenteditable="false">
pineapple
</div>
<div contenteditable="false">
<span contenteditable="true">apple juice</span>
</div>
</div>
`,
'Move up across non-editable div');
</script>