testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-element-0/fieldset-display.html
author Simon Pieters <zcorpan@gmail.com>
Wed, 22 Aug 2018 13:25:04 +0000
changeset 488215 c9a3742b7ec5508b95d194f0aecb7d3d352ff594
permissions -rw-r--r--
Bug 1483502 [wpt PR 12494] - HTML: fieldset used value for CSS 'display', a=testonly Automatic update from web-platform-testsHTML: fieldset used value for CSS 'display' See https://github.com/whatwg/html/issues/3915. -- wpt-commits: 1fbb6c1db6321c617158e2291168e75e1af1d209 wpt-pr: 12494

<!doctype html>
<title>fieldset and CSS display</title>
<script src=/resources/testharness.js></script>
<script src=/resources/testharnessreport.js></script>
<style>
 #inline-ref { display: inline-block; }
</style>
<fieldset id="block-ref">x</fieldset>
<fieldset id="inline-ref">x</fieldset>
<fieldset id="test">x</fieldset>
<script>
  const blockWidth = getComputedStyle(document.querySelector('#block-ref')).width;
  const inlineWidth = getComputedStyle(document.querySelector('#inline-ref')).width;
  const testElm = document.querySelector('#test');
  const blocks = ['block', 'table', 'table-row-group', 'table-header-group', 'table-footer-group', 'table-row', 'table-cell',
                  'table-column-group', 'table-column', 'table-caption', 'list-item', 'flow', 'flow-root','run-in'];
  const inlines = ['inline', 'inline-block', 'inline-table', 'ruby', 'ruby-base', 'ruby-text', 'ruby-base-container', 'ruby-text-container'];

  function test_display(val, expectedWidth) {
    test(() => {
      testElm.style.removeProperty('display');
      testElm.style.display = val;
      const computed = getComputedStyle(testElm);
      // Note that computed value is different from the used value.
      // E.g., if ruby is not supported, the following assertion will
      // fail as the computed value of display will be block.
      // If ruby is supported, computed.display will return "ruby",
      // but the used value is supposed to be "inline".
      assert_equals(computed.display, val, `display: ${val} is not supported`);
      assert_equals(computed.width, expectedWidth);
    }, `fieldset with display: ${val}`);
  }

  for (const val of blocks) {
    test_display(val, blockWidth);
  }

  for (const val of inlines) {
    test_display(val, inlineWidth);
  }
</script>