vertical-lr-bfc-auto-margins-beside-float.html

<!DOCTYPE html>
<style>
#container {
    width: 200px; height: 50px;
    background-color: orange;
}

#float {
    float: left;
    width: 50px; height: 50px; background: blue;
}

#vertical {
    width: 50px; height: 50px;
    -webkit-writing-mode: vertical-rl;
    overflow: hidden;
    margin: 0 auto;
    background: blue;
}
</style>
<p>You should see four equally sized squares below. Two blue, and two orange.</p>
<div id="container">
    <div id="float"></div>
    <div id="vertical"></div>
</div>

chromium/third_party/blink/web_tests/fast/css/vertical-lr-bfc-auto-margins-beside-float.html