1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
|
<!doctype html>
<title>computed style on buttons</title>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<div class="tests">
<input type="reset">
<input type="button">
<input type="submit">
<input type="color">
<button></button>
</div>
<script>
// "behave as" doesn't change computed value.
const displayValues = ['inline', 'block', 'list-item', 'inline-block', 'table', 'inline-table', 'table-row-group', 'table-header-group', 'table-footer-group', 'table-row', 'table-column-group', 'table-column', 'table-cell', 'table-caption', 'none', 'contents', 'flow', 'flow-root', 'flex', 'grid', 'ruby', 'ruby-base', 'ruby-text', 'ruby-base-container', 'ruby-text-container', 'inline-flex', 'inline-grid'];
for (const val of displayValues) {
[].slice.call(document.querySelectorAll('.tests > *')).forEach(el => {
el.style.display = ''
el.style.display = val;
const attrs = el.type ? ` type=${el.type}` : '';
const tag = `<${el.localName}${attrs}>`;
test(() => {
assert_not_equals(el.style.display, '', `display: ${val} is not supported`)
let expectedVal = val;
if (el instanceof HTMLInputElement && val === 'contents') {
expectedVal = 'none'; // https://drafts.csswg.org/css-display/#unbox-html
}
if (val == 'flow') {
// Use the more backwards-compatible form, `block` is better than `flow`
// https://drafts.csswg.org/cssom/#serializing-css-values
expectedVal = 'block';
}
assert_equals(getComputedStyle(el).display, expectedVal);
}, `computed display of ${tag} with display: ${val}`);
});
}
</script>
|
