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
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
|
<html>
<body>
<h1>Working Test Cases</h1>
<h2>border-collapse: separate</h2>
<h3>TC-A1: table no border</h3>
<table>
<tbody>
<tr>
<td>Cell 1A</td>
<td>Cell 1B</td>
</tr>
</tbody>
</table>
<h3>TC-A2: table attribute controlled border (1px, red)</h3>
<table border=1 bordercolor="red">
<tbody>
<tr>
<td>Cell 1A</td>
<td>Cell 1B</td>
</tr>
</tbody>
</table>
<h3>TC-A3: table attribute controlled border (4px, blue)</h3>
<table border=4 bordercolor="blue">
<tbody>
<tr>
<td>Cell 1A</td>
<td>Cell 1B</td>
</tr>
</tbody>
</table>
Note: Real browsers render the inner cells border with 1px, but QTextDocument's rendering has always been like this.
<h2>border-collapse: collapse</h2>
<h3>TC-B1: table no border</h3>
<table style="border-collapse: collapse">
<tbody>
<tr>
<td>Cell 1A</td>
<td>Cell 1B</td>
</tr>
</tbody>
</table>
<h3>TC-B2: table attribute + css controlled grid (outer border 1px)</h3>
<table border=1 bordercolor="red" style="border-collapse: collapse">
<tbody>
<tr>
<td>Cell 1A</td>
<td>Cell 1B</td>
</tr>
</tbody>
</table>
<h3>TC-B3: table attribute + css controlled grid (outer border 4px)</h3>
<table border=4 bordercolor="red" style="border-collapse: collapse">
<tbody>
<tr>
<td>Cell 1A</td>
<td>Cell 1B</td>
</tr>
</tbody>
</table>
<h3>TC-B4: table attribute + css controlled grid (one cell with custom edge)</h3>
<table border=4 bordercolor="red" style="border-collapse: collapse">
<tbody>
<tr>
<td>Cell 1A</td>
<td style="border-right: 8px solid green">Cell 1B (border-right: 8px solid green)</td>
</tr>
</tbody>
</table>
<h3>TC-B5: table with single decorated cell</h3>
<table style="border-collapse: collapse">
<tbody>
<tr>
<td>Cell 1A</td>
<td style="border: 2px solid red">Cell 1B (border: 2px solid red)</td>
</tr>
</tbody>
</table>
<h3>cells with competing rules</h3>
<h4>TC-C1: vertical edge (pink, 6px) wins over horizontal edge (red|blue, 6px)</h4>
<table border=1 bordercolor="#999999" style="border-collapse: collapse">
<tbody>
<tr>
<td style="border-right: 4px solid green; border-bottom: 6px solid red">Cell 1A</td>
<td style="border-left: 6px solid pink; border-bottom: 6px solid blue">Cell 2B</td>
</tr>
</tbody>
</table>
<h4>TC-C2: vertical edge (pink, 6px) loses over horizontal edge (red|blue, 8px)</h4>
<table border=1 bordercolor="#999999" style="border-collapse: collapse">
<tbody>
<tr>
<td style="border-right: 4px solid green; border-bottom: 8px solid red">Cell 1A</td>
<td style="border-left: 6px solid pink; border-bottom: 8px solid blue">Cell 2B</td>
</tr>
</tbody>
</table>
<h4>TC-C3: cells with span and competing rules</h4>
<table border=1 bordercolor="#999999" style="border-collapse: collapse">
<tbody>
<tr>
<td colspan=2 style="border-bottom: 4px solid red">Cell 1A/B spans over two columns (border-bottom: red)</td>
</tr>
<tr>
<td style="border-top: 1px solid green">Cell 2A (border-top loses -> red)</td>
<td style="border-top: 10px solid green">Cell 2B (border-top wins -> green)</td>
</tr>
</tbody>
</table>
<h1>Non-Working Test Cases</h1>
<h2>border-collapse: separate</h2>
<h3>TC-X1: table css border (red via style)</h3>
<table style="border: 1px solid red">
<tbody>
<tr>
<td>Cell 1A</td>
<td>Cell 1B</td>
</tr>
</tbody>
</table>
<h2>border-collapse: collapse</h2>
<h3>TC-X2: tr css border</h3>
<table border=1 style="border-collapse: collapse">
<tbody>
<tr style="border-bottom: 2px solid red">
<td>Cell 1A (border-bottom should be red)</td>
<td>Cell 1B (border-bottom should be red)</td>
</tr>
<tr style="border-left: 2px solid red">
<td>Cell 2A (border-left should be red)</td>
<td>Cell 2B</td>
</tr>
</tbody>
</table>
<h3>TC-X3: cells with competing rules and colspan</h3>
<table border=1 bordercolor="#999999" style="border-collapse: collapse">
<tbody>
<tr>
<td colspan=2 style="border-bottom: 4px solid red; border-right: 15px solid pink">Cell 1A/B spans over two columns (border-bottom: red, border-right pink)</td>
</tr>
<tr>
<td style="border-top: 1px solid green">Cell 2A (border-top loses -> red)</td>
<td style="border-top: 10px solid green">Cell 2B (border-top wins -> green)</td>
</tr>
</tbody>
</table>
This is currently not 100% correct but admittedly a constructed corner case (and Chrome failes here, too).
</body>
</html>
|
