legend-sans-fieldset-display.html (2085B)
1 <!doctype html> 2 <title>legend sans fieldset and CSS display</title> 3 <script src=/resources/testharness.js></script> 4 <script src=/resources/testharnessreport.js></script> 5 <style> 6 * { margin: 0; padding: 0; } 7 .table, table { display: table; width: 200px; border-collapse: collapse; } 8 .tbody { display: table-row-group; } 9 .tr { display: table-row; } 10 .td, td { display: table-cell; } 11 .col { display: table-column; } 12 .caption { display: table-caption; } 13 .li { display: list-item; } 14 .inline { display: inline; } 15 .inline-block { display: inline-block; } 16 .inline-table { display: inline-table; } 17 </style> 18 <legend class=table> 19 <legend class=caption>caption</legend> 20 <legend class=col></legend><legend class=col></legend> 21 <legend class=tbody> 22 <legend class=tr> 23 <legend class=td>td</legend><legend class=td>td</legend> 24 </legend> 25 </legend> 26 </legend> 27 <table> 28 <caption>caption</caption> 29 <col><col> 30 <tbody> 31 <tr> 32 <td>td<td>td 33 </table> 34 <ul> 35 <legend class=li>li</legend> 36 <li>li</li> 37 </ul> 38 <p>foo <legend class=inline>inline</legend> <span>inline</span> 39 <p>foo <legend class=inline-block>inline-block</legend> <span class=inline-block>inline-block</span> 40 <script> 41 function test_display(testSelector, refSelector) { 42 test(() => { 43 const testElm = document.querySelector(testSelector); 44 const refElm = document.querySelector(refSelector); 45 const testStyle = getComputedStyle(testElm); 46 const refStyle = getComputedStyle(refElm); 47 assert_equals(testStyle.display, refStyle.display, testSelector + ' display'); 48 assert_equals(testStyle.width, refStyle.width, testSelector + ' width'); 49 assert_equals(testStyle.height, refStyle.height, testSelector + ' height'); 50 }, testSelector); 51 } 52 53 test_display('.table', 'table'); 54 test_display('.caption', 'caption'); 55 test_display('.col', 'col'); 56 test_display('.tbody', 'tbody'); 57 test_display('.tr', 'tr'); 58 test_display('.td', 'td'); 59 test_display('.li', 'li'); 60 test_display('.inline', 'span'); 61 test_display('.inline-block', 'span.inline-block'); 62 </script>