tor-browser

The Tor Browser
git clone https://git.dasho.dev/tor-browser.git
Log | Files | Refs | README | LICENSE

row-progression-vlr-009.xht (2464B)


      1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
      2 
      3 <html xmlns="http://www.w3.org/1999/xhtml">
      4 
      5  <head>
      6 
      7   <title>CSS Writing Modes Test: vertical-lr - table rows progression (thead, 2 tbodies, tfoot)</title>
      8 
      9   <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
     10   <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" />
     11   <link rel="match" href="block-flow-direction-001-ref.xht" />
     12 
     13   <meta content="ahem" name="flags" />
     14   <meta content="This test checks that rows of a table element with in a 'vertical-lr' writing mode are laid out one after the other, rightwardedly, with the first beginning at the leftmost side of the table box; table rows are ordered from left to right meaning that the 1st row is the leftmost one and then the 2nd row is juxtaposed to its right-hand side, the 3rd row is juxtaposed to the 2nd row on its right-hand side, etc... Table cells in a table with writing-mode set to 'sideways-lr' are ordered according to inline flow direction, which is from bottom to top." name="assert" />
     15 
     16   <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
     17   <style type="text/css"><![CDATA[
     18   body
     19     {
     20       color: yellow;
     21       font: 20px/1 Ahem;
     22     }
     23 
     24   table
     25     {
     26       background-color: blue;
     27       border-spacing: 0em;
     28       border: blue solid 1em;
     29       height: 7em;
     30       writing-mode: vertical-lr;
     31     }
     32 
     33   td
     34     {
     35       padding-bottom: 0em;
     36       padding-left: 1em;
     37       padding-right: 0em;
     38       padding-top: 0em;
     39     }
     40 
     41   td.left-most-cell
     42     {
     43       padding-left: 0em;
     44     }
     45   ]]></style>
     46  </head>
     47 
     48  <body>
     49 
     50   <table>
     51 
     52     <thead>
     53 
     54 <!-- The "P" -->
     55       <tr><td class="left-most-cell">AAA B&nbsp; C&nbsp; DDD</td><td class="left-most-cell">EE F G H</td><td class="left-most-cell">JJ &nbsp; &nbsp; &nbsp;</td></tr>
     56 
     57     </thead>
     58 
     59     <tfoot>
     60 
     61 <!-- The right-most "S" -->
     62       <tr><td>jjj k&nbsp; m&nbsp; n&nbsp;</td><td>q r s tt</td><td>&nbsp;u &nbsp;v &nbsp;w xx</td></tr>
     63 
     64     </tfoot>
     65 
     66     <tbody>
     67 
     68 <!-- The "A" -->
     69       <tr><td>KKK L&nbsp; M&nbsp; NNN</td><td>OO Q R SS</td><td>TT &nbsp; &nbsp; UU</td></tr>
     70 
     71     </tbody>
     72 
     73     <tbody>
     74 
     75 <!-- The left-most "S" -->
     76       <tr><td>VVV W&nbsp; X&nbsp; Y&nbsp;</td><td>a b c dd</td><td>&nbsp;e &nbsp;f &nbsp;g hh</td></tr>
     77 
     78     </tbody>
     79 
     80   </table>
     81 
     82  </body>
     83 </html>