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