separated-border-model-007.xht (4047B)
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: Border-spacing - contiguous table-row-groups (thead and tbody)</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="separated-border-model-007-ref.xht" /> 12 13 <meta content="When a table element has 2 contiguous table-row-groups (thead, tbody, tfoot or more than 1 tbody elements), then border-spacing between such table-row-groups - thead and tbody in this testcase - must merge, must collapse into one." name="assert" /> 14 15 <style type="text/css"><![CDATA[ 16 body 17 { 18 font: 1em/2 serif; 19 margin: 1em; 20 } 21 22 div#expected-results {top: 1em;} 23 24 div 25 { 26 background-color: white; 27 height: 3em; 28 left: 1em; 29 position: absolute; 30 width: 600px; 31 } 32 33 table 34 { 35 background-color: red; 36 border-collapse: separate; 37 border-spacing: 0em 3em; 38 margin-top: 0px; 39 table-layout: fixed; 40 } 41 42 td 43 { 44 background-color: white; 45 height: 2em; 46 padding: 0px; 47 width: 600px; 48 } 49 50 div#between-thead-and-tbody {top: 6em;} 51 52 div#after-tbody {top: 11em;} 53 ]]></style> 54 55 </head> 56 57 <body> 58 59 <table> 60 61 <thead> 62 <tr> 63 <td></td> 64 </tr> 65 </thead> 66 67 <tbody> 68 <tr> 69 <td></td> 70 </tr> 71 </tbody> 72 73 </table> 74 75 <div id="expected-results">Test passes if there is <strong>no red</strong>.</div> 76 77 <div id="between-thead-and-tbody"></div> 78 79 <div id="after-tbody"></div> 80 81 <!-- 82 83 The vertical positioning of the (overlapped) table, sub-table 84 components and border-spacing areas between table-row-groups 85 86 0px 87 <body>'s margin-top 88 =================================== 16px (1em) 89 | | 90 | border=spacing 48px (3em) | 91 | with red background=color | 92 =================================== 64px (4em) 93 | <thead> | 94 | should be 32px (2em) | 95 =================================== 96px (6em) 96 | | 97 | border=spacing 48px (3em) | 98 | with red background=color | 99 =================================== 144px (9em) 100 | <tbody> | 101 | should be 32px (2em) | 102 =================================== 176px (11em) 103 | | 104 | border=spacing 48px (3em) | 105 | with red background=color | 106 =================================== 224px (14em) 107 108 109 ******************************************** 110 111 112 The vertical positioning of the absolutely positioned overlapping white <div>s 113 114 0px 115 <body>'s margin=top 116 =================================== 16px (1em) 117 | | 118 | div#expected=results 48px (3em) | 119 | with white background=color | 120 =================================== 64px (4em) 121 | | 122 | | 123 =================================== 96px (6em) 124 | | 125 | div#between=thead=and=tbody 48px| 126 | with white background=color | 127 =================================== 144px (9em) 128 | | 129 | | 130 =================================== 176px (11em) 131 | | 132 | div#after=tbody 48px (3em) | 133 | with white background=color | 134 =================================== 224px (14em) 135 136 --> 137 138 </body> 139 </html>