summaryrefslogtreecommitdiffstats
path: root/testing/web-platform/tests/css/CSS2/tables/separated-border-model-009.xht
blob: 40471be0ad5887da264717383417e8e201c3d2c3 (plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

 <head>

  <title>CSS Test: Border-spacing - contiguous table-row-groups (2 tbodies)</title>

  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
  <link rel="help" href="http://www.w3.org/TR/CSS21/tables.html#separated-borders" title="17.6.1 The separated borders model" />
  <link rel="match" href="separated-border-model-007-ref.xht" />

  <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 - 2 tbodies in this testcase - must merge, must collapse into one." name="assert" />

  <style type="text/css"><![CDATA[
  body
  {
  font: 1em/2 serif;
  margin: 1em;
  }

  div#expected-results {top: 1em;}

  div
  {
  background-color: white;
  height: 3em;
  left: 1em;
  position: absolute;
  width: 600px;
  }

  table
  {
  background-color: red;
  border-collapse: separate;
  border-spacing: 0em 3em;
  margin-top: 0px;
  table-layout: fixed;
  }

  td
  {
  background-color: white;
  height: 2em;
  padding: 0px;
  width: 600px;
  }

  div#between-tbodies {top: 6em;}

  div#after-2nd-tbody {top: 11em;}
  ]]></style>

 </head>

 <body>

  <table>

   <tbody>
    <tr>
     <td></td>
    </tr>
   </tbody>

   <tbody>
    <tr>
     <td></td>
    </tr>
   </tbody>

  </table>

  <div id="expected-results">Test passes if there is <strong>no red</strong>.</div>

  <div id="between-tbodies"></div>

  <div id="after-2nd-tbody"></div>

<!--

  The vertical positioning of the (overlapped) table, sub-table
  components and border-spacing areas between table-row-groups

                                                 0px
               <body>'s margin-top
         ===================================    16px (1em)
         |                                 |
         |     border=spacing 48px (3em)   |
         |     with red background=color   |
         ===================================    64px (4em)
         |            <tbody>              |
         |        should be 32px (2em)     |
         ===================================    96px (6em)
         |                                 |
         |     border=spacing 48px (3em)   |
         |     with red background=color   |
         ===================================   144px (9em)
         |            <tbody>              |
         |        should be 32px (2em)     |
         ===================================   176px (11em)
         |                                 |
         |     border=spacing 48px (3em)   |
         |     with red background=color   |
         ===================================   224px (14em)


    ********************************************


  The vertical positioning of the absolutely positioned overlapping white <div>s

                                                 0px
               <body>'s margin=top
         ===================================    16px (1em)
         |                                 |
         | div#expected=results 48px (3em) |
         |  with white background=color    |
         ===================================    64px (4em)
         |                                 |
         |                                 |
         ===================================    96px (6em)
         |                                 |
         |  div#between=tbodies 48px (3em) |
         |   with white background=color   |
         ===================================   144px (9em)
         |                                 |
         |                                 |
         ===================================   176px (11em)
         |                                 |
         |  div#after=2nd=tbody 48px (3em) |
         |   with white background=color   |
         ===================================   224px (14em)

-->

 </body>
</html>