direction-upright-002.html (4523B)
1 <!DOCTYPE html> 2 <title>'text-orientation: upright' forces used 'direction' to LTR in vertical typographic modes</title> 3 <link rel=help href="https://www.w3.org/TR/css-writing-modes-3/#text-orientation"> 4 <link rel=help href="https://www.w3.org/TR/css-flexbox-1/#flex-direction-property"> 5 <link rel=help href="https://www.w3.org/TR/css-grid-1/#grid-auto-flow-property"> 6 <link rel=help href="https://www.w3.org/TR/css-ruby-1/#bidi"> 7 <link rel=match href="reference/direction-upright-002.html"> 8 9 <style> 10 body > div { 11 border: solid silver; 12 float: left; 13 margin: 1em; 14 border-inline-start-color: orange; 15 border-block-start-color: aqua; 16 border-inline-end-color: lime; 17 border-block-end-color: yellow; 18 } 19 colgroup:first-child { background: fuchsia; } 20 col:last-child { background: purple; } 21 .flex { display: flex; } 22 .grid { grid-template-columns: auto auto } 23 hr { clear: both } 24 </style> 25 26 <p>Test passes if both rows of boxes are identical (coloring, order, orientation, and arrangement of contents). 27 28 <!-- test --> 29 30 <div dir=rtl style="writing-mode: vertical-rl; text-orientation: upright"> 31 <table> 32 <colgroup></colgroup> 33 <colgroup><col><col></colgroup> 34 <tr><td>A<td>B<td>C 35 </table> 36 <div class=flex>A <span>B</span></div> 37 <div class=grid>A <span>B</span></div> 38 <div>A <ruby>B<rt>b</rt> C<rt>c</rt></ruby><ruby>D<rt>d</rt> E<rt>e</rt></ruby></div> 39 </div> 40 <div dir=rtl style="writing-mode: vertical-lr; text-orientation: upright"> 41 <table> 42 <colgroup></colgroup> 43 <colgroup><col><col></colgroup> 44 <tr><td>A<td>B<td>C 45 </table> 46 <div class=flex>A <span>B</span></div> 47 <div class=grid>A <span>B</span></div> 48 <div>A <ruby>B<rt>b</rt> C<rt>c</rt></ruby><ruby>D<rt>d</rt> E<rt>e</rt></ruby></div> 49 </div> 50 51 <!-- control --> 52 53 <div dir=rtl style="text-orientation: upright"> 54 <table> 55 <colgroup></colgroup> 56 <colgroup><col><col></colgroup> 57 <tr><td>A<td>B<td>C 58 </table> 59 <div class=flex>A <span>B</span></div> 60 <div class=grid>A <span>B</span></div> 61 <div>A <ruby>B<rt>b</rt> C<rt>c</rt></ruby><ruby>D<rt>d</rt> E<rt>e</rt></ruby></div> 62 </div> 63 <div dir=rtl style="writing-mode: sideways-rl; text-orientation: upright"> 64 <table> 65 <colgroup></colgroup> 66 <colgroup><col><col></colgroup> 67 <tr><td>A<td>B<td>C 68 </table> 69 <div class=flex>A <span>B</span></div> 70 <div class=grid>A <span>B</span></div> 71 <div>A <ruby>B<rt>b</rt> C<rt>c</rt></ruby><ruby>D<rt>d</rt> E<rt>e</rt></ruby></div> 72 </div> 73 <div dir=rtl style="writing-mode: sideways-lr; text-orientation: upright"> 74 <table> 75 <colgroup></colgroup> 76 <colgroup><col><col></colgroup> 77 <tr><td>A<td>B<td>C 78 </table> 79 <div class=flex>A <span>B</span></div> 80 <div class=grid>A <span>B</span></div> 81 <div>A <ruby>B<rt>b</rt> C<rt>c</rt></ruby><ruby>D<rt>d</rt> E<rt>e</rt></ruby></div> 82 </div> 83 84 <hr> 85 86 <!-- reference --> 87 88 <div style="writing-mode: vertical-rl; text-orientation: upright"> 89 <table> 90 <colgroup></colgroup> 91 <colgroup><col><col></colgroup> 92 <tr><td>A<td>B<td>C 93 </table> 94 <div class=flex>A <span>B</span></div> 95 <div class=grid>A <span>B</span></div> 96 <div>A <ruby>B<rt>b</rt> C<rt>c</rt></ruby><ruby>D<rt>d</rt> E<rt>e</rt></ruby></div> 97 </div> 98 <div style="writing-mode: vertical-lr; text-orientation: upright"> 99 <table> 100 <colgroup></colgroup> 101 <colgroup><col><col></colgroup> 102 <tr><td>A<td>B<td>C 103 </table> 104 <div class=flex>A <span>B</span></div> 105 <div class=grid>A <span>B</span></div> 106 <div>A <ruby>B<rt>b</rt> C<rt>c</rt></ruby><ruby>D<rt>d</rt> E<rt>e</rt></ruby></div> 107 </div> 108 109 <div dir=rtl> 110 <table> 111 <colgroup></colgroup> 112 <colgroup><col><col></colgroup> 113 <tr><td>A<td>B<td>C 114 </table> 115 <div class=flex>A <span>B</span></div> 116 <div class=grid>A <span>B</span></div> 117 <div>A <ruby>B<rt>b</rt> C<rt>c</rt></ruby><ruby>D<rt>d</rt> E<rt>e</rt></ruby></div> 118 </div> 119 <div dir=rtl style="writing-mode: sideways-rl"> 120 <table> 121 <colgroup></colgroup> 122 <colgroup><col><col></colgroup> 123 <tr><td>A<td>B<td>C 124 </table> 125 <div class=flex>A <span>B</span></div> 126 <div class=grid>A <span>B</span></div> 127 <div>A <ruby>B<rt>b</rt> C<rt>c</rt></ruby><ruby>D<rt>d</rt> E<rt>e</rt></ruby></div> 128 </div> 129 <div dir=rtl style="writing-mode: sideways-lr"> 130 <table> 131 <colgroup></colgroup> 132 <colgroup><col><col></colgroup> 133 <tr><td>A<td>B<td>C 134 </table> 135 <div class=flex>A <span>B</span></div> 136 <div class=grid>A <span>B</span></div> 137 <div>A <ruby>B<rt>b</rt> C<rt>c</rt></ruby><ruby>D<rt>d</rt> E<rt>e</rt></ruby></div> 138 </div>