1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82
  
     | 
    
      <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <title>CSS Writing Modes Test: sideways-rl - table rows progression (thead, 2 tbodies, tfoot)</title>
  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-4/#writing-mode" title="3.1 Block Flow Direction: the writing-mode property" />
  <link rel="match" href="block-flow-direction-001-ref.xht" />
  <meta content="ahem" name="flags" />
  <meta content="This test checks that rows of a table element with in a 'sideways-rl' writing mode are laid out one after the other, leftwardedly, with the first beginning at the rightmost side of the table box; table rows are ordered from right to left meaning that the 1st row is the rightmost one and then the 2nd row is juxtaposed to its left-hand side, the 3rd row is juxtaposed to the 2nd row on its left-hand side, etc..." name="assert" />
  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
  <style type="text/css"><![CDATA[
  body
    {
      color: yellow;
      font: 20px/1 Ahem;
    }
  table
    {
      background-color: blue;
      border-spacing: 0em;
      border: blue solid 1em;
      height: 7em;
      writing-mode: sideways-rl;
    }
  td
    {
      padding-bottom: 0em;
      padding-left: 1em;
      padding-right: 0em;
      padding-top: 0em;
    }
  td.left-most-cell
    {
      padding-left: 0em;
    }
  ]]></style>
 </head>
 <body>
  <table>
    <thead>
<!-- The right-most "S" -->
      <tr><td>A  B  C  DDD</td><td>EE F G H</td><td>JJ  K  L  M</td></tr>
    </thead>
    <tfoot>
<!-- The "P" -->
      <tr><td class="left-most-cell">mmm n  o  qqq</td><td class="left-most-cell">r s t uu</td><td class="left-most-cell">      vv</td></tr>
    </tfoot>
    <tbody>
<!-- The left-most "S" -->
      <tr><td>N  O  Q  RRR</td><td>SS T U V</td><td>WW  X  Y  Z</td></tr>
    </tbody>
    <tbody>
<!-- The "A" -->
      <tr><td>aaa b  c  ddd</td><td>ee f g hh</td><td>jj     kk</td></tr>
    </tbody>
  </table>
 </body>
</html> 
     |