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
37
|
<!doctype html>
<title>fieldset and CSS display</title>
<script src=/resources/testharness.js></script>
<script src=/resources/testharnessreport.js></script>
<style>
#inline-ref { display: inline-block; }
</style>
<fieldset id="block-ref">x</fieldset>
<fieldset id="inline-ref">x</fieldset>
<fieldset id="test">x</fieldset>
<script>
const blockWidth = getComputedStyle(document.querySelector('#block-ref')).width;
const inlineWidth = getComputedStyle(document.querySelector('#inline-ref')).width;
const testElm = document.querySelector('#test');
// Please only add canonical values to these lists:
const blocks = ['block', 'table', 'table-row-group', 'table-header-group', 'table-footer-group', 'table-row', 'table-cell',
'table-column-group', 'table-column', 'table-caption', 'list-item', 'flow-root', 'run-in', 'block ruby'];
const inlines = ['inline', 'inline-block', 'inline-table', 'ruby', 'ruby-base', 'ruby-text', 'ruby-base-container', 'ruby-text-container'];
function test_display(val, expectedWidth) {
test(() => {
testElm.style.removeProperty('display');
testElm.style.display = val;
const computed = getComputedStyle(testElm);
assert_equals(computed.display, val, `display: ${val} is not supported`);
assert_equals(computed.width, expectedWidth);
}, `fieldset with display: ${val}`);
}
for (const val of blocks) {
test_display(val, blockWidth);
}
for (const val of inlines) {
test_display(val, inlineWidth);
}
</script>
|
