table-cell-align-005.html (2249B)
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-005-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: 40px/1 Ahem; 16 border: 1px solid gray; 17 } 18 19 td { 20 inline-size: 2em; 21 padding: 0; 22 color: green; 23 } 24 25 table.vlr td { 26 writing-mode: vertical-lr; 27 } 28 29 table.vrl td { 30 writing-mode: vertical-rl; 31 } 32 33 /* If text-align works correctly on the cells, their green Ahem glyphs 34 should cover the red part of each background. */ 35 .left { 36 text-align: left; 37 background: linear-gradient(to bottom, red 50%, transparent 50%); 38 } 39 .center { 40 text-align: center; 41 background: linear-gradient(to bottom, transparent 25%, red 25%, red 75%, transparent 75%); 42 } 43 .right { 44 text-align: right; 45 background: linear-gradient(to bottom, transparent 50%, red 50%); 46 } 47 .start { 48 text-align: start; 49 background: linear-gradient(to bottom, red 50%, transparent 50%); 50 } 51 .start:dir(rtl) { 52 background: linear-gradient(to top, red 50%, transparent 50%); 53 } 54 .end { 55 text-align: end; 56 background: linear-gradient(to bottom, transparent 50%, red 50%); 57 } 58 .end:dir(rtl) { 59 background: linear-gradient(to top, transparent 50%, red 50%); 60 } 61 </style> 62 63 <table class=vlr> 64 <tr> 65 <td class=left>X</td> 66 <td class=center>X</td> 67 <td class=right>X</td> 68 <td class=start>X</td> 69 <td class=end>X</td> 70 </tr> 71 </table> 72 <br> 73 <table class=vlr> 74 <tr dir=rtl> 75 <td class=left>X</td> 76 <td class=center>X</td> 77 <td class=right>X</td> 78 <td class=start>X</td> 79 <td class=end>X</td> 80 </tr> 81 </table> 82 <br> 83 <table class=vrl> 84 <tr> 85 <td class=left>X</td> 86 <td class=center>X</td> 87 <td class=right>X</td> 88 <td class=start>X</td> 89 <td class=end>X</td> 90 </tr> 91 </table> 92 <br> 93 <table class=vrl> 94 <tr dir=rtl> 95 <td class=left>X</td> 96 <td class=center>X</td> 97 <td class=right>X</td> 98 <td class=start>X</td> 99 <td class=end>X</td> 100 </tr> 101 </table>