table-cell-001.html (1413B)
1 <!doctype html> 2 <html lang="en"> 3 <meta charset="utf-8"> 4 <title>CSS Writing Mode test: orthogonal table cell</title> 5 <link rel="help" href="https://drafts.csswg.org/css-writing-modes-3/#block-flow"> 6 <meta assert="The writing mode property applies to table cells: two adjacent cells can have orthogonal writing modes, and the enclosing table must be laid out correctly."> 7 <meta flags="ahem"> 8 <link rel="match" href="reference/table-cell-001-ref.html"> 9 <link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/"> 10 11 <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> 12 <style> 13 table, td { 14 padding: 0; 15 border-spacing: 0; 16 font: 20px/20px ahem; 17 } 18 td { background: green; } 19 #t2 { writing-mode: vertical-rl; } 20 21 #red { 22 font: 20px/20px ahem; 23 position: absolute; 24 z-index: -1; 25 background: red; 26 height: 4em; 27 width: 5em; 28 } 29 30 31 </style> 32 33 <p>There should be a <strong>green rectangle</strong> and <strong>no red</strong>. 34 35 <div id=red></div> 36 37 <table><tbody><tr><td id=t1> </td><td id=t2> </td></tr></tbody></table> 38 <!-- 39 * Each table cell should be 4em in its inline dimention: horizontal for the first, vertical for the second. 40 * The first table cell should be 4em tall, to match the height of the second one. 41 * The second table cell should be 1em in its block dimention, which is horizontal. 42 * Juxtaposing the two that give 4em x 5em. 43 -->