legend-sans-fieldset-display.html

Enable keyboard shortcuts

This WPT test may be referenced by the following Test IDs:
- /html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/legend-sans-fieldset-display.html - WPT Dashboard Interop Dashboard

<!doctype html>

<title>legend sans fieldset and CSS display</title>

<script src=/resources/testharness.js></script>

<script src=/resources/testharnessreport.js></script>

<style>

 * { margin: 0; padding: 0; }

 .table, table { display: table; width: 200px; border-collapse: collapse; }

 .tbody { display: table-row-group; }

 .tr { display: table-row; }

 .td, td { display: table-cell; }

 .col { display: table-column; }

 .caption { display: table-caption; }

 .li { display: list-item; }

 .inline { display: inline; }

 .inline-block { display: inline-block; }

 .inline-table { display: inline-table; }

 .ruby { display: ruby; }

 .rt { display: ruby-text; }

 rt { font-size: inherit; }

</style>

<legend class=table>

  <legend class=caption>caption</legend>

  <legend class=col></legend><legend class=col></legend>

  <legend class=tbody>

    <legend class=tr>

      <legend class=td>td</legend><legend class=td>td</legend>

    </legend>

  </legend>

</legend>

<table>

  <caption>caption</caption>

  <col><col>

  <tbody>

    <tr>

      <td>td<td>td

</table>

<ul>

  <legend class=li>li</legend>

  <li>li</li>

</ul>

<p>foo <legend class=inline>inline</legend> <span>inline</span>

<p>foo <legend class=inline-block>inline-block</legend> <span class=inline-block>inline-block</span>

<p><legend class=ruby>ruby<legend class=rt>rt</legend></legend> <ruby>ruby<rt>rt</ruby>

<script>

  function test_display(testSelector, refSelector) {

    test(() => {

      const testElm = document.querySelector(testSelector);

      const refElm = document.querySelector(refSelector);

      const testStyle = getComputedStyle(testElm);

      const refStyle = getComputedStyle(refElm);

      assert_equals(testStyle.display, refStyle.display, testSelector + ' display');

      assert_equals(testStyle.width, refStyle.width, testSelector + ' width');

      assert_equals(testStyle.height, refStyle.height, testSelector + ' height');

    }, testSelector);

  test_display('.table', 'table');

  test_display('.caption', 'caption');

  test_display('.col', 'col');

  test_display('.tbody', 'tbody');

  test_display('.tr', 'tr');

  test_display('.td', 'td');

  test_display('.li', 'li');

  test_display('.inline', 'span');

  test_display('.inline-block', 'span.inline-block');

  test_display('.ruby', 'ruby');

  test_display('.rt', 'rt');

</script>