Source code
Revision control
Copy as Markdown
Other Tools
Test Info:
- This WPT test may be referenced by the following Test IDs:
- /css/css-align/blocks/align-content-block-display-coverage.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;
margin: 0;
}
.target {
height: 50px;
align-content: unsafe center;
}
</style>
<div class="target">
<div class="content">foo</div>
</div>
<script>
const supportedValues = ['block', 'flow', 'flow-root', 'inline-block',
'list-item', 'flow-root list-item', 'table-caption'];
const unsupportedValues = ['ruby-text'];
const target = document.querySelector('.target');
const content = document.querySelector('.content');
for (let value of supportedValues) {
test(() => {
target.style.display = value;
assert_equals(content.offsetTop, 20);
}, `display:${value} should support align-content`);
}
for (let value of unsupportedValues) {
test(() => {
target.style.display = value;
assert_not_equals(content.offsetTop, 20);
}, `display:${value} should not support align-content`);
}
</script>