table-cell-align-006.html (4042B)
1 <!DOCTYPE html> 2 <meta charset="utf-8"> 3 <title>CSS Writing Modes test: text-align in orthogonal table cell</title> 4 5 <link rel="help" href="https://drafts.csswg.org/css-writing-modes-3/#line-mappings"> 6 <meta assert="text-align values respect line-relative mappings of the table cell"> 7 <link rel="match" href="reference/table-cell-align-006-ref.html"> 8 <link rel="author" title="Jonathan Kew" href="mailto:jkew@mozilla.com"> 9 10 <meta name="flags" content="ahem" /> 11 <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> 12 13 <style> 14 table { 15 font: 20px/1 Ahem; 16 border: 1px solid gray; 17 display: inline-table; 18 margin: 1em; 19 } 20 21 td { 22 padding: 0; 23 color: green; 24 } 25 26 table.vrl td { 27 writing-mode: vertical-rl; 28 } 29 30 table.slr td { 31 writing-mode: sideways-lr; 32 } 33 34 table.h { 35 writing-mode: vertical-lr; 36 } 37 38 table.h td { 39 writing-mode: initial; 40 } 41 42 /* If text-align works correctly on the cells, their green Ahem glyphs 43 should cover the red part of each background. */ 44 .left { 45 text-align: left; 46 background: linear-gradient(to bottom, red 20%, transparent 20%); 47 } 48 .slr .left { 49 background: linear-gradient(to top, red 20%, transparent 20%); 50 } 51 .center { 52 text-align: center; 53 background: linear-gradient(to bottom, transparent 40%, red 40%, red 60%, transparent 60%); 54 } 55 .right { 56 text-align: right; 57 background: linear-gradient(to bottom, transparent 80%, red 80%); 58 } 59 .slr .right { 60 background: linear-gradient(to top, transparent 80%, red 80%); 61 } 62 .start, 63 .slr .start:dir(rtl) 64 { 65 text-align: start; 66 background: linear-gradient(to bottom, red 20%, transparent 20%); 67 } 68 .start:dir(rtl), 69 .slr .start { 70 background: linear-gradient(to top, red 20%, transparent 20%); 71 } 72 .end, 73 .slr .end:dir(rtl) 74 { 75 text-align: end; 76 background: linear-gradient(to bottom, transparent 80%, red 80%); 77 } 78 .end:dir(rtl), 79 .slr .end 80 { 81 background: linear-gradient(to top, transparent 80%, red 80%); 82 } 83 .justify { 84 text-align-last: justify; 85 background: linear-gradient(to bottom, red 20%, transparent 20% 80%, red 80% ); 86 } 87 88 .h .left { 89 background: linear-gradient(to right, red 20%, transparent 20%); 90 } 91 .h .center { 92 background: linear-gradient(to right, transparent 40%, red 40%, red 60%, transparent 60%); 93 } 94 .h .right { 95 background: linear-gradient(to right, transparent 80%, red 80%); 96 } 97 .h .start { 98 background: linear-gradient(to right, red 20%, transparent 20%); 99 } 100 .h .start:dir(rtl) { 101 background: linear-gradient(to left, red 20%, transparent 20%); 102 } 103 .h .end { 104 background: linear-gradient(to right, transparent 80%, red 80%); 105 } 106 .h .end:dir(rtl) { 107 background: linear-gradient(to left, transparent 80%, red 80%); 108 } 109 .h .justify { 110 background: linear-gradient(to right, red 20%, transparent 20% 80%, red 80% ); 111 } 112 </style> 113 114 </div> 115 <table class=vrl> 116 <tr> 117 <td>XXXXX</td> 118 <td class=left>X</td> 119 <td class=center>X</td> 120 <td class=right>X</td> 121 <td class=start>X</td> 122 <td class=end>X</td> 123 <td class=justify>X X</td> 124 </tr> 125 </table> 126 <table class=vrl> 127 <tr dir=rtl> 128 <td>XXXXX</td> 129 <td class=left>X</td> 130 <td class=center>X</td> 131 <td class=right>X</td> 132 <td class=start>X</td> 133 <td class=end>X</td> 134 <td class=justify>X X</td> 135 </tr> 136 </table> 137 </div> 138 139 <div> 140 <table class=slr> 141 <tr> 142 <td>XXXXX</td> 143 <td class=left>X</td> 144 <td class=center>X</td> 145 <td class=right>X</td> 146 <td class=start>X</td> 147 <td class=end>X</td> 148 <td class=justify>X X</td> 149 </tr> 150 </table> 151 <table class=slr> 152 <tr dir=rtl> 153 <td>XXXXX</td> 154 <td class=left>X</td> 155 <td class=center>X</td> 156 <td class=right>X</td> 157 <td class=start>X</td> 158 <td class=end>X</td> 159 <td class=justify>X X</td> 160 </tr> 161 </table> 162 </div> 163 164 <div> 165 <table class=h> 166 <tr> 167 <td>XXXXX</td> 168 <td class=left>X</td> 169 <td class=center>X</td> 170 <td class=right>X</td> 171 <td class=start>X</td> 172 <td class=end>X</td> 173 <td class=justify>X X</td> 174 </tr> 175 </table> 176 <table class=h> 177 <tr dir=rtl> 178 <td>XXXXX</td> 179 <td class=left>X</td> 180 <td class=center>X</td> 181 <td class=right>X</td> 182 <td class=start>X</td> 183 <td class=end>X</td> 184 <td class=justify>X X</td> 185 </tr> 186 </table> 187 </div>