legend-display.html (1840B)
1 <!doctype html> 2 <title>rendered legend and CSS display</title> 3 <script src=/resources/testharness.js></script> 4 <script src=/resources/testharnessreport.js></script> 5 <style> 6 legend { width:initial; } 7 </style> 8 <fieldset><legend id="ref">x</legend></fieldset> 9 <fieldset><legend id="test">x</legend></fieldset> 10 <script> 11 const refElm = document.querySelector('#ref'); 12 const refStyle = getComputedStyle(refElm); 13 const testElm = document.querySelector('#test'); 14 // Note that we're not testing "display:run-in" here; it's mentioned in 15 // several CSS specs, but no browser engines appear likely to support it. 16 const values = ['block', 'table', 'table-row-group', 'table-header-group', 'table-footer-group', 'table-row', 'table-cell', 17 'table-column-group', 'table-column', 'table-caption', 'list-item', 'flow', 'flow-root', 'inline', 18 'inline-block', 'inline-table', 19 'grid', 'inline-grid', 'flex', 'inline-flex']; 20 const extraStyle = ['', 'overflow:hidden', 'columns:1', 'overflow:hidden;columns:1']; 21 22 for (const style of extraStyle) { 23 for (const val of values) { 24 test(() => { 25 testElm.style.removeProperty('display'); 26 testElm.style = style; 27 testElm.style.display = val; 28 const computed = getComputedStyle(testElm); 29 // Note that computed value is different from the used value. 30 // Also, 'flow' is serialized as 'block' for legacy reasons. 31 let expected = val == 'flow' ? 'block' : val; 32 assert_equals(computed.display, expected, `display: ${val} is not supported`); 33 assert_equals(computed.width, refStyle.width, 'width'); 34 assert_equals(testElm.offsetLeft, refElm.offsetLeft, 'offsetLeft'); 35 }, `rendered legend with display: ${val}` + (style == '' ? '' : "; " + style)); 36 } 37 } 38 </script>