Source code
Revision control
Copy as Markdown
Other Tools
Test Info: Warnings
- This test has a WPT meta file that expects 4 subtest issues.
- This WPT test may be referenced by the following Test IDs:
- /css/css-align/blocks/align-content-table-cell.html - WPT Dashboard Interop Dashboard
<!DOCTYPE html>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<style>
@import "/fonts/ahem.css";
body {
font: 10px/1 Ahem;
}
td {
padding: 0;
height: 50px;
}
td:nth-child(2) {
font-size: 20px;
}
.valign-top td {
vertical-align: top;
}
.valign-middle td {
vertical-align: middle;
}
.valign-bottom td {
vertical-align: bottom;
}
.valign-middle-short td {
vertical-align: middle;
height: 10px;
}
.valign-bottom-short td {
vertical-align: bottom;
height: 10px;
}
.valign-baseline td {
vertical-align: baseline;
}
.alignc-start td {
align-content: start;
}
.alignc-center td {
align-content: unsafe center;
}
.alignc-end td {
align-content: unsafe end;
}
.alignc-center-short td {
align-content: unsafe center;
height: 10px;
}
.alignc-end-short td {
align-content: unsafe end;
height: 10px;
}
.alignc-baseline td {
align-content: baseline;
}
.alignc-safe-center td {
align-content: safe center;
}
.alignc-safe-end td {
align-content: safe end;
}
.alignc-safe-center-short td {
align-content: safe center;
height: 10px;
}
.alignc-safe-end-short td {
align-content: safe end;
height: 10px;
}
</style>
<table border="0" id="ref" class="valign-baseline">
<tr>
<td><div class="content1">first<br>second</div></td>
<td><div class="content2">first<br>second</div></td>
<td><div class="content3">first<br>second<br>third</div></td>
</tr>
</table>
<table border="0" id="target" class="alignc-baseline">
<tr>
<td><div class="content1">first<br>second</div></td>
<td><div class="content2">first<br>second</div></td>
<td><div class="content3">first<br>second<br>third</div></td>
</tr>
</table>
<script>
function testEquivalence(target, ref) {
assert_equals(target.querySelector('.content1').offsetTop,
ref.querySelector('.content1').offsetTop, 'The first cell content top');
assert_equals(target.querySelector('.content2').offsetTop,
ref.querySelector('.content2').offsetTop, 'The second cell content top');
assert_equals(target.querySelector('.content3').offsetTop,
ref.querySelector('.content3').offsetTop, 'The third cell conten topt');
}
const ref = document.querySelector('#ref');
const target = document.querySelector('#target');
const TALL = 50;
// *-short specifies `height: 10px`, but cells ignore it, and the actual height
// is the maximum content height in the row.
const SHORT = 40;
const C1HEIGHT = 10 * 2;
test(() => {
ref.className = 'valign-top';
target.className = 'alignc-start';
testEquivalence(target, ref);
assert_equals(target.querySelector('.content1').offsetTop, 0);
}, 'vertical-align:top and align-content:start are equivalent');
test(() => {
ref.className = 'valign-middle';
target.className = 'alignc-center';
testEquivalence(target, ref);
assert_equals(target.querySelector('.content1').offsetTop, (TALL - C1HEIGHT) / 2);
ref.className = 'valign-middle-short';
target.className = 'alignc-center-short';
testEquivalence(target, ref);
assert_equals(target.querySelector('.content1').offsetTop, (SHORT - C1HEIGHT) / 2);
}, 'vertical-align:middle and `align-content:unsafe center` are equivalent');
test(() => {
ref.className = 'valign-bottom';
target.className = 'alignc-end';
testEquivalence(target, ref);
assert_equals(target.querySelector('.content1').offsetTop, TALL - C1HEIGHT);
ref.className = 'valign-bottom-short';
target.className = 'alignc-end-short';
testEquivalence(target, ref);
assert_equals(target.querySelector('.content1').offsetTop, SHORT - C1HEIGHT);
}, 'vertical-align:bottom and `align-content:unsafe end` are equivalent');
test(() => {
ref.className = 'valign-baseline';
target.className = 'alignc-baseline';
testEquivalence(target, ref);
}, 'vertical-align:baseline and align-content:baseline are equivalent');
test(() => {
ref.className = 'valign-middle';
target.className = 'alignc-safe-center';
testEquivalence(target, ref);
assert_equals(target.querySelector('.content1').offsetTop, (TALL - C1HEIGHT) / 2);
}, 'vertical-align:middle and `align-content:safe center` are equivalent if the container is tall');
test(() => {
ref.className = 'valign-bottom';
target.className = 'alignc-safe-end';
testEquivalence(target, ref);
assert_equals(target.querySelector('.content1').offsetTop, TALL - C1HEIGHT);
}, 'vertical-align:bottom and `align-content:safe end` are equivalent if the container is tall');
test(() => {
ref.className = 'alignc-center-short';
target.className = 'alignc-safe-center-short';
testEquivalence(target, ref);
}, '`align-content:safe center` is equivalent to `unsafe center` even if the specified `height` is short');
test(() => {
ref.className = 'alignc-end-short';
target.className = 'alignc-safe-end-short';
}, '`align-content:safe end` is equivalent to `unsafe end` even if the specified `height` is short');
</script>