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
|
<!DOCTYPE html>
<meta charset="utf-8">
<link rel="author" title="Oriol Brufau" href="obrufau@igalia.com">
<link rel="help" href="https://drafts.csswg.org/css-align/#distribution-block">
<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/12220">
<link rel="match" href="../../reference/ref-filled-green-300px-square.html">
<meta name="assert" content="
The contents of the cells are 600px tall, but since we are collapsing one row,
the cells shrink to be only 300px tall. Therefore, the contents overflow.
Since the cells have the default `align-content: normal`, the alignment is
decided depending on `vertical-align`:
- `vertical-align: top` maps to `align-self: safe start`
- `vertical-align: middle` maps to `align-self: safe center`
- `vertical-align: bottom` maps to `align-self: safe end`
">
<style>
table {
overflow: hidden;
}
tr {
height: 300px;
}
td::before {
content: "";
display: block;
width: 50px;
height: 600px;
background: linear-gradient(to bottom, green 50%, red 50%);
}
</style>
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<table cellspacing="0" cellpadding="0">
<tr>
<td rowspan="2" style="vertical-align: top"></td>
<td rowspan="2" style="vertical-align: middle"></td>
<td rowspan="2" style="vertical-align: bottom"></td>
<td rowspan="2" style="overflow: hidden; vertical-align: top"></td>
<td rowspan="2" style="overflow: hidden; vertical-align: middle"></td>
<td rowspan="2" style="overflow: hidden; vertical-align: bottom"></td>
</tr>
<tr style="visibility: collapse"></tr>
</table>
|
