<!DOCTYPE html>
<head>
</head>
<html>
<body contenteditable>
<ol>
    <li style="text-align: start;" id="one">one</li>
    <li>
        <div>
            <ul>
                <li>
                    <div id="two">two</div>
                    <ol style="list-style-type: upper-roman;" start="50">
                        <li style="text-align: center;" id="three">three</li>
                    </ol>
                </li>
                <li>
                    <div>
                        <div style="text-align: left;" id="four">four</div>
                        <ol style="list-style-type: lower-latin;" start="0">
                            <li style="text-align: right;" id="five">five</li>
                        </ol>
                    </div>
                </li>
            </ul>
            <div style="text-align: end;" dir="rtl" id="six">six</div>
        </div>
    </li>
</ol>
<div id="seven">seven</div>
</body>
</html>