<!DOCTYPE html>
<html style="font-family: ahem; font-size: 50px; -webkit-font-smoothing: none;">
<!-- 'A' orange box followed by 'B' purple box in next line. -->
<body>
<style>
.li1 { display: run-in; color: orange; }
.div1::before { display: table-row; content: 'B'; color: purple; }
</style>
<script>
document.body.offsetTop;
li1 = document.createElement('li');
li1.setAttribute('class', 'li1');
li1.appendChild(document.createTextNode('A'));
document.body.appendChild(li1);
div1 = document.createElement('div');
document.body.appendChild(div1);
document.body.offsetTop;
div1.setAttribute('class', 'div1');
</script>
</body>
</html>