fieldset-display.html (1578B)
1 <!doctype html> 2 <title>fieldset and CSS display</title> 3 <script src=/resources/testharness.js></script> 4 <script src=/resources/testharnessreport.js></script> 5 <style> 6 #inline-ref { display: inline-block; } 7 </style> 8 <fieldset id="block-ref">x</fieldset> 9 <fieldset id="inline-ref">x</fieldset> 10 <fieldset id="test">x</fieldset> 11 <script> 12 const blockWidth = getComputedStyle(document.querySelector('#block-ref')).width; 13 const inlineWidth = getComputedStyle(document.querySelector('#inline-ref')).width; 14 const testElm = document.querySelector('#test'); 15 // Please only add canonical values to these lists: 16 // (Also, note that we're not testing "display:run-in" here; it's mentioned 17 // in several CSS specs, but no browser engines appear likely to support it.) 18 const blocks = ['block', 'table', 'table-row-group', 'table-header-group', 'table-footer-group', 'table-row', 'table-cell', 19 'table-column-group', 'table-column', 'table-caption', 'list-item', 'flow-root']; 20 const inlines = ['inline', 'inline-block', 'inline-table']; 21 22 function test_display(val, expectedWidth) { 23 test(() => { 24 testElm.style.removeProperty('display'); 25 testElm.style.display = val; 26 const computed = getComputedStyle(testElm); 27 assert_equals(computed.display, val, `display: ${val} is not supported`); 28 assert_equals(computed.width, expectedWidth); 29 }, `fieldset with display: ${val}`); 30 } 31 32 for (const val of blocks) { 33 test_display(val, blockWidth); 34 } 35 36 for (const val of inlines) { 37 test_display(val, inlineWidth); 38 } 39 </script>