Oriol Brufau
bfd9d4ddeb
Automatic update from web-platform-tests layout: Align table-cell contents safely As resolved in https://github.com/w3c/csswg-drafts/issues/12220, when resolving `align-content: normal` on a table cell, we will now use safe alignment. The difference only matters when the contents of the cell are taller than the cell, which doesn't typically happen. But in Servo it's observable when there are collapsed rows. Signed-off-by: Oriol Brufau <obrufau@igalia.com> -- wpt-commits: 4924c2c814ad8cfc76574d4aadb23e251ccaeb16 wpt-pr: 55073
46 lines
1.6 KiB
HTML
46 lines
1.6 KiB
HTML
<!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>
|