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
42 lines
1.6 KiB
HTML
42 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-blocks">
|
|
<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-overflow-position-unsafe">
|
|
<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.
|
|
This test checks various unsafe alignments.
|
|
">
|
|
|
|
<style>
|
|
table {
|
|
overflow: hidden;
|
|
}
|
|
tr {
|
|
height: 300px;
|
|
}
|
|
td::before {
|
|
content: "";
|
|
display: block;
|
|
width: 50px;
|
|
height: 600px;
|
|
background: linear-gradient(to bottom, var(--gradient));
|
|
}
|
|
</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="align-content: unsafe start; --gradient: green 50%, red 50%"></td>
|
|
<td rowspan="2" style="align-content: unsafe center; --gradient: red 25%, green 25% 75%, red 75%"></td>
|
|
<td rowspan="2" style="align-content: unsafe end; --gradient: red 50%, green 50%"></td>
|
|
<td rowspan="2" style="overflow: hidden; align-content: unsafe start; --gradient: green 50%, red 50%"></td>
|
|
<td rowspan="2" style="overflow: hidden; align-content: unsafe center; --gradient: red 25%, green 25% 75%, red 75%"></td>
|
|
<td rowspan="2" style="overflow: hidden; align-content: unsafe end; --gradient: red 50%, green 50%"></td>
|
|
</tr>
|
|
<tr style="visibility: collapse"></tr>
|
|
</table>
|