table-cell-align-001.html (1848B)
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-001-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 writing-mode: vertical-lr; 18 } 19 20 td { 21 inline-size: 2em; 22 padding: 0; 23 color: green; 24 writing-mode: horizontal-tb; 25 } 26 27 /* If text-align works correctly on the cells, their green Ahem glyphs 28 should cover the red part of each background. */ 29 .left { 30 text-align: left; 31 background: linear-gradient(to right, red 50%, transparent 50%); 32 } 33 .center { 34 text-align: center; 35 background: linear-gradient(to right, transparent 25%, red 25%, red 75%, transparent 75%); 36 } 37 .right { 38 text-align: right; 39 background: linear-gradient(to right, transparent 50%, red 50%); 40 } 41 .start { 42 text-align: start; 43 background: linear-gradient(to right, red 50%, transparent 50%); 44 } 45 .start:dir(rtl) { 46 background: linear-gradient(to left, red 50%, transparent 50%); 47 } 48 .end { 49 text-align: end; 50 background: linear-gradient(to right, transparent 50%, red 50%); 51 } 52 .end:dir(rtl) { 53 background: linear-gradient(to left, transparent 50%, red 50%); 54 } 55 </style> 56 57 <table> 58 <tr> 59 <td class=left>X</td> 60 <td class=center>X</td> 61 <td class=right>X</td> 62 <td class=start>X</td> 63 <td class=end>X</td> 64 </tr> 65 </table> 66 <br> 67 <table> 68 <tr dir=rtl> 69 <td class=left>X</td> 70 <td class=center>X</td> 71 <td class=right>X</td> 72 <td class=start>X</td> 73 <td class=end>X</td> 74 </tr> 75 </table>