<!DOCTYPE html>
<html>
<head>
<style>
    #shape-inside-vertical-lr {
        width: 200px;
        height: 220px;
        -webkit-shape-inside: rectangle(15px, 20px, 150px, 175px);
        -webkit-writing-mode: vertical-lr;
        position: relative;
    }
    #shape-inside-vertical-rl {
        width: 200px;
        height: 220px;
        -webkit-shape-inside: rectangle(15px, 20px, 150px, 175px);
        -webkit-writing-mode: vertical-rl;
        position: relative;
    }
    #border {
        position: absolute;
        top: 15px;
        left: 10px;
        width: 160px;
        height: 185px;
        border: 2px solid blue;
    }
</style>
</head>
<body>
    <div id="shape-inside-vertical-lr">
        <div id="border"></div>
        This text should be contained by the blue square.
    </div>
    <div id="shape-inside-vertical-rl">
        <div id="border"></div>
        This text should be contained by the blue square.
    </div>
</body>
</html>