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: Testing percent widths of kids of anonymous table cells</title>
5 <link rel="author" title="Boris Zbarsky" href="mailto:bzbarsky@mit.edu">
6 <link rel="help" href="http://www.w3.org/TR/CSS21/tables.html#auto-table-layout">
7 <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#containing-block-details">
8 <meta name="assert" content="Percentage width kids of anonymous cells should use anonymous cell as containing block">
9 <style type="text/css">
10 #parent { position: relative; }
11 .table { display: table; position: absolute; top: 0; left: 0; width: 300px }
12 .row { display: table-row }
13 .cell { display: table-cell; }
14 .spacer { width: 100px; }
15 .background { background: red; width: 100px; height: 100px; }
16 .foreground { background: green; width: 50%; height: 100px; }
17 </style>
18 </head>
19 <body>
20 <p>There should be no red below. A 100px by 100px green square should be visible.</p>
21 <div id="parent">
22 <div class="table">
23 <div class="row">
24 <div class="cell spacer"></div>
25 <div class="background"></div>
26 </div>
27 </div>
28 <div class="table">
29 <div class="row">
30 <div class="cell spacer"></div>
31 <div class="foreground"></div>
32 </div>
33 </div>
34 </div>
35 </body>
36 </html>