<!DOCTYPE html>
<title>UA style for hidden attribute on table elements</title>
<link rel="help" href="https://html.spec.whatwg.org/multipage/rendering.html#tables-2">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<table hidden></table>
<table><caption hidden></caption></table>
<table><colgroup hidden></table>
<table><col hidden></table>
<table><thead hidden></table>
<table><tbody hidden></table>
<table><tfoot hidden></table>
<table><tr hidden></table>
<table><tr><td hidden></table>
<table><tr><th hidden></table>
<script>
const expectedDisplay = {
  'table': 'none',
  'caption': 'none',
  'colgroup': 'table-column-group',
  'col': 'table-column',
  'thead': 'table-header-group',
  'tbody': 'table-row-group',
  'tfoot': 'table-footer-group',
  'tr': 'table-row',
  'td': 'none',
  'th': 'none',
};
for (const el of document.querySelectorAll("[hidden]")) {
  test(function() {
    const style = getComputedStyle(el);
    assert_equals(style.display, expectedDisplay[el.localName]);
    if (el instanceof HTMLTableElement ||
        el instanceof HTMLTableCaptionElement ||
        el instanceof HTMLTableCellElement) {
      assert_equals(style.visibility, 'visible');
    } else {
      assert_equals(style.visibility, 'collapse');
    }
  }, `Computed display and visibility of ${el.localName}`);
}
</script>