| <!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> |
