<!DOCTYPE html>
<html>
<body>
<!-- A spinbutton should be on the left side. -->
<p dir=rtl><input type=number value=1>
<p style="direction:rtl"><input type=number value=2>
<p><input type=number value=3 dir=rtl>
<p><input type=number id=i4 style="direction:rtl">

<!-- A spinbutton should be on the right side. -->
<p><input type=number value=5 id=i5 dir=rtl>
<p><input type=number value=6 id=i6 style="direction:rtl">
<!-- A spinbutton should be on the left side. -->
<p><input type=number value=7 id=i7 dir=ltr>
<p><input type=number value=8 id=i8 style="direction:ltr">

<script>
var input = document.getElementById('i4');
input.focus();
document.execCommand('insertText', false, '1234');

document.getElementById('i5').dir = 'ltr';
document.getElementById('i6').style.direction = 'ltr';
document.getElementById('i7').dir = 'rtl';
document.getElementById('i8').style.direction = 'rtl';
</script>
</body>
</html>