direction-upright-002.html (3925B)
1 <!DOCTYPE html> 2 <title>Reftest Reference</title> 3 4 <style> 5 body > div { 6 border: solid silver; 7 float: left; 8 margin: 1em; 9 border-inline-start-color: orange; 10 border-block-start-color: aqua; 11 border-inline-end-color: lime; 12 border-block-end-color: yellow; 13 } 14 colgroup:first-child { background: fuchsia; } 15 col:last-child { background: purple; } 16 .flex { display: flex; } 17 .grid { grid-template-columns: auto auto } 18 hr { clear: both } 19 </style> 20 21 <p>Test passes if both rows of boxes are identical (coloring, order, orientation, and arrangement of contents). 22 23 <div style="writing-mode: vertical-rl; text-orientation: upright"> 24 <table> 25 <colgroup></colgroup> 26 <colgroup><col><col></colgroup> 27 <tr><td>A<td>B<td>C 28 </table> 29 <div class=flex>A <span>B</span></div> 30 <div class=grid>A <span>B</span></div> 31 <div>A <ruby>B<rt>b</rt> C<rt>c</rt></ruby><ruby>D<rt>d</rt> E<rt>e</rt></ruby></div> 32 </div> 33 <div style="writing-mode: vertical-lr; text-orientation: upright"> 34 <table> 35 <colgroup></colgroup> 36 <colgroup><col><col></colgroup> 37 <tr><td>A<td>B<td>C 38 </table> 39 <div class=flex>A <span>B</span></div> 40 <div class=grid>A <span>B</span></div> 41 <div>A <ruby>B<rt>b</rt> C<rt>c</rt></ruby><ruby>D<rt>d</rt> E<rt>e</rt></ruby></div> 42 </div> 43 44 <div dir=rtl> 45 <table> 46 <colgroup></colgroup> 47 <colgroup><col><col></colgroup> 48 <tr><td>A<td>B<td>C 49 </table> 50 <div class=flex>A <span>B</span></div> 51 <div class=grid>A <span>B</span></div> 52 <div>A <ruby>B<rt>b</rt> C<rt>c</rt></ruby><ruby>D<rt>d</rt> E<rt>e</rt></ruby></div> 53 </div> 54 <div dir=rtl style="writing-mode: sideways-rl"> 55 <table> 56 <colgroup></colgroup> 57 <colgroup><col><col></colgroup> 58 <tr><td>A<td>B<td>C 59 </table> 60 <div class=flex>A <span>B</span></div> 61 <div class=grid>A <span>B</span></div> 62 <div>A <ruby>B<rt>b</rt> C<rt>c</rt></ruby><ruby>D<rt>d</rt> E<rt>e</rt></ruby></div> 63 </div> 64 <div dir=rtl style="writing-mode: sideways-lr"> 65 <table> 66 <colgroup></colgroup> 67 <colgroup><col><col></colgroup> 68 <tr><td>A<td>B<td>C 69 </table> 70 <div class=flex>A <span>B</span></div> 71 <div class=grid>A <span>B</span></div> 72 <div>A <ruby>B<rt>b</rt> C<rt>c</rt></ruby><ruby>D<rt>d</rt> E<rt>e</rt></ruby></div> 73 </div> 74 75 <hr> 76 77 <div style="writing-mode: vertical-rl; text-orientation: upright"> 78 <table> 79 <colgroup></colgroup> 80 <colgroup><col><col></colgroup> 81 <tr><td>A<td>B<td>C 82 </table> 83 <div class=flex>A <span>B</span></div> 84 <div class=grid>A <span>B</span></div> 85 <div>A <ruby>B<rt>b</rt> C<rt>c</rt></ruby><ruby>D<rt>d</rt> E<rt>e</rt></ruby></div> 86 </div> 87 <div style="writing-mode: vertical-lr; text-orientation: upright"> 88 <table> 89 <colgroup></colgroup> 90 <colgroup><col><col></colgroup> 91 <tr><td>A<td>B<td>C 92 </table> 93 <div class=flex>A <span>B</span></div> 94 <div class=grid>A <span>B</span></div> 95 <div>A <ruby>B<rt>b</rt> C<rt>c</rt></ruby><ruby>D<rt>d</rt> E<rt>e</rt></ruby></div> 96 </div> 97 98 <div dir=rtl> 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 <div dir=rtl style="writing-mode: sideways-rl"> 109 <table> 110 <colgroup></colgroup> 111 <colgroup><col><col></colgroup> 112 <tr><td>A<td>B<td>C 113 </table> 114 <div class=flex>A <span>B</span></div> 115 <div class=grid>A <span>B</span></div> 116 <div>A <ruby>B<rt>b</rt> C<rt>c</rt></ruby><ruby>D<rt>d</rt> E<rt>e</rt></ruby></div> 117 </div> 118 <div dir=rtl style="writing-mode: sideways-lr"> 119 <table> 120 <colgroup></colgroup> 121 <colgroup><col><col></colgroup> 122 <tr><td>A<td>B<td>C 123 </table> 124 <div class=flex>A <span>B</span></div> 125 <div class=grid>A <span>B</span></div> 126 <div>A <ruby>B<rt>b</rt> C<rt>c</rt></ruby><ruby>D<rt>d</rt> E<rt>e</rt></ruby></div> 127 </div>