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