table-visual-layout-014

A spanning cell's rectangle must be as far to the right as possible in an 'rtl' table

WeasyPrint

This browser

Assertion
With 'rtl' tables, the spanning cell's rectangle is as far to the right as possible, but to the left of all cells in the same row that were earlier in source (no overlapping).

Source

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
 2 <html>
 3     <head>
 4         <title>CSS Test: A spanning cell's rectangle must be as far to the right as possible in an 'rtl' table</title>
 5         <link rel="author" title="Microsoft" href="http://www.microsoft.com/">
 6         <link rel="help" href="http://www.w3.org/TR/CSS21/tables.html#table-layout">
 7         <meta name="flags" content="">
 8         <meta name="assert" content="With 'rtl' tables, the spanning cell's rectangle is as far to the right as possible, but to the left of all cells in the same row that were earlier in source (no overlapping).">
 9         <style type="text/css">
10             table
11             {
12                 direction: rtl;
13             }
14             td
15             {
16                 border: 1px solid black;
17                 height: 100px;
18                 width: 100px;
19             }
20             #cell
21             {
22                background: black;
23             }
24             .cell
25             {
26                 background: blue;
27             }
28         </style>
29     </head>
30     <body>
31         <p>Test passes if the black square is to the left of both blue boxes on the page.</p>
32         <table>
33             <tr>
34                 <td></td>
35                 <td class="cell" rowspan="2"></td>
36                 <td></td>
37                 <td></td>
38             </tr>
39             <tr>
40                 <td class="cell"></td>
41                 <td id="cell" rowspan="2" colspan="2"></td>
42             </tr>
43             <tr>
44                 <td></td>
45             </tr>
46             <tr>
47                 <td></td>
48             </tr>
49         </table>
50     </body>
51 </html>