separated-border-model-004b.xht (2756B)
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 Test: width of CSS table in border-collapse separate model</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/CSS21/tables.html#separated-borders" title="17.6.1 The separated borders model" /> 11 <link rel="match" href="../reference/ref-filled-green-100px-square.xht" /> 12 13 <meta content="The width of a CSS table is the distance from the left inner padding edge to the right inner padding edge (including the table border spacing but excluding table padding and table borders)." name="assert" /> 14 15 <style type="text/css"><![CDATA[ 16 div#overlapped-red 17 { 18 background-color: red; 19 height: 100px; 20 position: absolute; 21 width: 100px; 22 z-index: -1; 23 } 24 25 div#overlapping-green-table 26 { 27 background-color: green; 28 border: green solid 10px; 29 border-collapse: separate; 30 border-spacing: 0px 5px; 31 color: green; 32 display: table; 33 font: 20px/1 serif; 34 padding-bottom: 25px; 35 table-layout: fixed; 36 width: 80px; 37 /* 38 The width of a CSS table is given by the greater of the value of 39 the 'width' property as set for the CSS table and the sum of the 40 columns width plus border spacing: 41 42 max(set width, sum of columns width plus border spacing). 43 44 The width (as set) of a CSS table is given by its content-box, not 45 by its border-box. 46 47 In this testcase, the content-box must be 100px by 100px and all 48 filled with green color. 49 In this testcase, the border-box must be 200px by 200px and all 50 filled with green color. 51 52 The set width (100px) is larger than sum of columns width plus 53 border spacing 54 55 0px : left-most border-spacing 56 + 57 20px : div#td's width 58 + 59 0px : middle border-spacing between 1st and 2nd cell 60 + 61 20px : div#td's width 62 + 63 0px : right-most border-spacing 64 ===== 65 40px : sum of columns width plus border spacing 66 67 68 80px : set width of table 69 - 70 40px : sum of columns plus border spacing 71 ====== 72 40px : the extra (exceeding) 40px width will be distributed over 73 the columns, therefore given to both cells of the table. 74 */ 75 } 76 77 div.tr {display: table-row;} 78 79 div.td {display: table-cell;} 80 ]]></style> 81 82 </head> 83 84 <body> 85 86 <p>Test passes if there is a filled green square and <strong>no red</strong>.</p> 87 88 <div id="overlapped-red"></div> 89 90 <div id="overlapping-green-table"> 91 <div class="tr"> 92 <div class="td">1</div><div class="td">2</div> 93 </div> 94 <div class="tr"> 95 <div class="td">3</div><div class="td">4</div> 96 </div> 97 </div> 98 99 </body> 100 </html>