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