commit bfd9d4ddebd5377fbb5e5a9317395ecefcee8e48
parent d3520d0b754f2197e54a941d68b4309911bf020b
Author: Oriol Brufau <obrufau@igalia.com>
Date: Fri, 3 Oct 2025 08:59:30 +0000
Bug 1990915 [wpt PR 55073] - layout: Align table-cell contents safely, a=testonly
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
Diffstat:
5 files changed, 193 insertions(+), 0 deletions(-)
diff --git a/testing/web-platform/tests/css/css-align/blocks/align-content-table-cell-002.html b/testing/web-platform/tests/css/css-align/blocks/align-content-table-cell-002.html
@@ -0,0 +1,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>
diff --git a/testing/web-platform/tests/css/css-align/blocks/align-content-table-cell-003.html b/testing/web-platform/tests/css/css-align/blocks/align-content-table-cell-003.html
@@ -0,0 +1,41 @@
+<!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-safe">
+<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 safe alignments, which should behave as `start`.
+">
+
+<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="align-content: safe start"></td>
+ <td rowspan="2" style="align-content: safe center"></td>
+ <td rowspan="2" style="align-content: safe end"></td>
+ <td rowspan="2" style="overflow: hidden; align-content: safe start"></td>
+ <td rowspan="2" style="overflow: hidden; align-content: safe center"></td>
+ <td rowspan="2" style="overflow: hidden; align-content: safe end"></td>
+ </tr>
+ <tr style="visibility: collapse"></tr>
+</table>
diff --git a/testing/web-platform/tests/css/css-align/blocks/align-content-table-cell-004.html b/testing/web-platform/tests/css/css-align/blocks/align-content-table-cell-004.html
@@ -0,0 +1,41 @@
+<!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>
diff --git a/testing/web-platform/tests/css/css-align/blocks/align-content-table-cell-005-ref-alt.html b/testing/web-platform/tests/css/css-align/blocks/align-content-table-cell-005-ref-alt.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+
+<!--
+ This is an alternative expectation for UAs that have not implemented
+ the “smart” default behavior for overflow alignment on boxes that aren't
+ scroll containers.
+
+ The text says that there should be no red, but that's for the main
+ expectation. In this alternative one, a bit of red is expected.
+-->
+
+<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+
+<div style="float: left; width: 50px; height: 150px; background: green"></div>
+<div style="float: left; width: 100px; height: 150px; background: red"></div>
+<div style="float: left; width: 150px; height: 150px; background: green"></div>
+<div style="clear: left"></div>
+<div style="float: left; width: 100px; height: 150px; background: green"></div>
+<div style="float: left; width: 50px; height: 150px; background: red"></div>
+<div style="float: left; width: 150px; height: 150px; background: green"></div>
diff --git a/testing/web-platform/tests/css/css-align/blocks/align-content-table-cell-005.html b/testing/web-platform/tests/css/css-align/blocks/align-content-table-cell-005.html
@@ -0,0 +1,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-blocks">
+<link rel="help" href="https://drafts.csswg.org/css-align/#auto-safety">
+<link rel="match" href="../../reference/ref-filled-green-300px-square.html">
+<link rel="match" href="align-content-table-cell-005-ref-alt.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 alignments with no overflow alignment specified,
+ they should behave as unsafe.
+ However, for cells which aren't scroll containers, UAs that have not implemented
+ the “smart” default behavior must behave as safe, hence there are 2 expectations.
+">
+
+<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: start; --gradient: green 50%, red 50%"></td>
+ <td rowspan="2" style="align-content: center; --gradient: red 25%, green 25% 75%, red 75%"></td>
+ <td rowspan="2" style="align-content: end; --gradient: red 50%, green 50%"></td>
+ <td rowspan="2" style="overflow: hidden; align-content: start; --gradient: green 50%, red 50%"></td>
+ <td rowspan="2" style="overflow: hidden; align-content: center; --gradient: red 25%, green 25% 75%, red 75%"></td>
+ <td rowspan="2" style="overflow: hidden; align-content: end; --gradient: red 50%, green 50%"></td>
+ </tr>
+ <tr style="visibility: collapse"></tr>
+</table>
