text-orientation test

HTML

<div id="tests">
    <div class="text-orientation mixed">
         <h1>mixed 日本人</h1>
    </div>
    <div class="text-orientation upright">
         <h1>upright</h1>
    </div>
    <div class="text-orientation sideways-left">
         <h1>sideways-left 日本人</h1>
    </div>
    <div class="text-orientation sideways-right">
         <h1>sideways-right 日本人</h1>
    </div>
    <div class="text-orientation sideways">
         <h1>sideways 日本人</h1>
    </div>
     <div class="text-orientation sideways vertical-lr">
         <h1>sideways, vertical-lr 日本人</h1>
    </div>
    <div class="text-orientation use-glyph-orientation">
         <h1>use-glyph-orientation 日本人</h1>
    </div>
    <div class="text-orientation inherit">
         <h1>inherit</h1>
    </div>
    <div class="text-orientation initial">
         <h1>initial</h1>
    </div>
</div>

CSS

.text-orientation {
    /* text-orientation only works on vertical text */
    -ms-writing-mode: tb-rl;
    -webkit-writing-mode: vertical-rl;
    -moz-writing-mode: vertical-rl;
    -ms-writing-mode: vertical-rl;
    writing-mode: vertical-rl;
    /* basic styling for demo */
    margin: .5em;
    border: 1px solid silver;
    padding: .5em;
    float: left;
}
/* start of styles for testing each text-orientation value */
 .mixed {
    -webkit-text-orientation: mixed;
    -moz-text-orientation: mixed;
    -ms-text-orientation: mixed;
    text-orientation: mixed;
}
.upright {
    -webkit-text-orientation: upright;
    -moz-text-orientation: upright;
    -ms-text-orientation: upright;
    text-orientation: upright;
}
.sideways-right {
    -webkit-text-orientation: sideways-right;
    -moz-text-orientation: sideways-right;
    -ms-text-orientation: sideways-right;
    text-orientation: sideways-right;
}
.sideways-left {
    -webkit-text-orientation: sideways-left;
    -moz-text-orientation: sideways-left;
    -ms-text-orientation: sideways-left;
    text-orientation: sideways-left;
}
.sideways {
    -webkit-text-orientation: sideways;
    -moz-text-orientation: sideways;
    -ms-text-orientation: sideways;
    text-orientation: sideways;
}
.use-glyph-orientation {
    -webkit-text-orientation: use-glyph-orientation;
    -moz-text-orientation: use-glyph-orientation;
    -ms-text-orientation: use-glyph-orientation;
    text-orientation: use-glyph-orientation;
}

/* Global values. Needs special testing */
 .inherit {
    -webkit-text-orientation: inherit;
    -moz-text-orientation: inherit;
    -ms-text-orientation: inherit;
    text-orientation: inherit;
}
.initial {
    -webkit-text-orientation: initial;
    -moz-text-orientation: initial;
    -ms-text-orientation: initial;
    text-orientation: initial;
}

.vertical-lr {
    -ms-writing-mode: tb-lr;
    -webkit-writing-mode: vertical-lr;
    -moz-writing-mode: vertical-lr;
    -ms-writing-mode: vertical-lr;
   ...