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
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
|
<!doctype html>
<title>button with other display values</title>
<script src=/resources/testharness.js></script>
<script src=/resources/testharnessreport.js></script>
<style>
body { margin: 0 }
.float { width: 100px; height: 100px; float: left; background: blue; margin: 10px }
</style>
<div class=float></div>
<button id=button style="display: block;"><div class=float></div></button><span id=after>after</span>
<script>
// These should all behave as flow-root.
const displayValues = ['run-in', 'flow', 'flow-root', 'table', 'list-item',
'table-row-group', 'table-header-group', 'table-footer-group',
'table-row', 'table-cell', 'table-column-group', 'table-column',
'table-caption', 'ruby-base', 'ruby-text', 'ruby-base-container',
'ruby-text-container'];
const button = document.getElementById('button');
const after = document.getElementById('after');
function getValues() {
return {
buttonLeft: button.offsetLeft,
buttonTop: button.offsetTop,
buttonWidth: button.clientWidth,
buttonHeight: button.clientHeight,
afterLeft: after.offsetLeft,
afterTop: after.offsetTop,
};
}
const expected = getValues();
test(t => {
assert_equals(expected.buttonLeft, 120, 'buttonLeft');
assert_equals(expected.buttonTop, 0, 'buttonTop');
assert_greater_than_equal(expected.buttonWidth, 120, 'buttonWidth');
assert_greater_than_equal(expected.buttonHeight, 120, 'buttonHeight');
assert_equals(expected.afterLeft, 0, 'afterLeft');
assert_greater_than_equal(expected.afterTop, 120, 'afterTop');
}, 'display: block');
for (const val of displayValues) {
test(t => {
t.add_cleanup(() => {
button.style.display = 'block';
});
assert_true(CSS.supports(`display: ${val}`), `display: ${val} is not supported`);
button.style.display = val;
const values = getValues();
for (const prop in values) {
assert_equals(values[prop], expected[prop], prop);
}
}, `display: ${val}`);
}
</script>
|
