<!DOCTYPE html>
<style>
iframe {
margin: 10px;
padding: 10px;
border: solid;
width: 200px;
height: 200px;
float: left;
}
</style>
<p>This test checks that selection of linebreaks works as expected with the different directions and writing modes.</p>
<p>The test passes if you can visually see the linebreaks selection in the different examples.</p>
<iframe srcdoc="
<h3>Default</h3>
<div id='target' contenteditable>foo<br><br><br><br>bar</div>
<script>
window.getSelection().setBaseAndExtent(target.firstChild, 2, target.lastChild, 2);
</script>
"></iframe>
<iframe srcdoc="
<h3>RTL</h3>
<div id='target' style='direction: rtl;' contenteditable>foo<br><br><br><br>bar</div>
<script>
window.getSelection().setBaseAndExtent(target.firstChild, 2, target.lastChild, 2);
</script>
"></iframe>
<iframe srcdoc="
<h3>vertical-lr</h3>
<div id='target' style='writing-mode: vertical-lr;' contenteditable>foo<br><br><br><br>bar</div>
<script>
window.getSelection().setBaseAndExtent(target.firstChild, 2, target.lastChild, 2);
</script>
"></iframe>
<iframe srcdoc="
<h3>vertical-lr & RTL</h3>
<div id='target' style='writing-mode: vertical-lr; direction: rtl;' contenteditable>foo<br><br><br><br>bar</div>
<script>
window.getSelection().setBaseAndExtent(target.firstChild, 2, target.lastChild, 2);
</script>
"></iframe>
<iframe srcdoc="
<h3>vertical-rl</h3>
<div id='target' style='writing-mode: vertical-rl;' contenteditable>foo<br><br><br><br>bar</div>
<script>
window.getSelection().setBaseAndExtent(target.firstChild, 2, target.lastChild, 2);
</script>
"></iframe>
<iframe srcdoc="
<h3>vertical-rl & RTL</h3>
<div id='target' style='writing-mode: vertical-rl; direction: rtl;' contenteditable>foo<br><br><br><br>bar</div>
<script>
window.getSelection().setBaseAndExtent(target.firstChild, 2, target.lastChild, 2);
</script>
"></iframe>