table-anonymous-block-003.xht (2544B)
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <title>CSS Test: The anonymous block box around a table is as wide as the border edge of the 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#model" /> 7 <meta name="assert" content="The anonymous block around the table and caption is as wide as the border edge of the table box." /> 8 <style type="text/css"> 9 div 10 { 11 color: blue; 12 } 13 #table 14 { 15 background: black; 16 display: table; 17 float: left; 18 width: 100px; 19 } 20 #caption 21 { 22 background: blue; 23 color: blue; 24 display: table-caption; 25 width: 200px; 26 } 27 #tr 28 { 29 display: table-row; 30 } 31 #td 32 { 33 color: black; 34 display: table-cell; 35 } 36 </style> 37 </head> 38 <body> 39 <p>Test passes if the blue box below is wider, and thus overhangs the black box and "Filler Text" appears immediately after the end (right side) of the black box.</p> 40 <div>Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text 41 Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text 42 Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text 43 <span id="table"> 44 <span id="caption">Filler Text Filler Text</span> 45 <span id="tr"> 46 <span id="td">Filler Text</span> 47 </span> 48 </span> 49 Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text 50 Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text 51 Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text 52 Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text 53 </div> 54 </body> 55 </html>